import { Example } from "@/components/design-system/example";
import { Section } from "@/components/design-system/section";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { formatKES } from "@/lib/mock-data";

// Mirrors the @theme type styles in styles/tokens.generated.css: text-<name> sets size, line height, weight and tracking.
const STYLES: { cls: string; size: string; lh: string; weight: string; tracking: string; use: string; sample: string; display?: boolean }[] = [
  { cls: "text-display", size: "32", lh: "40", weight: "600", tracking: "-0.02em", use: "Hero numbers, marketing", sample: "Medora Pharmacy", display: true },
  { cls: "text-page-title", size: "24", lh: "32", weight: "600", tracking: "-0.01em", use: "Page title", sample: "Inventory", display: true },
  { cls: "text-heading-lg", size: "18", lh: "24", weight: "600", tracking: "0", use: "Panel title", sample: "Expiring within 90 days" },
  { cls: "text-heading-md", size: "16", lh: "24", weight: "600", tracking: "0", use: "Card title", sample: "Today's sales" },
  { cls: "text-heading-sm", size: "15", lh: "22", weight: "600", tracking: "0", use: "Group title", sample: "Payment method" },
  { cls: "text-body-lg", size: "16", lh: "24", weight: "400", tracking: "0", use: "Long-form body", sample: "Amoxicillin 500 mg capsules, 3 times daily for 7 days." },
  { cls: "text-body-md", size: "15", lh: "22", weight: "400", tracking: "0", use: "Default body, table cells", sample: "Amoxicillin 500 mg capsules, 3 times daily for 7 days." },
  { cls: "text-body-sm", size: "14", lh: "20", weight: "400", tracking: "0", use: "Secondary text", sample: "Supplied by Dawa Distributors Ltd, shelf B3." },
  { cls: "text-label-lg", size: "16", lh: "24", weight: "500", tracking: "0", use: "Large control label", sample: "Complete sale" },
  { cls: "text-label-md", size: "14", lh: "20", weight: "500", tracking: "0", use: "Buttons, form labels", sample: "Add product" },
  { cls: "text-label-sm", size: "13", lh: "18", weight: "500", tracking: "0", use: "Table headers, compact labels", sample: "Reorder level" },
  { cls: "text-label-xs", size: "13", lh: "18", weight: "500", tracking: "0", use: "Badges, minimum size", sample: "Low stock" },
  { cls: "text-caption", size: "13", lh: "18", weight: "400", tracking: "0", use: "Captions, timestamps", sample: "Updated 20 Oct 2026, 16:42" },
];

const NUMERIC: { cls: string; spec: string; use: string; sample: string }[] = [
  { cls: "text-numeric-md", spec: "15/22 400", use: "Table figures", sample: formatKES(1284500) },
  { cls: "text-numeric-sm", spec: "14/20 400", use: "Dense table figures", sample: formatKES(1284500) },
  { cls: "text-numeric-strong", spec: "15/22 600", use: "Row totals", sample: formatKES(1284500) },
  { cls: "text-kpi", spec: "28/36 600", use: "Dashboard KPI", sample: formatKES(1284500) },
  { cls: "text-till-line", spec: "18/28 500", use: "Cart line amount", sample: formatKES(1284500, { decimals: true }) },
  { cls: "text-till-tender", spec: "28/36 600", use: "Tendered, change", sample: formatKES(5000) },
  { cls: "text-till-total", spec: "44/52 600", use: "Till total", sample: formatKES(3450) },
];

export function Families() {
  return (
    <Section id="type-families" title="Font families" description="Geist carries everything functional, including data. Bricolage Grotesque is for page titles and a few large dashboard headings only, never for data or running text.">
      <div className="grid gap-4 md:grid-cols-2">
        <Example title="Geist" description="UI and data, --font-sans">
          <p className="text-[2rem] leading-10 font-semibold tracking-tight">Aa Bb Cc 0123</p>
          <p className="mt-2 text-sm text-muted-foreground">Amoxicillin 500 mg capsule, 21 pcs. Paracetamol 500 mg tablets, batch PA24532.</p>
          <div className="mt-3 flex gap-6 text-sm">
            <span className="font-normal">Regular 400</span>
            <span className="font-medium">Medium 500</span>
            <span className="font-semibold">Semibold 600</span>
          </div>
        </Example>
        <Example title="Bricolage Grotesque" description="Display, --font-display">
          <p className="font-display text-[2rem] leading-10 font-semibold tracking-tight">Aa Bb Cc 0123</p>
          <p className="font-display mt-2 text-lg font-semibold">Stock closing report</p>
          <p className="mt-3 text-xs text-muted-foreground">Page titles only. Body, labels, tables and figures stay on Geist.</p>
        </Example>
      </div>
    </Section>
  );
}

