// Finance / reconciliation page

// === Derived mock data (inline, not exported) ===
const seedFin = (i, n) => Math.floor(Math.abs(Math.sin(i * 937.3)) * n);
const BANK_NAMES = ["國泰世華", "玉山", "中國信託", "台新", "富邦", "永豐", "合作金庫"];

const WITHDRAWALS = [];

const TX_TYPES = {
  order_payment: { label: "訂單付款", tone: "success", sign: "+" },
  escrow_release: { label: "託管撥款", tone: "info", sign: "−" },
  platform_fee: { label: "平台抽成", tone: "accent", sign: "+" },
  refund: { label: "退款", tone: "danger", sign: "−" },
  withdrawal: { label: "創作者提領", tone: "default", sign: "−" },
  adjustment: { label: "手動調帳", tone: "warn", sign: "±" },
};

const TRANSACTIONS = [];

const FinancePage = () => {
  const [tab, setTab] = useState("overview");
  const [financeData, setFinanceData] = useState(null);
  const [loading, setLoading] = useState(true);
  const nowYM = new Date().toISOString().slice(0, 7);
  const [selectedMonth, setSelectedMonth] = useState(nowYM);
  const monthPickerRef = React.useRef(null);

  useEffect(() => {
    setLoading(true);
    fetch(`/api/admin/finance?month=${selectedMonth}`)
      .then(r => r.ok ? r.json() : null)
      .then(d => { if (d) setFinanceData(d); })
      .catch(() => {})
      .finally(() => setLoading(false));
  }, [selectedMonth]);

  const txCount = financeData?.transactions?.length ?? 0;
  const reconCount = financeData?.reconRows?.length ?? 0;

  const monthLabel = (() => {
    const [y, m] = selectedMonth.split("-");
    return `${y} 年 ${parseInt(m)} 月`;
  })();

  return (
    <div className="fade-in">
      <PageHeader
        title="財務管理"
        subtitle="平台金流、提領審核、交易紀錄"
        actions={<>
          <div style={{ position: "relative", display: "inline-flex", alignItems: "center" }}>
            <Button variant="secondary" icon="calendar" onClick={() => monthPickerRef.current?.showPicker?.() || monthPickerRef.current?.click()}>{monthLabel}</Button>
            <input
              ref={monthPickerRef}
              type="month"
              value={selectedMonth}
              onChange={e => setSelectedMonth(e.target.value)}
              style={{ position: "absolute", opacity: 0, pointerEvents: "none", width: 0, height: 0 }}
            />
          </div>
        </>}
      />

      <div style={{ marginBottom: 20 }}>
        <Tabs active={tab} onChange={setTab} tabs={[
          { value: "overview", label: "財務總覽" },
          { value: "withdrawals", label: "提領審核", count: WITHDRAWALS.filter(w => w.status === "pending").length },
          { value: "transactions", label: "交易紀錄", count: txCount },
          { value: "reconciliation", label: "每日對帳", count: reconCount },
        ]}/>
      </div>

      {tab === "overview" && <FinanceOverview kpi={financeData?.kpi} loading={loading}/>}
      {tab === "withdrawals" && <WithdrawalsTab/>}
      {tab === "transactions" && <TransactionsTab transactions={financeData?.transactions ?? []} loading={loading}/>}
      {tab === "reconciliation" && <FinanceReconciliation reconRows={financeData?.reconRows ?? []} loading={loading}/>}
      {tab === "payouts" && <FinancePayouts/>}
    </div>
  );
};

// ============== Overview ==============

