/** The trend deep-dive — a period of the business and what explains it. */
import { useState } from "react";
import { Text } from "@lotics/ui/text";
import { colors, ramp, solid, tint } from "@lotics/ui/colors";
import {
  Accordion,
  AccordionContent,
  AccordionHeader,
  AccordionMeta,
  AccordionTitle,
} from "@lotics/ui/accordion";
import { ActionMenu, type ActionMenuItem } from "@lotics/ui/action_menu";
import { Avatar } from "@lotics/ui/avatar";
import { Status } from "@lotics/ui/status";
import { Count } from "@lotics/ui/count";
import { BarChart } from "@lotics/ui/bar_chart";
import { LineChart } from "@lotics/ui/line_chart";
import { PieChart } from "@lotics/ui/pie_chart";
import { Progress } from "@lotics/ui/progress";
import { Sparkline } from "@lotics/ui/sparkline";
import { Trend } from "@lotics/ui/trend";
import { Box } from "@lotics/ui/box";
import { Button } from "@lotics/ui/button";
import { Card, CardHeader, CardHeaderTitle, CardHeaderMeta } from "@lotics/ui/card";
import { DateFilter, type DateFilterFieldLabels } from "@lotics/ui/date_filter";
import { type DateFilterValue } from "@lotics/ui/date_filter";
import { Divider } from "@lotics/ui/divider";
import { Drawer, DrawerScrollArea } from "@lotics/ui/drawer";
import { RowFocusEntry } from "@lotics/ui/row_focus_entry";
import { PressableRow } from "@lotics/ui/pressable_row";
import { ScrollArea } from "@lotics/ui/scroll_area";
import { Stack } from "@lotics/ui/stack";
import { type IconName } from "@lotics/ui/icon";
import { MetricStrip } from "@lotics/ui/metric_strip";
import { Peek } from "@lotics/ui/peek";

import { Funnel } from "@lotics/ui/funnel";
import { SplitRow, SplitPane } from "@lotics/ui/split_row";
import { formatMoney } from "@lotics/ui/format_money";
import { type InkColor } from "@lotics/ui/text_ink";

/** The kit's formatters default to the home market, which abbreviates a
 *  magnitude in that market's own words. This screen reads in English, so every
 *  figure states the tag its captions already use — "₫1.05B", "17.4%". */
const LOCALE = "en-US";
const money = (value: number): string => formatMoney(value, { locale: LOCALE });

// ─────────────────────────────────────────────────────────────────────────────
// Template, Dashboard — the executive operations dashboard. One
// screen that answers "how is this month going, where is it stuck, who pays
// the bills".
//
// Bands: header + period badge, MetricStrip, revenue by
// month (BarChart, emerald = money) next to the sales pipeline
// (a split Progress, blue = pipeline), Needs attention (Accordion rows —
// icon + label + a Count; expanding opens the records behind the
// count, each record carries its domain ⋯ ActionMenu), Top customers
// (Avatar + revenue + margin badge; the name Peeks the dossier).
// ─────────────────────────────────────────────────────────────────────────────

const DOANH_THU_THANG = [
  { label: "Jan", month: "2026-01", value: 842 },
  { label: "Feb", month: "2026-02", value: 918 },
  { label: "Mar", month: "2026-03", value: 1054 },
  { label: "Apr", month: "2026-04", value: 986 },
  { label: "May", month: "2026-05", value: 1152 },
  { label: "Jun", month: "2026-06", value: 1284 },
];

// Per-period KPI datasets — the date filter actually filters. Custom ranges
// outside the mock months keep the latest dataset (mock limitation).
const KY_DU_LIEU: Record<
  string,
  {
    doanhThu: number;
    doanhThuTrend: number;
    doanhThuCaption: string;
    bienLai: number;
    bienLaiTrend: number;
    bienLaiCaption: string;
    donDangXuLy: number;
    donCaption: string;
    congNo: number;
    congNoCaption: string;
  }
