/** THE canonical register — search, filters, a table, a drawer onto one row. */
import { useEffect, useState, useRef } from "react";
import { Toolbar } from "@base-ui/react/toolbar";
import type { UIMessagePart, UIDataTypes, UITools } from "ai";
import { Text } from "@lotics/ui/text";
import { colors, solid, type ColorName } from "@lotics/ui/colors";
import { ActionMenu, type ActionMenuItem } from "@lotics/ui/action_menu";
import { Alert } from "@lotics/ui/alert";
import { Avatar } from "@lotics/ui/avatar";
import { Status } from "@lotics/ui/status";
import { Box } from "@lotics/ui/box";
import { Button } from "@lotics/ui/button";
import { Checkbox } from "@lotics/ui/checkbox";
import { DetailRow, DetailTable } from "@lotics/ui/detail_row";
import { Divider } from "@lotics/ui/divider";
import { Drawer, DrawerScrollArea, DrawerFooter } from "@lotics/ui/drawer";
import { RegionState } from "@lotics/ui/region_state";
import { SelectionBar } from "@lotics/ui/selection_bar";
import { FormField } from "@lotics/ui/form_field";
import { Icon, type IconName } from "@lotics/ui/icon";
import { IconButton } from "@lotics/ui/icon_button";
import { CommentsButton } from "@lotics/ui/comments_button";
import { CopyButton } from "@lotics/ui/copy_button";
import { ListItem } from "@lotics/ui/list_item";
import { TplRecord } from "./tpl_record";
import { Screen, ScreenRouter, useScreenRouter } from "@lotics/ui/screen_router";
import { TotalsLine } from "@lotics/ui/totals_line";
import { NumberInput } from "@lotics/ui/number_input";
import { Pagination } from "@lotics/ui/pagination";
import { Table, TableRow, TableCell, type TableColumn } from "@lotics/ui/table";
import { Select } from "@lotics/ui/select";
import { Stack } from "@lotics/ui/stack";
import { FilterBand } from "@lotics/ui/filter_band";
import { FilterChip, selectSummary } from "@lotics/ui/filter_chip";
import type { ColumnFilterValue } from "@lotics/ui/column_filter";
import { OptionList } from "@lotics/ui/option_list";
import { cycleSort, sortBy, type SortState } from "@lotics/ui/sort_header";
import { Combobox, ComboboxInput, ComboboxContent } from "@lotics/ui/combobox";
import { type SelectOption } from "@lotics/ui/select";
import { formatMoney } from "@lotics/ui/format_money";

/** The register's money, stated once — a numeric field's `format` prints AND parses. */
const MONEY: Intl.NumberFormatOptions = { style: "currency", currency: "VND" };
import { DatePicker } from "@lotics/ui/date_picker";
import { MemberSelect, type MemberSelectMember } from "@lotics/ui/member_select";
import { FileThumbnailGrid } from "@lotics/ui/thumbnail_grid";
import { Dialog, DialogFooter, DialogHeader, DialogHeaderTitle, DialogScrollArea } from "@lotics/ui/dialog";
import { AgentRun, AgentRunDialog, AgentRunActions, type AgentRunLike, type AgentRunQuestion } from "@lotics/ui/agent_run";
import { ResultHeader } from "@lotics/ui/result_header";
import { ConfidenceCallout } from "@lotics/ui/confidence_callout";
import { PressableRow } from "@lotics/ui/pressable_row";
import { FileDropzone } from "@lotics/ui/file_dropzone";
import { FileDropTarget } from "@lotics/ui/file_drop_target";
import { TextInput } from "@lotics/ui/text_input";
import type { DisplayFile } from "@lotics/ui/file_thumbnail";
import { InlineFiles } from "@lotics/ui/inline_files";
import { useSelection } from "@lotics/ui/use_selection";
import { DiffMark } from "@lotics/ui/diff_mark";
import { useChangeSet } from "@lotics/ui/use_change_set";

// ─────────────────────────────────────────────────────────────────────────────
// Template, Register — THE canonical register, and the ONE work-execution list
// shape. A flat, paginated, SELECTABLE list of records: one toolbar row (search +
// consolidated filters LEFT, New CTA RIGHT), a light TotalsLine of the filtered
// view, a sortable register whose rows are separated by their own height and the
// hover wash rather than by a rule, where every row has a leading
// checkbox (a row that can't take the bulk action — here an "Awaiting docs" case —
// gets a DISABLED one), a per-row PRINT action button, and a ⋯ overflow (press the
// row = the sequenced workspace Drawer), a select-all band, footer totals +
// Pagination, a SelectionBar for the bulk action over the ticked rows. The
// example is a documents-workflow register, but this one shape subsumes the old
// approvals / dispatch / batch / run screens — register, per-row action, gated
// selection, and act-on-many all in one.
// ─────────────────────────────────────────────────────────────────────────────

// The customer book the new-case form searches — find-or-create (pick an existing
// customer or coin a new one) instead of typing a raw name that risks a duplicate.
// The customer book. The import's preview asks it whether each drafted record's
// customer already exists, so the two named in `PROPOSED_BY_CUSTOMER` that the
// wizard's own question calls known ("Blue Harbor Foods isn't in the customer
// book yet" — implying the other two are) have to actually BE here. They were
// not, and the old receipt hid it by hardcoding the one new name instead of
// asking the book; every drafted record now reads as a new customer the moment
// anything checks. The fixture is the source, so the source has to agree.
const CUSTOMER_OPTIONS: SelectOption[] = [
  "Northwind Packaging", "Crestline Foods", "Atlas Components", "Summit Logistics",
  "Michael Torres", "Anna Whitfield", "Robert Hayes", "Karen Mitchell",
  "Meridian Trading Co.", "Northgate Textiles",
].map((name) => ({ value: name, label: name }));

// The assignable roster — an app feeds `useMembers()` here.
const MEMBERS: MemberSelectMember[] = [
  { id: "m1", name: "Sarah Chen" },
  { id: "m2", name: "David Park" },
  { id: "m3", name: "Maria Lopez" },
  { id: "m4", name: "James Walker" },
];
const memberIdOf = (name: string) => MEMBERS.find((m) => m.name === name)?.id ?? null;

let fileSeq = 0;
const toDisplayFiles = (files: File[]): DisplayFile[] =>
  files.map((f) => ({ id: `f_${(fileSeq += 1)}`, filename: f.name, mimeType: f.type || "application/octet-stream", url: URL.createObjectURL(f) }));

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

/** 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 ?? "");

/** "02/06" (dd/MM in the register) → the ISO date the pickers edit. */
const isoReceived = (ddmm: string) => {
  const [d, m] = ddmm.split("/");
  return `2026-${m}-${d}`;
};


type TrangThai = "dangxuly" | "chobosung" | "hoantat";
type Tab = "all" | TrangThai;

const TRANG_THAI: Record<TrangThai, { label: string; color: ColorName; doc: { title: string; icon: IconName } }> = {
  dangxuly: { label: "Processing", color: "blue", doc: { title: "Print receipt", icon: "file-text" } },
  chobosung: { label: "Awaiting docs", color: "amber", doc: { title: "Print docs request", icon: "file-text" } },
  hoantat: { label: "Complete", color: "emerald", doc: { title: "Print result", icon: "file-down" } },
};

interface HoSo {
  ma: string;
  /** How many comments the record carries — surfaced on the row so a thread is
   *  discoverable from the book rather than only after opening. */
  binhLuan: number;
  khach: string;
  dienThoai: string;
  trangThai: TrangThai;
  phi: number;
  daThu: boolean;
  ngayThu?: string;
  ngayNhan: string;
  phuTrach: string;
}