const FinanceOverview = ({ kpi, loading }) => {
  const gmv = kpi?.gmv ?? 0;
  const platformTotal = kpi?.platformFee ?? 0;
  const payoutTotal = kpi?.artistPayout ?? 0;
  const txTotal = Math.round(gmv * 0.015);
  const escrow = kpi?.escrow ?? 0;
  const refundTotal = kpi?.refundTotal ?? 0;
  const activeCount = kpi?.activeCount ?? 0;

  if (loading) return <div style={{ padding: 48, textAlign: "center", color: "var(--ink-3)" }}>載入中…</div>;

  return (
    <>
      {/* 4 key metrics */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 16 }}>
        <MetricCard
          label="託管中金額"
          subLabel="業主已付款 · 待階段撥付"
          value={escrow} icon="lock" tone="warn"
          detail={<>涵蓋 <b>{activeCount}</b> 筆進行中訂單</>}
        />
        <MetricCard
          label="平台收入"
          subLabel="平台抽成 (已完成訂單)"
          value={platformTotal + txTotal} icon="coin" tone="accent"
        />
        <MetricCard
          label="創作者應結分潤"
          subLabel="已完成訂單"
          value={payoutTotal} icon="sparkle" tone="success"
        />
        <MetricCard
          label="退款總額"
          subLabel="已被婉拒訂單"
          value={refundTotal} icon="refresh" tone="danger"
        />
      </div>

      {/* GMV hero card */}
      <Card padding={28} style={{
        background: "linear-gradient(135deg, var(--ink) 0%, #2E2923 100%)",
        color: "#fff", marginBottom: 16,
      }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr 1fr", gap: 32 }}>
          <div>
            <div style={{ fontSize: 12, opacity: 0.6, marginBottom: 6 }}>累計 GMV（已完成訂單）</div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
              <span style={{ fontSize: 14, opacity: 0.7 }}>NT$</span>
              <span className="serif" style={{ fontSize: 44, lineHeight: 1, letterSpacing: -1 }}>{fmtNum(gmv)}</span>
            </div>
            <div style={{ fontSize: 12, opacity: 0.6, marginTop: 8 }}>已完成訂單累計</div>
          </div>
          {[
            { label: "平台抽成 (15%)", value: platformTotal, color: "var(--accent)" },
            { label: "創作者應結分潤 (85%)", value: payoutTotal, color: "#7FE2B6" },
            { label: "金流手續費 (1.5%)", value: txTotal, color: "#FFC87A" },
          ].map(s => (
            <div key={s.label} style={{ borderLeft: "1px solid rgba(255,255,255,0.1)", paddingLeft: 24 }}>
              <div style={{ fontSize: 12, opacity: 0.6, marginBottom: 6 }}>{s.label}</div>
              <div className="mono" style={{ fontSize: 22, fontWeight: 500 }}>{fmtCurrency(s.value)}</div>
              <div style={{ width: 60, height: 3, background: s.color, borderRadius: 999, marginTop: 10 }}/>
            </div>
          ))}
        </div>
      </Card>

      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 16 }}>
        <Card padding={24}>
          <div style={{ marginBottom: 16 }}>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>每日營收</div>
            <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 2 }}>平台抽成 vs 創作者分潤</div>
          </div>
          <FinanceBarChart/>
        </Card>

        <Card padding={24}>
          <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 4 }}>結算週期</div>
          <div style={{ fontSize: 12, color: "var(--ink-3)", marginBottom: 18 }}>創作者款項每雙週結算</div>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: 160, color: "var(--ink-4)", gap: 8 }}>
            <Icon name="coin" size={28}/>
            <div style={{ fontSize: 13 }}>暫無結算紀錄</div>
          </div>
        </Card>
      </div>
    </>
  );
};

const MetricCard = ({ label, subLabel, value, icon, tone, delta, deltaTone, detail }) => (
  <Card padding={18}>
    <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 8 }}>
      <div>
        <div style={{ fontSize: 12, color: "var(--ink-3)", fontWeight: 500 }}>{label}</div>
        <div style={{ fontSize: 10.5, color: "var(--ink-4)", marginTop: 2 }}>{subLabel}</div>
      </div>
      <div style={{
        width: 32, height: 32, borderRadius: 8,
        background: `var(--${tone}-soft)`, color: `var(--${tone})`,
        display: "flex", alignItems: "center", justifyContent: "center",
      }}><Icon name={icon} size={15}/></div>
    </div>
    <div className="serif" style={{ fontSize: 24, lineHeight: 1.1, letterSpacing: -0.3, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>NT$ {fmtNum(Math.round(value))}</div>
    <div style={{ marginTop: 10, fontSize: 11.5, color: "var(--ink-3)", display: "flex", alignItems: "center", gap: 6 }}>
      {delta && <span style={{ color: `var(--${deltaTone || "success"})`, fontWeight: 500 }}>{delta}</span>}
      {delta && <span style={{ color: "var(--ink-4)" }}>較上月</span>}
      {detail && <span>{detail}</span>}
    </div>
  </Card>
);

const FinanceBarChart = () => (
  <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: 160, color: "var(--ink-4)", gap: 8 }}>
    <Icon name="chart" size={28}/>
    <div style={{ fontSize: 13 }}>暫無歷史數據</div>
  </div>
);

