"use client";

import * as React from "react";

import { Example } from "@/components/design-system/example";
import { BatchPicker, type BatchSelection, type PickerBatch } from "@/components/medora/batch-picker";
import { PillStepper } from "@/components/medora/cart";
import { addDays, TODAY } from "@/lib/mock-data";
import { cn } from "@/lib/utils";

const panadolBatches: PickerBatch[] = [
  { id: 1, batchNo: "PA24117", expiryDate: addDays(TODAY, 25), stock: 12 },
  { id: 2, batchNo: "PA25042", expiryDate: addDays(TODAY, 200), stock: 300 },
  { id: 3, batchNo: "PA24009", expiryDate: addDays(TODAY, -15), stock: 15 },
  { id: 4, batchNo: "PA25061", expiryDate: addDays(TODAY, 320), stock: 40, hold: "supplier recall" },
  { id: 5, batchNo: "PA25090", expiryDate: addDays(TODAY, 410), stock: 120 },
];

const amoxilBatches: PickerBatch[] = [
  { id: 11, batchNo: "AM25010", expiryDate: addDays(TODAY, 70), stock: 21 },
  { id: 12, batchNo: "AM25088", expiryDate: addDays(TODAY, 390), stock: 63 },
];

function Readout({ s }: { s: BatchSelection | null }) {
  if (!s) return null;
  return (
    <div className="mt-3 flex flex-wrap items-center gap-x-3 gap-y-1 border-t border-border pt-3 text-xs">
      <span className={cn("font-semibold", s.valid ? "text-status-success-text" : "text-status-error-text")}>{s.valid ? "Ready to sell" : "Cannot sell yet"}</span>
      <span className="text-muted-foreground">
        Deducts: {s.allocations.length ? s.allocations.map((a) => `${a.qty} from ${a.batchNo}`).join(" + ") : "nothing"}
      </span>
      {s.reason ? <span className="text-muted-foreground">Reason logged: {s.reason}</span> : null}
    </div>
  );
}

function Demo({ batches, initialQty, unitLabel }: { batches: PickerBatch[]; initialQty: number; unitLabel: string }) {
  const [qty, setQty] = React.useState(initialQty);
  const [s, setS] = React.useState<BatchSelection | null>(null);
  return (
    <div>
      <div className="mb-3 flex items-center justify-between gap-2">
        <span className="text-sm font-medium">Quantity ({unitLabel})</span>
        <PillStepper value={qty} onChange={setQty} max={1000} label={unitLabel} />
      </div>
      <BatchPicker today={TODAY} batches={batches} qty={qty} unitLabel={unitLabel} onChange={setS} />
      <Readout s={s} />
    </div>
  );
}

export function BatchPickerDemos() {
  return (
    <div className="grid gap-4 lg:grid-cols-2">
      <Example
        title="Auto, split across batches"
        description="20 tablets: 12 from the batch expiring first, 8 from the next. Expired and recalled batches are skipped. Try Choose batch and pick PA25090"
      >
        <Demo batches={panadolBatches} initialQty={20} unitLabel="tablets" />
      </Example>
      <Example title="Not enough sellable stock" description="Raise the quantity past 84 to see the shortage; Choose batch on AM25010 to see a single batch run short">
        <Demo batches={amoxilBatches} initialQty={21} unitLabel="capsules" />
      </Example>
    </div>
  );
}