const HO_SO: HoSo[] = [
  { ma: "RC-2026-0041", binhLuan: 2, khach: "Michael Torres", dienThoai: "(555) 384-7560", trangThai: "dangxuly", phi: 2_500_000, daThu: true, ngayThu: "03/06", ngayNhan: "02/06", phuTrach: "Sarah Chen" },
  { ma: "RC-2026-0042", binhLuan: 0, khach: "Anna Whitfield", dienThoai: "(555) 220-4158", trangThai: "dangxuly", phi: 1_800_000, daThu: false, ngayNhan: "03/06", phuTrach: "Sarah Chen" },
  { ma: "RC-2026-0043", binhLuan: 5, khach: "Northwind Packaging", dienThoai: "(555) 558-2143", trangThai: "chobosung", phi: 4_200_000, daThu: true, ngayThu: "05/06", ngayNhan: "04/06", phuTrach: "David Park" },
  { ma: "RC-2026-0044", binhLuan: 0, khach: "Robert Hayes", dienThoai: "(555) 471-8026", trangThai: "hoantat", phi: 2_500_000, daThu: true, ngayThu: "29/05", ngayNhan: "28/05", phuTrach: "Sarah Chen" },
  { ma: "RC-2026-0045", binhLuan: 1, khach: "Karen Mitchell", dienThoai: "(555) 605-3317", trangThai: "dangxuly", phi: 3_100_000, daThu: true, ngayThu: "06/06", ngayNhan: "05/06", phuTrach: "David Park" },
  { ma: "RC-2026-0046", binhLuan: 0, khach: "Daniel Brooks", dienThoai: "(555) 112-9084", trangThai: "chobosung", phi: 1_800_000, daThu: false, ngayNhan: "06/06", phuTrach: "Sarah Chen" },
  { ma: "RC-2026-0047", binhLuan: 3, khach: "Crestline Foods", dienThoai: "(555) 446-2708", trangThai: "hoantat", phi: 5_600_000, daThu: true, ngayThu: "31/05", ngayNhan: "30/05", phuTrach: "David Park" },
  { ma: "RC-2026-0048", binhLuan: 0, khach: "Laura Bennett", dienThoai: "(555) 833-5192", trangThai: "dangxuly", phi: 2_500_000, daThu: false, ngayNhan: "09/06", phuTrach: "James Walker" },
  { ma: "RC-2026-0049", binhLuan: 2, khach: "Thomas Reed", dienThoai: "(555) 760-3844", trangThai: "hoantat", phi: 1_800_000, daThu: true, ngayThu: "02/06", ngayNhan: "27/05", phuTrach: "James Walker" },
  { ma: "RC-2026-0050", binhLuan: 0, khach: "Kevin Doyle", dienThoai: "(555) 905-1273", trangThai: "dangxuly", phi: 4_200_000, daThu: true, ngayThu: "10/06", ngayNhan: "10/06", phuTrach: "James Walker" },
  { ma: "RC-2026-0051", binhLuan: 5, khach: "Atlas Components", dienThoai: "(555) 271-6355", trangThai: "dangxuly", phi: 6_800_000, daThu: true, ngayThu: "06/06", ngayNhan: "05/06", phuTrach: "Maria Lopez" },
  { ma: "RC-2026-0052", binhLuan: 0, khach: "Rachel Foster", dienThoai: "(555) 540-2866", trangThai: "chobosung", phi: 2_500_000, daThu: true, ngayThu: "04/06", ngayNhan: "03/06", phuTrach: "Sarah Chen" },
  { ma: "RC-2026-0053", binhLuan: 1, khach: "Patrick Shaw", dienThoai: "(555) 119-4727", trangThai: "hoantat", phi: 1_200_000, daThu: true, ngayThu: "30/05", ngayNhan: "26/05", phuTrach: "David Park" },
  { ma: "RC-2026-0054", binhLuan: 0, khach: "Summit Logistics", dienThoai: "(555) 662-8059", trangThai: "dangxuly", phi: 5_600_000, daThu: false, ngayNhan: "09/06", phuTrach: "Maria Lopez" },
  { ma: "RC-2026-0055", binhLuan: 3, khach: "Brian Keller", dienThoai: "(555) 484-9131", trangThai: "chobosung", phi: 3_100_000, daThu: false, ngayNhan: "07/06", phuTrach: "James Walker" },
  { ma: "RC-2026-0056", binhLuan: 0, khach: "Emily Carter", dienThoai: "(555) 358-0274", trangThai: "hoantat", phi: 2_500_000, daThu: true, ngayThu: "03/06", ngayNhan: "29/05", phuTrach: "Sarah Chen" },
  { ma: "RC-2026-0057", binhLuan: 2, khach: "Jason Pratt", dienThoai: "(555) 705-4693", trangThai: "dangxuly", phi: 1_200_000, daThu: true, ngayThu: "08/06", ngayNhan: "08/06", phuTrach: "David Park" },
  { ma: "RC-2026-0058", binhLuan: 0, khach: "Beacon Supplies", dienThoai: "(555) 813-2460", trangThai: "hoantat", phi: 4_200_000, daThu: true, ngayThu: "01/06", ngayNhan: "28/05", phuTrach: "Maria Lopez" },
  { ma: "RC-2026-0059", binhLuan: 5, khach: "Nina Alvarez", dienThoai: "(555) 270-1548", trangThai: "dangxuly", phi: 1_800_000, daThu: false, ngayNhan: "10/06", phuTrach: "Sarah Chen" },
  { ma: "RC-2026-0060", binhLuan: 0, khach: "Steven Drake", dienThoai: "(555) 593-7186", trangThai: "chobosung", phi: 2_500_000, daThu: true, ngayThu: "09/06", ngayNhan: "08/06", phuTrach: "James Walker" },
  { ma: "RC-2026-0061", binhLuan: 1, khach: "Harbor Industries", dienThoai: "(555) 047-5829", trangThai: "dangxuly", phi: 6_800_000, daThu: true, ngayThu: "11/06", ngayNhan: "10/06", phuTrach: "Maria Lopez" },
  { ma: "RC-2026-0062", binhLuan: 0, khach: "Grace Holloway", dienThoai: "(555) 826-3050", trangThai: "hoantat", phi: 3_100_000, daThu: true, ngayThu: "05/06", ngayNhan: "31/05", phuTrach: "David Park" },
  { ma: "RC-2026-0063", binhLuan: 3, khach: "Olivia Manning", dienThoai: "(555) 631-2904", trangThai: "dangxuly", phi: 1_200_000, daThu: false, ngayNhan: "11/06", phuTrach: "Sarah Chen" },
  // The book runs past one SCREEN on purpose, not just past one page. A register
  // whose page fits the viewport cannot exhibit the defect the paging controls
  // below are shaped around — the reader never has to scroll, so it never
  // matters where the viewport is left when the rows change. This example ran on
  // 23 records at 8 a page for exactly that reason, and the reset was missing
  // from the reference the whole time.
  { ma: "RC-2026-0064", binhLuan: 0, khach: "Marcus Webb", dienThoai: "(555) 318-7742", trangThai: "hoantat", phi: 2_500_000, daThu: true, ngayThu: "07/06", ngayNhan: "01/06", phuTrach: "David Park" },
  { ma: "RC-2026-0065", binhLuan: 2, khach: "Ironwood Textiles", dienThoai: "(555) 924-6018", trangThai: "dangxuly", phi: 5_600_000, daThu: false, ngayNhan: "12/06", phuTrach: "Maria Lopez" },
  { ma: "RC-2026-0066", binhLuan: 0, khach: "Helen Vargas", dienThoai: "(555) 673-2295", trangThai: "chobosung", phi: 1_800_000, daThu: true, ngayThu: "11/06", ngayNhan: "10/06", phuTrach: "Sarah Chen" },
  { ma: "RC-2026-0067", binhLuan: 4, khach: "Peter Nakamura", dienThoai: "(555) 405-8830", trangThai: "dangxuly", phi: 3_100_000, daThu: true, ngayThu: "12/06", ngayNhan: "11/06", phuTrach: "James Walker" },
  { ma: "RC-2026-0068", binhLuan: 0, khach: "Redstone Millwork", dienThoai: "(555) 217-5546", trangThai: "hoantat", phi: 6_800_000, daThu: true, ngayThu: "04/06", ngayNhan: "30/05", phuTrach: "David Park" },
  { ma: "RC-2026-0069", binhLuan: 1, khach: "Sandra Piper", dienThoai: "(555) 860-3971", trangThai: "dangxuly", phi: 1_200_000, daThu: false, ngayNhan: "12/06", phuTrach: "Maria Lopez" },
  { ma: "RC-2026-0070", binhLuan: 0, khach: "Owen Fitzgerald", dienThoai: "(555) 592-1487", trangThai: "chobosung", phi: 2_500_000, daThu: false, ngayNhan: "13/06", phuTrach: "Sarah Chen" },
  { ma: "RC-2026-0071", binhLuan: 3, khach: "Lakeshore Dairy", dienThoai: "(555) 736-9204", trangThai: "hoantat", phi: 4_200_000, daThu: true, ngayThu: "02/06", ngayNhan: "27/05", phuTrach: "James Walker" },
  { ma: "RC-2026-0072", binhLuan: 0, khach: "Deborah Quinn", dienThoai: "(555) 148-6673", trangThai: "dangxuly", phi: 1_800_000, daThu: true, ngayThu: "13/06", ngayNhan: "12/06", phuTrach: "David Park" },
  { ma: "RC-2026-0073", binhLuan: 2, khach: "Vincent Osei", dienThoai: "(555) 389-2015", trangThai: "chobosung", phi: 3_100_000, daThu: false, ngayNhan: "13/06", phuTrach: "Maria Lopez" },
  { ma: "RC-2026-0074", binhLuan: 0, khach: "Pinehill Ceramics", dienThoai: "(555) 651-4738", trangThai: "hoantat", phi: 5_600_000, daThu: true, ngayThu: "06/06", ngayNhan: "31/05", phuTrach: "Sarah Chen" },
  { ma: "RC-2026-0075", binhLuan: 1, khach: "Alan Whitcombe", dienThoai: "(555) 902-8564", trangThai: "dangxuly", phi: 2_500_000, daThu: false, ngayNhan: "14/06", phuTrach: "James Walker" },
  { ma: "RC-2026-0076", binhLuan: 0, khach: "Priya Raghavan", dienThoai: "(555) 473-1290", trangThai: "dangxuly", phi: 6_800_000, daThu: true, ngayThu: "14/06", ngayNhan: "13/06", phuTrach: "David Park" },
  { ma: "RC-2026-0077", binhLuan: 5, khach: "Fairview Optics", dienThoai: "(555) 260-7451", trangThai: "chobosung", phi: 1_200_000, daThu: false, ngayNhan: "14/06", phuTrach: "Maria Lopez" },
  { ma: "RC-2026-0078", binhLuan: 0, khach: "Gregory Salazar", dienThoai: "(555) 815-3607", trangThai: "hoantat", phi: 3_100_000, daThu: true, ngayThu: "03/06", ngayNhan: "29/05", phuTrach: "Sarah Chen" },
  { ma: "RC-2026-0079", binhLuan: 2, khach: "Tessa Lindqvist", dienThoai: "(555) 547-9382", trangThai: "dangxuly", phi: 4_200_000, daThu: true, ngayThu: "15/06", ngayNhan: "14/06", phuTrach: "James Walker" },
  { ma: "RC-2026-0080", binhLuan: 0, khach: "Copperfield Tools", dienThoai: "(555) 031-6825", trangThai: "chobosung", phi: 1_800_000, daThu: false, ngayNhan: "15/06", phuTrach: "David Park" },
  { ma: "RC-2026-0081", binhLuan: 1, khach: "Naomi Ferrell", dienThoai: "(555) 794-2158", trangThai: "hoantat", phi: 2_500_000, daThu: true, ngayThu: "05/06", ngayNhan: "01/06", phuTrach: "Maria Lopez" },
  { ma: "RC-2026-0082", binhLuan: 0, khach: "Bridgeport Marine", dienThoai: "(555) 368-5093", trangThai: "dangxuly", phi: 5_600_000, daThu: false, ngayNhan: "16/06", phuTrach: "Sarah Chen" },
  { ma: "RC-2026-0083", binhLuan: 3, khach: "Ethan Castellanos", dienThoai: "(555) 620-4716", trangThai: "dangxuly", phi: 1_200_000, daThu: true, ngayThu: "16/06", ngayNhan: "15/06", phuTrach: "James Walker" },
  { ma: "RC-2026-0084", binhLuan: 0, khach: "Willow Creek Farms", dienThoai: "(555) 187-9340", trangThai: "chobosung", phi: 3_100_000, daThu: false, ngayNhan: "16/06", phuTrach: "David Park" },
  { ma: "RC-2026-0085", binhLuan: 2, khach: "Simone Beaufort", dienThoai: "(555) 452-8671", trangThai: "hoantat", phi: 6_800_000, daThu: true, ngayThu: "07/06", ngayNhan: "02/06", phuTrach: "Maria Lopez" },
];

