"use client";

import * as React from "react";

import { Example } from "@/components/design-system/example";
import { Section } from "@/components/design-system/section";
import { LedgerEntries, type EntryLine } from "@/components/medora/ledger-entries";
import { toast } from "@/components/ui/toast";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

// The same documents as the other demos, so the figures can be traced: the till sale RCP-005214, GRN-2026-0318,
// the held bill BILL-2026-0201 and the waste write-off WST-0042.
const DOCS: Record<string, { document: string; date: string; status: "Posted" | "Will post"; lines: EntryLine[] }> = {
  sale: {
    document: "Sale RCP-005214",
    date: "20 Oct 2026, 17:42",
    status: "Posted",
    lines: [
      { account: "1021 M-Pesa till 512330", debit: 1589.2, memo: "Paid by M-Pesa, SJK4L8P2QX" },
      { account: "4000 Sales", credit: 1370, memo: "Net of the per-unit discount" },
      { account: "2100 VAT payable", credit: 219.2 },
      { account: "5000 Cost of goods sold", debit: 1084, memo: "From the batches sold: AUG-2311, PN-30217" },
      { account: "1200 Inventory", credit: 1084 },
    ],
  },
  grn: {
    document: "GRN-2026-0318, Harleys Ltd",
    date: "18 Oct 2026",
    status: "Posted",
    lines: [
      { account: "1200 Inventory", debit: 13950, memo: "Goods accepted, at cost" },
      { account: "1410 VAT on purchases", debit: 1617.6 },
      { account: "2010 Goods received, not yet billed", credit: 15567.6, memo: "Cleared when the bill is entered" },
    ],
  },
  bill: {
    document: "BILL-2026-0201, Harleys Ltd (held)",
    date: "18 Oct 2026",
    status: "Posted",
    lines: [
      { account: "2010 Goods received, not yet billed", debit: 15567.6, memo: "GRN-2026-0318" },
      { account: "2015 Supplier invoice differences", debit: 3166.8, memo: "6 refused tubes billed; credit note requested" },
      { account: "2000 Accounts payable", credit: 18734.4 },
    ],
  },
  waste: {
    document: "Waste WST-0042, Nyali",
    date: "16 Oct 2026",
    status: "Posted",
    lines: [
      { account: "5100 Stock write-offs", debit: 3150, memo: "15 × Amoxil 500 mg, expired" },
      { account: "1200 Inventory", credit: 3150 },
    ],
  },
};

export function LedgerEntriesSection() {
  const [doc, setDoc] = React.useState<keyof typeof DOCS>("sale");
  const d = DOCS[doc];
  return (
    <Section id="ledger-entries" title="Ledger entries on each document" description="AC-02 and AC-03: every sale, goods received note, supplier bill, payment, payroll run and write-off posts to the ledger by itself. Each document shows what it posted, balanced, with links to the accounts. Posting is the server's job; this only shows it.">
      <Example title="What each document posted" description="Same documents as the other demos: the bill's difference account clears when Harleys' credit note is entered">
        <div className="mb-3">
          <ToggleGroup variant="outline" size="sm" spacing={0} aria-label="Document" value={[doc]} onValueChange={(v: string[]) => v[0] && setDoc(v[0] as keyof typeof DOCS)}>
            <ToggleGroupItem value="sale">Sale</ToggleGroupItem>
            <ToggleGroupItem value="grn">GRN</ToggleGroupItem>
            <ToggleGroupItem value="bill">Supplier bill</ToggleGroupItem>
            <ToggleGroupItem value="waste">Waste</ToggleGroupItem>
          </ToggleGroup>
        </div>
        <LedgerEntries key={doc} {...d} onOpenAccount={(a) => toast.add({ title: `Opens the statement for ${a}` })} />
      </Example>
    </Section>
  );
}