import type { ReactNode } from "react";
import { CheckIcon, ClockIcon, CommandIcon, PauseIcon, TriangleAlertIcon, XIcon } from "lucide-react";

import { Example } from "@/components/design-system/example";
import { Section } from "@/components/design-system/section";
import { Badge } from "@/components/ui/badge";
import { Kbd, KbdGroup } from "@/components/ui/kbd";
import { cn } from "@/lib/utils";

type Tone = "success" | "warning" | "error" | "info" | "neutral";

const TONE: Record<Tone, string> = {
  success: "border-status-success-border bg-status-success-bg text-status-success-text",
  warning: "border-status-warning-border bg-status-warning-bg text-status-warning-text",
  error: "border-status-error-border bg-status-error-bg text-status-error-text",
  info: "border-status-info-border bg-status-info-bg text-status-info-text",
  neutral: "border-border bg-muted text-muted-foreground",
};

/** Status badge built from the semantic status tokens. Text and icon carry the meaning, never colour alone. */
function StatusBadge({ tone, icon, children }: { tone: Tone; icon?: ReactNode; children: ReactNode }) {
  return (
    <Badge variant="outline" className={cn("rounded-md", TONE[tone])}>
      {icon}
      {children}
    </Badge>
  );
}

const STATUSES: { label: string; tone: Tone; icon: ReactNode }[] = [
  { label: "In stock", tone: "success", icon: <CheckIcon /> },
  { label: "Low stock", tone: "warning", icon: <TriangleAlertIcon /> },
  { label: "Out of stock", tone: "error", icon: <XIcon /> },
  { label: "Expired", tone: "error", icon: <XIcon /> },
  { label: "Paid", tone: "success", icon: <CheckIcon /> },
  { label: "Pending", tone: "warning", icon: <ClockIcon /> },
  { label: "Held", tone: "info", icon: <PauseIcon /> },
  { label: "Refunded", tone: "neutral", icon: null },
];

export function BadgeSection() {
  return (
    <Section id="badge" title="Badge" description="Stock-style variants come from shadcn. Status badges are the same component recoloured from the status tokens, with an icon so colour is never the only signal.">
      <div className="grid gap-4 md:grid-cols-2">
        <Example title="Variants">
          <div className="flex flex-wrap items-center gap-2">
            <Badge>default</Badge>
            <Badge variant="secondary">secondary</Badge>
            <Badge variant="outline">outline</Badge>
            <Badge variant="destructive">destructive</Badge>
            <Badge variant="ghost">ghost</Badge>
            <Badge variant="link">link</Badge>
          </div>
        </Example>
        <Example title="With icon and count">
          <div className="flex flex-wrap items-center gap-2">
            <Badge>
              <CheckIcon data-icon="inline-start" />
              Verified
            </Badge>
            <Badge variant="secondary">Rx</Badge>
            <Badge variant="outline" className="tabular-nums">
              12 items
            </Badge>
            <Badge variant="destructive" className="tabular-nums">
              3 expired
            </Badge>
          </div>
        </Example>
      </div>
      <Example
        title="Status badges"
        description="Pharmacy states"
        code={`<Badge variant="outline" className="border-status-success-border bg-status-success-bg text-status-success-text">
  <CheckIcon /> In stock
</Badge>`}
      >
        <div className="flex flex-wrap items-center gap-2">
          {STATUSES.map((s) => (
            <StatusBadge key={s.label} tone={s.tone} icon={s.icon}>
              {s.label}
            </StatusBadge>
          ))}
        </div>
      </Example>
      <Example title="Rounded variant for dense tables" description="Pill shape from the Badge base">
        <div className="flex flex-wrap items-center gap-2">
          {STATUSES.slice(0, 7).map((s) => (
            <Badge key={s.label} variant="outline" className={TONE[s.tone]}>
              {s.label}
            </Badge>
          ))}
        </div>
      </Example>
    </Section>
  );
}

export function KbdSection() {
  return (
    <Section id="kbd" title="Kbd" description="Keyboard hints for the till and command menus.">
      <Example title="Keys and groups">
        <div className="flex flex-wrap items-center gap-6 text-sm">
          <span className="flex items-center gap-2">
            Search products <Kbd>F2</Kbd>
          </span>
          <span className="flex items-center gap-2">
            Complete sale <Kbd>F9</Kbd>
          </span>
          <span className="flex items-center gap-2">
            Command menu
            <KbdGroup>
              <Kbd>
                <CommandIcon />
              </Kbd>
              <Kbd>K</Kbd>
            </KbdGroup>
          </span>
          <span className="flex items-center gap-2">
            Hold sale
            <KbdGroup>
              <Kbd>Ctrl</Kbd>
              <Kbd>H</Kbd>
            </KbdGroup>
          </span>
        </div>
      </Example>
    </Section>
  );
}

export function LinkActions() {
  const link = "text-primary underline-offset-4 hover:underline focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50";
  return (
    <Section id="link-actions" title="Link-style actions" description="Inline navigation and low-emphasis actions. Plain anchors with the primary colour, underline on hover.">
      <Example title="Links">
        <div className="space-y-3 text-sm">
          <p>
            Customer owes <span className="tabular-nums font-medium">KES 12,400</span>.{" "}
            <a href="#link-actions" className={link}>
              View statement
            </a>{" "}
            or{" "}
            <a href="#link-actions" className={link}>
              record a payment
            </a>
            .
          </p>
          <p className="flex flex-wrap gap-x-5 gap-y-1">
            <a href="#link-actions" className={cn(link, "underline")}>
              Always underlined
            </a>
            <a href="#link-actions" className="cursor-not-allowed text-muted-foreground" aria-disabled="true">
              Disabled link
            </a>
            <a href="#link-actions" className="text-muted-foreground underline-offset-4 hover:text-foreground hover:underline">
              Muted link
            </a>
          </p>
        </div>
      </Example>
    </Section>
  );
}