/* =========================================================================
   债务明细清单 · 页面（五）3.0 我的负债 / 对外欠债
   ========================================================================= */
const { money: exMoney, fmtDate: exFmtDate, fmtDateTime: exFmtDateTime, yuanToFen: exYuanToFen, fenToYuanNum: exFenToYuanNum } = window.Ledger;

function ExternalLiabilityPage({ state, actions, go, openModal, toast, loading, initialTab }) {
  const [tab, setTab] = React.useState(initialTab || "overview");
  const [q, setQ] = React.useState("");
  const [platform, setPlatform] = React.useState("");
  const [status, setStatus] = React.useState("all");
  const summary = window.Ledger.externalSummary(state);
  const rows = filteredExternalDebts(state, { q, platform, status });
  React.useEffect(() => { if (initialTab) setTab(initialTab); }, [initialTab]);

  function exportExternal() {
    const lines = [];
    const esc = (v) => `"${String(v == null ? "" : v).replace(/"/g, '""')}"`;
    lines.push(["平台", "欠债名称", "原始本金", "剩余待还", "逾期天数", "逾期金额", "年化利率", "状态", "备注"].map(esc).join(","));
    rows.forEach((d) => {
      const c = window.Ledger.externalDebtCalc(state, d.id);
      lines.push([c.platform.name, d.name, exFenToYuanNum(d.originalPrincipalFen), exFenToYuanNum(c.remaining), c.overdueDays, exFenToYuanNum(c.adoptedOverdue), c.ratePct == null ? "未知" : c.ratePct.toFixed(2) + "%", c.status, d.note].map(esc).join(","));
    });
    const blob = new Blob(["\ufeff" + lines.join("\n")], { type: "text/csv;charset=utf-8" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url; a.download = `我的负债明细_${exFmtDate(new Date())}.csv`; a.click(); URL.revokeObjectURL(url);
    toast({ msg: "我的负债明细已导出，文件包含敏感负债数据", tone: "success" });
  }

  return (
    <div className="page">
      <PageHeader title="我的负债" desc="3.0 对外欠债模块 · 不影响 1.0 债权和 2.0 日常记账"
        actions={<>
          <Btn kind="primary" icon="wallet" onClick={() => openModal({ type: "externalPayment" })}>记一笔对外还款</Btn>
          <Btn kind="outline" icon="plus" onClick={() => openModal({ type: "externalDebt" })}>新增欠债</Btn>
          <Btn kind="outline" icon="download" onClick={exportExternal}>导出</Btn>
          <Btn kind="outline" icon="x" onClick={() => actions.toggleExternalEnabled()}>{summary.enabled ? "关闭 3.0 入口" : "开启 3.0 入口"}</Btn>
        </>} />

      {!summary.enabled && <div className="external-off"><Icon name="alert" size={16} />3.0 我的负债入口已关闭。1.0 债权、2.0 日常记账和云同步仍保持可用。</div>}
      <div className="rollback-note"><Icon name="checkCircle" size={15} />3.0 独立数据结构，可关闭入口并回滚到 1.0/2.0。</div>

      <div className="tabs">
        {[["overview", "总览"], ["list", "明细"], ["platforms", "平台"], ["payments", "对外还款"], ["reports", "报表"], ["settings", "设置"]].map(([k, l]) => (
          <button key={k} className={"tab " + (tab === k ? "active" : "")} onClick={() => setTab(k)}>{l}</button>
        ))}
      </div>

      {loading ? <ExternalLoadingState /> :
        tab === "overview" ? <ExternalOverview state={state} go={go} openModal={openModal} summary={summary} /> :
        tab === "list" ? <ExternalDebtList state={state} actions={actions} go={go} openModal={openModal} rows={rows} q={q} setQ={setQ} platform={platform} setPlatform={setPlatform} status={status} setStatus={setStatus} /> :
        tab === "platforms" ? <ExternalPlatformPage state={state} actions={actions} go={go} /> :
        tab === "payments" ? <ExternalPaymentList state={state} openModal={openModal} /> :
        tab === "reports" ? <ExternalReports state={state} /> :
        <ExternalSettings state={state} actions={actions} />
      }
    </div>
  );
}

function ExternalOverview({ state, go, openModal, summary }) {
  const platforms = window.Ledger.externalPlatformBreakdown(state);
  const highRisk = window.Ledger.externalActiveDebts(state).map((d) => window.Ledger.externalDebtCalc(state, d.id)).filter((c) => c.overdueDays > 0 || c.adoptedOverdue > 0).sort((a, b) => b.overdueDays - a.overdueDays).slice(0, 5);
  const upcoming = upcomingInstallments(state, 7);
  const recentPayments = (state.externalPayments || []).filter((p) => p.status !== "void").slice().sort((a, b) => new Date(b.paidAt) - new Date(a.paidAt)).slice(0, 5);
  return (
    <div className="external-main">
      <div className="external-kpi-row">
        <AmountCard primary label="当前总负债" fen={summary.totalLiability} hint={`有效欠债 ${summary.debtCount} 笔`} />
        <AmountCard tone="red" label="当前逾期额" fen={summary.overdueAmount} hint={`逾期平台 ${summary.overduePlatformCount} 个`} />
        <AmountCard label="本月应还" fen={summary.monthDue} hint="按分期计划统计" />
        <AmountCard tone="green" label="本月已还" fen={summary.monthPaid} hint={summary.avgRatePct == null ? "平均年化未知" : `平均年化 ${summary.avgRatePct.toFixed(2)}%`} />
      </div>
      <div className="external-panels">
        <div className="card">
          <div className="card-head"><div className="card-title">高风险平台</div><button className="link" onClick={() => go({ page: "external", tab: "list" })}>查看明细</button></div>
          {highRisk.length === 0 ? <EmptyState compact icon="checkCircle" title="暂无逾期负债" desc="逾期平台会在这里优先显示" /> : (
            <div className="external-risk-list">
              {highRisk.map((c) => <ExternalRiskRow key={c.debt.id} calc={c} onClick={() => go({ page: "externalDetail", id: c.debt.id })} onPay={() => openModal({ type: "externalPayment", preset: { externalDebtId: c.debt.id, platformId: c.debt.platformId } })} />)}
            </div>
          )}
        </div>
        <div className="card">
          <div className="card-head"><div className="card-title">未来 7 天应还</div><span className="muted">按应还日期</span></div>
          {upcoming.length === 0 ? <EmptyState compact icon="calendar" title="未来 7 天暂无应还" /> : (
            <div className="external-risk-list">
              {upcoming.map((it) => {
                const debt = state.externalDebts.find((d) => d.id === it.externalDebtId);
                const platform = window.Ledger.externalPlatform(state, debt?.platformId);
                return <div className="external-row clickable" key={it.id} onClick={() => go({ page: "externalDetail", id: debt.id })}><span className="platform-dot" style={{ background: platform.color }} /><div className="grow"><b>{platform.name} · {debt.name}</b><div className="muted xs">{exFmtDate(it.dueDate)} · 第 {it.periodNo} 期</div></div><span className="num strong">{exMoney(it.dueFen)}</span></div>;
              })}
            </div>
          )}
        </div>
      </div>
      <div className="external-panels">
        <div className="card">
          <div className="card-head"><div className="card-title">平台负债排行</div></div>
          {platforms.length === 0 ? <EmptyState compact icon="wallet" title="还没有对外欠债记录" desc="可以先录入平台当前总欠款和逾期天数" action={<Btn kind="primary" size="sm" icon="plus" onClick={() => openModal({ type: "externalDebt" })}>新增欠债</Btn>} /> : <ExternalPlatformRank rows={platforms} />}
        </div>
        <div className="card">
          <div className="card-head"><div className="card-title">最近对外还款</div><button className="link" onClick={() => go({ page: "external", tab: "payments" })}>查看全部</button></div>
          {recentPayments.length === 0 ? <EmptyState compact icon="receipt" title="暂无对外还款" /> : <ExternalPaymentMini state={state} rows={recentPayments} />}
        </div>
      </div>
    </div>
  );
}

function ExternalRiskRow({ calc, onClick, onPay }) {
  return (
    <div className="external-risk-row">
      <button className="external-risk-main" onClick={onClick}>
        <span className="platform-dot" style={{ background: calc.platform.color }} />
        <div><b>{calc.platform.name} · {calc.debt.name}</b><div className="muted xs">{calc.noPenaltyRule ? "逾期金额未含平台罚息" : "已含配置罚息或平台金额"}</div></div>
      </button>
      <div className="ta-r">
        <StatusBadge status={calc.status} size="sm" />
        <div className="num strong">{exMoney(calc.adoptedOverdue)}</div>
        <div className="muted xs">逾期 {calc.overdueDays} 天</div>
      </div>
      <Btn kind="outline" size="sm" icon="wallet" onClick={onPay}>还款</Btn>
    </div>
  );
}

function ExternalDebtList({ state, actions, go, openModal, rows, q, setQ, platform, setPlatform, status, setStatus }) {
  const total = rows.reduce((s, d) => s + (window.Ledger.externalDebtCalc(state, d.id)?.remaining || 0), 0);
  const overdue = rows.reduce((s, d) => s + (window.Ledger.externalDebtCalc(state, d.id)?.adoptedOverdue || 0), 0);
  return (
    <div className="external-main">
      <div className="filterbar">
        <div className="search search-wide"><Icon name="search" size={16} className="muted" /><input placeholder="搜索平台、欠债名称、备注..." value={q} onChange={(e) => setQ(e.target.value)} />{q && <button className="iconbtn-xs" onClick={() => setQ("")}><Icon name="x" size={14} /></button>}</div>
        <select className="inp-sm" value={platform} onChange={(e) => setPlatform(e.target.value)}><option value="">全部平台</option>{(state.externalPlatforms || []).map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}</select>
        <select className="inp-sm" value={status} onChange={(e) => setStatus(e.target.value)}><option value="all">全部状态</option><option value="overdue">只看逾期</option><option value="open">未结清</option><option value="settled">已结清</option><option value="closed">已关闭</option></select>
      </div>
      <div className="summary-strip"><div><span className="ss-label">筛选总负债</span><span className="ss-amt num">{exMoney(total)}</span></div><span className="ss-div" /><div><span className="ss-label">逾期金额</span><span className="ss-n num">{exMoney(overdue)}</span></div><span className="ss-div" /><div><span className="ss-label">记录条数</span><span className="ss-n num">{rows.length}</span></div></div>
      {rows.length === 0 ? <EmptyState icon="search" title="未找到相关负债" desc="可调整平台、状态或关键词筛选" /> : <ExternalDebtRows state={state} actions={actions} rows={rows} go={go} openModal={openModal} />}
    </div>
  );
}

function ExternalDebtRows({ state, actions, rows, go, openModal }) {
  return (
    <>
      <div className="card no-pad external-table-wrap">
        <table className="dtable external-table">
          <thead><tr><th>平台</th><th>欠债名称</th><th className="ta-r">原始本金</th><th className="ta-r">剩余待还</th><th className="ta-r">逾期金额</th><th>逾期天数</th><th>年化</th><th>状态</th><th className="ta-r">操作</th></tr></thead>
          <tbody>{rows.map((d) => <ExternalDebtTableRow key={d.id} state={state} actions={actions} debt={d} go={go} openModal={openModal} />)}</tbody>
        </table>
      </div>
      <div className="external-mobile-list">{rows.map((d) => <ExternalDebtCard key={d.id} state={state} debt={d} go={go} openModal={openModal} />)}</div>
    </>
  );
}

function ExternalDebtTableRow({ state, actions, debt, go, openModal }) {
  const c = window.Ledger.externalDebtCalc(state, debt.id);
  return (
    <tr className={(debt.status === "closed" ? "row-dim " : "") + "clickable"} onClick={() => go({ page: "externalDetail", id: debt.id })}>
      <td><span className="cell-name"><span className="platform-dot" style={{ background: c.platform.color }} />{c.platform.name}</span></td>
      <td>{debt.name}<div className="muted xs">{debt.type}</div></td>
      <td className="ta-r num">{exMoney(debt.originalPrincipalFen)}</td>
      <td className="ta-r num strong">{exMoney(c.remaining)}</td>
      <td className="ta-r num">{exMoney(c.adoptedOverdue)}</td>
      <td>{c.overdueDays > 0 ? `${c.overdueDays} 天` : "—"}</td>
      <td>{c.ratePct == null ? "未知" : `${c.ratePct.toFixed(2)}%`}<div className="muted xs">{c.rateSource}</div></td>
      <td><StatusBadge status={debt.status === "closed" ? "已关闭" : c.status} size="sm" /></td>
      <td className="ta-r row-actions" onClick={(e) => e.stopPropagation()}><button className="link" onClick={() => openModal({ type: "externalPayment", preset: { externalDebtId: debt.id, platformId: debt.platformId } })}>还款</button><button className="link" onClick={() => openModal({ type: "externalDebt", edit: debt })}>编辑</button><button className="link danger" onClick={() => actions.closeExternalDebt(debt.id)}>{debt.status === "closed" ? "恢复" : "关闭"}</button></td>
    </tr>
  );
}

function ExternalDebtCard({ state, debt, go, openModal }) {
  const c = window.Ledger.externalDebtCalc(state, debt.id);
  return (
    <div className="external-card" onClick={() => go({ page: "externalDetail", id: debt.id })}>
      <div className="external-card-top"><div><b>{c.platform.name} · {debt.name}</b><div className="muted xs">{debt.type}</div></div><StatusBadge status={debt.status === "closed" ? "已关闭" : c.status} size="sm" /></div>
      <div className="external-card-amt num">{exMoney(c.remaining)}</div>
      <div className="external-card-grid"><span>逾期 {c.overdueDays || 0} 天</span><span>{exMoney(c.adoptedOverdue)}</span><span>{c.ratePct == null ? "年化未知" : `年化 ${c.ratePct.toFixed(2)}%`}</span></div>
      <div className="foot-btns"><Btn kind="outline" size="sm" icon="wallet" onClick={(e) => { e.stopPropagation(); openModal({ type: "externalPayment", preset: { externalDebtId: debt.id, platformId: debt.platformId } }); }}>对外还款</Btn><Btn kind="ghost" size="sm" onClick={(e) => { e.stopPropagation(); go({ page: "externalDetail", id: debt.id }); }}>详情</Btn></div>
    </div>
  );
}

function ExternalPlatformPage({ state, actions, go }) {
  const rows = window.Ledger.externalPlatformBreakdown(state);
  return <div className="external-main"><div className="card"><div className="card-head"><div className="card-title">平台负债</div><span className="muted">按剩余待还排序</span></div>{rows.length ? <ExternalPlatformRank rows={rows} go={go} /> : <EmptyState icon="wallet" title="暂无平台负债" desc="新增欠债后会按平台汇总" />}</div><div className="card"><div className="card-title sm">平台管理</div><div className="manage-list">{(state.externalPlatforms || []).map((p) => <ExternalManageRow key={p.id} item={p} onToggle={() => actions.toggleExternalPlatform(p.id)} />)}</div></div></div>;
}

function ExternalManageRow({ item, onToggle }) {
  const disabled = item.status === "disabled";
  return <div className="manage-row"><span className="manage-color" style={{ background: item.color }} />{item.icon && <Icon name={item.icon} size={16} className="muted" />}<div className="manage-name">{item.name}<div className="manage-sub">{item.type} · {disabled ? "已停用" : "启用中"}</div></div><Btn kind="outline" size="sm" onClick={onToggle}>{disabled ? "启用" : "停用"}</Btn></div>;
}

function ExternalPlatformRank({ rows, go }) {
  const max = Math.max(...rows.map((r) => r.remaining), 1);
  return <div className="external-platform-rank">{rows.map((r, i) => <div className="external-platform-row clickable" key={r.platform.id} onClick={() => go && go({ page: "external", tab: "list" })}><span className="rank-no">{i + 1}</span><span className="platform-dot" style={{ background: r.platform.color }} /><div className="grow"><b>{r.platform.name}</b><div className="rank-bar"><div className="rank-fill external-fill" style={{ width: (r.remaining / max * 100) + "%" }} /></div><div className="muted xs">{r.count} 笔 · 最高逾期 {r.maxOverdueDays} 天</div></div><div className="ta-r"><div className="num strong">{exMoney(r.remaining)}</div><div className="muted xs">逾期 {exMoney(r.overdue)}</div></div></div>)}</div>;
}

function ExternalPaymentList({ state, openModal }) {
  const rows = (state.externalPayments || []).slice().sort((a, b) => new Date(b.paidAt) - new Date(a.paidAt));
  return <div className="external-main"><div className="card"><div className="card-head"><div className="card-title">对外还款记录</div><Btn kind="primary" size="sm" icon="wallet" onClick={() => openModal({ type: "externalPayment" })}>记一笔对外还款</Btn></div>{rows.length ? <ExternalPaymentMini state={state} rows={rows} openModal={openModal} /> : <EmptyState icon="receipt" title="暂无对外还款记录" desc="还给平台的钱会在这里形成独立流水" />}</div></div>;
}

function ExternalPaymentMini({ state, rows, openModal }) {
  return <div className="external-payment-list">{rows.map((p) => { const debt = (state.externalDebts || []).find((d) => d.id === p.externalDebtId); const platform = window.Ledger.externalPlatform(state, p.platformId || debt?.platformId); return <div className={"external-row " + (p.status === "void" ? "row-dim" : "")} key={p.id}><span className="platform-dot" style={{ background: platform.color }} /><div className="grow"><b>{platform.name} · {debt?.name || "对外还款"}</b><div className="muted xs">{exFmtDateTime(p.paidAt)} · {p.method}{p.voidReason ? ` · 作废：${p.voidReason}` : ""}</div></div><span className="num strong">{exMoney(p.amountFen)}</span>{openModal && p.status !== "void" && <button className="link danger" onClick={() => openModal({ type: "externalPaymentVoid", payment: p })}>作废</button>}</div>; })}</div>;
}

function ExternalReports({ state }) {
  const summary = window.Ledger.externalSummary(state);
  const platforms = window.Ledger.externalPlatformBreakdown(state);
  const trend = window.Ledger.externalMonthlyTrend(state);
  return <div className="external-main"><div className="external-panels"><div className="card"><div className="card-head"><div className="card-title">平台负债占比</div></div>{platforms.length ? <ExternalPlatformRank rows={platforms} /> : <EmptyState compact icon="chart" title="暂无报表数据" />}</div><div className="card"><div className="card-head"><div className="card-title">月度应还趋势</div><span className="muted">近 6 个月</span></div><BarChart data={trend} /></div></div><div className="stat-row"><StatCard label="逾期平台" value={summary.overduePlatformCount} tone="red" icon="alert" /><StatCard label="最高逾期天数" value={summary.highestOverdueDays} tone="red" icon="clock" /><StatCard label="平均估算年化" value={summary.avgRatePct == null ? "未知" : `${summary.avgRatePct.toFixed(2)}%`} icon="chart" /><StatCard label="负债笔数" value={summary.debtCount} icon="wallet" /></div></div>;
}

function ExternalSettings({ state, actions }) {
  const s = state.externalSettings || {};
  return <div className="external-main"><div className="card"><div className="card-title sm">3.0 功能边界</div><div className="settings-note">关闭 3.0 后仅隐藏“我的负债”入口，保留数据，不影响 1.0 债权和 2.0 日常记账。</div><Btn kind="outline" icon="x" onClick={() => actions.toggleExternalEnabled()}>{s.enabled !== false ? "关闭 3.0 入口" : "开启 3.0 入口"}</Btn></div><div className="card"><div className="card-title sm">默认风险阈值</div><div className="info-list"><div className="info-row"><span className="info-k">待还提醒</span><span className="info-v">{s.dueSoonDays || 7} 天内</span></div><div className="info-row"><span className="info-k">严重逾期</span><span className="info-v">{s.severeOverdueDays || 30} 天</span></div><div className="info-row"><span className="info-k">高危逾期</span><span className="info-v">{s.highRiskOverdueDays || 90} 天</span></div></div></div></div>;
}

function ExternalDebtDetailPage({ state, id, go, openModal, actions }) {
  const debt = (state.externalDebts || []).find((d) => d.id === id);
  if (!debt) return <div className="page"><EmptyState title="对外欠债记录不存在" action={<Btn onClick={() => go({ page: "external" })}>返回我的负债</Btn>} /></div>;
  const c = window.Ledger.externalDebtCalc(state, id);
  return (
    <div className="page">
      <button className="breadcrumb" onClick={() => go({ page: "external" })}><Icon name="back" size={15} />我的负债</button>
      <div className="detail-head">
        <div className="dh-main"><span className="daily-kpi-ic" style={{ background: c.platform.color + "22", color: c.platform.color }}><Icon name={c.platform.icon || "wallet"} size={22} /></span><div><h1>{c.platform.name} · {debt.name}</h1><div className="muted">3.0 对外欠债详情 · {debt.type}</div></div></div>
        <div className="dh-actions"><Btn kind="primary" icon="wallet" onClick={() => openModal({ type: "externalPayment", preset: { externalDebtId: debt.id, platformId: debt.platformId } })}>记一笔对外还款</Btn><Btn kind="outline" icon="edit" onClick={() => openModal({ type: "externalDebt", edit: debt })}>编辑</Btn><Btn kind="ghost" danger icon="x" onClick={() => actions.closeExternalDebt(debt.id)}>{debt.status === "closed" ? "恢复" : "关闭"}</Btn></div>
      </div>
      <div className="amt-row"><AmountCard label="剩余待还" fen={c.remaining} primary /><AmountCard label="已还金额" fen={c.paid} tone="green" /><AmountCard label="逾期金额" fen={c.adoptedOverdue} tone="red" hint={c.noPenaltyRule ? "未含平台罚息" : "平台金额或规则计算"} /><AmountCard label="原始本金" fen={debt.originalPrincipalFen} /></div>
      <div className="grid-2"><div className="card"><div className="card-title sm">利率说明</div><div className="info-list"><div className="info-row"><span className="info-k">年化利率</span><span className="info-v">{c.ratePct == null ? "未知" : `${c.ratePct.toFixed(2)}%`}</span></div><div className="info-row"><span className="info-k">来源</span><span className="info-v">{c.rateSource}</span></div><div className="info-row"><span className="info-k">说明</span><span className="info-v">{c.rateSource === "系统估算" ? "根据本金和分期现金流估算，仅供参考" : "以平台或用户录入为准"}</span></div></div></div><div className="card"><div className="card-title sm">逾期说明</div><div className="info-list"><div className="info-row"><span className="info-k">逾期开始</span><span className="info-v">{debt.overdueStartDate || "—"}</span></div><div className="info-row"><span className="info-k">当前逾期</span><span className="info-v">{c.overdueDays} 天</span></div><div className="info-row"><span className="info-k">采用逾期金额</span><span className="info-v num">{exMoney(c.adoptedOverdue)}</span></div></div></div></div>
      <div className="card"><div className="card-head"><div className="card-title">分期计划</div></div><ExternalInstallmentRows state={state} rows={c.installments} openModal={openModal} debt={debt} /></div>
      <div className="card"><div className="card-head"><div className="card-title">对外还款记录</div></div><ExternalPaymentMini state={state} rows={c.payments} openModal={openModal} /></div>
    </div>
  );
}

function ExternalInstallmentRows({ rows, openModal, debt }) {
  if (!rows.length) return <EmptyState compact icon="calendar" title="未设置分期计划" desc="可继续使用当前总欠款管理，后续再补充分期计划" />;
  return <div className="external-installments">{rows.map((it) => { const remain = Math.max(0, (it.dueFen || 0) - (it.paidFen || 0)); const overdue = it.dueDate && new Date(it.dueDate) < new Date() && remain > 0; return <div className="external-row" key={it.id}><div className="grow"><b>第 {it.periodNo} 期</b><div className="muted xs">应还 {exFmtDate(it.dueDate)}{overdue ? " · 已逾期" : ""}</div></div><span className="num strong">{exMoney(remain)}</span><Btn kind="outline" size="sm" onClick={() => openModal({ type: "externalPayment", preset: { externalDebtId: debt.id, platformId: debt.platformId, installmentId: it.id } })}>还本期</Btn></div>; })}</div>;
}

function ExternalDebtModal({ state, actions, edit, toast, onClose }) {
  const [err, setErr] = React.useState("");
  const [form, setForm] = React.useState(() => edit ? { ...edit, amount: exFenToYuanNum(edit.currentBalanceFen), principal: exFenToYuanNum(edit.originalPrincipalFen), perInstallment: exFenToYuanNum(edit.perInstallmentFen), platformOverdue: exFenToYuanNum(edit.platformOverdueFen), autoInstallments: false } : { platformId: (state.externalPlatforms || [])[0]?.id || "ep_other", name: "", type: "分期账单", amount: "", principal: "", installmentCount: "", perInstallment: "", firstDueDate: exFmtDate(new Date()), overdueDaysManual: "", platformOverdue: "", annualRatePct: "", rateType: "estimated", note: "", autoInstallments: true });
  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));
  const principalFen = exYuanToFen(form.principal || form.amount);
  const perFen = exYuanToFen(form.perInstallment);
  const estimated = window.Ledger.estimateAnnualRatePct(principalFen, perFen, Number(form.installmentCount));
  function submit() {
    const currentBalanceFen = exYuanToFen(form.amount);
    if (!form.platformId || !form.name.trim() || currentBalanceFen <= 0) { setErr("保存失败：请填写平台、名称和当前剩余待还"); return; }
    actions.upsertExternalDebt({ ...form, name: form.name.trim(), currentBalanceFen, originalPrincipalFen: exYuanToFen(form.principal || form.amount), perInstallmentFen: exYuanToFen(form.perInstallment), platformOverdueFen: exYuanToFen(form.platformOverdue), installmentCount: Number(form.installmentCount) || 0, overdueDaysManual: Number(form.overdueDaysManual) || 0, annualRatePct: form.annualRatePct === "" ? "" : Number(form.annualRatePct), attachments: form.attachments || [] });
    toast({ msg: edit ? "对外欠债已更新" : "对外欠债已保存", tone: "success" }); onClose();
  }
  return <Modal title={edit ? "编辑欠债" : "新增欠债"} desc="可先快速录入平台当前总欠款和逾期天数，后续再补充分期计划" onClose={onClose} size="lg" footer={<><div className="foot-info">{err ? <span className="red">{err}</span> : estimated != null && !form.annualRatePct ? `预计年化 ${estimated.toFixed(2)}%，仅供参考` : "保存后进入 3.0 我的负债统计"}</div><div className="foot-btns"><Btn kind="outline" onClick={onClose}>取消</Btn><Btn kind="primary" icon="check" onClick={submit}>保存</Btn></div></>}><div className="form-grid"><Field label="平台" required><select className="inp" value={form.platformId} onChange={(e) => set("platformId", e.target.value)}>{(state.externalPlatforms || []).filter((p) => p.status !== "disabled").map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}</select></Field><Field label="欠债名称" required><input className="inp" value={form.name} onChange={(e) => set("name", e.target.value)} placeholder="如 京东金条、花呗、抖音月付" /></Field><Field label="当前剩余待还" required><input className="inp" value={form.amount} onChange={(e) => set("amount", e.target.value)} inputMode="decimal" placeholder="0.00" /></Field><Field label="当前逾期天数"><input className="inp" value={form.overdueDaysManual} onChange={(e) => set("overdueDaysManual", e.target.value)} inputMode="numeric" placeholder="如 12" /></Field><Field label="平台展示逾期金额"><input className="inp" value={form.platformOverdue} onChange={(e) => set("platformOverdue", e.target.value)} inputMode="decimal" placeholder="无则留空" /></Field><Field label="原始本金或总额度"><input className="inp" value={form.principal} onChange={(e) => set("principal", e.target.value)} inputMode="decimal" placeholder="用于估算年化" /></Field><Field label="分期期数"><input className="inp" value={form.installmentCount} onChange={(e) => set("installmentCount", e.target.value)} inputMode="numeric" /></Field><Field label="每期应还"><input className="inp" value={form.perInstallment} onChange={(e) => set("perInstallment", e.target.value)} inputMode="decimal" /></Field><Field label="首期还款日"><input className="inp" type="date" value={form.firstDueDate || ""} onChange={(e) => set("firstDueDate", e.target.value)} /></Field><Field label="年化利率"><input className="inp" value={form.annualRatePct} onChange={(e) => set("annualRatePct", e.target.value)} inputMode="decimal" placeholder="平台未给可留空" /></Field><Field label="备注"><textarea className="inp" style={{ height: 74, paddingTop: 10 }} value={form.note || ""} onChange={(e) => set("note", e.target.value)} /></Field><label className="check-row"><input type="checkbox" checked={!!form.autoInstallments} onChange={(e) => set("autoInstallments", e.target.checked)} />保存时自动生成分期计划</label></div></Modal>;
}

