"use client";

import * as React from "react";

import { Example } from "@/components/design-system/example";
import { BillDetails, CartLineCompact, CartPanel, type CartLineItem } from "@/components/medora/cart";
import { toast } from "@/components/ui/toast";
import { formatKES } from "@/lib/mock-data";
import { cartTotals } from "@/components/medora/sale";

const basket: CartLineItem[] = [
  { id: 1, name: "Augmentin 625 mg", pack: "Strip of 14", form: "Tablet", unitPrice: 85, qty: 2, requiresRx: true },
  { id: 2, name: "Ventolin Inhaler 100 mcg", pack: "200 doses", form: "Inhaler", unitPrice: 580, qty: 1, requiresRx: true },
  { id: 3, name: "Benylin Cough Syrup", pack: "100 ml bottle", form: "Syrup", unitPrice: 320, qty: 1, discount: 20 },
  { id: 4, name: "Panadol 500 mg", pack: "Tablet", form: "Tablet", unitPrice: 5, qty: 20 },
  { id: 5, name: "Vitamin C 500 mg Effervescent", pack: "Tube of 20", form: "Tablet", unitPrice: 8, qty: 10, discount: 1 },
  { id: 6, name: "Surgical Gloves", pack: "Box of 100", form: "Box", unitPrice: 900, qty: 1 },
  { id: 7, name: "Medical Consultation", pack: "Per visit", unitPrice: 500, qty: 1, type: "Service" },
];

/** One line with its own quantity state, so each state example can be tried. */
function LiveLine({ item, disabled }: { item: CartLineItem; disabled?: boolean }) {
  const [qty, setQty] = React.useState(item.qty);
  const [gone, setGone] = React.useState(false);
  if (gone)
    return (
      <p className="py-3 text-sm text-muted-foreground">
        Removed.{" "}
        <button type="button" className="font-medium text-primary underline underline-offset-2" onClick={() => setGone(false)}>
          Undo
        </button>
      </p>
    );
  return <CartLineCompact item={{ ...item, qty }} onQtyChange={setQty} onRemove={() => setGone(true)} disabled={disabled} />;
}

export function CompactCartDemos() {
  const charge = (items: CartLineItem[]) =>
    toast.add({ title: "Proceed to payment", description: `To pay ${formatKES(cartTotals(items, 0).total, { decimals: true })}. Opens the tender panel in the app.` });
  return (
    <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_22rem]">
      <div className="space-y-4">
        <Example title="Cart lines" description="default, discounted, Rx, service, at 1 (minus becomes remove), disabled" bare>
          <div className="divide-y divide-border px-4">
            <LiveLine item={{ ...basket[3] }} />
            <LiveLine item={{ ...basket[2] }} />
            <LiveLine item={{ ...basket[0] }} />
            <LiveLine item={{ ...basket[6] }} />
            <LiveLine item={{ ...basket[5] }} />
            <LiveLine item={{ ...basket[3], id: 99 }} disabled />
          </div>
        </Example>
        <div className="grid gap-4 sm:grid-cols-2">
          <Example title="Bill details" description="Free delivery">
            <BillDetails items={basket.slice(0, 4)} delivery={{ fee: 0, note: "over KES 1,500" }} />
          </Example>
          <Example title="Bill details" description="Paid delivery, no VAT">
            <BillDetails items={basket.slice(3, 6)} delivery={{ fee: 250, note: "Westlands" }} vatApplies={false} />
          </Example>
        </div>
      </div>
      <Example title="Cart panel" description="Lines scroll; bill, Rx notice and action stay pinned" bare>
        <div className="h-[640px]">
          <CartPanel initialItems={basket} delivery={{ fee: 0, note: "over KES 1,500" }} onAction={charge} />
        </div>
      </Example>
    </div>
  );
}