import React, { useState } from 'react';
import {
  Activity, AlertCircle, Award, Brain, Briefcase, Calendar, CheckCircle2, Clock,
  Download, Inbox, MoreHorizontal, Pencil, Plus, Star, Trash2, TrendingUp, Users,
} from 'lucide-react';
import { Bar, BarChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
import {
  ActivityCard, Alert, Avatar, AvatarGroup, Badge, Breadcrumb, BreadcrumbItem,
  BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button,
  ChartContainer, ChartTooltip, Checkbox, ConfirmModal, DataTable, Drawer,
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
  EmptyState, Field, FilterBar, Grid, IconButton, InlineLoading, Input, KpiCard,
  LoadingState, MetricCard, Modal, MultiSelect, PageHeader, PageSection,
  Pagination, Popover, PopoverContent, PopoverTrigger, ProgressBar, ProgressRing,
  ProgressSteps, RadioGroup, RadioGroupItem, ScoreMeter, SearchInput,
  SectionHeader, SegmentedToggle, Select, SelectContent, SelectItem,
  SelectTrigger, SelectValue, SkeletonCard, SkeletonKpi, SkeletonList,
  SkeletonTable, SkeletonText, Spinner, Stack, StatusBadge, Surface,
  Tabs, Textarea, Timeline, Toggle, Tooltip as DsTooltip, TooltipContent,
  TooltipProvider, TooltipTrigger, toast,
} from '@/components/ds';
import { AXIS_PROPS, CHART_TONES } from '@/components/ds';

/**
 * Design system reference.
 *
 * A live specimen sheet for every component, variant and state. It exists so
 * design decisions are reviewable side by side rather than hunted across
 * feature pages, and so a regression in a shared component is visible in one
 * place. Not linked from the product navigation — reach it at /design-system.
 */

interface SpecProps {
  title?: string;
  description?: any;
  children: React.ReactNode;
  className?: string;
}

function Spec({ title, description, children, className = '' }: SpecProps) {
  return (
    <Surface variant="solid" radius="xl" padding="lg" className={className}>
      <SectionHeader title={title} subtitle={description} />
      <div className="space-y-4">{children}</div>
    </Surface>
  );
}

interface RowProps {
  label?: string;
  children: React.ReactNode;
}

function Row({ label = '', children }: RowProps) {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {label && <span className="text-caption text-ink-4 w-24 shrink-0">{label}</span>}
      <div className="flex flex-wrap items-center gap-2">{children}</div>
    </div>
  );
}

const TABLE_ROWS = [
  { id: 1, name: 'Chef Antoine Dubois', role: 'Executive Chef', score: 97, status: 'hired', exp: 12 },
  { id: 2, name: 'Marcus Williams', role: 'Event Security', score: 94, status: 'hired', exp: 5 },
  { id: 3, name: 'Sofia Mendez', role: 'Event Server', score: 89, status: 'ai_screened', exp: 4 },
  { id: 4, name: 'Tanya Cruz', role: 'Event Server', score: 83, status: 'interview', exp: 3 },
  { id: 5, name: 'Jordan Blake', role: 'Bartender', score: 72, status: 'interview', exp: 3 },
  { id: 6, name: 'Sam Okafor', role: 'Bartender', score: 28, status: 'ai_screened', exp: 0 },
];

const CHART_DATA = [
  { label: '0–39', count: 1 },
  { label: '40–59', count: 0 },
  { label: '60–79', count: 3 },
  { label: '80–100', count: 5 },
];

