"use client";

import * as React from "react";

import { ConfirmDialog, type ConfirmDialogProps } from "@/components/medora/confirm-dialog";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { toast } from "@/components/ui/toast";

type Demo = { key: string; trigger: string; variant: "outline" | "destructive"; props: Omit<ConfirmDialogProps, "open" | "onOpenChange" | "onConfirm">; done: string };

const DEMOS: Demo[] = [
  {
    key: "neutral",
    trigger: "Neutral: send PO",
    variant: "outline",
    done: "Purchase order sent",
    props: {
      level: "neutral",
      title: "Send purchase order PO-2041 to Dawa Distributors?",
      consequences: ["14 lines, KES 48,250.00.", "The supplier is emailed now. You can still cancel it until goods are received."],
      actionLabel: "Send purchase order",
      busyLabel: "Sending…",
    },
  },
  {
    key: "A",
    trigger: "A: delete held sale",
    variant: "outline",
    done: "Held sale deleted",
    props: {
      level: "A",
      title: "Delete held sale RCP-005198?",
      consequences: ["3 items, KES 1,240.00. A held sale has taken no stock and no money.", "It can't be recovered."],
      actionLabel: "Delete held sale",
      busyLabel: "Deleting…",
    },
  },
  {
    key: "B",
    trigger: "B: write off stock",
    variant: "destructive",
    done: "12 units written off",
    props: {
      level: "B",
      title: "Write off 12 units of Amoxil 500 mg?",
      consequences: ["12 units leave batch AM25010 (expires 29 Dec 2026).", "KES 108.00 at cost is recorded as a loss.", "This can't be undone. It is recorded in the activity log."],
      actionLabel: "Write off 12 units",
      busyLabel: "Writing off…",
      reasons: ["Expired", "Damaged", "Recalled by supplier", "Theft or loss", "Other"],
      reasonHelp: "Saved with the write-off and shown in stock movements.",
    },
  },
  {
    key: "C-danger",
    trigger: "C: delete a role",
    variant: "destructive",
    done: "Role deleted",
    props: {
      level: "C",
      title: "Delete the Cashier role?",
      consequences: ["4 people have this role. They lose access to the till until they are given another role.", "Its permissions can't be recovered."],
      actionLabel: "Delete role",
      busyLabel: "Deleting…",
      confirmText: "CASHIER",
      reasonHelp: "Saved in the audit log.",
    },
  },
  {
    key: "C-primary",
    trigger: "C: approve payroll",
    variant: "outline",
    done: "October payroll approved",
    props: {
      level: "C",
      tone: "primary",
      reasonRequired: false,
      title: "Approve October 2026 payroll?",
      consequences: ["23 employees, net pay KES 1,284,500.00.", "Payslips are issued. An approved run can't be edited, only reversed."],
      actionLabel: "Approve payroll",
      busyLabel: "Approving…",
      confirmText: "OCT-2026",
    },
  },
];

export function ConfirmLevels() {
  const [open, setOpen] = React.useState<string | null>(null);
  const [fail, setFail] = React.useState(false);
  return (
    <div className="space-y-3">
      <div className="flex flex-wrap gap-2">
        {DEMOS.map((d) => (
          <Button key={d.key} variant={d.variant} onClick={() => setOpen(d.key)}>
            {d.trigger}
          </Button>
        ))}
      </div>
      <label className="flex w-fit cursor-pointer items-center gap-2 text-xs text-muted-foreground">
        <Switch checked={fail} onCheckedChange={setFail} />
        Make the action fail (shows the error, keeps what was typed)
      </label>
      {DEMOS.map((d) => (
        <ConfirmDialog
          key={d.key}
          {...d.props}
          open={open === d.key}
          onOpenChange={(o) => setOpen(o ? d.key : null)}
          onConfirm={async ({ reason, details }) => {
            await new Promise((r) => setTimeout(r, 900));
            if (fail) throw new Error("The server did not respond. Nothing was changed; try again.");
            toast.add({ type: "success", title: d.done, description: reason ? `Reason: ${reason}${details ? `. ${details}` : ""}` : "Design-system preview." });
          }}
        />
      ))}
    </div>
  );
}