"use client";

import { FilterIcon } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer";
import { Field, FieldLabel } from "@/components/ui/field";
import { Separator } from "@/components/ui/separator";
import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
import { batches, formatDate, formatKES, products, stockStatus } from "@/lib/mock-data";

const product = products[5];
const productBatches = batches.filter((b) => b.productId === product.id);
const cats = ["Analgesics", "Antibiotics", "Antidiabetics", "Cardiovascular", "Antimalarials", "Respiratory"];

export function ProductSheet() {
  const facts: [string, string][] = [
    ["Barcode", product.barcode],
    ["Shelf", product.shelf],
    ["Cost", formatKES(product.costPrice, { decimals: true })],
    ["Price", formatKES(product.price, { decimals: true })],
    ["In stock", String(product.stock)],
    ["Reorder level", String(product.minStock)],
  ];
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>Product details (right)</SheetTrigger>
      <SheetContent side="right" className="sm:max-w-md">
        <SheetHeader>
          <SheetTitle>{product.name}</SheetTitle>
          <SheetDescription>
            {product.generic} {product.strength}, {product.form}
          </SheetDescription>
        </SheetHeader>
        <div className="flex-1 space-y-4 overflow-y-auto px-4 text-sm">
          <div className="flex gap-2">
            <Badge variant="secondary">{product.category}</Badge>
            {product.requiresRx ? <Badge variant="outline">Rx only</Badge> : null}
            <Badge variant="outline">{stockStatus(product)}</Badge>
          </div>
          <dl className="grid grid-cols-2 gap-x-4 gap-y-2">
            {facts.map(([k, v]) => (
              <div key={k}>
                <dt className="text-xs text-muted-foreground">{k}</dt>
                <dd className="tabular-nums">{v}</dd>
              </div>
            ))}
          </dl>
          <Separator />
          <div>
            <p className="mb-2 text-xs font-medium">Batches (earliest expiry sold first)</p>
            <ul className="divide-y divide-border rounded-lg border border-border">
              {productBatches.map((b) => (
                <li key={b.id} className="flex items-center justify-between px-3 py-2">
                  <span className="font-mono text-xs">{b.batchNo}</span>
                  <span className="text-xs text-muted-foreground">Exp {formatDate(b.expiryDate)}</span>
                  <span className="tabular-nums">{b.stock}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
        <SheetFooter className="flex-row justify-end">
          <SheetClose render={<Button variant="outline" />}>Close</SheetClose>
          <Button>Edit product</Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}

export function FilterSheet() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        <FilterIcon data-icon="inline-start" />
        Filters (left)
      </SheetTrigger>
      <SheetContent side="left" className="sm:max-w-xs">
        <SheetHeader>
          <SheetTitle>Filter inventory</SheetTitle>
          <SheetDescription>Narrow the product list.</SheetDescription>
        </SheetHeader>
        <div className="flex-1 space-y-2 overflow-y-auto px-4">
          <p className="text-xs font-medium text-muted-foreground">Category</p>
          {cats.map((c) => (
            <Field key={c} orientation="horizontal">
              <Checkbox id={`f-${c}`} />
              <FieldLabel htmlFor={`f-${c}`}>{c}</FieldLabel>
            </Field>
          ))}
        </div>
        <SheetFooter className="flex-row justify-end">
          <SheetClose render={<Button variant="outline" />}>Reset</SheetClose>
          <SheetClose render={<Button />}>Apply filters</SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}

export function BottomDrawer() {
  return (
    <Drawer>
      <DrawerTrigger render={<Button variant="outline" />}>Open bottom drawer</DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Payment method</DrawerTitle>
          <DrawerDescription>Total due {formatKES(2340)}.</DrawerDescription>
        </DrawerHeader>
        <div className="grid gap-2 px-4">
          {["Cash", "M-Pesa", "Card", "Put on account"].map((m) => (
            <DrawerClose key={m} render={<Button variant="outline" size="lg" className="h-11 justify-start" />}>
              {m}
            </DrawerClose>
          ))}
        </div>
        <DrawerFooter>
          <DrawerClose render={<Button variant="ghost" />}>Cancel</DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}