"use client";

import * as React from "react";
import {
  ArrowRightIcon,
  BoldIcon,
  DownloadIcon,
  ItalicIcon,
  ListIcon,
  LayoutGridIcon,
  MinusIcon,
  PlusIcon,
  PrinterIcon,
  ScanBarcodeIcon,
  SearchIcon,
  Trash2Icon,
  UnderlineIcon,
} from "lucide-react";

import { Example } from "@/components/design-system/example";
import { Section } from "@/components/design-system/section";
import { Button } from "@/components/ui/button";
import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "@/components/ui/button-group";
import { Spinner } from "@/components/ui/spinner";
import { Toggle } from "@/components/ui/toggle";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

const VARIANTS = ["default", "secondary", "outline", "ghost", "destructive", "link"] as const;
const SIZES = ["xs", "sm", "default", "lg"] as const;
const ICON_SIZES = ["icon-xs", "icon-sm", "icon", "icon-lg"] as const;

function Row({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="grid grid-cols-[6.5rem_1fr] items-center gap-4">
      <span className="font-mono text-xs text-muted-foreground">{label}</span>
      <div className="flex flex-wrap items-center gap-2">{children}</div>
    </div>
  );
}

export function ButtonVariants() {
  return (
    <Section id="button-variants" title="Button variants" description="Primary teal is the one filled action per view. Destructive is a tinted red, not a solid fill.">
      <Example
        title="Variants"
        code={`<Button variant="default">Complete sale</Button>
<Button variant="secondary">Hold sale</Button>
<Button variant="outline">Print receipt</Button>
<Button variant="ghost">Cancel</Button>
<Button variant="destructive">Void sale</Button>
<Button variant="link">View statement</Button>`}
      >
        <div className="flex flex-wrap items-center gap-3">
          <Button variant="default">Complete sale</Button>
          <Button variant="secondary">Hold sale</Button>
          <Button variant="outline">Print receipt</Button>
          <Button variant="ghost">Cancel</Button>
          <Button variant="destructive">Void sale</Button>
          <Button variant="link">View statement</Button>
        </div>
      </Example>
      <Example title="Sizes by variant" description="xs 24, sm 28, default 32, lg 36 px" bare>
        <div className="space-y-3 p-4">
          {VARIANTS.filter((v) => v !== "link").map((v) => (
            <Row key={v} label={v}>
              {SIZES.map((s) => (
                <Button key={s} variant={v} size={s}>
                  {s}
                </Button>
              ))}
            </Row>
          ))}
        </div>
      </Example>
    </Section>
  );
}