const TABS: { value: Tab; label: string }[] = [
  { value: "all", label: "All" },
  { value: "dangxuly", label: "Processing" },
  { value: "chobosung", label: "Awaiting docs" },
  { value: "hoantat", label: "Complete" },
];

// Fifteen rows at the register's rhythm is taller than the viewport, which is
// the point: paging only has ergonomics once a page is something you SCROLL.
const PAGE_SIZE = 15;

// Distinct case handlers — the secondary filter dimension (a multi-select FilterChip).
const ASSIGNEES = [...new Set(HO_SO.map((r) => r.phuTrach))].map((n) => ({ label: n, value: n }));

// Columns defined ONCE — Table renders the header from these and each
// TableCell takes its width/align by position; the ⋯ is the trailing gutter.
// `priority` = the MOBILE contract: when the container can't fit every column
// the highest numbers drop first (Received → Status), the identity +
// Customer + Fee survive longest, and at the register floor rows STACK
// (label-over-value) so nothing is lost — the drawer carries full detail
// either way.
const COLUMNS: TableColumn[] = [
  // The SUBJECT leads. A reader scans this book by who the record is FOR, and
  // says "the Harbor Freight one" — never "RC-2026-0041". The key is how the
  // SYSTEM refers to the record, so it rides the identity cell's supporting line
  // where every other supporting value lives. It kept a 112px column of its own
  // while the thing everyone actually looks for sat second.
  { key: "khach", label: "Customer", flex: 1, sortable: true, priority: 1, lines: 2 },
  { key: "trangThai", label: "Status", width: 112, sortable: true, priority: 3 },
  { key: "phi", label: "Fee", width: 116, align: "right", sortable: true, priority: 2, lines: 2 },
  { key: "ngayNhan", label: "Received", width: 72, sortable: true, priority: 5 },
];


// DOCUMENT — the paper the row needs NOW: while the fee is unpaid the
// paper that matters is the payment slip; once paid, the stage's own document.
function docFor(r: HoSo, daThu: boolean): { title: string; icon: IconName } {
  return daThu ? TRANG_THAI[r.trangThai].doc : { title: "Print payment slip", icon: "receipt" };
}

// The row's action prints the stage's document; the ⋯ menu carries the
// secondary actions — payment (disabled once collected), edit, and the
// destructive cancel last.
function menuFor(r: HoSo, daThu: boolean): ActionMenuItem[] {
  return [
    { key: "thanh_toan", label: "Record payment", icon: "credit-card", disabled: daThu, onPress: () => {} },
    { key: "sua", label: "Edit record", icon: "pencil", onPress: () => {} },
    { key: "huy", label: "Cancel record", icon: "trash", danger: true, onPress: () => Alert.confirm({ title: `Cancel record ${r.ma}?`, message: "The record is closed and removed from the active register.", confirmLabel: "Cancel record", cancelLabel: "Keep record", onConfirm: () => {} }) },
  ];
}

function HoSoRow({ hs, ordinal, daThu, selected, marked, selectable, onToggle, onPress, onOpenComments }: { hs: HoSo; ordinal: number; daThu: boolean; selected: boolean; marked: boolean; selectable: boolean; onToggle: (on: boolean) => void; onPress: () => void; onOpenComments: () => void }) {
  const doc = docFor(hs, daThu);
  return (
    <TableRow
      onPress={onPress}
      ordinal={ordinal}
      selected={selected}
      marked={marked}
      accessibilityLabel={`Open record ${hs.ma} — ${hs.khach}`}
      leading={<Checkbox accessibilityLabel={selectable ? `Select ${hs.ma}` : `${hs.ma} — awaiting docs, not ready to export`} checked={marked} disabled={!selectable} onChange={onToggle} />}
      action={<IconButton icon={doc.icon} tooltip={doc.title} onPress={() => {}} />}
      trailing={<ActionMenu items={menuFor(hs, daThu)} accessibilityLabel={`Actions for ${hs.ma}`} />}
    >
      <TableCell>
        {/* The mark goes in the SUBJECT'S cell, not the `leading` slot —
            `leading` holds the selection checkbox, and "what this row is" and
            "something you are doing to it" in one slot read as a single
            compound control. Rung and shape per composition.md §"Marks and character". */}
        <Stack direction="row" align="center" gap="none" style={{ gap: 10, alignSelf: "stretch" }}>
          <Avatar name={hs.khach} size="lg" />
          <Stack gap="none" style={{ flex: 1, minWidth: 0 }}>
            {/* The name takes the row, the thread pins right. A comment count is
                the one thing on this row that is about PEOPLE talking rather than
                the record's own state, so it sits apart from the values below it
                instead of joining them on the supporting line. */}
            <Stack direction="row" align="center" gap={8}>
              <Text size="sm" weight="medium" leading="tight" lines={1} style={{ flexShrink: 1 }}>{hs.khach}</Text>
              {/* Rendered only where a thread EXISTS — a zero on every quiet row is a
                  column of noise that trains the eye to skip where the signal appears. */}
              {hs.binhLuan > 0 ? <CommentsButton count={hs.binhLuan} subject={hs.khach} onPress={onOpenComments} /> : null}
            </Stack>
            {/* UNCONDITIONAL — the load-bearing part of this shape. A row centres
                its cells, so a supporting line that renders only when its field is
                set makes this cell two heights, and the name above it then sits at
                two different offsets down the column while every row still measures
                the same. So the values here are ones every record carries. */}
            <Stack direction="row" align="center" gap="none" style={{ gap: 2 }}>
              {/* The key does NOT shrink. Quoted whole or it is not a key: a phone
                  clipped to "(555) 384-7…" is still a number you can widen the
                  column to finish, while "RC-2026-0…" is unusable. So the
                  fixed-length identifier holds its width and the phone gives way —
                  and the phone has a Copy control that hands over the full value. */}
              <Text size="sm" color="muted" leading="tight" lines={1} style={{ flexShrink: 0 }}>{hs.ma}</Text>
              <Text size="sm" color="muted" leading="tight" lines={1} style={{ flexShrink: 1, marginLeft: 8 }}>{hs.dienThoai}</Text>
              <CopyButton value={hs.dienThoai} label="Copy phone number" />
            </Stack>
          </Stack>
        </Stack>
      </TableCell>
      <TableCell>
        <Status variant="dot" label={TRANG_THAI[hs.trangThai].label} color={TRANG_THAI[hs.trangThai].color} />
      </TableCell>
      <TableCell>
        <Stack gap="none" align="end" style={{ gap: 2 }}>
          <Text size="sm">{formatMoney(hs.phi)}</Text>
          <Text size="xs" color={daThu ? "muted" : "danger"}>
            {daThu ? (hs.ngayThu ? `Paid ${hs.ngayThu}` : "Paid today") : "Unpaid"}
          </Text>
        </Stack>
      </TableCell>
      <TableCell>
        <Text size="sm">{hs.ngayNhan}</Text>
      </TableCell>
    </TableRow>
  );
}

// The case workspace behind a register row — the drawer mirrors a REAL record
// workspace: fields that save themselves (the bordered control surface; `InlineValue` for the
// system-owned ones) and the record's CHARGES SUMMARY (grouped fee rows with
// the status as a quiet suffix → divider → ONE emphasized closing number — the
// same shape at popover density). Keyed by id from the caller so per-record
// state resets as ◀ ▶ steps the sequence.
/** The drawer shell that READS the navigation stack: at the root it titles the
 *  customer and offers the ◀ ▶ sequence; on a pushed screen the header swaps
 *  to a BACK button + the pushed case id (the proper home for back — drawer
 *  chrome, not scroll content), and the sequence hides (stepping the root
 *  record from inside a linked one would be disorienting). */
function RecordDrawer({ hs, daThu: _daThu, onPaid: _onPaid, onClose, onPrev, onNext, position, openSection }: {
  hs: HoSo;
  /** The section the record should land on — set when the row's comment bubble
   *  opened it, so the reader arrives in the conversation they pressed. */
  openSection?: string;
  daThu: boolean;
  onPaid: () => void;
  onClose: () => void;
  onPrev?: () => void;
  onNext?: () => void;
  position?: { index: number; total: number };
}) {
  const { canGoBack, goBack, params } = useScreenRouter();
  return (
    <Drawer
      open
      onOpenChange={(o) => !o && onClose()}
      title={
        canGoBack ? (
          <Stack direction="row" align="center" gap={8}>
            <IconButton icon="arrow-left" accessibilityLabel="Back" onPress={goBack} />
            <Text size="md" weight="semibold">{params.ma ?? ""}</Text>
          </Stack>
        ) : (
          // The record CODE, not the customer name. The body is `TplRecord`, whose
          // customer is its own mock — titling this `hs.khach` put "Michael Torres"
          // above a record reading "Harbor Freight Lines", i.e. one surface
          // disagreeing with itself. The code is the one identity both sides share,
          // because it is the prop the drawer passes down.
          <Text size="md" weight="semibold">{hs.ma}</Text>
        )
      }
      onPrev={canGoBack ? undefined : onPrev}
      onNext={canGoBack ? undefined : onNext}
      position={canGoBack ? undefined : position}
    >
      <Screen route="">
        {/* THE RECORD SURFACE, not a copy of it — `tpl_record` in `drawer`
            chrome: same sections, same order, same rules. The rail and the docked
            discussion collapse (a Drawer has no gutters) and the thread joins the
            reading order as its last section. */}
        <TplRecord chrome="drawer" code={hs.ma} openSection={openSection} />
      </Screen>
      <Screen route="/record/:ma">{(p) => <LinkedRecordScreen ma={p.ma} />}</Screen>
    </Drawer>
  );
}

/** The PUSHED linked-record screen — a REAL editable workspace, not a peek:
 *  the drawer HEADER carries the back button (the proper place — see
 *  RecordDrawer), the fields edit in place with their own state, and the footer
 *  carries the pushed record's OWN CTAs. */