// ============== Withdrawals ==============

const WithdrawalsTab = () => {
  const [tab, setTab] = useState("pending");
  const [query, setQuery] = useState("");
  const [selected, setSelected] = useState([]);
  const [actionDialog, setActionDialog] = useState(null); // { kind, wds: [] }
  const toast = useToast();

  const filtered = WITHDRAWALS.filter(w => {
    if (tab === "pending" && w.status !== "pending") return false;
    if (tab === "approved" && w.status !== "approved") return false;
    if (tab === "rejected" && w.status !== "rejected") return false;
    if (query && !w.id.includes(query) && !w.user.name.includes(query)) return false;
    return true;
  });

  const toggleSelect = (id) => setSelected(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
  const selectAll = () => setSelected(selected.length === filtered.length ? [] : filtered.filter(w => w.status === "pending").map(w => w.id));

  const counts = {
    pending: WITHDRAWALS.filter(w => w.status === "pending").length,
    approved: WITHDRAWALS.filter(w => w.status === "approved").length,
    rejected: WITHDRAWALS.filter(w => w.status === "rejected").length,
  };

  const pendingTotal = WITHDRAWALS.filter(w => w.status === "pending").reduce((s, w) => s + w.amount, 0);

  const handleAction = (kind, wds) => setActionDialog({ kind, wds });

  return (
    <div>
      {/* Summary banner */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginBottom: 16 }}>
        <Card padding={16}>
          <div style={{ fontSize: 12, color: "var(--ink-3)" }}>待審核申請</div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginTop: 4 }}>
            <span className="serif" style={{ fontSize: 24 }}>{counts.pending}</span>
            <span style={{ fontSize: 12, color: "var(--ink-3)" }}>筆</span>
          </div>
        </Card>
        <Card padding={16}>
          <div style={{ fontSize: 12, color: "var(--ink-3)" }}>待放款金額</div>
          <div className="serif" style={{ fontSize: 22, marginTop: 4 }}>NT$ {fmtNum(pendingTotal)}</div>
        </Card>
        <Card padding={16}>
          <div style={{ fontSize: 12, color: "var(--ink-3)" }}>平均處理時間</div>
          <div className="serif" style={{ fontSize: 22, marginTop: 4 }}>4.2 <span style={{ fontSize: 13, color: "var(--ink-3)" }}>小時</span></div>
        </Card>
      </div>

      <div style={{ marginBottom: 12, display: "flex", alignItems: "center", gap: 8 }}>
        <Tabs active={tab} onChange={setTab} tabs={[
          { value: "pending", label: "待審核", count: counts.pending },
          { value: "approved", label: "已通過", count: counts.approved },
          { value: "rejected", label: "已拒絕", count: counts.rejected },
        ]}/>
        <div style={{ flex: 1 }}/>
        <div style={{ width: 240 }}><Input icon="search" placeholder="提領 ID、創作者…" value={query} onChange={e => setQuery(e.target.value)}/></div>
      </div>

      {/* Bulk actions bar */}
      {selected.length > 0 && (
        <Card padding={12} style={{ marginBottom: 12, display: "flex", alignItems: "center", gap: 12, background: "var(--accent-soft)", borderColor: "var(--accent)" }}>
          <Icon name="check" size={15} style={{ color: "var(--accent)" }}/>
          <div style={{ fontSize: 13, color: "var(--ink-2)" }}>
            已選取 <b>{selected.length}</b> 筆 · 合計 <b className="mono">NT$ {fmtNum(filtered.filter(w => selected.includes(w.id)).reduce((s, w) => s + w.amount, 0))}</b>
          </div>
          <div style={{ flex: 1 }}/>
          <Button size="sm" variant="secondary" onClick={() => setSelected([])}>取消選取</Button>
          <Button size="sm" variant="secondary" onClick={() => handleAction("reject", filtered.filter(w => selected.includes(w.id)))} style={{ color: "var(--danger)" }}>拒絕</Button>
          <Button size="sm" variant="primary" onClick={() => handleAction("approve", filtered.filter(w => selected.includes(w.id)))}>批次通過</Button>
        </Card>
      )}

      <Card padding={0} style={{ overflow: "hidden" }}>
        <div style={{ overflowX: "auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "36px 130px 1.4fr 130px 200px 110px 90px 150px", minWidth: 1080, padding: "10px 16px", borderBottom: "1px solid var(--border)", background: "var(--surface-2)", fontSize: 11, fontWeight: 600, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: 0.6 }}>
          <Checkbox checked={selected.length === filtered.filter(w => w.status === "pending").length && filtered.length > 0} onChange={selectAll}/>
          <div>申請編號</div>
          <div>創作者</div>
          <div style={{ textAlign: "right" }}>申請金額</div>
          <div>收款銀行</div>
          <div>申請時間</div>
          <div>狀態</div>
          <div style={{ textAlign: "right" }}>動作</div>
        </div>
        {filtered.map(w => (
          <WithdrawalRow
            key={w.id}
            withdrawal={w}
            selected={selected.includes(w.id)}
            onToggleSelect={() => toggleSelect(w.id)}
            onAction={handleAction}
          />
        ))}
        {filtered.length === 0 && (
          <div style={{ padding: "60px 16px", textAlign: "center", color: "var(--ink-4)", fontSize: 13 }}>
            <Icon name="check" size={26} style={{ color: "var(--success)", marginBottom: 8 }}/>
            <div>目前沒有符合條件的申請</div>
          </div>
        )}
        </div>
      </Card>

      {actionDialog && (
        <WithdrawalActionDialog
          kind={actionDialog.kind}
          withdrawals={actionDialog.wds}
          onClose={() => setActionDialog(null)}
          onConfirm={() => {
            const label = actionDialog.kind === "approve" ? "已通過" : "已拒絕";
            const total = actionDialog.wds.reduce((s, w) => s + w.amount, 0);
            toast({
              title: `提領申請${label}`,
              message: `${actionDialog.wds.length} 筆 · NT$ ${fmtNum(total)} · ${actionDialog.kind === "approve" ? "款項將於 1-2 工作日入帳" : "款項已退回創作者可用餘額"}`,
              icon: "check",
            });
            setSelected([]);
            setActionDialog(null);
          }}
        />
      )}
    </div>
  );
};