export function ButtonStates() {
  const [busy, setBusy] = React.useState(false);
  const run = () => {
    setBusy(true);
    window.setTimeout(() => setBusy(false), 1800);
  };
  return (
    <Section id="button-states" title="Button states" description="Hover and pressed are CSS-only and cannot be forced, so they are described. Focus is shown with a forced ring; use Tab to see the live one.">
      <div className="grid gap-4 md:grid-cols-2">
        <Example title="Default, focus, disabled">
          <div className="space-y-3">
            <Row label="default">
              <Button>Save</Button>
              <Button variant="outline">Save</Button>
              <Button variant="destructive">Delete</Button>
            </Row>
            <Row label="focus (forced)">
              <Button className="border-ring ring-3 ring-ring/50">Save</Button>
              <Button variant="outline" className="border-ring ring-3 ring-ring/50">
                Save
              </Button>
            </Row>
            <Row label="disabled">
              <Button disabled>Save</Button>
              <Button variant="outline" disabled>
                Save
              </Button>
              <Button variant="destructive" disabled>
                Delete
              </Button>
            </Row>
          </div>
        </Example>
        <Example title="Hover and pressed" description="Behaviour, not static">
          <ul className="space-y-1.5 text-xs leading-5 text-muted-foreground">
            <li>
              <span className="font-medium text-foreground">default</span> hover darkens to 80% primary.
            </li>
            <li>
              <span className="font-medium text-foreground">outline, ghost</span> hover fills with muted grey.
            </li>
            <li>
              <span className="font-medium text-foreground">secondary</span> hover mixes 5% foreground into the grey.
            </li>
            <li>
              <span className="font-medium text-foreground">destructive</span> hover raises the red tint from 10% to 20%.
            </li>
            <li>
              <span className="font-medium text-foreground">link</span> underlines on hover.
            </li>
            <li>
              <span className="font-medium text-foreground">pressed</span> nudges the button 1 px down.
            </li>
            <li>
              <span className="font-medium text-foreground">disabled</span> drops to 50% opacity with a not-allowed cursor.
            </li>
          </ul>
        </Example>
      </div>
      <Example title="Loading" description="Disable the button and prepend a Spinner while the request is in flight">
        <div className="space-y-3">
          <Row label="loading">
            <Button disabled><Spinner data-icon="inline-start" />Saving</Button>
            <Button variant="outline" disabled><Spinner data-icon="inline-start" />Processing</Button>
            <Button variant="secondary" disabled><Spinner data-icon="inline-start" />Hold sale</Button>
          </Row>
          <Row label="interactive">
            <Button disabled={busy} onClick={run}>
              {busy && <Spinner data-icon="inline-start" />}
              {busy ? "Completing sale" : "Complete sale"}
            </Button>
          </Row>
          <Row label="manual Spinner">
            <Button disabled>
              <Spinner />
              Syncing
            </Button>
            <Button variant="outline" size="sm" disabled>
              <Spinner className="size-3.5" />
              Syncing
            </Button>
          </Row>
        </div>
      </Example>
    </Section>
  );
}

export function ButtonIcons() {
  return (
    <Section id="button-icons" title="Icons and groups" description="Icon-only buttons need an aria-label. data-icon on the icon adjusts padding.">
      <div className="grid gap-4 md:grid-cols-2">
        <Example title="With icon">
          <div className="flex flex-wrap items-center gap-3">
            <Button>
              <PlusIcon data-icon="inline-start" />
              Add product
            </Button>
            <Button variant="outline">
              <PrinterIcon data-icon="inline-start" />
              Print
            </Button>
            <Button variant="secondary">
              Next
              <ArrowRightIcon data-icon="inline-end" />
            </Button>
            <Button variant="destructive">
              <Trash2Icon data-icon="inline-start" />
              Remove
            </Button>
            <Button variant="outline" size="sm">
              <DownloadIcon data-icon="inline-start" />
              Export
            </Button>
          </div>
        </Example>
        <Example title="Icon only" description="xs 24, sm 28, default 32, lg 36">
          <div className="space-y-3">
            {(["default", "outline", "ghost", "secondary"] as const).map((v) => (
              <Row key={v} label={v}>
                {ICON_SIZES.map((s) => (
                  <Button key={s} variant={v} size={s} aria-label={`Scan barcode (${s})`}>
                    <ScanBarcodeIcon />
                  </Button>
                ))}
              </Row>
            ))}
          </div>
        </Example>
      </div>
      <div className="grid gap-4 md:grid-cols-2">
        <Example title="Button group, horizontal">
          <div className="flex flex-wrap items-center gap-4">
            <ButtonGroup>
              <Button variant="outline">Day</Button>
              <Button variant="outline">Week</Button>
              <Button variant="outline">Month</Button>
            </ButtonGroup>
            <ButtonGroup>
              <ButtonGroupText>Qty</ButtonGroupText>
              <Button variant="outline" size="icon" aria-label="Decrease">
                <MinusIcon />
              </Button>
              <ButtonGroupText className="tabular-nums">12</ButtonGroupText>
              <Button variant="outline" size="icon" aria-label="Increase">
                <PlusIcon />
              </Button>
            </ButtonGroup>
            <ButtonGroup>
              <Button variant="outline">Save</Button>
              <ButtonGroupSeparator />
              <Button variant="outline" size="icon" aria-label="Save options">
                <ArrowRightIcon />
              </Button>
            </ButtonGroup>
          </div>
        </Example>
        <Example title="Button group, vertical">
          <ButtonGroup orientation="vertical">
            <Button variant="outline">
              <SearchIcon data-icon="inline-start" />
              Search products
            </Button>
            <Button variant="outline">
              <ScanBarcodeIcon data-icon="inline-start" />
              Scan barcode
            </Button>
          </ButtonGroup>
        </Example>
      </div>
    </Section>
  );
}

