"use client";

import * as React from "react";

import { Example } from "@/components/design-system/example";
import { Section } from "@/components/design-system/section";
import { ManagedList, type ListItem, type ListSpec } from "@/components/medora/managed-list";
import { toast } from "@/components/ui/toast";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

const item = (id: string, name: string, uses: number, extra: Partial<ListItem> = {}): ListItem => ({ id, name, uses, active: true, ...extra });

const CATEGORIES = ["Analgesics", "Antibiotics", "Antidiabetics", "Dermatology", "Vitamins", "Consumables"];

const LISTS: Record<string, { spec: ListSpec; items: ListItem[] }> = {
  Categories: {
    spec: { noun: "category", usedBy: "products" },
    items: [item("c1", "Analgesics", 42), item("c2", "Antibiotics", 37), item("c3", "Antidiabetics", 18), item("c4", "Dermatology", 26), item("c5", "Vitamins", 21), item("c6", "Consumables", 0), item("c7", "Baby care", 4, { active: false })],
  },
  "Sub-categories": {
    spec: { noun: "sub-category", usedBy: "products", parents: { label: "Category", options: CATEGORIES } },
    items: [item("s1", "Penicillins", 12, { parent: "Antibiotics" }), item("s2", "Macrolides", 7, { parent: "Antibiotics" }), item("s3", "Paracetamol", 9, { parent: "Analgesics" }), item("s4", "NSAIDs", 14, { parent: "Analgesics" }), item("s5", "Emollients", 0, { parent: "Dermatology" })],
  },
  Brands: {
    spec: { noun: "brand", usedBy: "products" },
    items: [item("b1", "GSK", 19), item("b2", "Cosmos", 23), item("b3", "Beiersdorf", 6), item("b4", "Dawa Ltd", 31), item("b5", "Unbranded", 0)],
  },
  Units: {
    spec: { noun: "unit", usedBy: "products", short: { label: "Short form", max: 5 } },
    items: [item("u1", "Tablet", 88, { short: "tab" }), item("u2", "Capsule", 34, { short: "cap" }), item("u3", "Millilitre", 41, { short: "ml" }), item("u4", "Strip", 52, { short: "strip" }), item("u5", "Box", 60, { short: "box" })],
  },
  "Employee types": {
    spec: { noun: "employee type", usedBy: "employees" },
    items: [item("e1", "Permanent", 9), item("e2", "Contract", 3), item("e3", "Casual", 5), item("e4", "Piece rate", 0), item("e5", "Intern", 1, { active: false })],
  },
  "Waste reasons": {
    spec: { noun: "waste reason", usedBy: "waste entries" },
    items: [item("w1", "Expired", 64), item("w2", "Damaged in store", 12), item("w3", "Recalled by supplier", 2), item("w4", "Broken in transit", 0)],
  },
  "Deduction categories": {
    spec: { noun: "deduction category", usedBy: "deductions" },
    items: [item("d1", "Staff purchases", 14), item("d2", "Sacco", 6), item("d3", "Uniform", 0)],
  },
};

export function SetupListsSection() {
  const [tab, setTab] = React.useState("Categories");
  const [data, setData] = React.useState(() => Object.fromEntries(Object.entries(LISTS).map(([k, v]) => [k, v.items])));
  const notice = (title: string, description?: string) => toast.add({ title, description });
  return (
    <Section
      id="setup-lists"
      title="Setup lists"
      description="IN-02 and HR-03: one editor for every list an Admin maintains: categories, sub-categories, brands, units, employee types, waste reasons and deduction categories. Names are unique (ignoring case, and per parent for sub-categories). Anything in use can't be deleted, only deactivated, so past records keep their label."
    >
      <Example title="Setup lists" description="Try adding “antibiotics”, deleting Analgesics, or deleting Consumables (not used)">
        <div className="space-y-4">
          <div className="overflow-x-auto">
            <ToggleGroup variant="outline" size="sm" spacing={0} aria-label="List" value={[tab]} onValueChange={(v: string[]) => v[0] && setTab(v[0])}>
              {Object.keys(LISTS).map((k) => (
                <ToggleGroupItem key={k} value={k}>
                  {k}
                </ToggleGroupItem>
              ))}
            </ToggleGroup>
          </div>
          <ManagedList key={tab} spec={LISTS[tab].spec} items={data[tab]} onChange={(items) => setData((d) => ({ ...d, [tab]: items }))} onNotice={notice} />
        </div>
      </Example>
    </Section>
  );
}