> = {
  "2026-04": {
    doanhThu: 986_000_000, doanhThuTrend: -6, doanhThuCaption: "Mar: ₫1.05B",
    bienLai: 16.8, bienLaiTrend: -1, bienLaiCaption: "Mar: 17.4%",
    donDangXuLy: 31, donCaption: "2 orders past delivery date",
    congNo: 512_000_000, congNoCaption: "8 customers overdue, up 4%",
  },
  "2026-05": {
    doanhThu: 1_152_000_000, doanhThuTrend: 17, doanhThuCaption: "Apr: ₫986M",
    bienLai: 17.1, bienLaiTrend: 2, bienLaiCaption: "Apr: 16.8%",
    donDangXuLy: 34, donCaption: "3 orders past delivery date",
    congNo: 449_000_000, congNoCaption: "5 customers overdue, down 12%",
  },
  "2026-06": {
    doanhThu: 1_284_000_000, doanhThuTrend: 11, doanhThuCaption: "May: ₫1.15B",
    bienLai: 18.4, bienLaiTrend: 1, bienLaiCaption: "May: 17.1%",
    donDangXuLy: 37, donCaption: "4 orders past delivery date",
    congNo: 486_000_000, congNoCaption: "6 customers overdue, up 8%",
  },
};
const KY_CUOI = "2026-06";

const NHAN_BO_LOC: Partial<DateFilterFieldLabels> = {
  today: "Today", yesterday: "Yesterday", tomorrow: "Tomorrow", thisWeek: "This week",
  thisMonth: "This month", lastMonth: "Last month", from: "From", to: "To",
  selectDateRange: "Select date range", selectDate: "Select date",
  clear: "Clear", done: "Done", placeholder: "All time",
};

function thangRange(year: number, monthIndex: number): DateFilterValue {
  return {
    start: { date: new Date(year, monthIndex, 1), time: null },
    end: { date: new Date(year, monthIndex + 1, 0), time: null },
  };
}

/** "YYYY-MM" when the range is exactly one calendar month, else null. */
function thangKey(value: DateFilterValue): string | null {
  const s = value.start.date;
  const e = value.end.date;
  if (!s || !e) return null;
  const wholeMonth =
    s.getDate() === 1 &&
    s.getMonth() === e.getMonth() &&
    s.getFullYear() === e.getFullYear() &&
    e.getDate() === new Date(e.getFullYear(), e.getMonth() + 1, 0).getDate();
  return wholeMonth ? `${s.getFullYear()}-${String(s.getMonth() + 1).padStart(2, "0")}` : null;
}

const PHEU_STAGES = [
  { key: "tiepcan", label: "Prospecting", count: 46 },
  { key: "baogia", label: "Quote sent", count: 28 },
  { key: "damphan", label: "Negotiation", count: 14 },
  { key: "chot", label: "Closed won", count: 9 },
];
// One hue, shaded along the funnel — closed-won (the win) is the strongest.
const PHEU_RAMP = ramp("blue", PHEU_STAGES.length).reverse();
const PHEU = PHEU_STAGES.map((p, i) => ({ ...p, color: PHEU_RAMP[i] }));

// Margin per month — the LineChart series.
const BIEN_LAI_THANG = [
  { x: "Jan", y: 15.9 }, { x: "Feb", y: 16.4 }, { x: "Mar", y: 17.4 },
  { x: "Apr", y: 16.8 }, { x: "May", y: 17.1 }, { x: "Jun", y: 18.4 },
];

// Revenue mix by customer industry — the PieChart slices.
const CO_CAU = [
  { label: "Machining", value: 392, color: solid("blue") },
  { label: "Furniture", value: 286, color: solid("emerald") },
  { label: "Plastics", value: 248, color: solid("amber") },
  { label: "Other", value: 358, color: solid("zinc") },
];

const KHACH_DAN_DAU = [
  { ten: "Atlas Components", nganh: "Export machining", doanhThu: 312_400_000, bienLai: 22, trend: [38, 44, 51, 47, 56, 62] },
  { ten: "Crestline Plastics", nganh: "Household plastics", doanhThu: 248_900_000, bienLai: 19, trend: [42, 39, 45, 41, 44, 43] },
  { ten: "Brightline Batteries", nganh: "Electrical — batteries", doanhThu: 186_200_000, bienLai: 11, trend: [40, 36, 33, 31, 28, 26] },
  { ten: "Vittoria Accessories", nganh: "Bicycle accessories", doanhThu: 154_700_000, bienLai: 24, trend: [18, 22, 25, 24, 29, 33] },
  { ten: "Northwind Furniture", nganh: "Export furniture", doanhThu: 121_500_000, bienLai: 9, trend: [25, 23, 20, 22, 19, 17] },
];