function LinkedRecordScreen({ ma }: { ma: string }) {
  const r = HO_SO.find((x) => x.ma === ma);
  const [khach, setKhach] = useState(r?.khach ?? "");
  const [dienThoai, setDienThoai] = useState(r?.dienThoai ?? "");
  const [assignee, setAssignee] = useState<string | null>(memberIdOf(r?.phuTrach ?? ""));
  const [ngayNhan, setNgayNhan] = useState(() => (r ? isoReceived(r.ngayNhan) : ""));
  const [collected, setCollected] = useState(r?.daThu ? "yes" : "no");
  const [fee, setFee] = useState<number | null>(r?.phi ?? null);
  const [docs, setDocs] = useState<DisplayFile[]>([]);
  if (!r) return null;
  return (
    <>
      <DrawerScrollArea>
        <Stack gap={16}>
          <Stack direction="row" align="center" wrap gap={8}>
            <Status label={TRANG_THAI[r.trangThai].label} color={TRANG_THAI[r.trangThai].color} />
            <Text size="sm" color="muted">{`Linked record: ${r.khach}`}</Text>
          </Stack>
          <DetailTable labelWidth={120}>
            <DetailRow label="Customer"><TextInput value={khach} onSave={persist(setKhach)} accessibilityLabel="Customer" /></DetailRow>
            <DetailRow label="Phone"><TextInput value={dienThoai} onSave={persist(setDienThoai)} accessibilityLabel="Phone" /></DetailRow>
            <DetailRow label="Assignee">
              <MemberSelect members={MEMBERS} value={assignee} onSave={persist(setAssignee)} placeholder="Assign…" accessibilityLabel="Assignee" />
            </DetailRow>
            <DetailRow label="Received"><DatePicker value={ngayNhan} onSave={stated(setNgayNhan)} accessibilityLabel="Received date" /></DetailRow>
            <DetailRow label="Fee">
              <NumberInput value={fee} onSave={persist(setFee)} min={0} format={MONEY} accessibilityLabel="Fee" />
            </DetailRow>
            {/* FILES AS A FIELD, the MANY case: `multiple` defaults true, the CTA
                becomes "Add document" once something is attached, and the host
                APPENDS. `tpl_record` shows the single-file case, where the verb is
                replace — the rule is `data_entry.md` §"Files". */}
            <DetailRow label="Documents">
              <InlineFiles
                files={docs}
                onAdd={(picked) => setDocs((p) => [...p, ...toDisplayFiles(picked)])}
                onRemove={(f) => setDocs((p) => p.filter((x) => x.id !== f.id))}
                addLabel="Attach document"
                addMoreLabel="Add document"
              />
            </DetailRow>
            <DetailRow label="Collected">
              <Select
                value={collected}
                onSave={stated(setCollected)}
                options={[{ value: "yes", label: "Collected" }, { value: "no", label: "Outstanding" }]}
                accessibilityLabel="Collected"
                renderOptionContent={(o) => (
                  <Stack direction="row" align="center" gap={8}>
                    <Box style={{ width: 8, height: 8, flexShrink: 0, borderRadius: "var(--lotics-radius-full)", background: o.value === "yes" ? "var(--lotics-tone-emerald-solid)" : "var(--lotics-tone-amber-solid)" }} />
                    <Text size="sm">{o.label}</Text>
                  </Stack>
                )}
              />
            </DetailRow>
          </DetailTable>
        </Stack>
      </DrawerScrollArea>
      {/* the pushed record's OWN footer — different CTAs from the root case */}
      <DrawerFooter>
        <Text size="xs" color="muted" style={{ flex: 1 }}>Changes save in place on this linked record.</Text>
        <Button title="Print receipt" icon="file-text" color="secondary" onPress={() => {}} />
        <Button title="Open full record" color="primary" onPress={() => {}} />
      </DrawerFooter>
    </>
  );
}

// ─── Enter data — the INTAKE fork ────────────────────────────────────────────
// AI FIRST, form as fallback. The one "Enter data" CTA opens a phased dialog:
// drop files (the hero) → a short ANALYZE stream reads them → the run asks the
// genuine ambiguities the analysis surfaced → the IMPORT stream DRAFTS the
// records → the PREVIEW lays every drafted record out in full, every field
// editable in place → one commit creates them → the RECEIPT states the outcome
// and routes.
//
// The preview is the one law's DOCUMENT-create branch, and the fork is WHO
// supplied the values, not whether a before-state exists. The manual form below
// skips it and saves direct — the operator typed those three values and read
// them on the way in. These came off a spreadsheet nobody has read, and a
// receipt saying "Created 3 records" is the first moment a misread order
// reference could have been caught, by which point it is in the data. So the
// values are shown BEFORE the write, as they will be stored, editable where
// they are wrong.
//
// It is deliberately not a diff. Nothing exists to compare against, so the
// whole record is the review; `DiffMark` earns its place only for the one fact
// that IS relational — whether each record's customer matched the book or is
// being created alongside it.
// Below the dropzone, the MANUAL variants (each flavors the same 3-field
// create-then-refine gate). The mock plays the clarify step as two phases; a
// real app can run it as ONE agent run — every app agent carries
// `ask_user_choice`, so the run parks on the agent's own question and
// `AgentRun variant="pane"` renders it from `useAgentRun()` with no change to this file's
// shape: the mock below satisfies the same `AgentRunLike` the hook does.

type Part = UIMessagePart<UIDataTypes, UITools>;
type IntakePhase = "intake" | "analyze" | "clarify" | "running" | "preview" | "done" | "form";
type ManualVariant = "export" | "import";

type Proposal = { id: string; khach: string; dienThoai: string; phi: number; orders: string };

/** The preview's editable copy of one drafted record — the run's output after
 *  the operator has had it. Local state, seeded ONCE when the draft stream ends;
 *  a real app seeds it from the run's structured output the same way. */
type Draft = Proposal & { newCustomer: boolean };

// What the (mock) import drafts, per the wizard's grouping answer. A real app
// takes these from the import run's structured output.
const PROPOSED_BY_CUSTOMER: Proposal[] = [
  { id: "pc1", khach: "Meridian Trading Co.", dienThoai: "(555) 014-2288", phi: 240, orders: "PO-7311, PO-7314" },
  { id: "pc2", khach: "Northgate Textiles", dienThoai: "(555) 019-4471", phi: 180, orders: "PO-7312, PO-7316" },
  { id: "pc3", khach: "Blue Harbor Foods", dienThoai: "", phi: 210, orders: "PO-7313, PO-7315" },
];
const PROPOSED_BY_ORDER: Proposal[] = PROPOSED_BY_CUSTOMER.flatMap((c) =>
  c.orders.split(", ").map((po, i) => ({ id: `${c.id}-${i}`, khach: c.khach, dienThoai: c.dienThoai, phi: Math.round(c.phi / 2), orders: po })),
);

// The wizard's questions come FROM the analysis (a real app renders them off the
// analyze run's structured output) — informed, described, one custom-answer slot.
// Declared in the shape `pendingChoice` actually carries, so this reads like a
// real run: an option is a LABEL plus its description, and the answer's value IS
// that label (the `ask_user_choice` wire shape — there is no separate code).
const INTAKE_QUESTIONS: AgentRunQuestion[] = [
  {
    question: "6 orders across 3 customers. How should they become records?",
    options: [
      { label: "One record per customer", description: "3 records — each customer's orders grouped into one workspace and checklist." },
      { label: "One record per order", description: "6 records — every order tracked on its own; more rows, finer-grained status." },
    ],
  },
  {
    question: "Blue Harbor Foods isn't in the customer book yet. What should happen?",
    allow_custom: true,
    options: [
      { label: "Create the customer", description: "A new customer record is added and linked as the records land." },
      { label: "Leave unassigned", description: "The records are created without a customer — link one later from each record." },
    ],
  },
];

const doneTool = (id: string, name: string): Part => ({ type: "dynamic-tool", toolName: name, toolCallId: id, state: "output-available", input: undefined, output: undefined });

const analyzeScript = (fileNames: string[]): Part[] => [
  { type: "reasoning", text: "Before drafting anything I need to know what these files contain and whether the parties already exist in the book." },
  ...fileNames.map((n, i) => doneTool(`a${i}`, `Read ${n}`)),
  doneTool("a-match", "Match customers"),
  { type: "text", text: "Found **6 order confirmations** across **3 customers** — one customer isn't in the book yet. Two quick questions before I draft the records." },
];

const importScript = (grouping: "customer" | "order"): Part[] => [
  { type: "reasoning", text: grouping === "customer" ? "Group the six orders under their three customers, one record each, fees summed per customer." : "One record per order — six records, fees split from the order totals." },
  doneTool("i1", "Extract order lines"),
  doneTool("i2", "Match customers"),
  doneTool("i3", grouping === "customer" ? "Draft 3 records" : "Draft 6 records"),
  // DRAFTED, not created — the stream's closing line must not claim a write
  // that has not happened. The operator sees them next, in full, and presses.
  { type: "text", text: `Drafted **${grouping === "customer" ? 3 : 6} records** — check them below before they are created.` },
];

/** The manual gate stays the THREE-field create-then-refine form — past the
 *  popover threshold (1–2 fields), so a Dialog pane; NOT a wizard: the record's
 *  own workspace (the drawer it opens into) is where everything else is refined. */