const WithdrawalRow = ({ withdrawal: w, selected, onToggleSelect, onAction }) => {
  const isPending = w.status === "pending";
  const statusMap = {
    pending: { label: "待審核", tone: "warn" },
    approved: { label: "已通過", tone: "success" },
    rejected: { label: "已拒絕", tone: "danger" },
  };
  return (
    <div style={{
      display: "grid", gridTemplateColumns: "36px 130px 1.4fr 130px 200px 110px 90px 150px",
      minWidth: 1080,
      padding: "14px 16px", alignItems: "center",
      borderBottom: "1px solid var(--border)",
      background: selected ? "var(--accent-soft)" : "transparent",
    }}>
      <Checkbox checked={selected} onChange={onToggleSelect} disabled={!isPending}/>
      <div className="mono" style={{ fontSize: 12 }}>{w.id}</div>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <Avatar hue={w.user.avatar.hue} glyph={w.user.avatar.glyph} size={30}/>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 13.5, fontWeight: 500, display: "flex", gap: 6, alignItems: "center" }}>
            {w.user.name}
            {w.firstWithdrawal && <Badge tone="warn" size="sm">首次提領</Badge>}
            {!w.kycVerified && <Badge tone="danger" size="sm"><Icon name="alert" size={9}/> KYC 未驗證</Badge>}
          </div>
          <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>{w.user.id} · {w.user.level}</div>
        </div>
      </div>
      <div style={{ textAlign: "right" }}>
        <div className="mono" style={{ fontSize: 14, fontWeight: 500 }}>NT$ {fmtNum(w.amount)}</div>
        <div style={{ fontSize: 10.5, color: "var(--ink-4)" }}>可用 NT$ {fmtNum(w.availableBalance)}</div>
      </div>
      <div>
        <div style={{ fontSize: 12.5 }}>{w.bank}</div>
        <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 2 }}>
          <MaskedValue value={w.bankAccount} type="bank" onReveal={cb => cb()}/>
        </div>
      </div>
      <div style={{ fontSize: 12, color: "var(--ink-3)" }}>{w.requestedAt}</div>
      <div><Badge tone={statusMap[w.status].tone} size="sm" dot>{statusMap[w.status].label}</Badge></div>
      <div style={{ textAlign: "right", display: "flex", gap: 6, justifyContent: "flex-end" }}>
        {isPending ? (
          <>
            <Button size="sm" variant="ghost" onClick={() => onAction("reject", [w])} style={{ color: "var(--danger)" }}>拒絕</Button>
            <Button size="sm" variant="primary" onClick={() => onAction("approve", [w])}>通過</Button>
          </>
        ) : (
          <Button size="sm" variant="ghost">查看</Button>
        )}
      </div>
    </div>
  );
};