function ExternalPaymentModal({ state, actions, preset, toast, onClose }) {
  const debts = (state.externalDebts || []).filter((d) => d.status !== "closed");
  const firstDebt = debts.find((d) => d.id === preset.externalDebtId) || debts[0];
  const [err, setErr] = React.useState("");
  const [form, setForm] = React.useState({ externalDebtId: firstDebt?.id || "", platformId: preset.platformId || firstDebt?.platformId || "", installmentId: preset.installmentId || "", amount: "", paidAtLocal: new Date().toISOString().slice(0, 16), method: "支付宝", txnNo: "", note: "" });
  const currentDebt = debts.find((d) => d.id === form.externalDebtId);
  const installments = currentDebt ? window.Ledger.externalDebtInstallments(state, currentDebt.id) : [];
  function set(k, v) {
    setForm((f) => {
      const next = { ...f, [k]: v };
      if (k === "externalDebtId") { const d = debts.find((x) => x.id === v); next.platformId = d?.platformId || ""; next.installmentId = ""; }
      return next;
    });
  }
  function submit() {
    const amountFen = exYuanToFen(form.amount);
    if (!form.externalDebtId || amountFen <= 0) { setErr("保存失败：请选择欠债记录并填写还款金额"); return; }
    actions.addExternalPayment({ ...form, amountFen, paidAt: new Date(form.paidAtLocal).toISOString() });
    toast({ msg: "对外还款已保存", tone: "success" }); onClose();
  }
  return <Modal title="记一笔对外还款" desc="这是我还给平台或债权方的钱，不等同于 1.0 记一笔还款" onClose={onClose} footer={<><div className="foot-info">{err ? <span className="red">{err}</span> : "未指定分期时，默认按最早逾期优先抵扣"}</div><div className="foot-btns"><Btn kind="outline" onClick={onClose}>取消</Btn><Btn kind="primary" icon="check" onClick={submit}>保存</Btn></div></>}><div className="form-grid"><Field label="欠债记录" required><select className="inp" value={form.externalDebtId} onChange={(e) => set("externalDebtId", e.target.value)}>{debts.map((d) => { const p = window.Ledger.externalPlatform(state, d.platformId); return <option key={d.id} value={d.id}>{p.name} · {d.name}</option>; })}</select></Field><Field label="还款金额" required><input className="inp" value={form.amount} onChange={(e) => set("amount", e.target.value)} inputMode="decimal" placeholder="0.00" /></Field><Field label="还款时间" required><input className="inp" type="datetime-local" value={form.paidAtLocal} onChange={(e) => set("paidAtLocal", e.target.value)} /></Field><Field label="还款分期"><select className="inp" value={form.installmentId} onChange={(e) => set("installmentId", e.target.value)}><option value="">自动抵扣</option>{installments.map((it) => <option key={it.id} value={it.id}>第 {it.periodNo} 期 · {exFmtDate(it.dueDate)} · {exMoney(Math.max(0, it.dueFen - it.paidFen))}</option>)}</select></Field><Field label="还款方式"><select className="inp" value={form.method} onChange={(e) => set("method", e.target.value)}>{["支付宝", "微信", "银行卡", "现金", "其他"].map((m) => <option key={m}>{m}</option>)}</select></Field><Field label="平台流水号"><input className="inp" value={form.txnNo} onChange={(e) => set("txnNo", e.target.value)} /></Field><Field label="备注"><textarea className="inp" style={{ height: 74, paddingTop: 10 }} value={form.note} onChange={(e) => set("note", e.target.value)} /></Field></div></Modal>;
}

