/** THE money surface for one record — charges, tax, payments, what is owed. */
import { useRef, useState } from "react";
import { Text } from "@lotics/ui/text";
import { Alert } from "@lotics/ui/alert";
import { Box } from "@lotics/ui/box";
import { Button } from "@lotics/ui/button";
import { ActionMenu } from "@lotics/ui/action_menu";
import { Link } from "@lotics/ui/link";
import { TextLink } from "@lotics/ui/text_link";
import { Callout, CalloutText } from "@lotics/ui/callout";
import { PageContent } from "@lotics/ui/page_content";
import { Section, SectionHeading, SectionHeadingTitle, Subsection } from "@lotics/ui/section_heading";
import { SectionStack, SubsectionStack } from "@lotics/ui/section_stack";
import { Stack } from "@lotics/ui/stack";
import { DetailRow, DetailTable } from "@lotics/ui/detail_row";
import { TotalsLine } from "@lotics/ui/totals_line";
import { RegionState } from "@lotics/ui/region_state";
import { Table, TableRow, TableCell, type TableColumn } from "@lotics/ui/table";
import { FileBadge } from "@lotics/ui/file_badge";
import { FileGalleryDialog } from "@lotics/ui/file_gallery_dialog";
import { type DisplayFile } from "@lotics/ui/file_thumbnail";
import { InlineButton } from "@lotics/ui/inline_button";
import { DatePicker } from "@lotics/ui/date_picker";
import { InlineFiles } from "@lotics/ui/inline_files";
import { NumberInput } from "@lotics/ui/number_input";
import { Select } from "@lotics/ui/select";
import { TextInput } from "@lotics/ui/text_input";
import { ChargeLine, ChargeLines } from "@lotics/ui/charge_lines";
import { Ledger, LedgerGroup, LedgerRow, LedgerTotal } from "@lotics/ui/ledger";
import { MoneyBand } from "@lotics/ui/money_band";
import { Dialog, DialogFooter, DialogHeader, DialogHeaderTitle } from "@lotics/ui/dialog";
import { daysUntil, deadlineAnnotation } from "@lotics/ui/deadline";
import { formatMoney } from "@lotics/ui/format_money";
import { useLoticsLocale } from "@lotics/ui/locale";
import type { SelectOption } from "@lotics/ui/select";

// ─────────────────────────────────────────────────────────────────────────────
// Template, Money — THE money surface: one record's money, in every shape it
// takes. Four kinds of screen live here and they are not interchangeable:
//
//   FEES     — the DETAILED view, both directions (charge/cost), each fee with
//              its party, due date, supplier original and paid state. A
//              register whose every row expands in place to its full detail.
//   BILLING  — the invoice DOCUMENTS: per-invoice charge bands, the closing
//              `Ledger` statement, the deposit and the receipt.
//   CHARGES  — `ChargeLines`, the editable band you PRICE into: priced lines,
//              flat amounts, mixed kinds, locked, empty, and the narrow fork.
//
// The split that governs the page: `ChargeLines` is what you are PRICING and
// `Ledger` is what you are READING — a band you type into versus a statement
// you check. Both keep every figure on one right-aligned tabular column,
// because a money column that lands on more edges than it has kinds cannot be
// added up by eye.
//
// Fees and Billing are lifted from `tpl_record`, where they are two sections of
// a much larger record surface; here they are the subject rather than a part of
// one, and the charge bands below them show the shapes a record's money takes
// that no single scenario exercises at once.
// ─────────────────────────────────────────────────────────────────────────────

/** ONE ₫ formatter for the page — a template that spells its home currency two
 *  ways teaches two ways. `formatMoney` is the kit's, so a table cell and a
 *  charge line cannot disagree about digit grouping. */
const money = (v: number | null) => (v == null ? "" : formatMoney(v));
/** The same notation as `Intl` options — what a numeric field PRINTS and what
 *  its parser will take back, which is one statement and not two. */
const VND: Intl.NumberFormatOptions = { style: "currency", currency: "VND" };
/** A SECOND currency, for the one band that is denominated in it. A band formats
 *  its own money (`ChargeLines.currency`), which is exactly what lets a
 *  foreign-currency charge sit on the same page as the domestic ones. */
const eur = (n: number) => `€${n.toLocaleString("en-IE", { minimumFractionDigits: 2 })}`;

type Method = "cash" | "transfer" | "card";
const METHODS: SelectOption<Method>[] = [
  { value: "cash", label: "Cash" },
  { value: "transfer", label: "Bank transfer" },
  { value: "card", label: "Card" },
];

/** Fake persistence for the inline editors — real apps await their mutation. */
function persist<T>(set: (v: T) => void) {
  return (v: T) =>
    new Promise<void>((resolve) => {
      setTimeout(() => {
        set(v);
        resolve();
      }, 350);
    });
}

/** A PICKER'S ANSWER, for a field the record stores as a string. Every picker
 *  can answer "nothing" — that is what the empty row and an emptied entry
 *  commit — so a caller whose value has no null takes the empty value for it. */
const stated = (set: (v: string) => void) => (v: string | null) => persist(set)(v ?? "");

const MOCK_PDF_URL = "data:application/pdf;base64,JVBERi0xLjQKMSAwIG9iajw8L1R5cGUvQ2F0YWxvZy9QYWdlcyAyIDAgUj4+ZW5kb2JqCjIgMCBvYmo8PC9UeXBlL1BhZ2VzL0tpZHNbMyAwIFJdL0NvdW50IDE+PmVuZG9iagozIDAgb2JqPDwvVHlwZS9QYWdlL1BhcmVudCAyIDAgUi9NZWRpYUJveFswIDAgNjEyIDc5Ml0vQ29udGVudHMgNCAwIFIvUmVzb3VyY2VzPDwvRm9udDw8L0YxIDUgMCBSPj4+Pj4+ZW5kb2JqCjQgMCBvYmo8PC9MZW5ndGggNjM+PnN0cmVhbQpCVCAvRjEgMTggVGYgNzIgNzIwIFRkIChOb3JkaWMgRnVybml0dXJlIC0gbW9jayBkb2N1bWVudCkgVGogRVQKZW5kc3RyZWFtIGVuZG9iago1IDAgb2JqPDwvVHlwZS9Gb250L1N1YnR5cGUvVHlwZTEvQmFzZUZvbnQvSGVsdmV0aWNhPj5lbmRvYmoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDA5IDAwMDAwIG4gCjAwMDAwMDAwNTIgMDAwMDAgbiAKMDAwMDAwMDEwMSAwMDAwMCBuIAowMDAwMDAwMjExIDAwMDAwIG4gCjAwMDAwMDAzMjAgMDAwMDAgbiAKdHJhaWxlcjw8L1NpemUgNi9Sb290IDEgMCBSPj4Kc3RhcnR4cmVmCjM4MQolJUVPRg==";
const MOCK_PHOTO_URL =
  "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMjAnIGhlaWdodD0nMzIwJz48cmVjdCB3aWR0aD0nMzIwJyBoZWlnaHQ9JzMyMCcgZmlsbD0nI2JmZGJmZScvPjxyZWN0IHk9JzIxMCcgd2lkdGg9JzMyMCcgaGVpZ2h0PScxMTAnIGZpbGw9JyM5M2M1ZmQnLz48Y2lyY2xlIGN4PScyNDAnIGN5PSc4MCcgcj0nNDAnIGZpbGw9JyNmZWY5YzMnLz48L3N2Zz4=";