// Each alert carries the records behind its count — pressing the row opens
// them inline. The count alone says "6 overdue"; the drill-down answers
// "which 6, how bad, what do I open next". Every expanded record gets the
// alert's domain actions via its ⋯ menu — no dead rows.
interface AlertDetail {
  key: string;
  icon: IconName;
  iconColor: InkColor;
  label: string;
  count: number;
  hint: string;
  tone?: "warning";
  records: { id: string; name: string; value: string; note: string; noteTone: "danger" | "muted" }[];
  /** A menu item's `label` is a node in general; every one here is a string,
   *  and the drawer reuses the first as a Button title. */
  rowActions: (Omit<ActionMenuItem, "onPress" | "label"> & { label: string })[];
  action: string;
}

const CAN_CHU_Y: AlertDetail[] = [
  {
    key: "congno",
    icon: "circle-alert",
    iconColor: "danger",
    label: "Receivables overdue past 30 days",
    count: 6,
    hint: money(286_500_000),
    records: [
      { id: "INV-2026-0231", name: "Brightline Batteries", value: money(86_400_000), note: "42 days late", noteTone: "danger" },
      { id: "INV-2026-0246", name: "Northwind Furniture", value: money(64_200_000), note: "35 days late", noteTone: "danger" },
      { id: "INV-2026-0252", name: "Crestline Plastics", value: money(52_800_000), note: "31 days late", noteTone: "danger" },
    ],
    rowActions: [
      { key: "nhac", label: "Send payment reminder", icon: "bell" },
      { key: "doichieu", label: "Send statement", icon: "mail" },
      { key: "mo", label: "Open invoice", icon: "external-link" },
    ],
    action: "Open Receivables",
  },
  {
    key: "trethoigiao",
    icon: "package",
    iconColor: "danger",
    label: "Orders past delivery date",
    count: 4,
    hint: "Earliest overdue since 04/06",
    records: [
      { id: "SO-2026-0418", name: "Atlas Components", value: "Due 04/06", note: "8 days late", noteTone: "danger" },
      { id: "SO-2026-0431", name: "Vittoria Accessories", value: "Due 06/06", note: "6 days late", noteTone: "danger" },
      { id: "SO-2026-0436", name: "Crestline Plastics", value: "Due 09/06", note: "3 days late", noteTone: "danger" },
    ],
    rowActions: [
      { key: "baokhach", label: "Notify customer", icon: "mail" },
      { key: "doingay", label: "Reschedule delivery", icon: "calendar" },
      { key: "mo", label: "Open order", icon: "external-link" },
    ],
    action: "Open Orders",
  },
  {
    key: "ketsx",
    icon: "clock",
    iconColor: "warning",
    label: "Work orders stuck over 2 days",
    count: 2,
    tone: "warning",
    hint: "Printing stage",
    records: [
      { id: "WO-2026-0102", name: "Atlas 5-ply box", value: "Printing stage", note: "Stuck 4 days", noteTone: "danger" },
      { id: "WO-2026-0107", name: "Crestline A3 carton", value: "Printing stage", note: "Stuck 3 days", noteTone: "muted" },
    ],
    rowActions: [
      { key: "nhacto", label: "Notify Printing team", icon: "bell" },
      { key: "mo", label: "Open work order", icon: "external-link" },
    ],
    action: "Open Production",
  },
  {
    key: "baogiacho",
    icon: "file-text",
    iconColor: "warning",
    label: "Quotes awaiting approval",
    count: 3,
    tone: "warning",
    hint: "Send by 13/06",
    records: [
      { id: "QT-2026-0089", name: "Atlas Components", value: money(148_000_000), note: "Waiting 2 days", noteTone: "muted" },
      { id: "QT-2026-0091", name: "Eastgate Trading Co.", value: money(96_500_000), note: "Waiting 1 day", noteTone: "muted" },
      { id: "QT-2026-0092", name: "Crestline Plastics", value: money(54_200_000), note: "Today", noteTone: "muted" },
    ],
    rowActions: [
      { key: "duyet", label: "Approve quote", icon: "check" },
      { key: "mo", label: "Open quote", icon: "external-link" },
      { key: "tuchoi", label: "Reject", icon: "x", danger: true },
    ],
    action: "Open Quotes",
  },
];