function ExternalPaymentVoidModal({ payment, actions, toast, onClose }) {
  const [reason, setReason] = React.useState("");
  return <Modal title="作废对外还款" desc="作废后会回滚对应金额和分期已还金额" danger onClose={onClose} footer={<><div className="foot-info red">必须填写作废原因</div><div className="foot-btns"><Btn kind="outline" onClick={onClose}>取消</Btn><Btn danger icon="trash" disabled={!reason.trim()} onClick={() => { actions.voidExternalPayment(payment.id, reason.trim()); toast({ msg: "对外还款已作废", tone: "success" }); onClose(); }}>确认作废</Btn></div></>}><Field label="作废原因" required><textarea className="inp" style={{ height: 86, paddingTop: 10 }} value={reason} onChange={(e) => setReason(e.target.value)} placeholder="请填写作废原因" /></Field></Modal>;
}

function ExternalLoadingState() {
  return <div className="external-main"><SkeletonCards n={4} /><div className="grid-2"><div className="card"><SkeletonRows n={6} cols={4} /></div><div className="card"><SkeletonRows n={6} cols={4} /></div></div></div>;
}

function filteredExternalDebts(state, filters) {
  return (state.externalDebts || []).filter((d) => {
    const c = window.Ledger.externalDebtCalc(state, d.id);
    const platform = window.Ledger.externalPlatform(state, d.platformId);
    if (filters.platform && d.platformId !== filters.platform) return false;
    if (filters.status === "overdue" && !(c.overdueDays > 0 || c.adoptedOverdue > 0)) return false;
    if (filters.status === "open" && (c.remaining <= 0 || d.status === "closed")) return false;
    if (filters.status === "settled" && c.remaining > 0) return false;
    if (filters.status === "closed" && d.status !== "closed") return false;
    const q = (filters.q || "").trim().toLowerCase();
    if (q && ![d.name, d.type, d.note, platform.name].join(" ").toLowerCase().includes(q)) return false;
    return true;
  }).sort((a, b) => (window.Ledger.externalDebtCalc(state, b.id)?.remaining || 0) - (window.Ledger.externalDebtCalc(state, a.id)?.remaining || 0));
}

function upcomingInstallments(state, days) {
  const end = new Date(); end.setDate(end.getDate() + (days || 7));
  return (state.externalInstallments || []).filter((it) => {
    const dt = it.dueDate ? new Date(it.dueDate) : null;
    return dt && dt >= new Date(new Date().toDateString()) && dt <= end && Math.max(0, (it.dueFen || 0) - (it.paidFen || 0)) > 0;
  }).sort((a, b) => new Date(a.dueDate) - new Date(b.dueDate));
}

Object.assign(window, { ExternalLiabilityPage, ExternalDebtDetailPage, ExternalDebtModal, ExternalPaymentModal, ExternalPaymentVoidModal });