export function ToggleSection() {
  return (
    <Section id="toggle" title="Toggle and toggle group" description="A toggle holds on/off state. A group is single-select by default; add multiple for formatting-style sets.">
      <div className="grid gap-4 md:grid-cols-2">
        <Example title="Toggle" description="default and outline, sizes">
          <div className="space-y-3">
            <Row label="default">
              <Toggle aria-label="Bold">
                <BoldIcon />
              </Toggle>
              <Toggle defaultPressed aria-label="Italic">
                <ItalicIcon />
              </Toggle>
              <Toggle disabled aria-label="Underline">
                <UnderlineIcon />
              </Toggle>
              <Toggle>Low stock only</Toggle>
            </Row>
            <Row label="outline">
              <Toggle variant="outline" aria-label="Bold">
                <BoldIcon />
              </Toggle>
              <Toggle variant="outline" defaultPressed aria-label="Italic">
                <ItalicIcon />
              </Toggle>
              <Toggle variant="outline" defaultPressed>
                Rx only
              </Toggle>
            </Row>
            <Row label="sizes">
              <Toggle variant="outline" size="sm" defaultPressed>
                sm
              </Toggle>
              <Toggle variant="outline" defaultPressed>
                default
              </Toggle>
              <Toggle variant="outline" size="lg" defaultPressed>
                lg
              </Toggle>
            </Row>
          </div>
        </Example>
        <Example title="Toggle group">
          <div className="space-y-3">
            <Row label="single">
              <ToggleGroup variant="outline" spacing={0} defaultValue={["week"]}>
                <ToggleGroupItem value="day">Day</ToggleGroupItem>
                <ToggleGroupItem value="week">Week</ToggleGroupItem>
                <ToggleGroupItem value="month">Month</ToggleGroupItem>
              </ToggleGroup>
            </Row>
            <Row label="multiple">
              <ToggleGroup variant="outline" spacing={0} multiple defaultValue={["bold"]}>
                <ToggleGroupItem value="bold" aria-label="Bold">
                  <BoldIcon />
                </ToggleGroupItem>
                <ToggleGroupItem value="italic" aria-label="Italic">
                  <ItalicIcon />
                </ToggleGroupItem>
                <ToggleGroupItem value="underline" aria-label="Underline">
                  <UnderlineIcon />
                </ToggleGroupItem>
              </ToggleGroup>
            </Row>
            <Row label="view switch">
              <ToggleGroup variant="outline" spacing={0} defaultValue={["list"]}>
                <ToggleGroupItem value="list" aria-label="List view">
                  <ListIcon />
                </ToggleGroupItem>
                <ToggleGroupItem value="grid" aria-label="Grid view">
                  <LayoutGridIcon />
                </ToggleGroupItem>
              </ToggleGroup>
            </Row>
            <Row label="spaced">
              <ToggleGroup spacing={2} defaultValue={["all"]}>
                <ToggleGroupItem value="all">All</ToggleGroupItem>
                <ToggleGroupItem value="low">Low stock</ToggleGroupItem>
                <ToggleGroupItem value="expiring">Expiring</ToggleGroupItem>
              </ToggleGroup>
            </Row>
            <Row label="vertical">
              <ToggleGroup variant="outline" spacing={0} orientation="vertical" defaultValue={["cash"]}>
                <ToggleGroupItem value="cash">Cash</ToggleGroupItem>
                <ToggleGroupItem value="mpesa">M-Pesa</ToggleGroupItem>
                <ToggleGroupItem value="card">Card</ToggleGroupItem>
              </ToggleGroup>
            </Row>
          </div>
        </Example>
      </div>
    </Section>
  );
}