"use client";

import * as React from "react";
import { CheckIcon, ChevronDownIcon, FileTextIcon, PackageIcon, SearchIcon, SettingsIcon, UserIcon } from "lucide-react";

import { Example } from "@/components/design-system/example";
import { Section } from "@/components/design-system/section";
import { Button } from "@/components/ui/button";
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Kbd } from "@/components/ui/kbd";
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/menubar";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu";
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { customers, formatKES, inventoryRows, products, recentSales } from "@/lib/mock-data";
import { cn } from "@/lib/utils";
import { StatusBadge, saleTone } from "../status";

const noop = (e: React.MouseEvent) => e.preventDefault();

const pages = ["Dashboard", "Point of sale", "Inventory", "Prescriptions", "Suppliers", "Reports", "Settings"];
const productHits = products.filter((p) => p.type === "Product").slice(0, 5);
const customerHits = customers.slice(0, 4);

function TabsDemo() {
  return (
    <div className="grid gap-6 md:grid-cols-2">
      <Tabs defaultValue="all">
        <TabsList>
          <TabsTrigger value="all">All</TabsTrigger>
          <TabsTrigger value="low">Low stock</TabsTrigger>
          <TabsTrigger value="exp">Expiring</TabsTrigger>
        </TabsList>
        <TabsContent value="all" className="text-sm text-muted-foreground">
          {inventoryRows.length} products across all categories.
        </TabsContent>
        <TabsContent value="low" className="text-sm text-muted-foreground">
          Products at or below their reorder level.
        </TabsContent>
        <TabsContent value="exp" className="text-sm text-muted-foreground">
          Batches expiring within 90 days.
        </TabsContent>
      </Tabs>
      <Tabs defaultValue="sales">
        <TabsList variant="line">
          <TabsTrigger value="sales">Sales</TabsTrigger>
          <TabsTrigger value="stock">Stock</TabsTrigger>
          <TabsTrigger value="vat">VAT</TabsTrigger>
        </TabsList>
        <TabsContent value="sales" className="pt-2 text-sm text-muted-foreground">
          Revenue, profit and margin by product.
        </TabsContent>
        <TabsContent value="stock" className="pt-2 text-sm text-muted-foreground">
          Current valuation from open batches.
        </TabsContent>
        <TabsContent value="vat" className="pt-2 text-sm text-muted-foreground">
          Output tax by rate for the period.
        </TabsContent>
      </Tabs>
    </div>
  );
}