// ── the FEES ledger — the DETAILED money view (both directions), distinct
// from Billing's invoice DOCUMENTS: every fee the record incurs or charges,
// with its party, due date, proof reference and paid state.
//
// The drill-down law for a CHILD COLLECTION inside a record: the row EXPANDS
// (`TableRow` `detail` + `expanded`), it does not open a drawer. A register
// screen's row still docks a workspace Drawer — on a list screen there is
// nowhere else for the detail to go — but here the record page IS the context
// the drawer was recreating, so docking one charged for navigation twice and
// took the surrounding rows away to show nine fields.
//
// This is also why the ledger is not simply WIDER. All nine fields as columns
// demand 946px + 112 gap + 40 gutter = 1098px against a reading column a third
// of that; over budget `table_fit` drops droppable columns by priority until
// the rest fit. Widening the register does not display VAT / Invoice no / Note
// — it drops them silently. And `note` is prose: it has no column width at any
// measure.
type FeeDirection = "charge" | "cost";
/** A picked `File` as the kit's `DisplayFile`. A real host uploads and returns
 *  the stored object; the object URL stands in for that here. */
let feeDocSeq = 0;
const asDisplayFile = (f: File): DisplayFile => ({
  id: `fee-doc-u${(feeDocSeq += 1)}`,
  filename: f.name,
  mimeType: f.type || "application/octet-stream",
  url: URL.createObjectURL(f),
});

interface Fee {
  id: string;
  name: string;
  /** charge = billed to the customer, cost = paid out to a vendor. */
  direction: FeeDirection;
  party: string;
  amount: number;
  vat: number | null;
  due: string;
  invoiceNo: string;
  /** The supplier's original, filed against THIS fee. A number is what the field
   *  claimed; these are what actually arrived, and the gap between them is the
   *  work a payables desk does. */
  docs: DisplayFile[];
  paid: boolean;
  note: string;
}
let feeSeq = 4;
const FEE_SEED: Fee[] = [
  { id: "fee_1", name: "Freight surcharge", direction: "charge", party: "Harbor Freight Lines", amount: 350_000, vat: 8, due: "", invoiceNo: "", docs: [], paid: true, note: "" },
  { id: "fee_2", name: "Trucking", direction: "cost", party: "Northline Haulage", amount: 450_000, vat: 8, due: "2026-07-02", invoiceNo: "NH-2044", docs: [{ id: "fee-doc-1", filename: "NH-2044-invoice.pdf", mimeType: "application/pdf", url: MOCK_PDF_URL }], paid: false, note: "Last-mile to the port" },
  // UNPAID with a number claimed and nothing filed — the state the status column
  // exists to surface. It was `paid: true`, which meant "Awaiting invoice" could
  // never render and the design could not be seen at all.
  { id: "fee_3", name: "Customs advance", direction: "cost", party: "Blue Anchor Brokerage", amount: 275_000, vat: null, due: "", invoiceNo: "BA-118", docs: [], paid: false, note: "" },
  // A PHOTO of an invoice, not a PDF — the case the badge exists for. A supplier
  // who sends a phone snap has not sent a tax document, and the colour says so
  // before anyone opens it. A fixture of nothing but PDFs makes the badge look
  // like decoration, because the one thing it carries never varies.
  { id: "fee_4", name: "Storage overrun", direction: "charge", party: "Harbor Freight Lines", amount: 120_000, vat: 8, due: "2026-08-02", invoiceNo: "HF-8821", docs: [{ id: "fee-doc-2", filename: "storage-invoice-photo.jpg", mimeType: "image/jpeg", url: MOCK_PHOTO_URL }], paid: false, note: "3 extra days at Central hub" },
];
// `priority` = the mobile contract: Party then Type drop first on a narrow
// container, Amount + Status survive with the identity; at the floor the rows
// STACK label-over-value — and the expansion always carries the full fee.
// THREE columns, not five — the register's grammar. A column per FACT spends
// width on separation the reader never asked for: the party belongs to the fee's
// identity and the payment state belongs to its amount, so each rides line 2 of
// the cell it qualifies. Grouping bought 246px (Party 150 + Status 96), which is
// more than the document column costs — the table gained information and lost
// two columns.
const FEE_COLUMNS: TableColumn[] = [
  { key: "fee", label: "Fee", flex: 1 },
  { key: "amount", label: "Amount", width: 104, align: "right", priority: 1 },
  { key: "invoice", label: "Invoice", width: 116, priority: 2 },
];
const feeOverdue = (f: Fee): boolean => !f.paid && f.due !== "" && new Date(f.due) < new Date();

interface Charge {
  key: string;
  label: string;
  /** The expected list price — shown as ghost text while the line is unset. */
  standard: number;
  amount: number;
  method: Method | "";
}

interface Invoice {
  key: string;
  title: string;
  charges: Charge[];
  /** Lookup code once issued to the e-invoice provider; "" = not issued. */
  ref: string;
}

const BILLING_INITIAL: Invoice[] = [
  {
    // Issued AND multi-line, which is the row that exercises the precedence: `peek` wins,
    // so its lookup link renders INSIDE the popover and the flat `reference` is ignored.
    // Storage is the mirror case (one charge, issued) and takes the flat link instead.
    key: "delivery",
    title: "Delivery",
    ref: "INV-0029",
    charges: [
      { key: "freight", label: "Freight", standard: 1_200_000, amount: 1_200_000, method: "cash" },
      { key: "insurance", label: "Insurance", standard: 250_000, amount: 0, method: "" },
    ],
  },
  {
    key: "handling",
    title: "Handling",
    ref: "",
    charges: [{ key: "handling", label: "Handling fee", standard: 150_000, amount: 150_000, method: "" }],
  },
  {
    // Seeded ISSUED, so the section renders both states at rest: the Re-issue path, the
    // band's lookup link, and the ledger's trailing `reference`. A fixture where nothing
    // has happened yet only ever exercises the first half of a flow.
    key: "storage",
    title: "Storage",
    ref: "INV-0031",
    charges: [{ key: "storage", label: "Storage fee", standard: 80_000, amount: 80_000, method: "transfer" }],
  },
];

/** A settled credit against the record — the statement's third side, and its only line. */
const CREDIT = { key: "cn-0031", label: "Credit note CN-0031", amount: 120_000, meta: "Storage waived, 3 days" };

const invoiceTotal = (inv: Invoice) => inv.charges.reduce((s, c) => s + c.amount, 0);
const missingMethods = (inv: Invoice) => inv.charges.filter((c) => c.amount > 0 && !c.method);

function InvoiceParticulars({ inv }: { inv: Invoice }) {
  return (
    <Stack gap={8} style={{ padding: 12, minWidth: 240 }}>
      <Text size="xs" color="muted">{inv.title}</Text>
      {inv.charges.map((c) => (
        <Stack key={c.key} direction="row" align="baseline" gap="none" style={{ gap: 12 }}>
          <Text size="sm" style={{ flexGrow: 1, flexShrink: 1 }}>{c.label}</Text>
          <Text size="sm" color={c.amount > 0 ? undefined : "muted"}>
            {c.amount > 0 ? formatMoney(c.amount) : "—"}
          </Text>
        </Stack>
      ))}
      {inv.ref ? (
        <Link size="xs" onPress={() => {}} accessibilityLabel={`Open invoice ${inv.ref}`}>{inv.ref}</Link>
      ) : null}
    </Stack>
  );
}