// Customer dossier behind the leaderboard name — context glance, the row's
// job is reading, not working the record.
function KhachPeek({ kh }: { kh: (typeof KHACH_DAN_DAU)[number] }) {
  return (
    <Stack gap="none" style={{ gap: 10 }}>
      <Stack direction="row" align="center" gap="none" style={{ gap: 10 }}>
        <Avatar name={kh.ten} size="md" />
        <Stack gap="none" style={{ gap: 2, flex: 1 }}>
          <Text size="sm" weight="semibold">{kh.ten}</Text>
          <Text size="xs" color="muted">{kh.nganh}</Text>
        </Stack>
      </Stack>
      <Divider />
      {([
        ["6-month revenue", money(kh.doanhThu)],
        ["Margin", `${kh.bienLai}%`],
      ] as const).map(([label, value]) => (
        <Stack key={label} direction="row" align="center" gap="none" style={{ gap: 12 }}>
          <Text size="sm" color="muted" style={{ flex: 1 }}>{label}</Text>
          <Text size="sm">{value}</Text>
        </Stack>
      ))}
      <Divider />
      <Button title="Open customer" color="secondary" onPress={() => {}} />
    </Stack>
  );
}

function LegendRow({ stage, total }: { stage: (typeof PHEU)[number]; total: number }) {
  const pct = Math.round((stage.count / total) * 100);
  return (
    <Stack direction="row" align="center" gap="none" style={{ gap: 10 }}>
      <Box style={{ width: 8, height: 8, flexShrink: 0, borderRadius: "var(--lotics-radius-full)", background: stage.color }} />
      <Text size="sm" style={{ flex: 1 }}>{stage.label}</Text>
      <Text size="sm" weight="medium">{stage.count}</Text>
      <Text size="xs" color="muted" style={{ width: 36 }} align="right">
        {pct}%
      </Text>
    </Stack>
  );
}