export function TypeScale() {
  return (
    <Section id="type-scale" title="Type scale" description="One class sets size, line height, weight and tracking. Tables and controls are 14 px, body 15 px; minimum functional size is 13 px. Letter spacing tightens only for display and page-title.">
      <Example title="Text styles" bare>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Class</TableHead>
              <TableHead className="text-right">Size / line</TableHead>
              <TableHead className="text-right">Weight</TableHead>
              <TableHead className="text-right">Tracking</TableHead>
              <TableHead>Sample</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {STYLES.map((s) => (
              <TableRow key={s.cls}>
                <TableCell className="align-top">
                  <div className="font-mono text-xs font-medium">{s.cls}</div>
                  <div className="text-xs text-muted-foreground">{s.use}</div>
                </TableCell>
                <TableCell className="text-right align-top font-mono text-xs">
                  {s.size} / {s.lh}
                </TableCell>
                <TableCell className="text-right align-top font-mono text-xs">{s.weight}</TableCell>
                <TableCell className="text-right align-top font-mono text-xs">{s.tracking}</TableCell>
                <TableCell className="max-w-md whitespace-normal">
                  <span className={`${s.cls}${s.display ? " font-display" : ""} text-foreground`}>{s.sample}</span>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Example>
    </Section>
  );
}

export function TabularFigures() {
  const rows = [
    { item: "Panadol 500 mg", qty: 24, price: 5, total: 120 },
    { item: "Augmentin 625 mg", qty: 3, price: 85, total: 255 },
    { item: "Lantus SoloStar", qty: 1, price: 2400, total: 2400 },
    { item: "Surgical Gloves", qty: 12, price: 900, total: 10800 },
  ];
  return (
    <Section id="type-numeric" title="Tabular figures" description="Money, quantities and dates use tabular figures so digits line up in columns. The numeric styles set it; any other class can add tabular-nums.">
      <div className="grid gap-4 lg:grid-cols-2">
        <Example title="Proportional vs tabular" description="Same digits, right-aligned">
          <div className="grid grid-cols-2 gap-6">
            {[
              { label: "Proportional", cls: "[font-variant-numeric:proportional-nums]" },
              { label: "tabular-nums", cls: "tabular-nums" },
            ].map((c) => (
              <div key={c.label}>
                <div className="mb-1.5 text-xs text-muted-foreground">{c.label}</div>
                <div className={`space-y-0.5 text-right text-sm ${c.cls}`}>
                  {[1111, 88, 7071, 1000500, 411].map((n) => (
                    <div key={n}>{formatKES(n)}</div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </Example>
        <Example title="Cart lines" bare>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Item</TableHead>
                <TableHead className="text-right">Qty</TableHead>
                <TableHead className="text-right">Price</TableHead>
                <TableHead className="text-right">Total</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {rows.map((r) => (
                <TableRow key={r.item}>
                  <TableCell>{r.item}</TableCell>
                  <TableCell className="text-right text-numeric-md">{r.qty}</TableCell>
                  <TableCell className="text-right text-numeric-md">{formatKES(r.price, { decimals: true })}</TableCell>
                  <TableCell className="text-right text-numeric-strong">{formatKES(r.total, { decimals: true })}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </Example>
      </div>
      <Example title="Numeric styles" bare>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Class</TableHead>
              <TableHead>Spec</TableHead>
              <TableHead>Use</TableHead>
              <TableHead className="text-right">Sample</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {NUMERIC.map((n) => (
              <TableRow key={n.cls}>
                <TableCell className="font-mono text-xs font-medium">{n.cls}</TableCell>
                <TableCell className="font-mono text-xs text-muted-foreground">{n.spec}</TableCell>
                <TableCell className="text-muted-foreground">{n.use}</TableCell>
                <TableCell className="text-right">
                  <span className={n.cls}>{n.sample}</span>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Example>
    </Section>
  );
}