const WithdrawalActionDialog = ({ kind, withdrawals, onClose, onConfirm }) => {
  const total = withdrawals.reduce((s, w) => s + w.amount, 0);
  const cfg = kind === "approve" ? {
    title: withdrawals.length === 1 ? `通過提領 · ${withdrawals[0].id}` : `批次通過 ${withdrawals.length} 筆提領`,
    description: <>
      款項將於 <b>1-2 工作日</b>匯入創作者指定銀行帳戶。
      <div style={{ marginTop: 10, padding: "8px 12px", background: "var(--info-soft)", borderRadius: 6, fontSize: 12.5 }}>
        總金額 <b className="mono">NT$ {fmtNum(total)}</b> · 平台金流費 <b className="mono">NT$ {fmtNum(Math.round(total * 0.008))}</b>
      </div>
    </>,
    variant: "info", icon: "check", confirmText: "確認通過",
    reasonLabel: "備註 (選填)",
    reasonPlaceholder: "例:常規審核,KYC 完整,金額合理。",
    requireOtp: withdrawals.length > 1 || total >= 50000,
  } : {
    title: withdrawals.length === 1 ? `拒絕提領 · ${withdrawals[0].id}` : `批次拒絕 ${withdrawals.length} 筆`,
    description: <>
      申請將被拒絕,金額 <b className="mono">NT$ {fmtNum(total)}</b> 退回創作者可用餘額。
      拒絕理由會以<b>站內信 + Email</b> 寄給申請人。
    </>,
    variant: "danger", icon: "ban", confirmText: "確認拒絕",
    reasonLabel: "拒絕理由 (會寄給創作者)",
    reasonPlaceholder: "例:銀行帳戶姓名與會員姓名不符,請重新填寫或上傳證明。",
    extraField: {
      label: "拒絕分類",
      type: "select",
      defaultValue: "kyc",
      options: [
        { value: "kyc", label: "KYC 驗證不完整" },
        { value: "bank_mismatch", label: "銀行帳戶姓名不符" },
        { value: "suspicious", label: "疑似異常交易" },
        { value: "insufficient", label: "餘額不足 / 有未結訂單" },
        { value: "other", label: "其他" },
      ],
    },
  };
  return (
    <ConfirmDialog
      open onClose={onClose} onConfirm={onConfirm}
      title={cfg.title} description={cfg.description}
      variant={cfg.variant} icon={cfg.icon} confirmText={cfg.confirmText}
      requireReason reasonLabel={cfg.reasonLabel} reasonPlaceholder={cfg.reasonPlaceholder}
      extraField={cfg.extraField} requireOtp={cfg.requireOtp}
    />
  );
};

// ============== Transactions ==============

