import React, { useState } from 'react'

import {
  Badge,
  Button,
  Card,
  Checkbox,
  Dialog,
  Icon,
  IconButton,
  Input,
  Radio,
  Select,
  Switch,
  Tabs,
  Tag,
  Toast,
  Tooltip,
} from './ui/index.js'

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <section className="mt-9">
      <h2 className="mb-3 font-mono text-xs uppercase tracking-wider text-ink-3">{title}</h2>
      <div className="flex flex-wrap items-start gap-3">{children}</div>
    </section>
  )
}

/**
 * Visual + behavioral proof for the ported primitives (P3-1). Not a product
 * screen — the real shell lands in P3-2. Exercises every primitive in both
 * themes via the toggle.
 */
export function PrimitivesGallery() {
  const [tab, setTab] = useState('board')
  const [dialogOpen, setDialogOpen] = useState(false)
  const [checked, setChecked] = useState(true)
  const [radio, setRadio] = useState('a')
  const [on, setOn] = useState(true)

  return (
    <main className="bg-paper-0 font-sans text-ink-1">
      <div className="mx-auto max-w-[1120px]">
        <header className="border-b-[3px] border-double border-ink-1 pb-4">
          <h1 className="font-display text-4xl">Primitives</h1>
          <p className="mt-1 font-mono text-sm text-ink-3">
            15 components · toggle Evening service in the rail for dark
          </p>
        </header>

        <Section title="Button">
          <Button variant="primary" icon="sparkles">
            Brew plan
          </Button>
          <Button variant="secondary">Amend</Button>
          <Button variant="ghost" icon="clock">
            Defer
          </Button>
          <Button variant="danger" icon="trash-2">
            Withdraw
          </Button>
          <Button variant="primary" size="sm" iconRight="arrow-right">
            Next
          </Button>
          <Button variant="secondary" disabled>
            Disabled
          </Button>
        </Section>

        <Section title="IconButton">
          <IconButton icon="pencil" label="Edit" />
          <IconButton icon="copy" label="Copy" />
          <IconButton icon="ellipsis" label="More" variant="outline" />
          <IconButton icon="x" label="Close" size="sm" />
        </Section>

        <Section title="Badge">
          <Badge tone="ok" dot>
            ahead
          </Badge>
          <Badge tone="warn" dot>
            at risk
          </Badge>
          <Badge tone="danger" dot>
            behind
          </Badge>
          <Badge tone="info">steeping</Badge>
          <Badge tone="neutral">triage</Badge>
          <Badge tone="jade">on track</Badge>
        </Section>

        <Section title="Tag">
          <Tag label="est/3d" />
          <Tag label="est/8d" />
          <Tag label="p/1" />
          <Tag label="p/2" />
          <Tag label="p/3" />
          <Tag label="p/4" />
          <Tag label="deadline/hard" />
          <Tag label="p/1" onRemove={() => {}} />
        </Section>

        <Section title="Card">
          <Card
            overline="Now"
            title="Gitea read client"
            jade
            actions={<IconButton icon="external-link" label="Open" size="sm" />}
            footer={
              <>
                <Button size="sm" variant="primary">
                  Start
                </Button>
                <Button size="sm" variant="ghost">
                  Defer
                </Button>
              </>
            }
            style={{ width: 340 }}
          >
            <p className="font-agent text-base leading-relaxed">
              The tap-root. Everything sinks into it — grab it first.
            </p>
          </Card>
          <Card title="Plain card" style={{ width: 260 }}>
            <p className="text-sm text-ink-2">Hairline border, whispered shadow.</p>
          </Card>
        </Section>

        <Section title="Tabs">
          <Tabs
            items={[
              { id: 'board', label: 'Board', icon: 'square-kanban', count: 34 },
              { id: 'gantt', label: 'Gantt', icon: 'chart-no-axes-gantt' },
              { id: 'deps', label: 'Dependencies', icon: 'network', count: 51 },
            ]}
            active={tab}
            onChange={setTab}
          />
        </Section>

        <Section title="Icon">
          <Icon name="coffee" size={20} />
          <Icon name="leaf" size={20} />
          <Icon name="git-branch" size={20} />
          <Icon name="milestone" size={20} />
          <Icon name="sparkles" size={20} />
        </Section>

        <Section title="Input & Select">
          <Input label="Repository" placeholder="christian/commitea" style={{ width: 240 }} />
          <Input label="Search" icon="search" placeholder="Filter issues" style={{ width: 220 }} />
          <Input label="Token" mono error="Connection failed" placeholder="tok_xxx" style={{ width: 220 }} />
          <Select
            label="Priority"
            options={[
              { value: 'p/1', label: 'p/1 — urgent' },
              { value: 'p/2', label: 'p/2' },
              { value: 'p/3', label: 'p/3' },
            ]}
            style={{ width: 200 }}
          />
        </Section>

        <Section title="Checkbox · Radio · Switch">
          <Checkbox label="Hard deadline" checked={checked} onChange={(e) => setChecked(e.target.checked)} />
          <Checkbox label="Disabled" checked disabled onChange={() => {}} />
          <Radio label="Option A" name="g" value="a" checked={radio === 'a'} onChange={() => setRadio('a')} />
          <Radio label="Option B" name="g" value="b" checked={radio === 'b'} onChange={() => setRadio('b')} />
          <Switch label="Live sync" checked={on} onChange={(e) => setOn(e.target.checked)} />
        </Section>

        <Section title="Feedback">
          <Toast tone="ok" title="Plan brewed" onDismiss={() => {}}>
            Milestone P2 lands Mar 3–12.
          </Toast>
          <Toast tone="warn" title="Stale blocker">
            #9 has waited 6 days.
          </Toast>
          <Tooltip content="Writes to gitea, as you">
            <Button variant="secondary" icon="info">
              Hover me
            </Button>
          </Tooltip>
          <Button variant="primary" onClick={() => setDialogOpen(true)}>
            Open dialog
          </Button>
        </Section>

        <Dialog
          open={dialogOpen}
          onClose={() => setDialogOpen(false)}
          title="Withdraw directive?"
          footer={
            <>
              <Button variant="ghost" onClick={() => setDialogOpen(false)}>
                Cancel
              </Button>
              <Button variant="danger" onClick={() => setDialogOpen(false)}>
                Withdraw
              </Button>
            </>
          }
        >
          <p>This removes the directive from the ledger. The schedule reverts to its prior state.</p>
        </Dialog>
      </div>
    </main>
  )
}