export function TplDashboard() {
  const tongPheu = PHEU.reduce((sum, s) => sum + s.count, 0);
  const [openAlert, setOpenAlert] = useState<string | null>(null);
  // A pressed record opens its own drawer, sequenced within the alert's list.
  const [openRec, setOpenRec] = useState<{ alertKey: string; idx: number } | null>(null);
  const recAlert = openRec ? CAN_CHU_Y.find((a) => a.key === openRec.alertKey) ?? null : null;
  const rec = recAlert && openRec ? recAlert.records[openRec.idx] : null;
  const [period, setPeriod] = useState<DateFilterValue>(() => thangRange(2026, 5));

  const key = thangKey(period);
  const ky = (key ? KY_DU_LIEU[key] : undefined) ?? KY_DU_LIEU[KY_CUOI];

  return (
    <ScrollArea style={{ flex: 1, background: colors.white }}>
      <Box padding={24}>
        <Stack gap={16} style={{ width: "100%", maxWidth: 960, alignSelf: "center" }}>
          {/* header band — the period filter lives here: presets + custom
              range in the popover (and time, via includeTime, where a
              screen needs it) */}
          <Stack direction="row" align="end" gap="none" style={{ gap: 12 }}>
            <Stack gap="none" style={{ gap: 2, flex: 1 }}>
              <Text size="xxl" weight="semibold">Executive dashboard</Text>
              <Text size="sm" color="muted">Revenue, the sales pipeline and what needs handling — refreshed every morning</Text>
            </Stack>
            <DateFilter
              variant="field"
              value={period}
              onValueChange={setPeriod}
              locale="en-GB"
              labels={NHAN_BO_LOC}
            />
          </Stack>

          {/* The strip follows the selected period; Receivables/Orders drill into the alerts below */}
          <MetricStrip
            items={[
              { label: "Revenue", value: ky.doanhThu, format: "currency", compact: true, locale: LOCALE, trend: ky.doanhThuTrend, caption: ky.doanhThuCaption },
              { label: "Margin", value: ky.bienLai, format: "percentage", locale: LOCALE, trend: ky.bienLaiTrend, caption: ky.bienLaiCaption },
              { label: "Orders in progress", value: ky.donDangXuLy, locale: LOCALE, caption: ky.donCaption, info: "Orders past intake and not yet settled. Overdue ones are listed under Needs attention below." },
              { label: "Receivables", value: ky.congNo, format: "currency", compact: true, locale: LOCALE, tone: "warning", caption: ky.congNoCaption, info: "Unpaid invoices at the end of the period. The overdue list sits under Needs attention below." },
            ]}
          />

          {/* chart row 1: revenue by month (BarChart + Trend), margin trend (LineChart) */}
          <SplitRow>
            <SplitPane weight={3}>
              <Card padding="none" style={{ flex: 1 }}>
              <CardHeader>
                <CardHeaderTitle info="Revenue recognized by invoice date, before discounts">
                  Revenue by month
                </CardHeaderTitle>
                <CardHeaderMeta>Unit: ₫ million</CardHeaderMeta>
              </CardHeader>
              <Stack gap="none" style={{ paddingInline: 16, paddingBlock: 16, gap: 12 }}>
                {/* the filtered month pops; the rest recede to context */}
                <BarChart
                  data={DOANH_THU_THANG.map((m) => ({
                    ...m,
                    color: key === null || m.month === key ? solid("emerald") : tint("emerald", 0.4),
                  }))}
                  formatNumber={(n) => n.toLocaleString("en-GB")}
                />
                <Trend variant="line" value={11} periodLabel="vs last month" detail="May: ₫1.15B" />
              </Stack>
              </Card>
            </SplitPane>

            <SplitPane weight={2}>
              <Card padding="none" style={{ flex: 1 }}>
              <CardHeader>
                <CardHeaderTitle info="Gross margin per month — revenue minus snapshotted cost of goods">
                  Margin trend
                </CardHeaderTitle>
                <CardHeaderMeta>%</CardHeaderMeta>
              </CardHeader>
              <Box style={{ paddingInline: 16, paddingBlock: 16, flex: 1, justifyContent: "center" }}>
                <LineChart points={BIEN_LAI_THANG} height={150} lineColor={solid("blue")} formatNumber={(n) => `${n}%`} />
              </Box>
              </Card>
            </SplitPane>
          </SplitRow>

          {/* chart row 2: pipeline funnel, revenue mix, on-time delivery */}
          <SplitRow>
            <SplitPane weight={3}>
              <Card padding="none" style={{ flex: 1 }}>
              <CardHeader>
                <CardHeaderTitle info="Open opportunities at each stage, updated from Quotes">
                  Sales pipeline
                </CardHeaderTitle>
                <CardHeaderMeta>{`${tongPheu} opportunities`}</CardHeaderMeta>
              </CardHeader>
              <Stack gap="none" style={{ paddingInline: 16, paddingBlock: 16, gap: 12, flex: 1 }}>
                <Progress
                  value={PHEU.map((s) => ({ key: s.key, value: s.count, color: s.color }))}
                  max={tongPheu}
                />
                <Stack gap="none" style={{ gap: 10 }}>
                  {PHEU.map((s) => <LegendRow key={s.key} stage={s} total={tongPheu} />)}
                </Stack>
                <Box style={{ flex: 1 }} />
                <Text size="xs" color="muted">Quote-to-close rate: 32% — up on last quarter</Text>
              </Stack>
              </Card>
            </SplitPane>

            <SplitPane weight={3}>
              <Card padding="none" style={{ flex: 1 }}>
              <CardHeader>
                <CardHeaderTitle info="Period revenue split by customer industry">
                  Revenue mix
                </CardHeaderTitle>
                <CardHeaderMeta>₫ million</CardHeaderMeta>
              </CardHeader>
              <Box style={{ paddingInline: 16, paddingBlock: 16, flex: 1, justifyContent: "center" }}>
                <PieChart slices={CO_CAU} size={140} showLegend formatNumber={(n) => n.toLocaleString("en-GB")} />
              </Box>
              </Card>
            </SplitPane>

            <SplitPane weight={2}>
              <Card padding="none" style={{ flex: 1 }}>
              <CardHeader>
                <CardHeaderTitle info="Deliveries that arrived on or before the needed-by date this period">
                  On-time delivery
                </CardHeaderTitle>
              </CardHeader>
              <Box style={{ paddingInline: 16, paddingBlock: 16, flex: 1, alignItems: "center", justifyContent: "center" }}>
                <Progress shape="ring" value={87} title="On time" caption="33 of 38 deliveries" color={solid("emerald")} />
              </Box>
              </Card>
            </SplitPane>
          </SplitRow>

          {/* chart row 3: the SAME pipeline as a CONVERSION funnel — narrowing
              cohorts + step drop-off rates, the subset lens vs the composition bar above */}
          <Stack direction="row" gap={16}>
            <Card padding="none" style={{ flex: 1 }}>
              <CardHeader>
                <CardHeaderTitle info="Of all prospects, how many reach each stage — the drop-off from first contact to a closed win">
                  Conversion funnel
                </CardHeaderTitle>
                <CardHeaderMeta>This quarter</CardHeaderMeta>
              </CardHeader>
              <Box style={{ paddingInline: 16, paddingBlock: 16 }}>
                <Funnel stages={PHEU_STAGES.map((s) => ({ key: s.key, label: s.label, value: s.count }))} color={solid("blue")} />
              </Box>
            </Card>
          </Stack>

          {/* needs attention — each row expands in place to the records behind its count */}
          <Card padding="none">
            <CardHeader>
              <CardHeaderTitle info="Backlog past its threshold, worst first — press a row to see the records behind the count">
                Needs attention
              </CardHeaderTitle>
            </CardHeader>
            <Box style={{ paddingInline: 16, paddingBlock: 6 }}>
              {CAN_CHU_Y.map((a) => (
                <Accordion
                  key={a.key}
                  expanded={openAlert === a.key}
                  onToggle={() => setOpenAlert(openAlert === a.key ? null : a.key)}
                >
                    <AccordionHeader accessibilityLabel={a.label}>
                      <AccordionTitle icon={a.icon} iconColor={a.iconColor}>{a.label}</AccordionTitle>
                      <AccordionMeta>{a.hint}</AccordionMeta>
                      <Count count={a.count} color={a.tone === "warning" ? "highlight" : "red"} />
                    </AccordionHeader>
                    <AccordionContent>
                      {/* drill-down sub-rows: inset PressableRow so the wash spans
                          the whole row incl. the ⋯; no dividers — the rounded
                          hover separates them. Press = workspace, ⋯ = quick ops. */}
                      {a.records.map((r, j) => (
                          <PressableRow
                            key={r.id}
                            variant="inset"
                            onPress={() => setOpenRec({ alertKey: a.key, idx: j })}
                            selected={openRec?.alertKey === a.key && openRec?.idx === j}
                            style={{ gap: 8, minHeight: 40 }}
                          >
                            <RowFocusEntry
                              onPress={() => setOpenRec({ alertKey: a.key, idx: j })}
                              accessibilityLabel={`Open ${r.id}`}
                              radius={8}
                            />
                            <Stack direction="row" align="center" gap="none" style={{ flex: 1, gap: 16 }}>
                              <Text size="sm" weight="medium" style={{ width: 124 }}>{r.id}</Text>
                              <Text size="sm" lines={1} style={{ flex: 1 }}>{r.name}</Text>
                              <Text size="sm">{r.value}</Text>
                              <Text size="xs" color={r.noteTone} style={{ width: 88 }} align="right">{r.note}</Text>
                            </Stack>
                            {/* Lifted over the door, which hit-tests above in-flow content. */}
                            <ActionMenu
                              accessibilityLabel={`Actions for ${r.id}`}
                              style={{ position: "relative", zIndex: "var(--lotics-z-row-content)" }}
                              items={a.rowActions.map((act) => ({ ...act, onPress: () => {} }))}
                            />
                          </PressableRow>
                      ))}
                      <Stack direction="row" align="center" gap="none" style={{ paddingTop: 8, paddingBottom: 2, gap: 12 }}>
                        <Text size="xs" color="muted" style={{ flex: 1 }}>
                          {a.count > a.records.length
                            ? `Showing ${a.records.length} of ${a.count} — open the list to see all`
                            : "Full list"}
                        </Text>
                        <Button title={a.action} color="secondary" onPress={() => {}} />
                      </Stack>
                    </AccordionContent>
                </Accordion>
              ))}
            </Box>
          </Card>

          {/* top customers */}
          <Card padding="none">
            <CardHeader>
              <CardHeaderTitle info="Top customers by trailing 6-month revenue, with each customer's margin">
                Top customers
              </CardHeaderTitle>
              <CardHeaderMeta>Trailing 6-month revenue</CardHeaderMeta>
            </CardHeader>
            {KHACH_DAN_DAU.map((kh, i) => (
              <Box key={kh.ten}>
                {i > 0 ? <Divider /> : null}
                <Stack direction="row" align="center" gap="none" style={{ paddingInline: 16, paddingBlock: 12, gap: 12 }}>
                  <Avatar name={kh.ten} size="md" />
                  <Stack gap="none" style={{ flex: 1, alignItems: "flex-start" }}>
                    <Peek accessibilityLabel={`Customer profile for ${kh.ten}`} content={<KhachPeek kh={kh} />}>
                      <Text size="sm" weight="medium" leading="tight" lines={1}>{kh.ten}</Text>
                    </Peek>
                    {/* Body size — the mark and the name's weight separate this
                        pair; see composition.md on what decides the rung. */}
                    <Text size="sm" color="muted" leading="tight" lines={1}>{kh.nganh}</Text>
                  </Stack>
                  <Sparkline data={kh.trend} width={84} height={24} color={kh.trend[5] >= kh.trend[0] ? solid("emerald") : solid("red")} />
                  <Text size="sm" weight="medium">{money(kh.doanhThu)}</Text>
                  {/* margin is a METRIC, not a status — the dot variant signals
                      its quality (healthy ≥15% vs thin) without a heavy chip */}
                  <Box style={{ width: 104, flexShrink: 0, alignItems: "flex-end" }}>
                    <Status variant="dot" label={`${kh.bienLai}% margin`} color={kh.bienLai >= 15 ? "emerald" : "amber"} />
                  </Box>
                </Stack>
              </Box>
            ))}
          </Card>
        </Stack>

        {/* The overlay is RENDERED and its `open` toggles — a `{cond ? <Drawer/> : null}` is the
            one shape an overlay may not take. Only the BODY is conditional. */}
        <Drawer
          open={rec !== null}
          onOpenChange={(open) => !open && setOpenRec(null)}
          title={rec?.id}
          width={440}
          onPrev={openRec && openRec.idx > 0 ? () => setOpenRec({ alertKey: openRec.alertKey, idx: openRec.idx - 1 }) : undefined}
          onNext={openRec && recAlert && openRec.idx < recAlert.records.length - 1 ? () => setOpenRec({ alertKey: openRec.alertKey, idx: openRec.idx + 1 }) : undefined}
          position={openRec && recAlert ? { index: openRec.idx + 1, total: recAlert.records.length } : undefined}
        >
          {recAlert && rec ? (
            <>
              <DrawerScrollArea key={rec.id}>
                <Stack gap="none" style={{ gap: 12 }}>
                  <Status label={recAlert.label} color={recAlert.tone === "warning" ? "amber" : "red"} />
                  <Stack gap="none" style={{ gap: 10, paddingTop: 4 }}>
                    <Stack direction="row" align="center" gap="none" style={{ gap: 12 }}>
                      <Text size="sm" color="muted" style={{ flex: 1 }}>Customer</Text>
                      <Text size="sm" weight="medium">{rec.name}</Text>
                    </Stack>
                    <Divider />
                    <Stack direction="row" align="center" gap="none" style={{ gap: 12 }}>
                      <Text size="sm" color="muted" style={{ flex: 1 }}>Amount / due</Text>
                      <Text size="sm">{rec.value}</Text>
                    </Stack>
                    <Divider />
                    <Stack direction="row" align="center" gap="none" style={{ gap: 12 }}>
                      <Text size="sm" color="muted" style={{ flex: 1 }}>Status</Text>
                      <Text size="sm" color={rec.noteTone}>{rec.note}</Text>
                    </Stack>
                  </Stack>
                </Stack>
              </DrawerScrollArea>
              <Stack
                direction="row"
                align="center"
                justify="end"
                gap="none"
                style={{
                  borderTop: `1px solid ${colors.border}`,
                  paddingInline: 16,
                  paddingBlock: 12,
                  gap: 12,
                }}
              >
                <Button title={recAlert.rowActions[0]?.label ?? "Remind"} color="secondary" onPress={() => {}} />
                <Button title="Open record" color="primary" onPress={() => {}} />
              </Stack>
            </>
          ) : null}
        </Drawer>
      </Box>
    </ScrollArea>
  );
}