"use client";

import * as React from "react";

import { Example } from "@/components/design-system/example";
import { PosBar, type PosShift, type TillShortcut } from "@/components/medora/pos-bar";
import { toast } from "@/components/ui/toast";

const say = (title: string, description?: string) => () => toast.add({ title, description: description ?? "Design-system preview." });

const LABEL: Record<TillShortcut, string> = {
  pay: "F1 · Pay",
  hold: "F2 · Hold sale",
  search: "F3 · Search products",
  customer: "F4 · Choose customer",
  quantity: "F5 · Change quantity",
  drawer: "F8 · Open cash drawer",
  complete: "F12 · Complete sale",
  clear: "Esc · Clear search",
};

export function PosBarDemos() {
  // Times are relative to page load, so the duration reads as a real shift.
  const [openedAt] = React.useState(() => new Date(Date.now() - (4 * 60 + 12) * 60_000));
  const [shift, setShift] = React.useState<PosShift>({ status: "none" });
  const [listen, setListen] = React.useState(false);

  return (
    <div className="space-y-4">
      <Example
        title="Shift open, online"
        description="Light tone. Turn on the shortcuts, then press F1–F4, F8 or Esc"
        bare
      >
        <PosBar
          till="Till 1"
          branch="Westlands Main, Nairobi"
          cashier={{ name: "Kevin Mutua", role: "Cashier" }}
          shift={{ status: "open", openedAt, float: 5000 }}
          held={2}
          onHeld={say("Held sales", "Opens the held sales list.")}
          onLock={say("Till locked", "The cashier's PIN unlocks it.")}
          onSwitchCashier={say("Switch cashier")}
          onCloseShift={say("Close shift", "Opens the cash count and Z-report.")}
          onShortcut={listen ? (a) => toast.add({ title: LABEL[a], description: "Keyboard shortcut received." }) : undefined}
        />
        <div className="flex items-center gap-2 border-t border-border px-3 py-2 text-xs text-muted-foreground">
          <label className="flex cursor-pointer items-center gap-2">
            <input type="checkbox" checked={listen} onChange={(e) => setListen(e.target.checked)} className="size-4 accent-[var(--mdr-teal-700)]" />
            Listen for till shortcuts on this page
          </label>
        </div>
      </Example>

      <Example title="Teal tone: offline, drawer open, closing shift" description="Sales queue on the device until the connection returns" bare>
        <PosBar
          tone="brand"
          till="Till 2"
          branch="Kilimani, Nairobi"
          cashier={{ name: "Achieng Odhiambo", role: "Pharmacist" }}
          shift={{ status: "closing", openedAt, float: 5000 }}
          online={false}
          queued={3}
          drawer="open"
          held={0}
          onLock={say("Till locked")}
          onCloseShift={say("Close shift")}
        />
      </Example>

      <Example title="No shift open" description="Selling is blocked until a shift is opened with a cash float" bare>
        <PosBar
          till="Till 3"
          branch="Nyali, Mombasa"
          cashier={{ name: "Fatuma Hassan", role: "Cashier" }}
          shift={shift}
          onOpenShift={() => {
            setShift({ status: "open", openedAt: new Date(), float: 5000 });
            toast.add({ type: "success", title: "Shift opened", description: "Float KES 5,000.00 counted into the drawer." });
          }}
          onCloseShift={() => setShift({ status: "none" })}
        />
      </Example>
    </div>
  );
}