function EnterDataDialog({ open, onOpenChange, seedDocs, onCreate, onCreateMany }: {
  /** Controlled open — the intake is driven by BOTH the toolbar "Enter data"
   *  button (opens empty) AND the register's whole-surface FileDropTarget (opens
   *  PRE-SEEDED via `seedDocs`), so the trigger lives with the parent. */
  open: boolean;
  onOpenChange: (open: boolean) => void;
  /** Files to pre-seed the intake WELL when the dialog opens from a top-level
   *  drop/paste — a dropped pile lands as thumbnail cards (list-first, NOT
   *  auto-analyze), ready for the deliberate "Read with AI". Empty from the button. */
  seedDocs: DisplayFile[];
  onCreate: (khach: string, dienThoai: string, phi: number) => void;
  /** The import's save — rows land in the register as the stream finishes. */
  onCreateMany: (records: { khach: string; dienThoai: string; phi: number }[]) => void;
}) {
  const [phase, setPhase] = useState<IntakePhase>("intake");
  const [docs, setDocs] = useState<DisplayFile[]>([]);
  const [variant, setVariant] = useState<ManualVariant>("export");
  const [grouping, setGrouping] = useState<"customer" | "order">("customer");
  // Q2's answer is load-bearing too: it decides how the unknown customer lands
  // on the created records (create + link, leave unlinked, or the user's own
  // instruction via the custom slot).
  const [customerPlan, setCustomerPlan] = useState("New customer created and linked");
  // What the import DRAFTED — the preview's working copy, seeded once when the
  // draft stream ends and edited in place from then on. It is not server data
  // (nothing is stored yet), so it is the one thing here that legitimately
  // lives in `useState`.
  const [drafts, setDrafts] = useState<Draft[]>([]);
  // the RECEIPT — what the import CREATED. A real app READS BACK what the
  // save stored (values + record ids) and runs its DETERMINISTIC checks over
  // the stored values (a reference checksum, a count reconciliation). ONE
  // record renders its receipt directly; several render the attention-first
  // register whose rows press straight through to the records.
  const [landed, setLanded] = useState<{ id: string; title: string; detail: string; ref: string; refFlagged: boolean; fee: string }[]>([]);
  // Keep/Drop over the drafted records. Everything is IN by default: the
  // operator's job here is to catch the wrong one, not to approve six right
  // ones — `initial: "pending"` would turn a review into a second round of
  // data entry. Nothing is gated on `settled` for the same reason.
  const kept = useChangeSet(drafts.map((d) => d.id));

  // form state (the manual gate)
  const [khach, setKhach] = useState("");
  const [dienThoai, setDienThoai] = useState("");
  const [phi, setPhi] = useState<number | null>(null);

  // Opening PRE-SEEDS the intake well: a top-level drop/paste passes the dropped
  // files via `seedDocs`, the button passes []. Keyed on `open` alone — the seed
  // is settled before the parent flips open, and re-seeding on every render would
  // fight the user's own add/remove among the thumbnails.
  useEffect(() => {
    if (open) {
      setPhase("intake");
      setDocs(seedDocs);
    }
  }, [open]);

  // The analyze stream names the files it reads; the reveal serves analyze + import.
  const docNames = docs.map((d) => d.filename);
  const [revealed, setRevealed] = useState(0);
  const script = phase === "analyze" ? analyzeScript(docNames) : phase === "running" ? importScript(grouping) : [];

  // What a real app hands the pane: `const run = useAgentRun("intake")`. The
  // template has no backend, so it satisfies the same shape from its script —
  // which is the point, the pane never knows the difference.
  const run: AgentRunLike = {
    status: phase === "clarify" ? "awaiting_input" : revealed >= script.length ? "completed" : "streaming",
    parts: script.slice(0, revealed),
    error: null,
    pendingChoice:
      phase === "clarify"
        ? { questions: INTAKE_QUESTIONS }
        : null,
    answerChoice: async (answers) => {
      // The answer's value is the LABEL the human picked — match on it.
      setGrouping(answers[0]?.value === "One record per order" ? "order" : "customer");
      const plan = answers[1];
      setCustomerPlan(
        plan?.custom
          ? plan.value
          : plan?.value === "Leave unassigned"
            ? "Left unassigned — link a customer later"
            : "New customer created and linked",
      );
      setPhase("running");
    },
    // A REAL app passes `useAgentRun().cancel` — which stops the run on the
    // SERVER, not just locally. Here the run IS the reveal timer below, and that
    // timer is gated on `phase`, so leaving the streaming phase is what stops
    // it; there is nothing else for this mock to tear down.
    cancel: () => {},
  };
  useEffect(() => {
    if (phase !== "analyze" && phase !== "running") return;
    setRevealed(0);
    const total = phase === "analyze" ? analyzeScript(docNames).length : importScript(grouping).length;
    let n = 0;
    const t = setInterval(() => {
      n += 1;
      setRevealed(n);
      if (n >= total) {
        clearInterval(t);
        if (phase === "analyze") {
          // Auto-advance: analysis flows into the wizard.
          setTimeout(() => setPhase("clarify"), 500);
        } else {
          // The import DRAFTS — nothing is written here. The drafts go to the
          // preview, which is the gate; the write happens on one press there.
          setTimeout(() => {
            const proposals = grouping === "customer" ? PROPOSED_BY_CUSTOMER : PROPOSED_BY_ORDER;
            setDrafts(
              proposals.map((p) => ({
                ...p,
                // The one relational fact in a screen full of new values, and
                // the only thing here a `DiffMark` can honestly say.
                newCustomer: !CUSTOMER_OPTIONS.some((o) => o.label === p.khach),
              })),
            );
            setPhase("preview");
          }, 500);
        }
      }
    }, 650);
    return () => clearInterval(t);
    // Deliberately keyed on `phase` alone — the file list and grouping are
    // settled before their stream phase begins.
  }, [phase]);

  // ONE intake sink — every way IN adds to the pile: the whole-dialog
  // FileDropTarget (drag/paste anywhere on the open dialog), the big empty-state
  // dropzone, and the compact add-more dropzone all call this.
  const addDocs = (fs: File[]) => setDocs((prev) => [...prev, ...toDisplayFiles(fs)]);

  const reset = () => {
    setPhase("intake");
    setDocs([]);
    setDrafts([]);
    kept.reset();
    setLanded([]);
    setCustomerPlan("New customer created and linked");
    setKhach("");
    setDienThoai("");
    setPhi(null);
  };
  /**
   * Closing CANCELS — it does not merely stop watching.
   *
   * `useAgentRun` aborts on unmount, and its `abort` is deliberately
   * local-only: the run keeps executing server-side so it survives navigating
   * away and lands in the session history. That is right for a page you will
   * come back to, and wrong for a dialog you just dismissed — the operator has
   * abandoned the result and every remaining token is spent on nobody. So the
   * close path calls `cancel` explicitly. Unmount is not cancellation.
   */
  const close = () => { run.cancel(); onOpenChange(false); reset(); };

  /**
   * THE COMMIT. It writes what is on screen — the edited drafts, minus the
   * dropped ones — and only then computes the receipt, over the values that
   * were actually stored.
   *
   * The deterministic checks belong on THIS side of the write for the reason
   * the one law gives: a person cannot eyeball-verify a checksum, so the
   * preview is where human judgment applies (is this the right customer, is
   * that fee plausible) and the receipt is where arithmetic does.
   */
  const commitDrafts = () => {
    const writing = drafts.filter((d) => kept.status(d.id) !== "rejected");
    if (writing.length === 0) return;
    onCreateMany(writing.map((d) => ({ khach: d.khach, dienThoai: d.dienThoai, phi: d.phi })));
    setLanded(
      writing.map((d) => ({
        id: d.id,
        title: grouping === "customer" ? d.khach : `${d.orders} — ${d.khach}`,
        // The wizard's answers are load-bearing: the unknown customer's row
        // states how it landed (created + linked / left unassigned / the
        // user's own instruction).
        detail: [d.dienThoai, formatMoney(d.phi), d.newCustomer ? customerPlan : ""].filter(Boolean).join(", "),
        ref: d.orders,
        // The mock flags one record's reference (a failed checksum); a real app
        // computes this over the STORED value.
        refFlagged: d.orders.includes("PO-7313"),
        fee: String(d.phi),
      })),
    );
    setPhase("done");
  };

  const editDraft = (id: string, patch: Partial<Draft>) =>
    setDrafts((prev) => prev.map((d) => (d.id === id ? { ...d, ...patch } : d)));

  const createManual = () => {
    if (khach.trim() === "") return;
    onCreate(khach.trim(), dienThoai.trim(), phi ?? 0);
    close();
  };

  const title =
    phase === "form" ? (variant === "export" ? "New export case" : "New import case")
    : phase === "intake" ? "Enter data"
    // Named for what the operator is about to DO, not for the machinery: they
    // are checking records, and the count is the size of the job.
    : phase === "preview" ? `Check ${drafts.length} drafted ${drafts.length === 1 ? "record" : "records"}`
    : phase === "done" ? "Saved"
    : "Import from files";

  return (
    <AgentRunDialog>
      {/* the file/stream phases (intake/analyze/clarify/running/done) run
          WIDE — room for the thumbnail hero + the run pane/result
          panes; only the manual `form` stays a narrow single-column pane.
          760 sits just under the kit Dialog's default 786 maxWidth cap.
          AgentRunDialog wraps the Dialog from OUTSIDE so the run's own action
          bar renders in the DialogFooter — the dialog grammar's home for
          action bars — via AgentRunActions. */}
      <Dialog width={phase === "form" ? 480 : 760} open={open} onOpenChange={(o) => { if (!o) close(); }}>
        <DialogHeader>
          <DialogHeaderTitle>{title}</DialogHeaderTitle>
        </DialogHeader>

        {phase === "intake" ? (
          // The WHOLE open dialog is a FileDropTarget: drag OR paste anywhere on
          // it adds files, in BOTH modes (the ring/wash frames the dialog on drag
          // — "drop anywhere here"). Nested with the dropzones below, which each
          // light their own well; stopPropagation keeps one drop from double-adding.
          <FileDropTarget onFiles={addDocs} paste style={{ paddingInline: 24, paddingBottom: 16, gap: 16 }}>
            {/* ONE dialog, TWO MODES (not two Dialogs): FILES-PRESENT shows the
                pile + a compact add-more well + the deliberate Read; EMPTY shows
                the big dropzone hero + the manual chooser. Dropping in either ADDS
                files (via addDocs) — the paid AI read stays a DELIBERATE button,
                never a side effect of a drop. A pile means the user came to
                process files, so the manual cards fall away. */}
            {docs.length > 0 ? (
              <Stack gap={16}>
                {/* the pile, as document cards — removable, the hero at top */}
                <FileThumbnailGrid
                  files={docs}
                  minItemWidth={120}
                  onRemove={(id) => setDocs((prev) => prev.filter((d) => d.id !== id))}
                />
                {/* add-more is a real WELL (draggable + clickable), not a button —
                    compact so the pile stays the hero */}
                <FileDropzone
                  height={96}
                  label="Drop more files"
                  hint="or click to add"
                  onFiles={addDocs}
                />
              </Stack>
            ) : (
              <>
                <FileDropzone
                  label="Drop the customer's files"
                  hint="Orders, invoices, spreadsheets — read them with AI"
                  onFiles={addDocs}
                />
                <Stack direction="row" align="center" gap="none" style={{ gap: 12 }}>
                  <Box style={{ flex: 1 }}><Divider /></Box>
                  <Text size="xs" color="muted">or enter manually</Text>
                  <Box style={{ flex: 1 }}><Divider /></Box>
                </Stack>
                <Stack gap={8}>
                  <PressableRow variant="card" accessibilityLabel="New export case" onPress={() => { setVariant("export"); setPhase("form"); }} style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
                    <Icon name="arrow-up" size={16} color="default" />
                    <Stack gap="none" style={{ flex: 1, gap: 2 }}>
                      <Text size="sm" weight="semibold">Export case</Text>
                      <Text size="xs" color="muted">Outbound paperwork — the record seeds the customs-out checklist.</Text>
                    </Stack>
                  </PressableRow>
                  <PressableRow variant="card" accessibilityLabel="New import case" onPress={() => { setVariant("import"); setPhase("form"); }} style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
                    <Icon name="arrow-down" size={16} color="default" />
                    <Stack gap="none" style={{ flex: 1, gap: 2 }}>
                      <Text size="sm" weight="semibold">Import case</Text>
                      <Text size="xs" color="muted">Inbound paperwork — the record seeds the customs-in checklist.</Text>
                    </Stack>
                  </PressableRow>
                </Stack>
              </>
            )}
          </FileDropTarget>
        ) : null}

        {phase === "analyze" || phase === "running" || phase === "clarify" ? (
          // ONE pane for the whole run. It streams the transcript, and when the
          // agent asks, the question REPLACES the feed — scrolled, with its
          // actions in the footer. A real app passes `useAgentRun(alias)`
          // straight in; this mock is the same shape.
          <AgentRun variant="pane" run={run} onCancel={() => setPhase("intake")} />
        ) : null}

        {phase === "preview" ? (
          // THE GATE. Every drafted record, laid out as it will be STORED — all
          // four fields, not a three-line summary — and every one of them
          // editable where it sits. The law's reason for editing over
          // accept/reject: a wrong proposal you can fix costs a keystroke, one
          // you can only reject costs the whole re-entry.
          <DialogScrollArea>
            <Stack gap="none" style={{ gap: 12 }}>
              <Text size="xs" color="muted">
                Nothing is saved yet. Correct anything that is wrong, drop what should not be created, then create the rest.
              </Text>
              {drafts.map((d) => {
                const dropped = kept.status(d.id) === "rejected";
                const title = grouping === "customer" ? d.khach : d.orders;
                return (
                  <Box key={d.id} style={{ border: "1px solid var(--border)", borderRadius: "var(--lotics-radius-control)", overflow: "hidden" }}>
                    <Stack direction="row" align="center" gap={8} style={{ padding: "8px 12px", background: "var(--muted)" }}>
                      {/* The mark says what will happen to this card. Emphasised
                          because the preview is scanned, not read: a filled
                          shape per card is found without reading the column. */}
                      <DiffMark kind={dropped ? "removed" : "added"} />
                      <Text size="sm" weight="semibold" style={{ flex: 1 }} lines={1}>{title}</Text>
                      {/* A control, not a Link. These MUTATE the change set;
                          they navigate nowhere. Blue underlined text promises a
                          destination, and `Link` announces `role="link"` — so a
                          template every app copies was teaching the one thing
                          composition.md § Buttons bans outright. */}
                      {dropped ? (
                        <Button color="secondary" title="Keep" onPress={() => kept.undo(d.id)} accessibilityLabel={`Keep ${title}`} />
                      ) : (
                        <Button color="secondary" title="Don’t create" onPress={() => kept.reject(d.id)} accessibilityLabel={`Do not create ${title}`} />
                      )}
                    </Stack>
                    {/* A dropped card COLLAPSES rather than dimming in place:
                        its fields are not going to be written, so leaving them
                        legible-but-grey invites edits to a record that will not
                        exist. The header keeps its identity and the Keep verb. */}
                    {dropped ? null : (
                      <Box style={{ paddingInline: 12 }}>
                        <DetailTable>
                          <DetailRow
                            label="Customer"
                            description={d.newCustomer ? customerPlan : undefined}
                          >
                            <TextInput
                              value={d.khach}
                              onValueChange={(v) => editDraft(d.id, { khach: v })}
                              accessibilityLabel={`Customer for ${title}`}
                            />
                          </DetailRow>
                          <DetailRow label="Orders">
                            <TextInput
                              value={d.orders}
                              onValueChange={(v) => editDraft(d.id, { orders: v })}
                              accessibilityLabel={`Orders for ${title}`}
                            />
                          </DetailRow>
                          <DetailRow label="Phone">
                            {/* The document carried no phone for one of these.
                                An empty box would read as "blank" — a value
                                somebody chose — so the placeholder NAMES the
                                absence: unknown is not empty. */}
                            <TextInput
                              value={d.dienThoai}
                              placeholder="Not on the document"
                              onValueChange={(v) => editDraft(d.id, { dienThoai: v })}
                              accessibilityLabel={`Phone for ${title}`}
                            />
                          </DetailRow>
                          <DetailRow label="Service fee">
                            <NumberInput
                              value={d.phi}
                              min={0}
                              format={MONEY}
                              onValueChange={(v) => editDraft(d.id, { phi: v ?? 0 })}
                              accessibilityLabel={`Service fee for ${title}`}
                            />
                          </DetailRow>
                        </DetailTable>
                      </Box>
                    )}
                  </Box>
                );
              })}
            </Stack>
          </DialogScrollArea>
        ) : null}

        {phase === "done" ? (
          // The RECEIPT (ai_patterns §the one law): states the outcome and
          // routes — NOTHING here edits; the RECORD is the edit surface,
          // one press away (correction uses the record's ordinary verbs).
          // ONE record: header + the big-four summary + amber verdicts naming
          // the exact failing values. SEVERAL: an attention-first register
          // whose rows press straight through to the record.
          <DialogScrollArea>
            {(() => {
              // The receipt lines — DetailRow spread rows (label left, value
              // right), the kit's paper-receipt look; a warning Callout names
              // the failing values. Read-only: the record behind the dialog
              // is the edit surface.
              const receipt = (l: (typeof landed)[number]) => (
                <Stack gap={16}>
                  <ResultHeader
                    tone={l.refFlagged ? "attention" : "ok"}
                    title={`Created ${l.title}`}
                  />
                  <DetailTable>
                    <DetailRow label="Customer"><Text size="sm" weight="medium">{l.title}</Text></DetailRow>
                    <DetailRow label="Orders"><Text size="sm" weight="medium">{l.ref}</Text></DetailRow>
                    <DetailRow label="Service fee"><Text size="sm" weight="medium">{formatMoney(Number(l.fee) || 0)}</Text></DetailRow>
                  </DetailTable>
                  {l.refFlagged ? (
                    <ConfidenceCallout level="low">
                      Order reference PO-7313 fails its checksum — verify against the source file; the flagged value is marked on the record.
                    </ConfidenceCallout>
                  ) : (
                    <ConfidenceCallout level="high">
                      All automated checks passed: the order references validate and the totals reconcile.
                    </ConfidenceCallout>
                  )}
                </Stack>
              );
              if (landed.length === 1) return receipt(landed[0]);
              return (
                <Stack gap="none" style={{ gap: 2 }}>
                  {[...landed].sort((a, b) => Number(b.refFlagged) - Number(a.refFlagged)).map((l) => (
                    <ListItem
                      key={l.id}
                      left={<Icon name={l.refFlagged ? "circle-alert" : "circle-check"} size={16} color={l.refFlagged ? "warning" : "success"} />}
                      title={`Created ${l.title}`}
                      description={l.detail}
                      right={
                        <Stack direction="row" align="center" gap={8}>
                          {l.refFlagged ? <Text size="xs" weight="medium" style={{ color: solid("amber") }}>1 to check</Text> : null}
                          <Icon name="chevron-right" size={16} color="inactive" />
                        </Stack>
                      }
                      onPress={() => { close(); }}
                    />
                  ))}
                </Stack>
              );
            })()}
          </DialogScrollArea>
        ) : null}

        {phase === "form" ? (
          <Stack gap="none" style={{ padding: "0 24px 12px", gap: 12 }}>
            <Text size="xs" color="muted">
              {variant === "export"
                ? "The export case starts in Processing — details and payment live on the record itself."
                : "The import case starts in Processing — details and payment live on the record itself."}
            </Text>
            <FormField label="Customer">
              {khach === "" ? (
                /* find-or-create: the input stays a pure search (reflectSelection
                   off — a custom "create" pick has no option to reflect anyway);
                   the pick renders BELOW as the attached line with Change */
                <Combobox
                  options={CUSTOMER_OPTIONS}
                  onValueChange={(opt) => setKhach(opt.label ?? opt.value)}
                  reflectSelection={false}
                  allowCustom
                  customOptionPlacement="top"
                  customOptionLabel={(q) => `Create new customer “${q}”`}
                >
                  <ComboboxInput icon="search" placeholder="Search customers, or add a new one…" accessibilityLabel="Customer" />
                  <ComboboxContent />
                </Combobox>
              ) : (
                <Stack direction="row" align="center" gap={8} style={{ minHeight: 40 }}>
                  <Icon name={CUSTOMER_OPTIONS.some((o) => o.label === khach) ? "building-2" : "plus"} size={16} color="inactive" />
                  <Text size="sm" weight="medium" style={{ flex: 1 }} lines={1}>
                    {khach}
                    {CUSTOMER_OPTIONS.some((o) => o.label === khach) ? "" : " (new customer)"}
                  </Text>
                  <Button color="secondary" title="Change" onPress={() => setKhach("")} accessibilityLabel="Change customer" />
                </Stack>
              )}
            </FormField>
            <FormField label="Phone" optional>
              <TextInput value={dienThoai} onValueChange={setDienThoai} placeholder="(555) 000-0000" accessibilityLabel="Phone" />
            </FormField>
            <FormField label="Service fee">
              <NumberInput value={phi} onValueChange={setPhi} min={0} accessibilityLabel="Service fee" />
            </FormField>
          </Stack>
        ) : null}

        {phase === "intake" && docs.length > 0 ? (
          // THE PHASE'S OWN COMMIT, in the one band that does not scroll. It sat
          // under the pile it reads, which is where a verb about a VALUE goes on
          // a page — but a pile of twenty files scrolls, and the paid act went
          // with it while the three phases after this one kept their acts here.
          <DialogFooter>
            <Button
              title={`Read ${docs.length} ${docs.length === 1 ? "file" : "files"} with AI`}
              color="primary"
              onPress={() => setPhase("analyze")}
            />
          </DialogFooter>
        ) : phase === "form" ? (
          <DialogFooter>
            <Button title="Back" color="secondary" onPress={() => { setKhach(""); setDienThoai(""); setPhi(null); setPhase("intake"); }} />
            <Button title="Create record" color="primary" disabled={khach.trim() === ""} onPress={createManual} />
          </DialogFooter>
        ) : phase === "analyze" || phase === "clarify" || phase === "running" ? (
          <DialogFooter>
            {/* EVERY run-driven phase, not just `clarify`. The contract is that the
                HOST mounts this wherever the run drives the surface and the RUN
                decides what it holds; gating it by phase out here duplicates that
                decision and gets it wrong the moment the run learns a new phase.

                `onStop` is the SAME handler the pane's `onCancel` gets: stopping a
                stream and abandoning a parked question both put the operator back
                at the intake, files and answers intact. */}
            <AgentRunActions run={run} onStop={() => setPhase("intake")} />
          </DialogFooter>
        ) : phase === "preview" ? (
          <DialogFooter>
            <Button
              title="Back"
              color="secondary"
              onPress={() => { setDrafts([]); kept.reset(); setPhase("intake"); }}
            />
            {/* Named for its OUTCOME and carrying the count that will actually
                be written — never "Apply", never the proposal count. Disabled
                at zero kept, which is the only state where the press would do
                nothing. */}
            <Button
              title={`Create ${kept.keptCount} ${kept.keptCount === 1 ? "record" : "records"}`}
              color="primary"
              disabled={kept.keptCount === 0}
              onPress={commitDrafts}
            />
          </DialogFooter>
        ) : phase === "done" ? (
          <DialogFooter>
            {/* Dismissal, not an action — the records already landed. */}
            <Button title="Done" color="secondary" onPress={close} />
          </DialogFooter>
        ) : null}
      </Dialog>
    </AgentRunDialog>
  );
}

