/* =========================================================================
   债务明细清单 · 页面（一）首页 / 欠款人列表 / 欠款人详情
   ========================================================================= */
const { money, fmtDate, fmtDateTime, debtCalc, debtorCalc, globalSummary, monthlyTrend, channelBreakdown, topDebtors } = window.Ledger;

const CHANNEL_COLORS = { "微信": "#1FA463", "支付宝": "#2F6BD8", "银行转账": "#6B5BD2", "现金": "#D98C2B", "其他": "#94A3B8" };

/* ===================== 首页总览 ===================== */
function HomePage({ state, go, openModal, loading }) {
  const s = globalSummary(state);
  const trend = monthlyTrend(state);
  const channels = channelBreakdown(state);
  const tops = topDebtors(state, 5);

  // 提醒：即将到期 / 已逾期
  const reminders = state.debts.filter((d) => !d.archived && d.dueDate).map((d) => ({ d, c: debtCalc(state, d.id) }))
    .filter((x) => x.c.remaining > 0 && x.c.dueIn !== null && x.c.dueIn <= state.settings.remindDays)
    .sort((a, b) => a.c.dueIn - b.c.dueIn);

  const recent = [...state.payments].filter((p) => p.status === "valid").sort((a, b) => new Date(b.datetime) - new Date(a.datetime)).slice(0, 6);

  if (loading) return (
    <div className="page">
      <PageHeader title="首页总览" desc="加载中…" />
      <SkeletonCards n={4} />
      <div style={{ height: 16 }} />
      <SkeletonCards n={4} />
    </div>
  );

  return (
    <div className="page">
      <PageHeader title="首页总览" desc={`数据更新于 ${fmtDateTime(state.meta.updatedAt)}`}
        actions={<>
          <Btn kind="outline" icon="plus" onClick={() => openModal({ type: "debt" })}>新增债务</Btn>
          <Btn kind="primary" icon="plus" onClick={() => openModal({ type: "payment" })}>记一笔还款</Btn>
        </>} />

      {/* 第一行金额卡 */}
      <div className="amt-row">
        <AmountCard primary tone="brand" label="总剩余待还" fen={s.totalRemaining} display={s.pendingDebts > 0 ? "金额待补充" : null} hint={`未结清债务 ${s.unsettledDebts} 笔 · 欠款人 ${s.activeDebtors} 人`} onClick={() => go({ page: "debts", filter: "open" })} />
        <AmountCard label="当前应还总额" fen={s.totalDue} hint="原始 + 调整后" />
        <AmountCard tone="green" label="累计已还" fen={s.totalPaid} hint={`回款率 ${s.totalDue > 0 ? Math.round(s.totalPaid / s.totalDue * 100) : 0}%`} />
        <AmountCard label="本月已还" fen={s.monthPaid} hint={`近 30 天 ${money(s.last30Paid)}`} />
      </div>

      {/* 第二行状态卡 */}
      <div className="stat-row">
        <StatCard label="欠款人数" value={s.activeDebtors} icon="users" onClick={() => go({ page: "debtors" })} />
        <StatCard label="未结清债务" value={s.unsettledDebts} tone="blue" icon="debt" onClick={() => go({ page: "debts", filter: "open" })} />
        <StatCard label="已结清债务" value={s.settledDebts} tone="green" icon="checkCircle" onClick={() => go({ page: "debts", filter: "settled" })} />
        <StatCard label="逾期债务" value={s.overdueDebts} tone="red" icon="alert" onClick={() => go({ page: "debts", filter: "overdue" })} />
      </div>

      <div className="grid-2">
        {/* 月度回款趋势 */}
        <div className="card">
          <div className="card-head"><div className="card-title">月度回款趋势</div><span className="muted">近 6 个月</span></div>
          <BarChart data={trend} />
        </div>
        {/* 待还排行 */}
        <div className="card">
          <div className="card-head"><div className="card-title">待还金额最高的欠款人</div><button className="link" onClick={() => go({ page: "debtors" })}>查看全部</button></div>
          {tops.length === 0 ? <EmptyState compact icon="users" title="暂无待还" desc="所有债务均已结清" /> : (
            <div className="rank-list">
              {tops.map((t, i) => {
                const max = Math.max(...tops.map((x) => x.calc.remaining), 1);
                return (
                  <div className="rank-row clickable" key={t.debtor.id} onClick={() => go({ page: "debtor", id: t.debtor.id })}>
                    <span className="rank-no">{i + 1}</span>
                    <Avatar name={t.debtor.name} size={30} />
                    <div className="rank-main">
                      <div className="rank-name">{t.debtor.name}</div>
                      <div className="rank-bar"><div className="rank-fill" style={{ width: (t.calc.remaining / max * 100) + "%" }} /></div>
                    </div>
                    <span className="num rank-amt">{t.calc.pending > 0 ? "金额待补充" : money(t.calc.remaining)}</span>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>

      <div className="grid-2">
        {/* 提醒区 */}
        <div className="card">
          <div className="card-head"><div className="card-title">到期与逾期提醒</div><span className="muted">提前 {state.settings.remindDays} 天</span></div>
          {reminders.length === 0 ? <EmptyState compact icon="bell" title="近期无到期债务" desc="到期前会在此提醒" /> : (
            <div className="remind-list">
              {reminders.map((r) => {
                const overdue = r.c.status === "已逾期";
                return (
                  <div className={"remind-row " + (overdue ? "rr-red" : "rr-amber")} key={r.d.id}>
                    <span className="rr-ic"><Icon name={overdue ? "alert" : "clock"} size={16} /></span>
                    <div className="rr-main clickable" onClick={() => go({ page: "debt", id: r.d.id })}>
                      <div className="rr-title">{state.debtors.find((x) => x.id === r.d.debtorId).name} · {r.d.title}</div>
                      <div className="rr-sub">{overdue ? `已逾期 ${-r.c.dueIn} 天` : `${r.c.dueIn} 天后到期`} · 约定 {fmtDate(r.d.dueDate)}</div>
                    </div>
                    <div className="rr-right">
                      <span className="num">{money(r.c.remaining)}</span>
                      <button className="link" onClick={() => openModal({ type: "payment", preset: { debtorId: r.d.debtorId, debtId: r.d.id } })}>记还款</button>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
        {/* 还款途径占比 */}
        <div className="card">
          <div className="card-head"><div className="card-title">还款途径占比</div></div>
          {channels.length === 0 ? <EmptyState compact icon="chart" title="暂无还款" /> : (
            <div className="donut-block">
              <Donut data={channels.map((c) => ({ value: c.fen, color: CHANNEL_COLORS[c.channel] || "#94A3B8" }))} />
              <div className="donut-legend">
                {channels.map((c) => (
                  <div className="legend-row" key={c.channel}>
                    <span className="legend-dot" style={{ background: CHANNEL_COLORS[c.channel] || "#94A3B8" }} />
                    <span className="legend-name">{c.channel}</span>
                    <span className="num legend-pct">{Math.round(c.pct * 100)}%</span>
                    <span className="num muted legend-amt">{money(c.fen)}</span>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>

      {/* 最近还款 */}
      <div className="card">
        <div className="card-head"><div className="card-title">最近还款</div><button className="link" onClick={() => go({ page: "payments" })}>查看全部明细</button></div>
        {recent.length === 0 ? <EmptyState compact icon="receipt" title="还没有还款记录" action={<Btn kind="primary" size="sm" icon="plus" onClick={() => openModal({ type: "payment" })}>记一笔还款</Btn>} /> : (
          <table className="dtable">
            <thead><tr><th>欠款人</th><th>债务</th><th>日期时间</th><th>途径</th><th className="ta-r">金额</th><th className="ta-c">凭证</th></tr></thead>
            <tbody>
              {recent.map((p) => {
                const debtor = state.debtors.find((x) => x.id === p.debtorId);
                const debt = state.debts.find((x) => x.id === p.debtId);
                return (
                  <tr key={p.id} className="clickable" onClick={() => go({ page: "debt", id: p.debtId })}>
                    <td><div className="cell-name"><Avatar name={debtor.name} size={26} />{debtor.name}</div></td>
                    <td className="muted">{debt.title}</td>
                    <td className="num muted">{fmtDateTime(p.datetime)}</td>
                    <td><span className="tag-soft">{p.channel}</span></td>
                    <td className="ta-r num green strong">+{money(p.amountFen)}</td>
                    <td className="ta-c">{p.hasAttach ? <Icon name="image" size={15} className="muted" /> : <span className="muted">—</span>}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}

/* ===================== 欠款人列表 ===================== */
function DebtorListPage({ state, go, openModal }) {
  const [q, setQ] = React.useState("");
  const [status, setStatus] = React.useState("all");
  const [sort, setSort] = React.useState("remaining");

  let rows = state.debtors.map((d) => ({ d, c: debtorCalc(state, d.id) }));
  if (q) rows = rows.filter((r) => (r.d.name + r.d.phone + r.d.note + r.d.wechat).toLowerCase().includes(q.toLowerCase()));
  if (status === "open") rows = rows.filter((r) => r.c.remaining > 0 || r.c.pending > 0);
  if (status === "settled") rows = rows.filter((r) => r.c.remaining === 0 && r.c.pending === 0 && r.c.debtCount > 0);
  if (status === "overdue") rows = rows.filter((r) => r.c.overdue > 0);
  rows.sort((a, b) => sort === "remaining" ? b.c.remaining - a.c.remaining : sort === "paid" ? b.c.paid - a.c.paid : a.d.name.localeCompare(b.d.name));

  const statusOpts = [["all", "全部"], ["open", "未结清"], ["settled", "已结清"], ["overdue", "有逾期"]];

  return (
    <div className="page">
      <PageHeader title="欠款人" desc={`共 ${state.debtors.length} 位欠款人`}
        actions={<Btn kind="primary" icon="plus" onClick={() => openModal({ type: "debtor" })}>新增欠款人</Btn>} />

      <div className="filterbar">
        <div className="search">
          <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>
        <div className="seg seg-inline">
          {statusOpts.map(([k, l]) => <button key={k} className={"seg-btn " + (status === k ? "active" : "")} onClick={() => setStatus(k)}>{l}</button>)}
        </div>
        <div className="grow" />
        <label className="sort-sel">排序<select value={sort} onChange={(e) => setSort(e.target.value)}><option value="remaining">剩余待还（高→低）</option><option value="paid">累计已还（高→低）</option><option value="name">姓名</option></select></label>
      </div>

      {rows.length === 0 ? (
        state.debtors.length === 0
          ? <EmptyState icon="users" title="还没有欠款人" desc="新增第一个欠款人，开始记录别人欠你的钱" action={<Btn kind="primary" icon="plus" onClick={() => openModal({ type: "debtor" })}>新增第一个欠款人</Btn>} />
          : <EmptyState icon="search" title="没有符合条件的欠款人" desc={`当前筛选：${statusOpts.find((o) => o[0] === status)[1]}${q ? ` · “${q}”` : ""}`} action={<Btn kind="outline" size="sm" onClick={() => { setQ(""); setStatus("all"); }}>清空筛选</Btn>} />
      ) : (
        <div className="card no-pad">
          <table className="dtable dtable-rows">
            <thead><tr><th>欠款人</th><th>联系方式</th><th className="ta-c">债务笔数</th><th className="ta-r">累计已还</th><th className="ta-r">剩余待还</th><th>最近还款</th><th className="ta-c">状态</th><th className="ta-r">操作</th></tr></thead>
            <tbody>
              {rows.map(({ d, c }) => (
                <tr key={d.id} className="clickable" onClick={() => go({ page: "debtor", id: d.id })}>
                  <td><div className="cell-name"><Avatar name={d.name} size={32} /><div><div className="strong">{d.name}</div><div className="muted xs">{d.relation}</div></div></div></td>
                  <td className="muted">{d.phone || "—"}</td>
                  <td className="ta-c num">{c.debtCount}</td>
                  <td className="ta-r num green">{money(c.paid)}</td>
                  <td className="ta-r num strong">{c.pending > 0 ? "待补充" : money(c.remaining)}</td>
                  <td className="num muted">{c.lastPay ? fmtDate(c.lastPay) : "—"}</td>
                  <td className="ta-c"><StatusBadge status={c.status} size="sm" /></td>
                  <td className="ta-r" onClick={(e) => e.stopPropagation()}>
                    <div className="row-actions">
                      <button className="link" onClick={() => openModal({ type: "payment", preset: { debtorId: d.id } })}>记还款</button>
                      <button className="link" onClick={() => openModal({ type: "debt", presetDebtorId: d.id })}>加债务</button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

/* ===================== 欠款人详情 ===================== */
function DebtorDetailPage({ state, id, go, openModal, actions }) {
  const [tab, setTab] = React.useState("debts");
  const d = state.debtors.find((x) => x.id === id);
  if (!d) return <div className="page"><EmptyState title="欠款人不存在" action={<Btn onClick={() => go({ page: "debtors" })}>返回列表</Btn>} /></div>;
  const c = debtorCalc(state, id);
  const debts = state.debts.filter((x) => x.debtorId === id);
  const timeline = buildDebtorTimeline(state, id);

  return (
    <div className="page">
      <button className="breadcrumb" onClick={() => go({ page: "debtors" })}><Icon name="back" size={15} />欠款人</button>
      <div className="detail-head">
        <div className="dh-left">
          <Avatar name={d.name} size={56} />
          <div>
            <div className="dh-name">{d.name}<span className="tag-soft">{d.relation}</span><StatusBadge status={c.status} size="sm" /></div>
            <div className="dh-contacts">
              {d.phone && <span><Icon name="phone" size={13} />{d.phone}</span>}
              {d.wechat && <span><Icon name="wechat" size={13} />{d.wechat}</span>}
              {d.idcard && <span><Icon name="lock" size={13} />{maskId(d.idcard)}</span>}
              {d.address && <span className="muted">{d.address}</span>}
            </div>
            {d.note && <div className="dh-note">备注：{d.note}</div>}
          </div>
        </div>
        <div className="dh-actions">
          <Btn kind="ghost" icon="edit" onClick={() => openModal({ type: "debtor", edit: d })}>编辑</Btn>
          <Btn kind="outline" icon="plus" onClick={() => openModal({ type: "debt", presetDebtorId: id })}>新增债务</Btn>
          <Btn kind="primary" icon="plus" onClick={() => openModal({ type: "payment", preset: { debtorId: id } })}>记一笔还款</Btn>
        </div>
      </div>

      <div className="amt-row amt-row-4">
        <AmountCard primary tone="brand" label="剩余待还" fen={c.remaining} display={c.pending > 0 ? "金额待补充" : null} hint={`${c.debtCount} 笔债务`} />
        <AmountCard label="当前应还总额" fen={c.currentDue} />
        <AmountCard tone="green" label="累计已还" fen={c.paid} />
        <StatCard label="最近还款" value={c.lastPay ? fmtDate(c.lastPay) : "—"} />
      </div>

      <div className="tabs">
        {[["debts", `债务 ${debts.length}`], ["timeline", "还款时间线"], ["profile", "资料与附件"]].map(([k, l]) => (
          <button key={k} className={"tab " + (tab === k ? "active" : "")} onClick={() => setTab(k)}>{l}</button>
        ))}
      </div>

      {tab === "debts" && (
        debts.length === 0
          ? <EmptyState icon="debt" title="该欠款人暂无债务" action={<Btn kind="primary" icon="plus" onClick={() => openModal({ type: "debt", presetDebtorId: id })}>新增债务</Btn>} />
          : <div className="debt-grid">{debts.map((db) => <DebtCard key={db.id} debt={db} calc={debtCalc(state, db.id)} onClick={() => go({ page: "debt", id: db.id })} onPay={() => openModal({ type: "payment", preset: { debtorId: id, debtId: db.id } })} />)}</div>
      )}
      {tab === "timeline" && <div className="card"><Timeline items={timeline} /></div>}
      {tab === "profile" && (
        <div className="card">
          <div className="profile-grid">
            {[["姓名 / 称呼", d.name], ["性别", d.gender || "—"], ["出生年份", d.birthYear || "—"], ["关系标签", d.relation], ["手机号", d.phone || "—"], ["微信号", d.wechat || "—"], ["身份证号", d.idcard ? maskId(d.idcard) : "—"], ["地址", d.address || "—"], ["备注", d.note || "—"], ["创建时间", fmtDateTime(d.createdAt)]].map(([k, v]) => (
              <div className="pg-item" key={k}><div className="pg-k">{k}</div><div className="pg-v">{v}</div></div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

function maskId(id) { if (id.length < 8) return id; return id.slice(0, 4) + "**********" + id.slice(-4); }

function buildDebtorTimeline(state, debtorId) {
  const items = [];
  state.payments.filter((p) => p.debtorId === debtorId).forEach((p) => {
    const debt = state.debts.find((x) => x.id === p.debtId);
    items.push({ ts: p.datetime, tone: p.status === "void" ? "neutral" : "green", void: p.status === "void", icon: "receipt", title: `还款 · ${debt ? debt.title : ""}`, amount: p.amountFen, amountClass: p.status === "void" ? "void" : "green", sub: `${fmtDateTime(p.datetime)} · ${p.channel}${p.status === "void" ? " · 已作废" : ""}`, note: p.status === "void" ? `作废原因：${p.voidReason}` : p.note });
  });
  state.adjustments.filter((a) => { const dd = state.debts.find((x) => x.id === a.debtId); return dd && dd.debtorId === debtorId; }).forEach((a) => {
    const debt = state.debts.find((x) => x.id === a.debtId);
    items.push({ ts: a.date, tone: a.status === "void" ? "neutral" : (a.type === "increase" ? "amber" : "blue"), void: a.status === "void", icon: "coins", title: `${a.type === "increase" ? "增加应还" : "减免应还"}${a.status === "void" ? "（已作废）" : ""} · ${debt.title}`, amount: a.amountFen, amountClass: a.status === "void" ? "void" : "", sub: `${fmtDate(a.date)} · ${a.reason}`, note: a.voidReason ? `作废原因：${a.voidReason}` : "" });
  });
  return items.sort((a, b) => new Date(b.ts) - new Date(a.ts));
}

Object.assign(window, { HomePage, DebtorListPage, DebtorDetailPage, buildDebtorTimeline, maskId, CHANNEL_COLORS });