const TransactionsTab = ({ transactions = [], loading }) => {
  const [query, setQuery] = useState("");
  const [typeFilter, setTypeFilter] = useState("all");
  const [dateRange, setDateRange] = useState("all");
  const [operator, setOperator] = useState("all");
  const [page, setPage] = useState(0);
  const toast = useToast();
  useEffect(() => { setPage(0); }, [query, typeFilter, dateRange, operator]);

  if (loading) return <div style={{ padding: 48, textAlign: "center", color: "var(--ink-3)" }}>載入中…</div>;

  const filtered = transactions.filter(t => {
    if (query) {
      const q = query.toLowerCase();
      if (!t.id.toLowerCase().includes(q) && !(t.orderId || "").toLowerCase().includes(q) && !(t.counterparty || "").includes(query)) return false;
    }
    if (typeFilter !== "all" && t.type !== typeFilter) return false;
    if (operator === "system" && t.operator !== "系統自動") return false;
    if (operator === "manual" && t.operator === "系統自動") return false;
    return true;
  });

  const totalIn = filtered.filter(t => TX_TYPES[t.type].sign === "+").reduce((s, t) => s + t.amount, 0);
  const totalOut = filtered.filter(t => TX_TYPES[t.type].sign === "−").reduce((s, t) => s + t.amount, 0);

  const handleExport = () => {
    const header = "交易編號,訂單編號,交易類型,金額,對象,操作人,時間戳,關聯單號\n";
    const rows = filtered.map(t => [t.id, t.orderId || "—", TX_TYPES[t.type].label, `${TX_TYPES[t.type].sign}${t.amount}`, t.counterparty, t.operator, t.timestamp, t.reference].join(","));
    const csv = header + rows.join("\n");
    try {
      const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url; a.download = `transactions_${Date.now()}.csv`; a.click();
      URL.revokeObjectURL(url);
    } catch (e) {}
    toast({ title: "CSV 已匯出", message: `${filtered.length} 筆交易紀錄 · 操作已記入審計日誌`, icon: "download" });
  };

  return (
    <div>
      {/* Filter bar */}
      <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 14, flexWrap: "wrap" }}>
        <div style={{ flex: 1, maxWidth: 320, minWidth: 200 }}>
          <Input icon="search" placeholder="交易 / 訂單編號、對象…" value={query} onChange={e => setQuery(e.target.value)}/>
        </div>
        <Select value={typeFilter} onChange={setTypeFilter} icon="filter" options={[
          { value: "all", label: "所有類型" },
          ...Object.entries(TX_TYPES).map(([k, v]) => ({ value: k, label: v.label })),
        ]}/>
        <Select value={dateRange} onChange={setDateRange} icon="calendar" options={[
          { value: "all", label: "所有日期" }, { value: "today", label: "今日" },
          { value: "7d", label: "近 7 日" }, { value: "30d", label: "近 30 日" },
        ]}/>
        <Select value={operator} onChange={setOperator} icon="users" options={[
          { value: "all", label: "所有操作人" }, { value: "system", label: "系統自動" }, { value: "manual", label: "管理員手動" },
        ]}/>
        <div style={{ flex: 1 }}/>
        <Button variant="secondary" icon="download" onClick={handleExport}>匯出 CSV</Button>
      </div>

      {/* Totals banner */}
      <div style={{ padding: "10px 16px", background: "var(--surface-2)", borderRadius: 10, marginBottom: 12, display: "flex", alignItems: "center", gap: 20, fontSize: 12.5 }}>
        <span>{filtered.length} 筆交易</span>
        <span style={{ color: "var(--ink-4)" }}>|</span>
        <span>流入 <b className="mono" style={{ color: "var(--success)" }}>+ NT$ {fmtNum(totalIn)}</b></span>
        <span>流出 <b className="mono" style={{ color: "var(--danger)" }}>− NT$ {fmtNum(totalOut)}</b></span>
        <span style={{ color: "var(--ink-4)" }}>|</span>
        <span>淨額 <b className="mono">NT$ {fmtNum(totalIn - totalOut)}</b></span>
      </div>

      <Table
        columns={[
          { title: "交易編號", render: t => <span className="mono" style={{ fontSize: 12 }}>{t.id}</span> },
          { title: "訂單編號", render: t => t.orderId ? <span className="mono" style={{ fontSize: 12 }}>{t.orderId}</span> : <span style={{ color: "var(--ink-4)", fontSize: 12 }}>—</span> },
          { title: "類型", render: t => <Badge tone={TX_TYPES[t.type].tone} size="sm">{TX_TYPES[t.type].label}</Badge> },
          { title: "金額", align: "right", render: t => {
            const sign = TX_TYPES[t.type].sign;
            const color = sign === "+" ? "var(--success)" : sign === "−" ? "var(--danger)" : "var(--warn)";
            return <span className="mono" style={{ fontSize: 13.5, fontWeight: 500, color }}>{sign} NT$ {fmtNum(t.amount)}</span>;
          } },
          { title: "對象", render: t => <span style={{ fontSize: 13 }}>{t.counterparty}</span> },
          { title: "操作人", render: t => (
            <span style={{ fontSize: 12.5, display: "inline-flex", alignItems: "center", gap: 5 }}>
              {t.operator === "系統自動" ? <Icon name="settings" size={11} style={{ color: "var(--ink-4)" }}/> : <Icon name="users" size={11} style={{ color: "var(--accent)" }}/>}
              {t.operator}
            </span>
          ) },
          { title: "時間戳", render: t => <span className="mono" style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{t.timestamp}</span> },
        ]}
        rows={filtered.slice(page * 15, (page + 1) * 15)}
      />
      <Pagination total={filtered.length} pageSize={15} page={page} onPageChange={setPage}/>
    </div>
  );
};