// ── the CHARGE BANDS — `ChargeLines`, the write side. One seed feeds the wide
// band and the narrow one, because the fork is a statement about the BAND's
// container and nothing else: the same data, the same handlers, two widths.
interface PricedLine {
  key: string;
  label: string;
  meta?: string;
  quantity: number | null;
  unitPrice: number | null;
}
const PRICED_SEED: PricedLine[] = [
  { key: "runs", label: "Delivery runs", meta: "Distance band 101–200 km", quantity: 45, unitPrice: 4_500 },
  { key: "cleaning", label: "Site cleaning", quantity: 1, unitPrice: 30_000 },
];
/** A line's problem, derived from the line rather than stored beside it — and
 *  seeded TRUE, so the band renders one in both forks. A warning nothing on the
 *  page can reach is a slot nobody measures. Scoped to the line the rate card
 *  actually prices, which is the same line its Ceiling verb is enabled on. */
const overCeiling = (l: PricedLine) =>
  l.key === "runs" && (l.unitPrice ?? 0) > CEILING_RATE
    ? `Above the rate card's ${money(CEILING_RATE)} ceiling`
    : undefined;
/** The rate card's ceiling — the figure the one-tap verb fills in. */
const CEILING_RATE = 4_200;
const lineAmount = (l: PricedLine) => (l.quantity ?? 0) * (l.unitPrice ?? 0);