function DropdownDemo() {
  const [showCost, setShowCost] = React.useState(true);
  const [showBatch, setShowBatch] = React.useState(false);
  const [sort, setSort] = React.useState("name");
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        View options
        <ChevronDownIcon data-icon="inline-end" />
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuGroup>
          <DropdownMenuLabel>Columns</DropdownMenuLabel>
          <DropdownMenuCheckboxItem checked={showCost} onCheckedChange={setShowCost}>
            Cost price
          </DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem checked={showBatch} onCheckedChange={setShowBatch}>
            Batch number
          </DropdownMenuCheckboxItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuLabel>Sort by</DropdownMenuLabel>
          <DropdownMenuRadioGroup value={sort} onValueChange={setSort}>
            <DropdownMenuRadioItem value="name">Name</DropdownMenuRadioItem>
            <DropdownMenuRadioItem value="stock">Stock</DropdownMenuRadioItem>
            <DropdownMenuRadioItem value="expiry">Expiry</DropdownMenuRadioItem>
          </DropdownMenuRadioGroup>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>Export</DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
            <DropdownMenuItem>Excel</DropdownMenuItem>
            <DropdownMenuItem>PDF</DropdownMenuItem>
            <DropdownMenuItem>CSV</DropdownMenuItem>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
        <DropdownMenuItem>
          Print list
          <DropdownMenuShortcut>Ctrl+P</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem variant="destructive">
          Reset view
          <DropdownMenuShortcut>Ctrl+R</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

function CommandPalette() {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setOpen((o) => !o);
      }
    };
    document.addEventListener("keydown", down);
    return () => document.removeEventListener("keydown", down);
  }, []);
  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)} className="w-64 justify-between text-muted-foreground">
        <span className="inline-flex items-center gap-2">
          <SearchIcon /> Search Medora...
        </span>
        <Kbd>Ctrl K</Kbd>
      </Button>
      <CommandDialog open={open} onOpenChange={setOpen} title="Command palette" description="Jump to a page, product or customer.">
        <Command>
          <CommandInput placeholder="Type a command or search..." />
          <CommandList>
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup heading="Pages">
              {pages.map((p, i) => (
                <CommandItem key={p} onSelect={() => setOpen(false)}>
                  <FileTextIcon />
                  {p}
                  {i < 3 ? <CommandShortcut>G {p[0]}</CommandShortcut> : null}
                </CommandItem>
              ))}
            </CommandGroup>
            <CommandSeparator />
            <CommandGroup heading="Products">
              {productHits.map((p) => (
                <CommandItem key={p.id} value={`product ${p.name}`} onSelect={() => setOpen(false)}>
                  <PackageIcon />
                  {p.name}
                  <CommandShortcut>{formatKES(p.price, { decimals: true })}</CommandShortcut>
                </CommandItem>
              ))}
            </CommandGroup>
            <CommandSeparator />
            <CommandGroup heading="Customers">
              {customerHits.map((c) => (
                <CommandItem key={c.id} value={`customer ${c.name}`} onSelect={() => setOpen(false)}>
                  <UserIcon />
                  {c.name}
                  <CommandShortcut>{c.phone}</CommandShortcut>
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </CommandDialog>
    </>
  );
}

const steps = ["Order placed", "Delivery checked", "Batches entered", "Stock updated"];

function Stepper({ current }: { current: number }) {
  return (
    <ol className="flex flex-wrap items-center gap-2 text-sm">
      {steps.map((s, i) => {
        const done = i < current;
        const active = i === current;
        return (
          <li key={s} className="flex items-center gap-2" aria-current={active ? "step" : undefined}>
            <span
              className={cn(
                "flex size-6 items-center justify-center rounded-full border text-xs font-medium tabular-nums",
                done && "border-primary bg-primary text-primary-foreground",
                active && "border-primary text-primary",
                !done && !active && "border-border text-muted-foreground",
              )}
            >
              {done ? <CheckIcon className="size-3.5" /> : i + 1}
            </span>
            <span className={cn(active ? "font-medium text-foreground" : "text-muted-foreground")}>{s}</span>
            {i < steps.length - 1 ? <span className="mx-1 h-px w-8 bg-border" aria-hidden /> : null}
          </li>
        );
      })}
    </ol>
  );
}

export function NavigationSections() {
  const sales = recentSales.slice(0, 4);
  return (
    <>
      <Section id="tabs" title="Tabs" description="Default (segmented) for switching a view; line for page-level sections.">
        <Example title="Default and line" code={`<Tabs defaultValue="all">\n  <TabsList variant="line">...</TabsList>\n</Tabs>`}>
          <TabsDemo />
        </Example>
      </Section>

      <Section id="breadcrumb-pagination" title="Breadcrumb and pagination">
        <Example title="Breadcrumb" description="Current page is not a link; middle levels can collapse">
          <div className="space-y-4">
            <Breadcrumb>
              <BreadcrumbList>
                <BreadcrumbItem>
                  <BreadcrumbLink href="#" onClick={noop}>Inventory</BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                  <BreadcrumbLink href="#" onClick={noop}>Products</BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                  <BreadcrumbPage>Amoxil 500 mg</BreadcrumbPage>
                </BreadcrumbItem>
              </BreadcrumbList>
            </Breadcrumb>
            <Breadcrumb>
              <BreadcrumbList>
                <BreadcrumbItem>
                  <BreadcrumbLink href="#" onClick={noop}>Home</BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                  <BreadcrumbEllipsis />
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                  <BreadcrumbLink href="#" onClick={noop}>Purchase orders</BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                  <BreadcrumbPage>PO-0412</BreadcrumbPage>
                </BreadcrumbItem>
              </BreadcrumbList>
            </Breadcrumb>
          </div>
        </Example>
        <Example title="Pagination" description="Page links with previous and next">
          <Pagination>
            <PaginationContent>
              <PaginationItem>
                <PaginationPrevious href="#" onClick={noop} />
              </PaginationItem>
              <PaginationItem>
                <PaginationLink href="#" onClick={noop}>1</PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink href="#" isActive onClick={noop}>2</PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink href="#" onClick={noop}>3</PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationEllipsis />
              </PaginationItem>
              <PaginationItem>
                <PaginationLink href="#" onClick={noop}>12</PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationNext href="#" onClick={noop} />
              </PaginationItem>
            </PaginationContent>
          </Pagination>
        </Example>
      </Section>

      <Section id="menus" title="Menus" description="Navigation menu and menubar for top-level structure; dropdown and context menus for actions.">
        <Example title="Navigation menu" description="Triggers with content panels, plus a plain link">
          <NavigationMenu>
            <NavigationMenuList>
              <NavigationMenuItem>
                <NavigationMenuTrigger>Inventory</NavigationMenuTrigger>
                <NavigationMenuContent>
                  <ul className="grid w-64 gap-1">
                    {["Products", "Batches", "Stock adjustments", "Stock report"].map((l) => (
                      <li key={l}>
                        <NavigationMenuLink href="#" onClick={noop}>{l}</NavigationMenuLink>
                      </li>
                    ))}
                  </ul>
                </NavigationMenuContent>
              </NavigationMenuItem>
              <NavigationMenuItem>
                <NavigationMenuTrigger>Reports</NavigationMenuTrigger>
                <NavigationMenuContent>
                  <ul className="grid w-64 gap-1">
                    {["Sales activity", "Profit and loss", "VAT report", "Customers", "Suppliers"].map((l) => (
                      <li key={l}>
                        <NavigationMenuLink href="#" onClick={noop}>{l}</NavigationMenuLink>
                      </li>
                    ))}
                  </ul>
                </NavigationMenuContent>
              </NavigationMenuItem>
              <NavigationMenuItem>
                <NavigationMenuLink href="#" onClick={noop} className="h-9 px-2.5 font-medium">
                  Settings
                </NavigationMenuLink>
              </NavigationMenuItem>
            </NavigationMenuList>
          </NavigationMenu>
        </Example>

        <Example title="Menubar" description="Application-style menu strip">
          <Menubar className="w-fit">
            <MenubarMenu>
              <MenubarTrigger>Sale</MenubarTrigger>
              <MenubarContent>
                <MenubarItem>New sale <MenubarShortcut>Ctrl+N</MenubarShortcut></MenubarItem>
                <MenubarItem>Held sales</MenubarItem>
                <MenubarSeparator />
                <MenubarItem>Close shift</MenubarItem>
              </MenubarContent>
            </MenubarMenu>
            <MenubarMenu>
              <MenubarTrigger>Stock</MenubarTrigger>
              <MenubarContent>
                <MenubarItem>Receive delivery</MenubarItem>
                <MenubarItem>Adjust stock</MenubarItem>
                <MenubarItem>Stock take</MenubarItem>
              </MenubarContent>
            </MenubarMenu>
            <MenubarMenu>
              <MenubarTrigger>Help</MenubarTrigger>
              <MenubarContent>
                <MenubarItem>Keyboard shortcuts</MenubarItem>
                <MenubarItem>Contact support</MenubarItem>
              </MenubarContent>
            </MenubarMenu>
          </Menubar>
        </Example>

        <Example title="Dropdown menu" description="Checkbox items, radio items, submenu, shortcuts, destructive item">
          <DropdownDemo />
        </Example>

        <Example title="Context menu" description="Right-click a row" bare>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Receipt</TableHead>
                <TableHead className="text-right">Total</TableHead>
                <TableHead>Status</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {sales.map((s) => (
                <ContextMenu key={s.id}>
                  <ContextMenuTrigger render={<TableRow />}>
                    <TableCell className="font-mono text-xs">{s.receipt}</TableCell>
                    <TableCell className="text-right">{formatKES(s.total, { decimals: true })}</TableCell>
                    <TableCell>
                      <StatusBadge tone={saleTone(s.status)}>{s.status}</StatusBadge>
                    </TableCell>
                  </ContextMenuTrigger>
                  <ContextMenuContent className="w-48">
                    <ContextMenuItem>Open receipt</ContextMenuItem>
                    <ContextMenuItem>
                      Reprint <ContextMenuShortcut>Ctrl+P</ContextMenuShortcut>
                    </ContextMenuItem>
                    <ContextMenuSeparator />
                    <ContextMenuItem variant="destructive">Refund sale</ContextMenuItem>
                  </ContextMenuContent>
                </ContextMenu>
              ))}
            </TableBody>
          </Table>
        </Example>
      </Section>

      <Section id="command" title="Command palette" description="Search across pages, products and customers. Opens with the button or Ctrl K.">
        <Example title="Command dialog" code={`<CommandDialog open={open} onOpenChange={setOpen}>\n  <Command>...</Command>\n</CommandDialog>`}>
          <CommandPalette />
        </Example>
      </Section>

      <Section id="link-lists" title="Link lists and steps">
        <Example title="Link list" description="Plain links for settings and footer navigation">
          <nav aria-label="Settings" className="max-w-xs">
            <ul className="divide-y divide-border rounded-lg border border-border text-sm">
              {["Store details", "Receipts and printing", "Tax", "Delivery", "Security", "Integrations"].map((l, i) => (
                <li key={l}>
                  <a
                    href="#"
                    onClick={noop}
                    aria-current={i === 0 ? "page" : undefined}
                    className={cn("flex items-center gap-2 px-3 py-2 hover:bg-muted", i === 0 && "bg-accent font-medium text-accent-foreground")}
                  >
                    <SettingsIcon className="size-4 text-muted-foreground" />
                    {l}
                  </a>
                </li>
              ))}
            </ul>
          </nav>
        </Example>
        <Example title="Stepper" description="Goods-received flow built from plain parts">
          <div className="space-y-5">
            <Stepper current={2} />
            <Stepper current={4} />
          </div>
        </Example>
      </Section>
    </>
  );
}