// ============== Reconciliation + Payouts (kept from before) ==============

const FinanceReconciliation = ({ reconRows = [], loading }) => {
  if (loading) return <div style={{ padding: 48, textAlign: "center", color: "var(--ink-3)" }}>載入中…</div>;
  if (reconRows.length === 0) return <div style={{ padding: 48, textAlign: "center", color: "var(--ink-4)" }}>暫無對帳資料</div>;
  return (
  <Table
    columns={[
      { title: "日期", render: r => <span className="mono" style={{ fontSize: 13 }}>{r.date}</span> },
      { title: "訂單數", align: "right", render: r => <span className="mono">{r.orderCount}</span> },
      { title: "GMV", align: "right", render: r => <span className="mono" style={{ fontWeight: 500 }}>{fmtCurrency(r.gmv)}</span> },
      { title: "平台抽成", align: "right", render: r => <span className="mono" style={{ color: "var(--accent-ink)" }}>{fmtCurrency(r.platformFee)}</span> },
      { title: "創作者分潤", align: "right", render: r => <span className="mono">{fmtCurrency(r.artistPayout)}</span> },
      { title: "金流費", align: "right", render: r => <span className="mono" style={{ color: "var(--ink-3)" }}>{fmtCurrency(r.txFee)}</span> },
      { title: "退款", align: "right", render: r => r.refunds > 0 ? <span style={{ color: "var(--danger)" }}>{r.refunds}</span> : <span style={{ color: "var(--ink-4)" }}>—</span> },
      { title: "差額", align: "right", render: r => r.diff !== 0 ? <span className="mono" style={{ color: "var(--danger)" }}>{fmtCurrency(r.diff)}</span> : <span style={{ color: "var(--ink-4)" }}>—</span> },
      { title: "狀態", render: r => {
        const map = { reconciled: { label: "已對帳", tone: "success" }, pending: { label: "待對帳", tone: "warn" }, discrepancy: { label: "差異", tone: "danger" } };
        return <Badge tone={map[r.status]?.tone ?? "default"} size="sm" dot>{map[r.status]?.label ?? r.status}</Badge>;
      } },
    ]}
    rows={reconRows}
  />
  );
};

const FinancePayouts = () => {
  const artists = MOCK.USERS.filter(u => u.role === "artist").slice(0, 10);
  return (
    <Table
      columns={[
        { title: "創作者", render: u => (
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <Avatar hue={u.avatar.hue} glyph={u.avatar.glyph} size={28}/>
            <div>
              <div style={{ fontSize: 13.5, fontWeight: 500 }}>{u.name}</div>
              <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>{u.id}</div>
            </div>
          </div>
        ) },
        { title: "銀行帳號", render: u => <MaskedValue value={u.bankAccount} type="bank" onReveal={cb => cb()}/> },
        { title: "待結金額", align: "right", render: u => <span className="mono" style={{ fontWeight: 500 }}>{fmtCurrency(Math.round(u.revenue * 0.12))}</span> },
        { title: "已結金額", align: "right", render: u => <span className="mono" style={{ color: "var(--ink-3)" }}>{fmtCurrency(Math.round(u.revenue * 0.88))}</span> },
        { title: "本期訂單", align: "right", render: u => <span className="mono">{Math.max(1, Math.round(u.orders * 0.2))}</span> },
        { title: "結算狀態", render: u => <Badge tone="warn" size="sm" dot>待結算</Badge> },
      ]}
      rows={artists}
    />
  );
};

window.FinancePage = FinancePage;