export function TplMoney() {
  // ONE clock per render. Two rows each calling `new Date()` can land on
  // opposite sides of midnight and disagree about what "today" is.
  const now = new Date();
  const words = useLoticsLocale();
  // The countdown for any date field on this record: "2 days overdue" / "Today"
  // / "5 days left", routed to the annotation slot its urgency earns
  // (error / warning / description) — @lotics/ui/deadline owns the wording and
  // the thresholds so this screen cannot disagree with the register beside it.
  const dueAnnotation = (iso: string, open: boolean) =>
    open && iso !== "" ? deadlineAnnotation(daysUntil(new Date(iso), now), words.deadline) : {};

  // ── the fees ledger — a register whose rows EXPAND (create-then-refine: Add
  // appends a blank fee already open; every field refines in the expansion)
  const [fees, setFees] = useState<Fee[]>(FEE_SEED);
  // Which fee is expanded — ONE at a time, the caller's rule (`TableRow.expanded`
  // is controlled precisely so this is a decision and not a default). Two open
  // 380px details would push the third row off screen, and a register that can't
  // be scanned has stopped being a register.
  const [feeView, setFeeView] = useState<{ kind: "edit"; id: string } | null>(null);
  const patchFee = (id: string, p: Partial<Fee>) => setFees((prev) => prev.map((f) => (f.id === id ? { ...f, ...p } : f)));
  const addFee = () => {
    const f: Fee = { id: `fee_${(feeSeq += 1)}`, name: "", direction: "cost", party: "", amount: 0, vat: null, due: "", invoiceNo: "", docs: [], paid: false, note: "" };
    setFees((prev) => [...prev, f]);
    setFeeView({ kind: "edit", id: f.id });
  };
  const deleteFee = (f: Fee) => {
    Alert.confirm({
      title: `Remove ${f.name || "this fee"}?`,
      message: "The fee comes off the record's ledger.",
      confirmLabel: "Remove fee",
      onConfirm: () => { setFees((prev) => prev.filter((x) => x.id !== f.id)); setFeeView(null); },
    });
  };
  // The status column speaks in facts: Paid, Overdue, Due <date>, Unpaid.
  /**
   * MONEY state only — it rides under the amount it is about.
   *
   * "Awaiting docs" lived here while the document had no column of its own, and
   * it was a conflation: whether a supplier's original has arrived is not a fact
   * about the money, and putting it in the money's state meant a fee could not
   * report both at once. Now the Invoice column carries the document and this
   * carries the payment, and each says one thing.
   */
  const feeStatus = (f: Fee): { text: string; danger: boolean } =>
    f.paid ? { text: "Paid", danger: false }
      : feeOverdue(f) ? { text: "Overdue", danger: true }
        : f.due !== "" ? { text: `Due ${new Date(f.due).toLocaleDateString("en-GB", { day: "numeric", month: "short" })}`, danger: false }
          : { text: "Unpaid", danger: false };

  // The gallery is mounted only while a file is being looked at. The row's link
  // opens the fee's OWN originals — the number in that cell is what they were
  // filed against, so the preview a reader asks for by pressing it is that fee's
  // paperwork and not the record's whole pile.
  const [preview, setPreview] = useState<{ files: DisplayFile[]; index: number } | null>(null);

  // ── billing — the invoice documents
  const [invoices, setInvoices] = useState<Invoice[]>(BILLING_INITIAL);
  const [deposit, setDeposit] = useState(0);
  const [confirmIssueKey, setConfirmIssueKey] = useState<string | null>(null);
  const seq = useRef(414);

  const patchCharge = (invKey: string, chKey: string, patch: Partial<Charge>) =>
    setInvoices((prev) =>
      prev.map((inv) =>
        inv.key !== invKey ? inv : { ...inv, charges: inv.charges.map((c) => (c.key === chKey ? { ...c, ...patch } : c)) },
      ),
    );

  /** Inline-editor persistence for one charge cell. */
  const saveCharge = (invKey: string, chKey: string, patch: Partial<Charge>) =>
    new Promise<void>((resolve) => {
      setTimeout(() => {
        patchCharge(invKey, chKey, patch);
        resolve();
      }, 350);
    });

  // Resolved from the CURRENT invoices every render — the confirm dialog quotes the
  // total that will actually be billed, including a charge that landed after the press.
  const confirmIssue = invoices.find((i) => i.key === confirmIssueKey) ?? null;
  const grandTotal = invoices.reduce((sum, inv) => sum + invoiceTotal(inv), 0);
  // A charge carrying a METHOD has been paid — the statement below is derived from
  // that, not from a second "paid" flag somebody has to keep in step with it. The
  // record already knows; asking again is how the two answers start disagreeing.
  //
  // ONE list, and both the rows and the subtotal read it. Deriving them from two
  // separate predicates is how a ledger comes to disagree with itself: filter the
  // rows on `method && amount > 0` while summing on `method` alone and any charge
  // that fails only the second test lands in the total with no line to explain it.
  // The component cannot catch that — it renders the `total` it is handed.
  const receipts = invoices.flatMap((inv) =>
    inv.charges.filter((c) => c.method !== "" && c.amount > 0).map((c) => ({ inv, charge: c })),
  );
  const received = receipts.reduce((sum, r) => sum + r.charge.amount, 0);
  // Three sides now, so the total states the arithmetic rather than a difference of two:
  // what was billed, less what was credited, less what arrived.
  const outstanding = grandTotal - CREDIT.amount - received;
  // The soonest deadline still open, which is the only one a countdown can be
  // about: a band cell states ONE date, and the record is working to the nearest.
  const nextDue =
    fees
      .filter((f) => !f.paid && f.due !== "")
      .map((f) => f.due)
      .sort()[0] ?? null;
  const allMissing = invoices.flatMap(missingMethods);

  const issue = (inv: Invoice) => {
    seq.current += 1;
    const ref = `INV-2026-${String(seq.current).padStart(4, "0")}`;
    setInvoices((prev) => prev.map((x) => (x.key === inv.key ? { ...x, ref } : x)));
    setConfirmIssueKey(null);
  };

  const printReceipt = () => {
    if (allMissing.length > 0) {
      Alert.alert(
        "Missing payment method",
        `Choose how these charges were paid before printing the receipt:\n\n${allMissing.map((c) => `• ${c.label} (${formatMoney(c.amount)})`).join("\n")}`,
        [{ text: "OK" }],
      );
      return;
    }
    Alert.alert("Receipt", `Printing receipt for ${formatMoney(grandTotal)}.`, [{ text: "OK" }]);
  };

  // ── the charge bands
  const [pricedLines, setPricedLines] = useState<PricedLine[]>(PRICED_SEED);
  const patchLine = (key: string, p: Partial<PricedLine>) =>
    setPricedLines((prev) => prev.map((l) => (l.key === key ? { ...l, ...p } : l)));
  const removeLine = (key: string) => setPricedLines((prev) => prev.filter((l) => l.key !== key));
  const pricedTotal = pricedLines.reduce((s, l) => s + lineAmount(l), 0);

  const [handling, setHandling] = useState<number | null>(0);
  const [clearance, setClearance] = useState<number | null>(1_200);
  const [handlingMethod, setHandlingMethod] = useState<Method | null>(null);

  const [mixedQty, setMixedQty] = useState<number | null>(45);
  const [mixedRate, setMixedRate] = useState<number | null>(4_000);
  const [shortfall, setShortfall] = useState<number | null>(50_000);

  /** One priced band, rendered twice — see the narrow section for why. */
  const pricedBand = (
    <ChargeLines
      totalLabel="Total"
      total={pricedTotal}
      empty={<RegionState state="empty" compact message="Nothing priced yet" detail="Add a charge to price it against the rate card." />}
      /* The commit takes its OWN row at the band's end and sits on the left —
         it belongs to the band, so the band draws it rather than the page
         laying a button beside one. */
      action={
        <Button
          color="primary"
          title="Issue invoice"
          disabled={pricedTotal <= 0}
          onPress={() => Alert.alert("Issue invoice", `Issuing an invoice for ${money(pricedTotal)}.`, [{ text: "OK" }])}
        />
      }
    >
      {pricedLines.map((l) => (
        <ChargeLine
          key={l.key}
          label={l.label}
          meta={l.meta}
          quantity={l.quantity}
          unitPrice={l.unitPrice}
          onQuantityChange={(v) => patchLine(l.key, { quantity: v })}
          onUnitPriceChange={(v) => patchLine(l.key, { unitPrice: v })}
          /* BESIDE the control that fixes it, never a callout for the band —
             and it follows the row through the fork, which is why this band is
             the one rendered at both widths. */
          warning={overCeiling(l)}
          /* The rate card's ceiling, one tap, ON the field it fills — an
             InlineButton is an inner button and never stands on its own beside
             the control it acts on.
             Named for the ACT, with the figure in the accessible name: a verb
             labelled with the value it would set prints that value twice on
             every row already holding it.
             Unconditional + `disabled`, never conditional: a verb passed only when it
             has work makes the field narrower on the rows that carry it, so those rows
             stop sharing this money column with the rest. */
          unitPriceActions={
            <InlineButton
              title="Ceiling"
              accessibilityLabel={`Apply the ceiling rate of ${money(CEILING_RATE)}`}
              disabled={l.key !== "runs" || l.unitPrice === CEILING_RATE}
              onPress={() => patchLine(l.key, { unitPrice: CEILING_RATE })}
            />
          }
          /* THE ROW'S ⋯, never a bare ✕ per line. A destructive act behind a
             glyph on every row is the affordance the row-actions law rules out:
             the visible sibling is the menu, the removal is a `danger` item in
             it, and the press asks the one question the kit asks. */
          action={
            <ActionMenu
              size="sm"
              accessibilityLabel={`Actions: ${l.label}`}
              items={[
                {
                  key: "remove",
                  label: "Remove charge",
                  icon: "trash",
                  danger: true,
                  onPress: () =>
                    Alert.confirm({
                      title: `Remove ${l.label}?`,
                      message: "The charge comes off this record's total.",
                      confirmLabel: "Remove charge",
                      onConfirm: () => removeLine(l.key),
                    }),
                },
              ]}
            />
          }
        />
      ))}
    </ChargeLines>
  );

  return (
    <PageContent
      size="form"
      title="Money"
      description="Everything this record charges, costs, bills and collects."
    >
      {/* THE RECORD'S MONEY IN ONE LINE, above every section that details it.
          Four readings of one story — what it comes to, how much of that is in,
          what is left, how long there is — and each is DERIVED from the same
          arrays the sections below render, so the band cannot disagree with the
          statement it heads. On a record surface this is `RecordPage.band`;
          nothing else may state a figure the sections do not own. */}
      <MoneyBand
        cells={[
          { kind: "amount", label: "Billed", value: grandTotal, currency: "VND" },
          {
            kind: "meter",
            label: "Received",
            value: received,
            limit: grandTotal,
            alert: "under",
            currency: "VND",
          },
          {
            kind: "amount",
            label: "Outstanding",
            value: outstanding,
            currency: "VND",
            tone: outstanding > 0 ? "warning" : "default",
          },
          { kind: "countdown", label: "Next due", due: nextDue },
        ]}
      />
      <SectionStack>
        <Section>
          <SectionHeading>
            <SectionHeadingTitle description="Every fee the record incurs or charges — its party, due date and paid state.">Fees</SectionHeadingTitle>
            {/* THE SECTION'S ADD RIDES THE HEADING ROW, right edge — the one
                place it can sit that does not MOVE. Under the register it sat
                below the last row, so where a reader looks for "how do I add
                one" depended on how many there already were: past a screenful
                the verb is off-screen entirely, and on an empty list there is no
                last row to sit under, so it had to be a SECOND button inside the
                empty `RegionState`. One verb, two renderings, neither findable without
                scanning. The heading row is the section's control line — where a
                section's meta and verbs sit, with the title growing to push its
                siblings right — so the add belongs on it, in the same spot
                whether the list holds nought or forty. */}
            <Button title="Add fee" color="primary" onPress={addFee} />
          </SectionHeading>
          <TotalsLine
            items={[
              { label: "collected", value: fees.filter((f) => f.direction === "charge" && f.paid).reduce((s, f) => s + f.amount, 0), format: "currency", compact: true },
              { label: "to collect", value: fees.filter((f) => f.direction === "charge" && !f.paid).reduce((s, f) => s + f.amount, 0), format: "currency", compact: true },
              { label: "to pay", value: fees.filter((f) => f.direction === "cost" && !f.paid).reduce((s, f) => s + f.amount, 0), format: "currency", compact: true, tone: fees.some((f) => f.direction === "cost" && feeOverdue(f)) ? "warning" : undefined },
            ]}
          />
          {/* The empty state takes NO `action` — the heading's Add is the only
              one, and it is already on screen. Repeating the section's verb here
              puts two buttons for one act in view at once, and makes the add MOVE
              the moment the first row lands. The empty state says what the
              section holds; the heading says how to fill it. */}
          {fees.length === 0 ? (
            <RegionState state="empty" icon="receipt" message="No fees on this record" detail="Add the first charge or cost — it expands ready to fill in." />
          ) : (
            <Table columns={FEE_COLUMNS}>
              {fees.map((f) => {
                const st = feeStatus(f);
                return (
                  <TableRow
                    key={f.id}
                    /* TOGGLE, unlike a peek's open-never-toggle: a popover
                       fights its own outside-press dismissal, an expansion has
                       none, so the row that opened it must also close it. */
                    onPress={() => setFeeView((cur) => (cur?.id === f.id ? null : { kind: "edit", id: f.id }))}
                    expanded={feeView?.id === f.id}
                    /* `— details`, the peek's convention: the door is a disclosure,
                       not a trip, so "Open" would name the wrong act. `RowFocusEntry`
                       carries the state as aria-expanded. */
                    accessibilityLabel={`${f.name || "New fee"} — details`}
                    /* NO `selected`: `TableRow` already derives it —
                       `selected={selected || showDetail}` — so the expanded row
                       wears the wash without being told, and passing it here
                       would only restate the kit. */
                    detail={
                      /* The detail carries ALL NINE fields, including the three the
                         row already shows — because the row's cells are read-only
                         Text, and because tier 2 DROPS columns on a narrow
                         container. `table_fit` licenses that drop on the promise
                         that "the door opens the record where dropped values
                         live"; the expansion is now that door, so anything it
                         omitted would be unreachable, not merely inconvenient.
                         Table does not expose its fit result, so this cannot be
                         conditional — nor should it be. */
                      /* 24, not the 12 this file uses for intra-block gaps: the
                         field grid's own row gap is 16, so
                         anything separating a DIFFERENT block has to beat it or
                         the verb below reads as one more field. Same rung logic
                         `DetailRow` uses for its stacked rows. */
                      <Stack gap={24}>
                        {/* 150, the SAME width every field grid on this page uses.
                            The page's invariant is one pixel-aligned VALUE column,
                            and a `Table`'s detail is inset by `ROW_GUTTER` — which
                            is 0 — so this grid starts at the same x as Billing's
                            and takes the same label width. In a grid that IS
                            inset, the label width is 150 − inset. */}
                        <DetailTable labelWidth={150}>
                          <DetailRow label="Fee">
                            <TextInput value={f.name} onSave={persist((v: string) => patchFee(f.id, { name: v }))} placeholder="Name the fee…" accessibilityLabel="Fee name" />
                          </DetailRow>
                          <DetailRow label="Type" description="Charge — billed to the customer; Cost — paid to a vendor">
                            <Select
                              value={f.direction}
                              options={[{ value: "charge", label: "Charge" }, { value: "cost", label: "Cost" }]}
                              onSave={persist((v: FeeDirection | null) => patchFee(f.id, { direction: v ?? "charge" }))}
                              accessibilityLabel="Fee type"
                            />
                          </DetailRow>
                          <DetailRow label="Party">
                            <TextInput value={f.party} onSave={persist((v: string) => patchFee(f.id, { party: v }))} placeholder="Who pays, or is paid…" accessibilityLabel="Party" />
                          </DetailRow>
                          <DetailRow label="Amount">
                            <NumberInput value={f.amount || null} onSave={persist((v: number | null) => patchFee(f.id, { amount: v ?? 0 }))} min={0} format={VND} placeholder="—" accessibilityLabel="Amount" />
                          </DetailRow>
                          <DetailRow label="VAT (%)">
                            <NumberInput value={f.vat} onSave={persist((v: number | null) => patchFee(f.id, { vat: v }))} min={0} placeholder="—" accessibilityLabel="VAT percent" />
                          </DetailRow>
                          <DetailRow label="Due" {...dueAnnotation(f.due, !f.paid)}>
                            <DatePicker value={f.due} onSave={stated((v: string) => patchFee(f.id, { due: v }))} locale="en-US" placeholder="Set a due date…" accessibilityLabel="Fee due date" />
                          </DetailRow>
                          <DetailRow label="Invoice no" description="The party's invoice or debit note">
                            <TextInput value={f.invoiceNo} onSave={persist((v: string) => patchFee(f.id, { invoiceNo: v }))} placeholder="Add the reference…" accessibilityLabel="Invoice number" />
                          </DetailRow>
                          {/* THE FILE, ON THE ROW THAT OWES IT — the shape a
                              payables desk actually works in: a table of
                              charges, each row expanding to the document that
                              justifies it. The register cell above can only
                              MARK whether a document is held; the managing
                              happens here.

                              `multiple`, because a supplier invoice arrives as
                              one PDF or as three scanned pages, and the second
                              page must not replace the first.

                              `blockedReason` when no number has been claimed:
                              there is nothing to file the scan AGAINST yet, and
                              a sentence naming that act beats a disabled button
                              that only says no. */}
                          <DetailRow label="Supplier original">
                            <InlineFiles
                              files={f.docs}
                              onAdd={(picked) => patchFee(f.id, { docs: [...f.docs, ...picked.map(asDisplayFile)] })}
                              onRemove={(doc) => patchFee(f.id, { docs: f.docs.filter((d) => d.id !== doc.id) })}
                              addLabel="Attach original"
                              addMoreLabel="Add page"
                              accept="application/pdf,image/*"
                              blockedReason={f.invoiceNo.trim() === "" ? "Enter the invoice number first — the scan is filed against it." : undefined}
                            />
                          </DetailRow>
                          <DetailRow label="Status">
                            <Select
                              value={f.paid ? "paid" : "unpaid"}
                              options={[{ value: "unpaid", label: "Unpaid" }, { value: "paid", label: "Paid" }]}
                              onSave={persist((v: string | null) => patchFee(f.id, { paid: v === "paid" }))}
                              accessibilityLabel="Paid status"
                            />
                          </DetailRow>
                          <DetailRow label="Note">
                            <TextInput value={f.note} onSave={persist((v: string) => patchFee(f.id, { note: v }))} placeholder="Add a note…" accessibilityLabel="Fee note" />
                          </DetailRow>
                        </DetailTable>
                        {/* The destructive verb, LEFT — the peek footer's convention.
                            Solid `danger` per composition rule 9; no trash glyph,
                            because "Remove fee" already names the object the icon
                            was only decorating.

                            NO Divider. Every hairline a `Table` draws is full-bleed,
                            so one inset by ROW_GUTTER puts two hairline lengths in
                            the same vertical run — and it repeats what the expanded
                            row's wash already says. The row wrapper IS required: a
                            `Button` alone in a column View stretches full width. */}
                        <Stack direction="row" gap="none">
                          <Button
                            title="Remove fee"
                            color="danger"
                            onPress={() =>
                              Alert.confirm({
                                title: `Remove ${f.name}?`,
                                message: "The fee and its filed originals go with it.",
                                confirmLabel: "Remove fee",
                                onConfirm: () => deleteFee(f),
                              })
                            }
                          />
                        </Stack>
                      </Stack>
                    }
                  >
                    {/* IDENTITY over its PARTY — `tpl_item_list`'s customer cell
                        exactly: the thing you scan for on line 1, what qualifies
                        it on line 2, in one cell rather than two columns. */}
                    <TableCell>
                      <Stack gap="none" style={{ gap: 2 }}>
                        <Text size="sm" weight="medium" leading="tight" lines={1}>{f.name || "—"}</Text>
                        {/* Body size: the subject carries `medium`, which is what
                            makes this a pair rather than two peers. */}
                        <Text size="sm" color="muted" leading="tight" lines={1}>
                          {f.party || (f.direction === "charge" ? "Charge" : "Cost")}
                        </Text>
                      </Stack>
                    </TableCell>
                    {/* AMOUNT over its PAYMENT state — the register's fee cell,
                        same stack, same rungs. The state qualifies the number it
                        sits under, so it needs no column and no repeated label. */}
                    <TableCell>
                      <Stack gap="none" align="end" style={{ gap: 2 }}>
                        <Text size="sm" lines={1}>{formatMoney(f.amount)}</Text>
                        <Text size="xs" lines={1} color={st.danger ? "danger" : "muted"}>{st.text}</Text>
                      </Stack>
                    </TableCell>
                    {/* THE DOCUMENT, with a column of its own at last.
                        Held: a clip + the number, pressable to preview. Claimed
                        but not arrived: the number in WARNING tone — the fee
                        cannot be paid, and that now reads in the column the fact
                        belongs to instead of borrowing the money's state. Never
                        claimed (paid in cash on the spot): an em dash, because nothing is
                        owed and a permanent warning on every such row trains the
                        eye straight past the column. */}
                    <TableCell>
                      {f.invoiceNo.trim() === "" ? (
                        <Text size="sm" color="muted">—</Text>
                      ) : f.docs.length === 0 ? (
                        <Text size="sm" color="muted" lines={1}>{f.invoiceNo}</Text>
                      ) : (
                        /* BUILD YOUR OWN PRESSABLE: `Text` substitutes its
                           element, so a `<button>` here arrives already reset
                           (no UA ground, border or face) and already ringed on
                           `:focus-visible` — which is what a bare press target
                           has to have and what a raw `<button>` of your own
                           would owe its own stylesheet. What it does NOT arrive
                           with is the PRESS CLAIM: a kit control stops its own
                           press (`docs/accessibility.md` § Focus & tab order)
                           and a hand-rolled one has to, or this press opens the
                           preview AND expands the row under it — which
                           re-renders the trigger away, so closing the overlay
                           drops focus to `<body>` instead of returning it. */
                        <Text
                          render={
                            <button
                              type="button"
                              onClick={(event) => {
                                event.stopPropagation();
                                setPreview({ files: f.docs, index: 0 });
                              }}
                            />
                          }
                          aria-label={`Open invoice ${f.invoiceNo}`}
                          style={{ display: "flex", flexDirection: "row", alignItems: "center", gap: 6 }}
                        >
                          <FileBadge mimeType={f.docs[0].mimeType} size={22} />
                          <TextLink size="sm">{f.invoiceNo}</TextLink>
                        </Text>
                      )}
                    </TableCell>
                  </TableRow>
                );
              })}
            </Table>
          )}
        </Section>

        {/* BILLING — invoice documents on the record, in the inline vocabulary.
            The issue action lives at each band's end. In `tpl_record` a
            record-level premise (no customer, no valid tax ID) also reads here
            as ONE section-scoped Callout, because the action-gating law is: a
            not-ready CTA is DISABLED and a PROBLEM reads as a co-located
            Callout at its scope, once. This page holds no customer, so the only
            problems it can state are band-local — and those ride the CHARGE ROW
            that has them (`warning` on the line missing its method), which is
            both smaller than a callout and more precise than one: it names the
            offender instead of counting offenders. Never prose beside a CTA. */}
        <Section>
          <SectionHeading>
            <SectionHeadingTitle description="Each invoice owns its charge lines — a charge never lives apart from the document it bills on.">Billing</SectionHeadingTitle>
          </SectionHeading>

          {/* EVERYTHING VISIBLE, and the chrome is what shrinks.
              Three attempts landed here. Inline BANDS were "spread" — but the
              spread was never the data: four charge lines across three invoices
              is nothing. Each band carried a `SubsectionHeading`, its own
              callout and its own action row, so the CHROME was three times the
              content. A register then hid those four lines behind three
              expansions, which trades a real fault for a worse one: you can no
              longer see what you are paying for.
              So the lines all stay, and each invoice costs ONE line of chrome —
              its name, its total, its act. No heading rung, no band callout, no
              separate action row. */}
          <SubsectionStack>
            {invoices.map((inv) => {
              const missing = missingMethods(inv);
              const total = invoiceTotal(inv);
              const ready = total > 0 && missing.length === 0;
              return (
                <Subsection key={inv.key}>
                  {/* the invoice's ONE line of chrome: what it is, what it comes
                      to, and its reference once issued. No indent under it — the
                      lead line's weight and its total already mark the group, and
                      the `SubsectionStack` beat separates one from the next, so an
                      indent would only push every charge off the page's left edge
                      for nothing. */}
                  <Stack direction="row" align="center" gap="none" style={{ gap: 12 }}>
                    <Text size="sm" weight="medium" style={{ flex: 1 }} lines={1}>{inv.title}</Text>
                    <Text size="sm" color={total > 0 ? "default" : "muted"}>{total > 0 ? money(total) : "—"}</Text>
                    {/* HELD OPEN whether or not this invoice has been issued.
                        The reference is a trailing verb, and a trailing verb
                        that shows on some rows and not others drags the figure
                        beside it: three invoice totals then sit on three edges
                        and stop sharing the column the `Ledger` below closes.
                        Same law as the fixed action slot in `ChargeLines`. */}
                    <Stack align="start" gap="none" style={{ width: 64, flexShrink: 0 }}>
                      {inv.ref ? (
                        <Link size="xs" onPress={() => {}} accessibilityLabel={`Open invoice ${inv.ref}`}>{inv.ref}</Link>
                      ) : null}
                    </Stack>
                  </Stack>
                  <DetailTable labelWidth={150} minValueWidth={320}>
                    {inv.charges.map((c) => (
                      <DetailRow
                        key={c.key}
                        label={c.label}
                        warning={c.amount > 0 && !c.method ? "Choose how this was paid" : undefined}
                      >
                        <Stack direction="row" align="center" wrap gap="none" style={{ columnGap: 8, rowGap: 4 }}>
                          <Box style={{ flexGrow: 1, flexBasis: 150 }}>
                            <NumberInput
                              value={c.amount || null}
                              onSave={(v) => saveCharge(inv.key, c.key, { amount: v ?? 0 })}
                              min={0}
                              format={VND}
                              placeholder="—"
                              accessibilityLabel={`Amount for ${c.label}`}
                              /* The list price, one tap, ON the field it fills —
                                 the same placement `ChargeLines` uses, because a
                                 verb belongs to the control it acts on wherever
                                 that control sits. */
                              actions={
                                <InlineButton
                                  title={money(c.standard)}
                                  accessibilityLabel={`Use the standard ${c.label} price`}
                                  disabled={c.amount > 0 || c.standard <= 0}
                                  onPress={() => saveCharge(inv.key, c.key, { amount: c.standard })}
                                />
                              }
                            />
                          </Box>
                          <Box style={{ flexGrow: 1, flexBasis: 140, maxWidth: 160 }}>
                            <Select
                              value={c.method === "" ? null : c.method}
                              onSave={(m) => saveCharge(inv.key, c.key, { method: m ?? "" })}
                              options={METHODS}
                              placeholder="How paid…"
                              disabled={c.amount <= 0}
                              accessibilityLabel={`Payment method for ${c.label}`}
                            />
                          </Box>
                        </Stack>
                      </DetailRow>
                    ))}
                    {/* AFTER the lines it bills — a committing act goes where its
                        effect lands, which is the end of what it commits, never
                        above it. On the control column like every other CTA on
                        the page (the form-action alignment law). */}
                    <DetailRow label="">
                      <Stack direction="row" gap="none">
                        <Button
                          title={inv.ref ? "Re-issue" : "Issue invoice"}
                          color={inv.ref ? "secondary" : "primary"}
                          disabled={!ready}
                          onPress={() => setConfirmIssueKey(inv.key)}
                        />
                      </Stack>
                    </DetailRow>
                  </DetailTable>
                </Subsection>
              );
            })}
          </SubsectionStack>

          {/* THE CLOSING STATEMENT — `Ledger`, the money grammar, and the answer to
              the one question the bands above cannot give: what does this record come
              to, and how much of it has arrived. Each invoice states its own total on
              its lead line, but three totals down the page are three facts the reader
              has to add up, and "is anything still owed" was nowhere on the section.

              It is a STATEMENT, not another band: no `Subsection`, no heading rung. It
              closes the invoices, so it sits directly under them.

              THREE sides, which is what makes the total state arithmetic rather than a
              difference: billed, less credited, less received. Money coming back is
              NEGATIVE (the component renders "− ") and `success`-toned, because a
              receipt and a credit are both the good outcome; `zeroLabel` gives a settled
              record "Paid in full" instead of a proud zero.

              The DEPOSIT is deliberately absent. It is refundable — never part of the
              total to collect — so folding it in would make the closing figure answer a
              different question than the one it is labelled with. A ledger earns trust
              by summing exactly what its label claims.

              A row opens where there is something to open, and the two ways are not
              interchangeable. `peek` floats an invoice's PARTICULARS — the charges behind
              its one figure — and the lookup link lives INSIDE that popover, never beside
              the trigger, because a button inside a button is invalid. `reference` is the
              flat alternative for a row with nothing to expand: one charge IS its own
              particulars, so Storage carries a trailing link instead of a door.

              The `Adjustments` group holds ONE row and therefore no `total`: a sum over a
              single line states the same fact twice, at two weights. That is the honest
              fixture rather than a tidy one — real groups are built from data, so some
              arrive with one row. */}
          <Ledger formatValue={money}>
            <LedgerGroup label="Invoiced" total={grandTotal}>
              {invoices.map((inv) => {
                /* NO meta on this side. It briefly carried "awaiting payment method",
                   and that was `meta` doing two jobs: on the Received rows it holds a
                   neutral QUALIFIER (how the money arrived), here it held a PROBLEM.
                   Two unlike things in one treatment is what makes a caption read as
                   inconsistent — the size was never the fault.
                   The problem also had a home already: the charge row above carries
                   `warning="Choose how this was paid"`, on the line with the editor that
                   fixes it. A statement's job is the arithmetic, and the arithmetic
                   already says it — `Outstanding` IS the unpaid money. Saying it again in
                   weaker words adds a second voice for one fact. */
                /* A door where there are PARTICULARS, and the count that decides it is the
                   charges, not the priced ones. An invoice whose second line is unpriced is
                   exactly the row whose figure looks too small for it, which is the question
                   the popover answers — gating on `amount > 0` would hide the door precisely
                   when it is most useful. */
                return (
                  <LedgerRow
                    key={inv.key}
                    label={inv.title}
                    value={invoiceTotal(inv)}
                    peek={inv.charges.length > 1 ? <InvoiceParticulars inv={inv} /> : undefined}
                    reference={inv.ref ? { label: inv.ref, onPress: () => {} } : undefined}
                  />
                );
              })}
            </LedgerGroup>
            <LedgerGroup label="Adjustments">
              <LedgerRow label={CREDIT.label} meta={CREDIT.meta} value={-CREDIT.amount} tone="success" />
            </LedgerGroup>
            {received > 0 ? (
              <LedgerGroup label="Received" total={-received}>
                {receipts.map(({ inv, charge }) => (
                  <LedgerRow
                    key={`${inv.key}-${charge.key}`}
                    label={charge.label}
                    meta={METHODS.find((m) => m.value === charge.method)?.label}
                    value={-charge.amount}
                    tone="success"
                  />
                ))}
              </LedgerGroup>
            ) : null}
            <LedgerTotal totalLabel="Outstanding" value={outstanding} tone={outstanding > 0 ? "danger" : "default"} zeroLabel="Paid in full" />
          </Ledger>

          {/* ONE action row for the section, on the control column. The deposit
              is a field of the record, not a band of its own — its receipt is a
              second act on the same row. */}
          <DetailTable labelWidth={150} minValueWidth={320}>
            <DetailRow label="Deposit" description="Refundable — never part of the total to collect">
              <NumberInput
                value={deposit || null}
                onSave={persist((v: number | null) => setDeposit(v ?? 0))}
                min={0}
                format={VND}
                placeholder="—"
                accessibilityLabel="Deposit amount"
                actions={<InlineButton title="Receipt" accessibilityLabel="Deposit receipt" disabled={deposit <= 0} onPress={() => Alert.alert("Deposit receipt", `Printing deposit receipt for ${formatMoney(deposit)}.`, [{ text: "OK" }])} />}
              />
            </DetailRow>
            <DetailRow label="">
              <Stack direction="row" gap="none">
                <Button title="Print receipt" color="primary" disabled={grandTotal <= 0} onPress={printReceipt} />
              </Stack>
            </DetailRow>
          </DetailTable>
        </Section>

        <Section>
          <SectionHeading>
            <SectionHeadingTitle description="Quantity × unit price derives the amount, and the amount is never typed. The arithmetic reads across one line and ends at the amount: hang the derived figure on a second line and every row doubles in height while the answer lands in no column, so the total below closes nothing.">
              Priced lines
            </SectionHeadingTitle>
          </SectionHeading>
          {/* `unitPriceActions` puts the standard rate one tap away, BESIDE the
              field it fills — inside, the verb eats the field's width and the
              figure slides left, so a row with a one-tap rate and a row without
              stop sharing a column. */}
          {pricedBand}
        </Section>

        <Section>
          <SectionHeading>
            <SectionHeadingTitle description="Omit the quantity and unit price and the AMOUNT becomes the editable figure — a fee agreed as one number rather than computed from a rate. A line's problem sits beside the control that fixes it, never as a callout for the whole band.">
              Flat charges
            </SectionHeadingTitle>
          </SectionHeading>
          {/* `extra` carries a second control that belongs to the charge itself
              (how it was paid), so it rides the charge's own line instead of
              living in a separate table.

              A band formats its own money: this one is denominated in euro while
              every other band on the page is in ₫, and neither has to know about
              the other. */}
          <ChargeLines
            totalLabel="Invoice total"
            total={(handling ?? 0) + (clearance ?? 0)}
            currency="EUR"
            action={
              <Button
                color="primary"
                title="Issue invoice"
                disabled={!handlingMethod}
                onPress={() => Alert.alert("Issue invoice", `Issuing an invoice for ${eur((handling ?? 0) + (clearance ?? 0))}.`, [{ text: "OK" }])}
              />
            }
          >
            <ChargeLine
              label="Handling"
              amount={handling}
              onAmountChange={setHandling}
              amountActions={
                <InlineButton
                  title={eur(250)}
                  accessibilityLabel="Use the standard handling price"
                  disabled={(handling ?? 0) > 0}
                  onPress={() => setHandling(250)}
                />
              }
              warning={(handling ?? 0) > 0 && !handlingMethod ? "Choose how this was paid" : undefined}
              extra={
                <Select
                  value={handlingMethod}
                  onSave={setHandlingMethod}
                  options={METHODS}
                  placeholder="How paid…"
                  disabled={(handling ?? 0) <= 0}
                  accessibilityLabel="Payment method for handling"
                />
              }
            />
            <ChargeLine label="Customs clearance" amount={clearance} onAmountChange={setClearance} />
          </ChargeLines>
        </Section>

        <Section>
          <SectionHeading>
            <SectionHeadingTitle description="A band mixing a priced line with a flat one still lands every figure on ONE amount column, which is the whole reason the two shapes share a component rather than each app inventing its own row.">
              Mixed kinds
            </SectionHeadingTitle>
          </SectionHeading>
          <ChargeLines totalLabel="Total" total={(mixedQty ?? 0) * (mixedRate ?? 0) + (shortfall ?? 0)}>
            <ChargeLine label="Delivery runs" quantity={mixedQty} unitPrice={mixedRate} onQuantityChange={setMixedQty} onUnitPriceChange={setMixedRate} />
            <ChargeLine label="Shortfall recovered" amount={shortfall} onAmountChange={setShortfall} />
          </ChargeLines>
        </Section>

        {/* ITS OWN SECTION, not a second band under the one above. A band closes
            on its total, so the next band's first line arriving 8px under that
            total reads as another charge in the same band — two bands stacked
            inside one heading have nothing between them that says where one
            stops. The section beat and the heading are what separate them. */}
        <Section>
          <SectionHeading>
            <SectionHeadingTitle description="Locked turns the editors into values once the money is collected — the band stops being a form and becomes the record of what was charged. Every verb goes with them: a caller keeps passing the same props, and the band draws none of them.">
              Settled
            </SectionHeadingTitle>
          </SectionHeading>
          {/* The verbs are passed EXACTLY as the editable band passes them, which
              is what a real caller does — the same JSX renders a charge before and
              after the money is collected. The BAND is what decides they are not
              drawn, so this section is also the check on that: a verb surviving
              here is a control acting on a figure nobody can change, and a
              disabled one repeating the value beside it prints the same number
              twice on one line. */}
          <ChargeLines totalLabel="Collected" total={190_000}>
            <ChargeLine
              label="Delivery runs"
              quantity={40}
              unitPrice={4_000}
              locked
              unitPriceActions={<InlineButton title={money(CEILING_RATE)} accessibilityLabel="Apply the ceiling rate" disabled onPress={() => {}} />}
              action={
                <ActionMenu
                  size="sm"
                  accessibilityLabel="Actions: Delivery runs"
                  items={[{ key: "remove", label: "Remove charge", icon: "trash", danger: true, onPress: () => {} }]}
                />
              }
            />
            <ChargeLine
              label="Site cleaning"
              quantity={1}
              unitPrice={30_000}
              locked
              unitPriceActions={<InlineButton title={money(CEILING_RATE)} accessibilityLabel="Apply the ceiling rate" disabled onPress={() => {}} />}
              action={
                <ActionMenu
                  size="sm"
                  accessibilityLabel="Actions: Site cleaning"
                  items={[{ key: "remove", label: "Remove charge", icon: "trash", danger: true, onPress: () => {} }]}
                />
              }
            />
          </ChargeLines>
        </Section>

        <Section>
          <SectionHeading>
            <SectionHeadingTitle description="An empty band is a real state, not an error: a record that has not been priced. The total still closes the column, so the shape a reader learns does not change the moment there is data.">
              Nothing priced yet
            </SectionHeadingTitle>
          </SectionHeading>
          <ChargeLines
            totalLabel="Total"
            total={0}
            empty={<RegionState state="empty" compact message="Nothing charged on this record" detail="Add the first charge to price it against the rate card." />}
          />
        </Section>

        <Section>
          <SectionHeading>
            <SectionHeadingTitle description="Below the band's fork width the name takes its own line and the arithmetic sits under it, still ending on the amount column. That is a two-line row ON PURPOSE, which is a different thing from a derived value that fell off the end of a one-line row — the tell is that the amounts still share an edge with the total.">
              The narrow fork
            </SectionHeadingTitle>
          </SectionHeading>
          {/* The fork is measured on the BAND's own container, never the window:
              this shape lives in drawers as often as on pages. Which is why the
              box below is a fixed 360 — it is the SAME band as the priced
              section above, same state, same handlers, rendered in a narrower
              container. Edit either and both move. */}
          <Box style={{ width: 360 }}>{pricedBand}</Box>
        </Section>
      </SectionStack>

      {/* issuing an e-invoice is irreversible — confirm in a Dialog */}
      <Dialog width={460} open={confirmIssue !== null} onOpenChange={(o) => { if (!o) setConfirmIssueKey(null); }}>
        <DialogHeader>
          <DialogHeaderTitle>{confirmIssue?.ref ? "Re-issue invoice?" : "Issue e-invoice?"}</DialogHeaderTitle>
        </DialogHeader>
        <Box style={{ padding: "12px 24px" }}>
          <Callout tone="warning">
            <CalloutText>
              {confirmIssue
                ? confirmIssue.ref
                  ? `Re-issue "${confirmIssue.title}" (${formatMoney(invoiceTotal(confirmIssue))}) with the current charges. A NEW lookup code replaces ${confirmIssue.ref}; this can't be undone.`
                  : `Issue a real e-invoice for "${confirmIssue.title}" (${formatMoney(invoiceTotal(confirmIssue))}) to the provider. This writes a lookup code to the record and can't be undone.`
                : ""}
            </CalloutText>
          </Callout>
        </Box>
        <DialogFooter>
          <Button title="Cancel" color="secondary" onPress={() => setConfirmIssueKey(null)} />
          <Button title="Issue" color="primary" onPress={() => confirmIssue && issue(confirmIssue)} />
        </DialogFooter>
      </Dialog>

      {/* Mounted only while open — its per-file hooks want a stable list. */}
      {preview ? (
        <FileGalleryDialog
          files={preview.files}
          activeIndex={preview.index}
          onIndexChange={(i) => setPreview((p) => (i == null || !p ? null : { ...p, index: i }))}
        />
      ) : null}
    </PageContent>
  );
}