export function TplItemList() {
  const [tab, setTab] = useState<Tab>("all");
  const [search, setSearch] = useState("");
  const [page, setPage] = useState(0);
  const [openMa, setOpenMa] = useState<string | null>(null);
  /** Which section the record should OPEN on — set by the row's comment bubble,
   *  cleared on close so the next plain row press lands at the top. */
  const [openSection, setOpenSection] = useState<string | undefined>(undefined);
  // Paid state is LIFTED, not owned by the drawer: settling the ledger inside the
  // drawer flips the row's Unpaid/Print/menu live, because both read one source.
  const [paidMap, setPaidMap] = useState<Record<string, boolean>>({});
  const daThuOf = (r: HoSo) => paidMap[r.ma] ?? r.daThu;
  // The register rows are state: the create dialog PREPENDS a real row and
  // opens its drawer — create-then-refine.
  const [rows, setRows] = useState<HoSo[]>(HO_SO);
  // Past the LAST seeded code, not past the old one — a created row that reuses
  // an existing `ma` collides on the register's key and on every lookup by code.
  const nextMa = useRef(86);

  /** The page's scroll container, so a control that changes the rows can put the
   *  reader back at the first of them. */
  const scrollRef = useRef<HTMLElement>(null);

  /**
   * Move the window, and return the viewport to the top of it.
   *
   * The scroll is HALF the act, not a courtesy on top of it. Bottom pagination
   * is inherited from full page loads, where the browser reset the scroll for
   * free; an SPA swaps the rows under a viewport that does not move, so paging
   * from the bottom lands the reader on the LAST rows of the next page with its
   * first ones already behind them.
   *
   * EVERY control that changes which rows are on screen goes through here —
   * paging, tabs, search, sort, each filter — rather than each one calling
   * `setPage(0)` and remembering the scroll. That list is the reason this is one
   * function: nine call sites each responsible for two things is nine chances to
   * do one of them, and the one that gets forgotten fails silently.
   */
  const goToPage = (p: number) => {
    setPage(p);
    scrollRef.current?.scrollTo({ top: 0 });
  };
  const resetPaging = () => goToPage(0);
  const addRow = (khach: string, dienThoai: string, phi: number): string => {
    const now = new Date();
    const ma = `RC-2026-${String(nextMa.current++).padStart(4, "0")}`;
    const row: HoSo = {
      ma,
      binhLuan: 0,
      khach,
      dienThoai,
      trangThai: "dangxuly",
      phi,
      daThu: false,
      ngayNhan: `${String(now.getDate()).padStart(2, "0")}/${String(now.getMonth() + 1).padStart(2, "0")}`,
      phuTrach: "Sarah Chen",
    };
    setRows((prev) => [row, ...prev]);
    return ma;
  };
  // Reveal what was just created: clear every filter that could hide the new
  // row(s) and land on page 1.
  const revealNew = () => {
    setTab("all");
    setSearch("");
    setAssignee([]);
    setFeeStatus(null);
    setSort(null);
    resetPaging();
  };
  const createRecord = (khach: string, dienThoai: string, phi: number) => {
    const ma = addRow(khach, dienThoai, phi);
    revealNew();
    // A single manual create opens its drawer for refinement (create-then-refine).
    setOpenMa(ma);
  };
  // The AI-import save — rows land at the top of the register; no drawer (a
  // bulk landing is reviewed IN the register, refined record by record later).
  const createRecordsBulk = (records: { khach: string; dienThoai: string; phi: number }[]) => {
    records.forEach((r) => addRow(r.khach, r.dienThoai, r.phi));
    revealNew();
  };
  // The intake dialog is CONTROLLED here so BOTH the toolbar button and the
  // whole-register FileDropTarget drive it: the button opens it empty, a
  // top-level drop/paste opens it PRE-SEEDED with the dropped files (mapped to
  // DisplayFiles so the pile shows as thumbnail cards — the paid "Read with AI"
  // stays a deliberate button).
  const [intakeOpen, setIntakeOpen] = useState(false);
  const [intakeSeed, setIntakeSeed] = useState<DisplayFile[]>([]);
  const openIntake = () => { setIntakeSeed([]); setIntakeOpen(true); };
  const openIntakeSeeded = (dropped: File[]) => { setIntakeSeed(toDisplayFiles(dropped)); setIntakeOpen(true); };
  const [sort, setSort] = useState<SortState | null>(null);
  const [assignee, setAssignee] = useState<string[]>([]);
  const [feeStatus, setFeeStatus] = useState<"paid" | "unpaid" | null>(null);
  // The per-column pill (FilterChip column=, number type) — min/max over the Fee column.
  const [feeAmount, setFeeAmount] = useState<ColumnFilterValue | undefined>(undefined);
  const sel = useSelection();

  // Filter / sort changes reset paging — page 3 of the old ordering is
  // meaningless under the new one.
  const chonTab = (t: Tab) => {
    setTab(t);
    resetPaging();
  };
  const doiTimKiem = (s: string) => {
    setSearch(s);
    resetPaging();
  };
  // One sort at a time; the third toggle on a column clears it.
  const onSort = (key: string) => {
    setSort(cycleSort(sort, key));
    resetPaging();
  };

  // Search + status tab filter FIRST, then paging over the filtered ordering.
  // The TotalsLine reads the pre-tab subset: it respects search/assignee/fee
  // but keeps all three status counts visible whatever tab is active.
  const q = search.trim().toLowerCase();
  const preTab = rows.filter((r) => {
    if (assignee.length > 0 && !assignee.includes(r.phuTrach)) return false;
    if (feeStatus === "paid" && !daThuOf(r)) return false;
    if (feeStatus === "unpaid" && daThuOf(r)) return false;
    if (feeAmount?.kind === "number") {
      if (feeAmount.min != null && r.phi < feeAmount.min) return false;
      if (feeAmount.max != null && r.phi > feeAmount.max) return false;
    }
    if (q && !`${r.ma} ${r.khach} ${r.dienThoai}`.toLowerCase().includes(q)) return false;
    return true;
  });
  const filtered = preTab.filter((r) => tab === "all" || r.trangThai === tab);
  const dem = (t: TrangThai) => preTab.filter((r) => r.trangThai === t).length;
  const phiDaThu = preTab.filter((r) => daThuOf(r)).reduce((s, r) => s + r.phi, 0);
  const assigneeSummary = selectSummary(assignee, ASSIGNEES);
  // Sort the filtered set (one column), then page over that ordering.
  const sorted = sortBy(filtered, sort, (r, key) =>
    key === "khach" ? r.khach.toLowerCase()
    : key === "trangThai" ? TRANG_THAI[r.trangThai].label
    : key === "phi" ? r.phi
    : key === "ngayNhan" ? r.ngayNhan.split("/").reverse().join("")
    : r.ma,
  );
  const pageRows = sorted.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
  const hasMore = (page + 1) * PAGE_SIZE < sorted.length;

  // Bulk selection (the shared `useSelection` hook) — tick rows for the floating
  // action bar; select-all spans the visible page and ticks persist across pages,
  // so the bar's count is the running total. Selectability GATING stays here (the
  // hook is agnostic): an "Awaiting docs" case is still gathering paperwork, so it
  // can't be exported — only the selectable ids drive select-all, the rest get a
  // DISABLED checkbox (the same shape as a blocked run line).
  const isSelectable = (r: HoSo) => r.trangThai !== "chobosung";
  const selectableIds = pageRows.filter(isSelectable).map((r) => r.ma);

  // The drawer sequences over the CURRENTLY-VISIBLE page slice. If the open
  // case falls out of view, the chevrons disappear but the drawer stays.
  const openRow = openMa === null ? null : rows.find((r) => r.ma === openMa) ?? null;
  const seqIndex = openRow ? pageRows.findIndex((r) => r.ma === openRow.ma) : -1;

  return (
    <Box style={{ flex: 1, minHeight: 0 }}>
    {/* WHOLE-SURFACE INTAKE — the standard this template DEMONSTRATES: the ENTIRE
        register page is one `FileDropTarget`, so a file dropped or a Ctrl/Cmd+V
        pasted ANYWHERE on the register opens the intake dialog PRE-SEEDED with
        those files (list-first — the paid "Read with AI" stays a button). No
        `disabled`: the intake's own inner `FileDropzone` and the record drawer's
        Files section are later-mounted paste sinks, so while either is open the
        paste routes THERE (top of stack); a nested drop is stopPropagation-safe.
        `flex:1` keeps the canvas filling the page (the bar + drawer overlay
        on top); the accent ring frames the page on drag. A real app opts in
        per-app — this page is the reference shape. */}
    <FileDropTarget onFiles={openIntakeSeeded} paste style={{ flex: 1, minHeight: 0 }}>
    {/* THE CANVAS — a `Box` that scrolls, around a `Box` that carries the
        padding and states `flexShrink: 0`: a flex child shrinks to its parent by
        default, and a content box squeezed to the viewport has nothing left to
        scroll. The ref is the scroll port, so `goToPage` can put the reader back
        at the first row. */}
    <Box ref={scrollRef} style={{ flex: 1, minHeight: 0, overflowX: "hidden", overflowY: "auto", background: colors.background }}>
        <Box style={{ flexShrink: 0, padding: 24 }}>
          <Stack gap={16} style={{ width: "100%", maxWidth: 1040, alignSelf: "center" }}>
            {/* The page band — the screen's TYPE ANCHOR before it is a label. Without
                it this page's largest text is 16px against a 12px floor, and a 1.33x
                range reads flat however much colour is on it. The title repeating the
                nav is a real cost and the right trade: one line buys the whole range.
                What is NOT here is a gloss on the widget ("track each record's status
                and print the right document for its stage"), which described the
                control rather than the domain — and what is not here EITHER is the
                summary, which belongs under the filters that change it. */}
            <Text size="xxl" weight="semibold">Records</Text>

            {/* toolbar — search + consolidated filters LEFT, New case RIGHT, one row.
                A search is present, so status is a dropdown (Select), not pills.
                `FilterBand` owns the row. On a phone it collapses the filters into a
                single `Filters (n)` button and a sheet, so search and the CTA stay on
                one line. This row used to wrap to two or three lines there, which also
                left the CTA anchored to nothing — centred, it floated against the whole
                wrapped block and landed level with the SECOND row of chips. Collapsing
                the filters removes the wrap, and the alignment question with it. */}
            <FilterBand
              activeCount={[assignee.length > 0, feeStatus != null, feeAmount != null].filter(Boolean).length}
              onClearAll={() => { setAssignee([]); setFeeStatus(null); setFeeAmount(undefined); resetPaging(); }}
              action={<Button title="Enter data" color="primary" onPress={openIntake} />}
              search={
                <TextInput
                  type="search"
                  placeholder="Search by ID, name, or phone…"
                  value={search}
                  onValueChange={doiTimKiem}
                  accessibilityLabel="Search records"
                />
              }
            >
                <Select
                  placeholder="Status"
                  options={TABS.map((t) => ({
                    label: `${t.label} (${t.value === "all" ? preTab.length : dem(t.value)})`,
                    value: t.value,
                  }))}
                  value={tab}
                  onValueChange={(t) => { if (t !== null) chonTab(t); }}
                  accessibilityLabel="Filter by status"
                />
                <FilterChip
                  label="Assignee"
                  summary={assigneeSummary}
                  onClear={() => { setAssignee([]); resetPaging(); }}
                  clearLabel="Clear assignee filter"
                >
                  <OptionList
                    search={{ mode: "none" }}
                    multi
                    options={ASSIGNEES}
                    value={assignee}
                    onValueChange={(v) => { setAssignee(v); resetPaging(); }}
                  />
                </FilterChip>
                {/* Single-select sibling — the render-prop `close` shuts the popover on
                    pick (the multi above stays open to collect several values). */}
                <FilterChip
                  label="Payment"
                  summary={feeStatus === "paid" ? "Paid" : feeStatus === "unpaid" ? "Unpaid" : undefined}
                  onClear={() => { setFeeStatus(null); resetPaging(); }}
                  clearLabel="Clear payment filter"
                >
                  {({ close }) => (
                    <OptionList
                      search={{ mode: "none" }}
                      options={[{ value: "paid", label: "Paid" }, { value: "unpaid", label: "Unpaid" }]}
                      value={feeStatus}
                      onValueChange={(v) => { setFeeStatus(v); resetPaging(); }}
                      onRequestClose={close}
                    />
                  )}
                </FilterChip>
                {/* the per-column filter pill — the NUMBER variant (min/max) over
                    the Fee column; text/select variants live on the Tables gallery
                    page. Filter changes reset paging like every other control. */}
                <FilterChip
                  column={{ key: "phi", label: "Fee", type: "number" }}
                  value={feeAmount}
                  onChange={(v) => { setFeeAmount(v); resetPaging(); }}
                />
            </FilterBand>

            {/* THE SUMMARY READS THE FILTERED SET, so it sits BELOW the controls that
                produce it. These figures move every time the reader touches a chip:
                put them above, and the screen answers before it has been asked — the
                reader changes a filter, the numbers change behind their eye, and the
                causal order the layout states is backwards. Under the toolbar it
                reads as the result of what was just set, and it is the last thing
                before the rows it counts.

                It is not a page-band subtitle for the same reason. A subtitle
                describes the screen; these describe the QUERY, and the query is what
                the toolbar above just wrote. */}
            {/* THE SUMMARY ROW IS THE PAGING ROW. Both describe the window the
                toolbar above just set — what matched, and which slice of it is on
                screen — so they are one line, not two.

                PAGING SITS ABOVE THE ROWS, and there is only one of it. Under them is
                where it has always gone, and that is inherited from full page loads:
                the browser reset the scroll, so a reader who pressed Next at the
                bottom arrived at the top of the next page for free. An SPA swaps the
                rows under a viewport that does not move, so the same press now lands
                on that page's LAST rows with its first ones already scrolled past.
                `goToPage` restores the reset — and once the viewport returns here on
                every press, here is where the control should be: under the reader's
                cursor, not a page-height below it. A second copy at the bottom would
                be the same state said twice.

                It carries the RANGE and nothing else. The totals that used to ride
                the old footer (`45 records, ₫X in fees`) said what this summary
                already says, and `Table`'s own `count` prints the matched total in
                the overline below.

                The pager sizes to its CONTENT and the summary takes `flex: 1`.
                Reversed — the pager handed the full width — its own `flex: 1` range
                stretches and strands the range hundreds of pixels from the arrows it
                belongs to, two halves of one control reading as two things. Given a
                row of its own it read worse still: 236px of control against 778px of
                nothing. `flex-start` keeps the arrows on the summary's FIRST line
                when the summary wraps at a narrow width. */}
            <Stack direction="row" align="start" gap={24}>
              <Box style={{ flex: 1, minWidth: 0 }}>
                <TotalsLine
                  items={[
                    { label: "processing", value: dem("dangxuly") },
                    { label: "awaiting docs", value: dem("chobosung"), tone: "warning", info: "Records waiting on customer paperwork — they aren't complete, so they can't be ticked for export until the docs arrive." },
                    { label: "complete", value: dem("hoantat") },
                    { label: "fees collected", value: phiDaThu, format: "currency", compact: true },
                  ]}
                />
              </Box>
              <Pagination
                page={page}
                pageSize={PAGE_SIZE}
                rowCount={pageRows.length}
                hasMore={hasMore}
                total={filtered.length}
                onPageChange={goToPage}
              />
            </Stack>

            {/* the register — overline band (Table header) → list rows */}
            <Box>
              {/* THE COUNTED REGISTER — `counted`, not `count`, because the PAGER
                  states the total now (`16–30 of 45`) and a number printed twice a
                  few rows apart is two numbers that can disagree. `counted` keeps the
                  ordinal gutter reserved and leaves the figure to the row that owns
                  it. Each row's `ordinal` still continues across pages rather than
                  restarting at 1, so the last row of page 2 reads 30, not 15. */}
              <Table
                columns={COLUMNS}
                leading={24}
                counted
                trailing={64}
                sort={sort}
                onSort={onSort}
                selectAll={{
                  checked: sel.indeterminate(selectableIds)
                    ? "mixed"
                    : sel.allSelected(selectableIds),
                  disabled: selectableIds.length === 0,
                  onChange: (on) => sel.setAll(selectableIds, on),
                  label: "Select all on this page",
                }}
              >
                {pageRows.map((r, i) => (
                  <HoSoRow key={r.ma} hs={r} ordinal={page * PAGE_SIZE + i + 1} daThu={daThuOf(r)} selected={r.ma === openMa} marked={sel.has(r.ma)} selectable={isSelectable(r)} onToggle={(on) => sel.toggle(r.ma, on)} onPress={() => setOpenMa(r.ma)} onOpenComments={() => { setOpenSection("comments"); setOpenMa(r.ma); }} />
                ))}
              </Table>
              {pageRows.length === 0 ? (
                <>
                  <Divider />
                  <RegionState state="empty" message="No matching records" detail="Try another keyword or switch status" />
                </>
              ) : null}
            </Box>
          </Stack>
        </Box>
    </Box>
    </FileDropTarget>

      {/* the intake dialog — CONTROLLED, driven by the toolbar button AND the
          whole-register drop/paste above (opened seeded with the dropped files) */}
      <EnterDataDialog open={intakeOpen} onOpenChange={setIntakeOpen} seedDocs={intakeSeed} onCreate={createRecord} onCreateMany={createRecordsBulk} />

      {/* bulk action over the ticked cases — the shared floating bar */}
      <SelectionBar
        count={sel.count}
        label={(n) => (n === 1 ? `${n} record selected` : `${n} records selected`)}
        onClear={sel.clear}
      >
        {/* Every act renders THROUGH `Toolbar.Button`, which is what puts it in
            the bar's arrow-key group. One that skips it stays its own tab stop
            and the bar's `toolbar` role then promises a model it does not run. */}
        <Button title="Export" color="primary" onPress={() => {}} render={<Toolbar.Button />} />
      </SelectionBar>

      {/* the case workspace — sequenced over the visible page ordering. The
          ScreenRouter wraps the WHOLE drawer so the header can read the stack
          (back button + the pushed record's title live in the drawer chrome,
          like the frontend's record drawers). Keyed by record so ◀ ▶ resets. */}
      {openRow ? (
        <ScreenRouter key={openRow.ma}>
          <RecordDrawer
            hs={openRow}
            openSection={openSection}
            daThu={daThuOf(openRow)}
            onPaid={() => setPaidMap((prev) => ({ ...prev, [openRow.ma]: true }))}
            onClose={() => { setOpenMa(null); setOpenSection(undefined); }}
            onPrev={seqIndex > 0 ? () => setOpenMa(pageRows[seqIndex - 1].ma) : undefined}
            onNext={seqIndex >= 0 && seqIndex < pageRows.length - 1 ? () => setOpenMa(pageRows[seqIndex + 1].ma) : undefined}
            position={seqIndex >= 0 ? { index: seqIndex + 1, total: pageRows.length } : undefined}
          />
        </ScreenRouter>
      ) : null}
    </Box>
  );
}