export default function DesignSystem() {
  const [tab, setTab] = useState('foundation');
  const [search, setSearch] = useState('');
  const [multi, setMulti] = useState(['Bartender']);
  const [filters, setFilters] = useState({ stage: 'all', position: [] });
  const [modalOpen, setModalOpen] = useState(false);
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [toggled, setToggled] = useState(true);
  const [segment, setSegment] = useState('30d');
  const [selected, setSelected] = useState([]);
  const [step, setStep] = useState(1);
  const [page, setPage] = useState(2);

  const TABS = [
    { value: 'foundation', label: 'Foundation' },
    { value: 'controls', label: 'Controls', count: 12 },
    { value: 'feedback', label: 'Feedback' },
    { value: 'data', label: 'Data' },
  ];

  return (
    <Stack space="xl">
      <PageHeader
        title="Design System"
        subtitle="Every shared component, variant and state — the foundation all pages build on."
        icon={Award}
        size="display"
        breadcrumb={
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem><BreadcrumbLink href="/">KROW Forge</BreadcrumbLink></BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem><BreadcrumbPage>Design System</BreadcrumbPage></BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        }
        actions={<Button variant="outline" size="sm"><Download />Export tokens</Button>}
      >
        <Tabs tabs={TABS} value={tab} onChange={setTab} layoutGroupId="ds" />
      </PageHeader>

      {/* ── Foundation ──────────────────────────────────────────────────── */}
      {tab === 'foundation' && (
        <Stack space="lg">
          <Spec title="Colour" description="Brand, semantic and ink scales. All resolve to CSS variables.">
            <div className="space-y-4">
              <Row label="Brand">
                {[
                  ['krow-blue', '#0838E0'], ['krow-blue-dark', '#062BAF'], ['krow-yellow', '#F9E547'],
                  ['krow-yellow-pale', '#F8E08E'], ['krow-navy', '#333F48'], ['krow-mint', '#D1E0D7'],
                ].map(([name, hex]) => (
                  <div key={name} className="text-center">
                    <div className="w-16 h-12 rounded-lg border border-border shadow-xs" style={{ background: hex }} />
                    <p className="text-[10px] text-ink-3 mt-1">{name}</p>
                    <p className="text-[9px] text-ink-4 font-mono">{hex}</p>
                  </div>
                ))}
              </Row>
              <Row label="Semantic">
                {['bg-success', 'bg-warning', 'bg-destructive', 'bg-info', 'bg-neutral'].map((c) => (
                  <div key={c} className="text-center">
                    <div className={`w-16 h-12 rounded-lg border border-border ${c}`} />
                    <p className="text-[10px] text-ink-3 mt-1">{c.replace('bg-', '')}</p>
                  </div>
                ))}
              </Row>
              <Row label="Ink">
                {['bg-ink-1', 'bg-ink-2', 'bg-ink-3', 'bg-ink-4'].map((c) => (
                  <div key={c} className="text-center">
                    <div className={`w-16 h-12 rounded-lg ${c}`} />
                    <p className="text-[10px] text-ink-3 mt-1">{c.replace('bg-', '')}</p>
                  </div>
                ))}
              </Row>
            </div>
          </Spec>

          <Spec title="Typography" description="The named scale. Pages use these instead of arbitrary pixel values.">
            <div className="space-y-2">
              {[
                ['text-display-lg', 'Display Large'], ['text-display', 'Display'],
                ['text-title-lg', 'Title Large'], ['text-title', 'Title'],
                ['text-body-lg', 'Body Large'], ['text-body', 'Body'],
                ['text-body-sm', 'Body Small'], ['text-caption', 'Caption'],
                ['text-overline uppercase', 'Overline'],
              ].map(([cls, label]) => (
                <div key={cls} className="flex items-baseline gap-4 border-b border-border pb-2 last:border-0">
                  <span className="text-caption text-ink-4 font-mono w-40 shrink-0">{cls}</span>
                  <span className={`${cls} font-heading text-ink-1`}>{label}</span>
                </div>
              ))}
            </div>
          </Spec>

          <Spec title="Elevation & radius" description="A four-step shadow scale plus the brand and panel treatments.">
            <Row>
              {['shadow-xs', 'shadow-sm', 'shadow-md', 'shadow-lg', 'shadow-xl', 'shadow-brand'].map((s) => (
                <div key={s} className={`w-28 h-20 rounded-xl bg-surface border border-border grid place-items-center ${s}`}>
                  <span className="text-[10px] text-ink-3 font-mono">{s.replace('shadow-', '')}</span>
                </div>
              ))}
            </Row>
            <Row label="Radius">
              {['rounded-sm', 'rounded-md', 'rounded-lg', 'rounded-xl', 'rounded-2xl', 'rounded-full'].map((r) => (
                <div key={r} className={`w-20 h-14 bg-krow-blue-tint border border-krow-blue/20 grid place-items-center ${r}`}>
                  <span className="text-[9px] text-krow-blue font-mono">{r.replace('rounded-', '')}</span>
                </div>
              ))}
            </Row>
          </Spec>

          <Spec title="Surface" description="The one container. Every card in the app is one of these.">
            <Grid cols={3}>
              {['glass', 'solid', 'subtle', 'sunken', 'outline', 'panel'].map((v) => (
                <Surface key={v} variant={v} radius="xl" padding="default">
                  <p className={`text-body-sm font-semibold ${v === 'panel' ? 'text-panel-foreground' : 'text-ink-1'}`}>{v}</p>
                  <p className={`text-caption mt-1 ${v === 'panel' ? 'text-panel-muted' : 'text-ink-3'}`}>
                    variant=&quot;{v}&quot;
                  </p>
                </Surface>
              ))}
            </Grid>
          </Spec>

          <Spec title="Layout" description="Grid presets that avoid orphan cards at every breakpoint.">
            {[6, 4, 3, 2].map((cols) => (
              <div key={cols}>
                <p className="text-caption text-ink-4 mb-2">cols={cols}</p>
                <Grid cols={cols}>
                  {Array.from({ length: cols }).map((_, i) => (
                    <div key={i} className="h-12 rounded-lg bg-krow-blue-tint border border-krow-blue/20" />
                  ))}
                </Grid>
              </div>
            ))}
          </Spec>
        </Stack>
      )}

      {/* ── Controls ────────────────────────────────────────────────────── */}
      {tab === 'controls' && (
        <Stack space="lg">
          <Spec title="Button" description="One implementation. Variant, size, shape and loading are props.">
            <Row label="Variant">
              <Button>Primary</Button>
              <Button variant="navy">Navy</Button>
              <Button variant="accent">Accent</Button>
              <Button variant="outline">Outline</Button>
              <Button variant="soft">Soft</Button>
              <Button variant="ghost">Ghost</Button>
              <Button variant="destructive">Destructive</Button>
              <Button variant="glass">Glass</Button>
            </Row>
            <Row label="Size">
              <Button size="xs">XS</Button>
              <Button size="sm">Small</Button>
              <Button>Default</Button>
              <Button size="lg">Large</Button>
              <Button size="xl">XL</Button>
            </Row>
            <Row label="Shape">
              <Button shape="pill">Pill</Button>
              <Button shape="rounded">Rounded</Button>
              <Button shape="square">Square</Button>
            </Row>
            <Row label="State">
              <Button loading>Loading</Button>
              <Button disabled>Disabled</Button>
              <Button><Plus />With icon</Button>
              <Button variant="link">Link style</Button>
            </Row>
            <Row label="Icon only">
              <IconButton icon={Pencil} label="Edit" variant="outline" />
              <IconButton icon={Trash2} label="Delete" variant="destructive-ghost" />
              <IconButton icon={MoreHorizontal} label="More" variant="ghost" />
              <IconButton icon={Plus} label="Add" size="sm" />
              <IconButton icon={Download} label="Download" size="lg" variant="soft" />
            </Row>
          </Spec>

          <Spec title="Text input" description="Field owns the label, hint and error wiring.">
            <Grid cols={2}>
              <Field label="Full name" required hint="As it appears on their ID.">
                <Input placeholder="Chef Antoine Dubois" />
              </Field>
              <Field label="Email" error="That email is already on file.">
                <Input defaultValue="antoine@" />
              </Field>
              <Field label="Search">
                <SearchInput value={search} onChange={setSearch} placeholder="Search candidates…" />
              </Field>
              <Field label="Disabled">
                <Input disabled placeholder="Not editable" />
              </Field>
              <Field label="Notes" className="sm:col-span-2">
                <Textarea placeholder="Anything the hiring manager should know…" rows={3} />
              </Field>
            </Grid>
          </Spec>

          <Spec title="Selection" description="Single select, multi select, and the boolean controls.">
            <Grid cols={2}>
              <Field label="Role category">
                <Select defaultValue="bartender">
                  <SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="bartender">Bartender</SelectItem>
                    <SelectItem value="server">Server</SelectItem>
                    <SelectItem value="chef">Chef</SelectItem>
                    <SelectItem value="security">Security</SelectItem>
                  </SelectContent>
                </Select>
              </Field>
              <Field label="Required certifications" hint="Chips are removable inline.">
                <MultiSelect
                  options={['Bartender', 'ServSafe', 'TIPS Certified', 'Guard Card', 'CPR / First Aid', 'Food Handler Card', 'OSHA 10', 'Forklift Operator', 'RBS Alcohol Server']}
                  value={multi}
                  onChange={setMulti}
                  placeholder="Select certifications"
                />
              </Field>
            </Grid>

            <div className="grid sm:grid-cols-2 gap-6 pt-2">
              <div className="space-y-3">
                <Field label="Accept applications" inline hint="Candidates can apply immediately.">
                  <Checkbox defaultChecked />
                </Field>
                <Field label="Require certification upload" inline>
                  <Checkbox />
                </Field>
                <RadioGroup defaultValue="fluent" className="space-y-2 pt-2">
                  {['basic', 'conversational', 'fluent', 'native'].map((level) => (
                    <div key={level} className="flex items-center gap-2.5">
                      <RadioGroupItem value={level} id={`lvl-${level}`} />
                      <label htmlFor={`lvl-${level}`} className="text-body-sm text-ink-2 capitalize cursor-pointer">
                        {level}
                      </label>
                    </div>
                  ))}
                </RadioGroup>
              </div>

              <div className="space-y-4">
                <Toggle
                  label="Auto-screen new applicants"
                  description="Score every application the moment it arrives."
                  checked={toggled}
                  onCheckedChange={setToggled}
                />
                <Toggle label="Email me a daily digest" checked={false} onCheckedChange={() => {}} />
                <Toggle label="Disabled setting" checked={false} onCheckedChange={() => {}} disabled />
                <div className="pt-1">
                  <p className="text-caption text-ink-4 mb-2">Segmented</p>
                  <SegmentedToggle
                    options={[{ value: '7d', label: '7 days' }, { value: '30d', label: '30 days' }, { value: '90d', label: '90 days' }]}
                    value={segment}
                    onChange={setSegment}
                    ariaLabel="Date range"
                  />
                </div>
              </div>
            </div>
          </Spec>

          <Spec title="Navigation" description="Tabs, breadcrumbs, pagination and step progress.">
            <Row label="Pill tabs">
              <Tabs tabs={TABS} value={tab} onChange={setTab} layoutGroupId="ds-demo-pill" />
            </Row>
            <Row label="Underline">
              <Tabs
                variant="underline"
                tabs={[{ value: 'all', label: 'All', count: 22 }, { value: 'screened', label: 'Screened', count: 14 }, { value: 'hired', label: 'Hired', count: 3 }]}
                value="all"
                onChange={() => {}}
                layoutGroupId="ds-demo-underline"
              />
            </Row>
            <div className="pt-2">
              <p className="text-caption text-ink-4 mb-3">Steps</p>
              <ProgressSteps
                steps={['Basics', 'Requirements', 'Vetting', 'Review']}
                current={step}
                onStepClick={setStep}
              />
              <div className="flex gap-2 mt-4">
                <Button size="sm" variant="outline" onClick={() => setStep(Math.max(0, step - 1))}>Back</Button>
                <Button size="sm" onClick={() => setStep(Math.min(3, step + 1))}>Next</Button>
              </div>
            </div>
            <div className="pt-2">
              <Pagination page={page} pageCount={12} onPageChange={setPage} totalItems={287} pageSize={25} onPageSizeChange={() => {}} />
            </div>
          </Spec>

          <Spec title="Overlays" description="Modal, drawer, dropdown, popover and tooltip.">
            <Row>
              <Button variant="outline" onClick={() => setModalOpen(true)}>Open modal</Button>
              <Button variant="outline" onClick={() => setDrawerOpen(true)}>Open drawer</Button>
              <Button variant="destructive" onClick={() => setConfirmOpen(true)}>Confirm dialog</Button>

              <DropdownMenu>
                <DropdownMenuTrigger asChild><Button variant="outline">Dropdown</Button></DropdownMenuTrigger>
                <DropdownMenuContent align="start">
                  <DropdownMenuItem><Pencil className="w-4 h-4 mr-2" />Edit</DropdownMenuItem>
                  <DropdownMenuItem><Download className="w-4 h-4 mr-2" />Export</DropdownMenuItem>
                  <DropdownMenuItem className="text-destructive focus:text-destructive">
                    <Trash2 className="w-4 h-4 mr-2" />Delete
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>

              <Popover>
                <PopoverTrigger asChild><Button variant="outline">Popover</Button></PopoverTrigger>
                <PopoverContent className="w-64">
                  <p className="text-body-sm font-semibold text-ink-1">Score breakdown</p>
                  <p className="text-caption text-ink-3 mt-1">Weighted across five dimensions.</p>
                </PopoverContent>
              </Popover>

              <TooltipProvider>
                <DsTooltip>
                  <TooltipTrigger asChild><Button variant="ghost">Hover me</Button></TooltipTrigger>
                  <TooltipContent>Tooltips use the same radius and shadow</TooltipContent>
                </DsTooltip>
              </TooltipProvider>
            </Row>
          </Spec>
        </Stack>
      )}

      {/* ── Feedback ────────────────────────────────────────────────────── */}
      {tab === 'feedback' && (
        <Stack space="lg">
          <Spec title="Badge & status" description="StatusBadge maps a domain state to one canonical colour and label.">
            <Row label="Badge">
              {['default', 'soft', 'accent', 'navy', 'success', 'warning', 'destructive', 'info', 'neutral', 'outline'].map((v) => (
                <Badge key={v} variant={v}>{v}</Badge>
              ))}
            </Row>
            <Row label="Application">
              {['applied', 'ai_screened', 'shortlisted', 'interview', 'hired', 'rejected'].map((s) => (
                <StatusBadge key={s} status={s} dot />
              ))}
            </Row>
            <Row label="Posting">
              {['active', 'draft', 'paused', 'closed'].map((s) => <StatusBadge key={s} status={s} />)}
            </Row>
            <Row label="Bands">
              {['elite', 'excellent', 'solid', 'building', 'new', 'no_score'].map((s) => (
                <StatusBadge key={s} status={s} />
              ))}
            </Row>
          </Spec>

          <Spec title="Alert" description="Persistent, inline conditions. Transient confirmations use toast.">
            <Alert tone="info" title="Screening is recommendation only">
              Owliver ranks and recommends. Every hiring decision stays with a human recruiter.
            </Alert>
            <Alert tone="success" title="9 candidates screened">All applications now carry a comparable score.</Alert>
            <Alert tone="warning" title="8 applicants unscored" onDismiss={() => {}}>
              Those decisions are being made without a standard.
            </Alert>
            <Alert tone="destructive" title="Certification expired" action={<Button size="sm" variant="destructive">Request update</Button>}>
              Marcus Williams&apos; Guard Card lapsed on 12 July.
            </Alert>
          </Spec>

          <Spec title="Toast" description="Wraps react-hot-toast so styling and duration live in one place.">
            <Row>
              <Button variant="outline" size="sm" onClick={() => toast.success('Candidate shortlisted')}>Success</Button>
              <Button variant="outline" size="sm" onClick={() => toast.error('Screening failed — try again')}>Error</Button>
              <Button variant="outline" size="sm" onClick={() => toast.info('All candidates already screened')}>Info</Button>
              <Button
                variant="outline"
                size="sm"
                onClick={() => toast.promise(
                  new Promise((r) => setTimeout(r, 1800)),
                  { loading: 'Screening 8 candidates…', success: 'Screened 8 candidates', error: 'Screening failed' }
                )}
              >
                Promise
              </Button>
            </Row>
          </Spec>

          <Spec title="Empty state" description="Distinguishes nothing-yet from nothing-matching.">
            <Grid cols={2}>
              <Surface variant="subtle" padding="none" radius="xl">
                <EmptyState
                  icon={Inbox}
                  title="No candidates yet"
                  description="Share the application link and applicants will appear here automatically."
                  action={{ label: 'Copy apply link', onClick: () => toast.success('Link copied') }}
                  size="sm"
                />
              </Surface>
              <Surface variant="subtle" padding="none" radius="xl">
                <EmptyState
                  icon={Inbox}
                  variant="filtered"
                  title="No matching candidates"
                  description="No one matches the current filters. Try widening the score range."
                  action={{ label: 'Clear filters', onClick: () => {} }}
                  size="sm"
                />
              </Surface>
            </Grid>
          </Spec>

          <Spec title="Loading" description="Skeletons mirror final geometry; spinners are for unknown shapes.">
            <Row label="Spinner">
              <Spinner size="xs" /><Spinner size="sm" /><Spinner /><Spinner size="lg" />
              <InlineLoading message="Screening candidates…" />
            </Row>
            <Grid cols={4} className="pt-2">
              <SkeletonKpi /><SkeletonKpi /><SkeletonKpi /><SkeletonKpi />
            </Grid>
            <Grid cols={2}>
              <SkeletonCard />
              <Surface variant="solid" radius="xl" padding="default"><SkeletonList rows={3} /></Surface>
            </Grid>
            <Surface variant="solid" radius="xl" padding="none" className="overflow-hidden">
              <SkeletonTable rows={3} columns={4} />
            </Surface>
            <Surface variant="solid" radius="xl" padding="default">
              <SkeletonText lines={3} />
            </Surface>
            <Row label="Region"><LoadingState message="Loading analytics…" size="sm" /></Row>
          </Spec>
        </Stack>
      )}

      {/* ── Data ────────────────────────────────────────────────────────── */}
      {tab === 'data' && (
        <Stack space="lg">
          <PageSection title="KPI cards">
            <Grid cols={6}>
              <KpiCard icon={Briefcase} value={5} label="Open Positions" tone="brand" index={0} />
              <KpiCard icon={Users} value={22} label="Total Candidates" tone="navy" index={1} />
              <KpiCard icon={Brain} value={14} label="AI Screened" tone="brand" index={2} />
              <KpiCard icon={Clock} value={8} label="Pending Screen" tone="accent" index={3} />
              <KpiCard icon={TrendingUp} value={76} label="Avg AI Score" tone="navy" index={4} />
              <KpiCard icon={Award} value={3} label="Hired" tone="brand" index={5} />
            </Grid>
          </PageSection>

          <PageSection title="Metric cards">
            <Grid cols={3}>
              <MetricCard label="Time to hire" value="1d" delta={-38} invertTrend deltaLabel="vs. 5-day industry average" icon={Clock} tone="success" />
              <MetricCard label="Quality of hire" value="94" delta={12} deltaLabel="Average score of hires" icon={Award} tone="brand" />
              <MetricCard label="Cost saved" value="$725" delta={0} sub="9 screens · 4 interviews automated" icon={TrendingUp} tone="neutral" />
            </Grid>
          </PageSection>

          <Spec title="Progress" description="Bars, rings and score meters share the same band thresholds.">
            <Grid cols={2}>
              <div className="space-y-4">
                <ProgressBar label="Profile completion" value={62} showValue valueSuffix="%" />
                <ProgressBar label="Score 97" value={97} tone="score" showValue />
                <ProgressBar label="Score 72" value={72} tone="score" showValue />
                <ProgressBar label="Score 28" value={28} tone="score" showValue />
              </div>
              <div className="space-y-3">
                <p className="text-caption text-ink-4">Score meters</p>
                <ScoreMeter label="Reliability" value={96} weight={25} />
                <ScoreMeter label="Attendance" value={98} weight={20} />
                <ScoreMeter label="Communication" value={72} weight={15} />
                <ScoreMeter label="Leadership" value={41} weight={15} />
              </div>
            </Grid>
            <Row label="Rings">
              <ProgressRing value={97} caption="Score" size={88} />
              <ProgressRing value={72} tone="score" size={88} />
              <ProgressRing value={817} min={300} max={850} label="817" caption="Career" footnote="300-850" size={104} />
              <ProgressRing value={28} tone="score" size={72} />
            </Row>
          </Spec>

          <Spec title="Avatar" description="Photo when available, initials otherwise. Never a broken image.">
            <Row label="Sizes">
              {['xs', 'sm', 'default', 'lg', 'xl'].map((s) => (
                <Avatar key={s} name="Chef Antoine Dubois" size={s} />
              ))}
            </Row>
            <Row label="Tones">
              <Avatar name="Marcus Williams" tone="brand" />
              <Avatar name="Sofia Mendez" tone="navy" />
              <Avatar name="Tanya Cruz" tone="soft" />
              <Avatar name="Sam Okafor" tone="neutral" />
              <Avatar name="Maria Gonzalez" src="https://i.pravatar.cc/160?img=31" />
              <Avatar name="Broken Image" src="https://example.invalid/nope.jpg" />
            </Row>
            <Row label="Status">
              <Avatar name="Online Person" status="online" />
              <Avatar name="Busy Person" status="busy" />
              <Avatar name="Away Person" status="offline" />
            </Row>
            <Row label="Group">
              <AvatarGroup
                people={[
                  { name: 'Chef Antoine Dubois' }, { name: 'Marcus Williams' },
                  { name: 'Sofia Mendez' }, { name: 'Tanya Cruz' },
                  { name: 'Jordan Blake' }, { name: 'Sam Okafor' },
                ]}
                max={4}
              />
            </Row>
          </Spec>

          <Spec title="Filter bar" description="Declarative filters with active chips and a clear-all.">
            <FilterBar
              search={search}
              onSearchChange={setSearch}
              searchPlaceholder="Search candidates…"
              values={filters}
              onChange={setFilters}
              filters={[
                {
                  key: 'stage', label: 'Stage', type: 'select',
                  options: [
                    { value: 'all', label: 'All stages' }, { value: 'applied', label: 'Applied' },
                    { value: 'ai_screened', label: 'AI Screened' }, { value: 'hired', label: 'Hired' },
                  ],
                },
                { key: 'position', label: 'Position', type: 'multi', options: ['Bartender', 'Event Server', 'Executive Chef', 'Security'] },
              ]}
              meta="6 of 22 candidates"
              actions={<Button size="sm"><Brain />AI Screen All</Button>}
            />
          </Spec>

          <PageSection title="Data table">
            <DataTable
              columns={[
                { key: 'name', header: 'Candidate', sortable: true, cell: (r) => (
                  <div className="flex items-center gap-2.5">
                    <Avatar name={r.name} size="sm" />
                    <span className="font-medium text-ink-1">{r.name}</span>
                  </div>
                ) },
                { key: 'role', header: 'Role', sortable: true, hideBelow: 'sm' },
                { key: 'exp', header: 'Experience', sortable: true, align: 'right', hideBelow: 'md', cell: (r) => `${r.exp} yr` },
                { key: 'status', header: 'Stage', cell: (r) => <StatusBadge status={r.status} size="sm" /> },
                { key: 'score', header: 'Score', sortable: true, align: 'right', cell: (r) => (
                  <span className="font-heading font-bold text-krow-blue tabular-nums">{r.score}</span>
                ) },
              ]}
              rows={TABLE_ROWS}
              defaultSort={{ key: 'score', direction: 'desc' }}
              selectedIds={selected}
              onSelectionChange={setSelected}
              pageSize={5}
              caption="Candidates by AI score"
              onRowClick={(r) => toast.info(`Opened ${r.name}`)}
            />
          </PageSection>

          <Spec title="Chart container" description="Owns the title, height, legend, loading and empty states.">
            <Grid cols={2}>
              <ChartContainer
                title="Candidate Scores"
                subtitle="9 candidates screened"
                headline={76}
                headlineLabel="Avg score"
                height={220}
                legend={[
                  { label: '0–39', color: CHART_TONES.navy, value: 1 },
                  { label: '60–79', color: CHART_TONES.accentPale, value: 3 },
                  { label: '80–100', color: CHART_TONES.brand, value: 5 },
                ]}
              >
                <BarChart data={CHART_DATA}>
                  <CartesianGrid strokeDasharray="3 3" stroke={CHART_TONES.grid} vertical={false} />
                  <XAxis dataKey="label" {...AXIS_PROPS} />
                  <YAxis {...AXIS_PROPS} allowDecimals={false} />
                  <Tooltip content={<ChartTooltip />} />
                  <Bar dataKey="count" name="Candidates" fill={CHART_TONES.brand} radius={[6, 6, 0, 0]} />
                </BarChart>
              </ChartContainer>

              <ChartContainer title="Interview Volume" subtitle="No interviews in this window" height={220} isEmpty />
            </Grid>
          </Spec>

          <Spec title="Timeline & activity" description="Event sequences and feed rows.">
            <Grid cols={2}>
              <div>
                <p className="text-caption text-ink-4 mb-3">Timeline</p>
                <Timeline
                  items={[
                    { id: 1, title: 'Applied', description: 'Executive Chef – Catering', timestamp: 'Jul 24', icon: Calendar, tone: 'neutral' },
                    { id: 2, title: 'AI screened', description: 'Scored 97 — Excellent Match', timestamp: 'Jul 24', icon: Brain, tone: 'brand', status: 'ai_screened' },
                    { id: 3, title: 'Interviewed', description: 'Verdict: hire', timestamp: 'Jul 25', icon: CheckCircle2, tone: 'success' },
                    { id: 4, title: 'Hired', description: 'Onboarding started', timestamp: 'Jul 25', icon: Award, tone: 'success', status: 'hired', current: true },
                  ]}
                />
              </div>
              <div>
                <p className="text-caption text-ink-4 mb-3">Activity</p>
                <div className="space-y-1">
                  <ActivityCard actor="Alex Rivera" title="hired Chef Antoine Dubois" timestamp="Jul 25, 9:00 AM" status="hired" onClick={() => {}} />
                  <ActivityCard actor="Alex Rivera" title="screened 3 candidates" timestamp="Jul 24, 2:30 PM" onClick={() => {}} />
                  <ActivityCard icon={Activity} iconTone="soft" title="Position created" description="Banquet Captain – Hotel Events" timestamp="Jul 18" />
                  <ActivityCard
                    icon={AlertCircle}
                    iconTone="warning"
                    title="Interview flagged"
                    description="Three responses returned in under 8 seconds."
                    timestamp="Aug 3"
                    trailing={<Badge variant="warning" size="sm">Review</Badge>}
                    variant="card"
                  />
                </div>
              </div>
            </Grid>
          </Spec>
        </Stack>
      )}

      {/* Overlay instances */}
      <Modal
        open={modalOpen}
        onOpenChange={setModalOpen}
        title="Schedule interview"
        description="Owliver will run the interview and score it automatically."
        icon={Calendar}
        footer={
          <>
            <Button variant="outline" onClick={() => setModalOpen(false)}>Cancel</Button>
            <Button onClick={() => { setModalOpen(false); toast.success('Interview scheduled'); }}>Schedule</Button>
          </>
        }
      >
        <div className="space-y-4">
          <Field label="Candidate"><Input defaultValue="Sofia Mendez" readOnly /></Field>
          <Field label="Date" hint="Candidates get a link immediately."><Input type="date" defaultValue="2026-08-12" /></Field>
          <Field label="Notes"><Textarea rows={3} placeholder="Anything to probe specifically…" /></Field>
        </div>
      </Modal>

      <ConfirmModal
        open={confirmOpen}
        onOpenChange={setConfirmOpen}
        title="Decline Sam Okafor?"
        description="They will be notified and moved out of the active pipeline. This cannot be undone."
        confirmLabel="Decline candidate"
        icon={AlertCircle}
        onConfirm={() => { setConfirmOpen(false); toast.success('Candidate declined'); }}
      />

      <Drawer
        open={drawerOpen}
        onOpenChange={setDrawerOpen}
        title="Chef Antoine Dubois"
        description="Executive Chef – Catering · Scored 97"
        icon={Star}
        footer={
          <>
            <Button variant="outline" onClick={() => setDrawerOpen(false)}>Close</Button>
            <Button onClick={() => { setDrawerOpen(false); toast.success('Shortlisted'); }}>Shortlist</Button>
          </>
        }
      >
        <div className="space-y-5">
          <div className="flex items-center gap-3">
            <Avatar name="Chef Antoine Dubois" size="xl" />
            <div>
              <p className="text-title font-heading text-ink-1">Chef Antoine Dubois</p>
              <p className="text-body-sm text-ink-3">12 years · ServSafe · Bay Area</p>
              <div className="flex gap-1.5 mt-2">
                <StatusBadge status="hired" size="sm" />
                <StatusBadge status="elite" size="sm" />
              </div>
            </div>
          </div>
          <div className="space-y-3">
            <ScoreMeter label="Experience" value={99} />
            <ScoreMeter label="Certifications" value={98} />
            <ScoreMeter label="Reliability" value={96} />
            <ScoreMeter label="Availability" value={94} />
          </div>
        </div>
      </Drawer>
    </Stack>
  );
}