/* =========================================================================
   债务明细清单 · 页面（三）统计报表 / 操作记录 / 设置 / 登录
   ========================================================================= */
(function () {
const { money, fmtDate, fmtDateTime, globalSummary, monthlyTrend, channelBreakdown, topDebtors } = window.Ledger;

/* ===================== 统计报表 ===================== */
function StatsPage({ state, go, openModal }) {
  const [range, setRange] = React.useState("6m");
  const start = (() => {
    const now = new Date();
    if (range === "year") return new Date(now.getFullYear(), 0, 1);
    if (range === "6m") return new Date(now.getFullYear(), now.getMonth() - 5, 1);
    return null;
  })();
  const reportState = start ? { ...state, payments: state.payments.filter((p) => new Date(p.datetime) >= start) } : state;
  const s = globalSummary(reportState);
  const trend = monthlyTrend(reportState);
  const channels = channelBreakdown(reportState);
  const tops = topDebtors(state, 8);
  const C = window.CHANNEL_COLORS;

  return (
    <div className="page">
      <PageHeader title="统计报表" desc="回款趋势、途径占比与欠款人待还排行"
        actions={<><label className="sort-sel">日期范围<select value={range} onChange={(e) => setRange(e.target.value)}><option value="6m">近 6 个月</option><option value="year">本年</option><option value="all">全部</option></select></label><Btn kind="primary" icon="download" onClick={() => openModal({ type: "export", scope: "统计汇总", data: reportState })}>导出报表</Btn></>} />

      <div className="amt-row amt-row-4">
        <AmountCard primary tone="brand" label="总剩余待还" fen={globalSummary(state).totalRemaining} display={globalSummary(state).pendingDebts > 0 ? "金额待补充" : null} />
        <AmountCard tone="green" label="累计已还" fen={s.totalPaid} />
        <AmountCard label="本月已还" fen={s.monthPaid} />
        <AmountCard label="近 30 天已还" fen={s.last30Paid} />
      </div>

      <div className="card">
        <div className="card-head"><div className="card-title">月度回款趋势</div></div>
        <BarChart data={trend} height={220} />
        <table className="dtable mini-table">
          <thead><tr><th>月份</th>{trend.map((t, i) => <th key={i} className="ta-r">{t.year}-{t.label}</th>)}</tr></thead>
          <tbody><tr><td className="muted">回款金额</td>{trend.map((t, i) => <td key={i} className="ta-r num">{money(t.fen)}</td>)}</tr></tbody>
        </table>
      </div>

      <div className="grid-2">
        <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: C[c.channel] || "#94A3B8" }))} />
              <div className="donut-legend">
                {channels.map((c) => (
                  <div className="legend-row" key={c.channel}>
                    <span className="legend-dot" style={{ background: C[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 className="card">
          <div className="card-head"><div className="card-title">欠款人待还排行</div></div>
          {tops.length === 0 ? <EmptyState compact icon="users" title="暂无待还" /> : (
            <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>
                    <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>
  );
}

/* ===================== 操作记录 ===================== */
function AuditPage({ state }) {
  const TYPE_TONE = { "导入还款": "green", "新增还款": "green", "编辑还款": "blue", "恢复还款": "green", "金额调整": "amber", "作废调整": "red", "恢复调整": "green", "作废还款": "red", "新增债务": "blue", "新增欠款人": "blue", "编辑": "neutral" };
  const log = [...state.auditLog].sort((a, b) => new Date(b.time) - new Date(a.time));
  return (
    <div className="page">
      <PageHeader title="操作记录" desc="记录新增、修改、作废等关键操作，金额变更可追溯" />
      {log.length === 0 ? <EmptyState icon="history" title="暂无操作记录" /> : (
        <div className="card no-pad">
          <table className="dtable dtable-rows">
            <thead><tr><th>操作时间</th><th>操作类型</th><th>对象</th><th>变更摘要</th></tr></thead>
            <tbody>
              {log.map((l) => (
                <tr key={l.id}>
                  <td className="num muted">{fmtDateTime(l.time)}</td>
                  <td><span className={`tag-tone tag-${TYPE_TONE[l.type] || "neutral"}`}>{l.type}</span></td>
                  <td>{l.target}</td>
                  <td className="muted">{l.summary}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

/* ===================== 设置 ===================== */
function SettingsPage({ state, actions, openModal, toast }) {
  const [remind, setRemind] = React.useState(state.settings.remindDays);
  const [newChannel, setNewChannel] = React.useState("");
  const [newRelation, setNewRelation] = React.useState("");
  const [newDebtType, setNewDebtType] = React.useState("");
  return (
    <div className="page">
      <PageHeader title="设置" desc="还款途径、标签、提醒、账户与数据管理" />

      <div className="settings-grid">
        <div className="card">
          <div className="card-title sm">还款途径</div>
          <div className="muted xs mb">支持新增和停用自定义还款途径</div>
          <div className="tag-manage">
            {state.channels.map((c) => (
              <div className="tm-row" key={c}><span className="tm-dot" style={{ background: window.CHANNEL_COLORS[c] || "#94A3B8" }} /><span className="tm-name">{c}</span><button className="iconbtn-xs" onClick={() => actions.removeChannel(c)}><Icon name="x" size={13} /></button></div>
            ))}
          </div>
          <div className="add-inline">
            <input className="inp inp-sm" placeholder="新增自定义途径" value={newChannel} onChange={(e) => setNewChannel(e.target.value)} />
            <Btn kind="outline" size="sm" icon="plus" onClick={() => { if (newChannel.trim()) { actions.addChannel(newChannel.trim()); setNewChannel(""); toast({ msg: "已新增还款途径", tone: "success" }); } }}>添加</Btn>
          </div>
        </div>

        <div className="card">
          <div className="card-title sm">关系标签 / 债务类型</div>
          <div className="muted xs mb">关系标签</div>
          <div className="chips-static">{state.relations.map((r) => <span className="tag-soft" key={r}>{r}<button className="iconbtn-xs" onClick={() => actions.removeRelation(r)}><Icon name="x" size={11} /></button></span>)}</div>
          <div className="add-inline"><input className="inp inp-sm" placeholder="新增关系标签" value={newRelation} onChange={(e) => setNewRelation(e.target.value)} /><Btn kind="outline" size="sm" onClick={() => { if (newRelation.trim()) { actions.addRelation(newRelation.trim()); setNewRelation(""); } }}>添加</Btn></div>
          <div className="muted xs mb" style={{ marginTop: 14 }}>债务类型</div>
          <div className="chips-static">{state.debtTypes.map((t) => <span className="tag-soft" key={t}>{t}<button className="iconbtn-xs" onClick={() => actions.removeDebtType(t)}><Icon name="x" size={11} /></button></span>)}</div>
          <div className="add-inline"><input className="inp inp-sm" placeholder="新增债务类型" value={newDebtType} onChange={(e) => setNewDebtType(e.target.value)} /><Btn kind="outline" size="sm" onClick={() => { if (newDebtType.trim()) { actions.addDebtType(newDebtType.trim()); setNewDebtType(""); } }}>添加</Btn></div>
        </div>

        <div className="card">
          <div className="card-title sm">基础选项与提醒</div>
          <div className="info-row"><span className="info-k">默认币种</span><span className="info-v">人民币 (CNY)</span></div>
          <div className="info-row"><span className="info-k">日期格式</span><span className="info-v">YYYY-MM-DD</span></div>
          <div className="setting-row">
            <span className="info-k">到期提前提醒</span>
            <div className="step-num">
              <button onClick={() => { const v = Math.max(1, remind - 1); setRemind(v); actions.setRemind(v); }}>−</button>
              <span className="num">{remind} 天</span>
              <button onClick={() => { const v = remind + 1; setRemind(v); actions.setRemind(v); }}>+</button>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-title sm">账户</div>
          <div className="info-row"><span className="info-k">登录账号</span><span className="info-v">{window.Ledger.getAuthConfig().username}（单账户）</span></div>
          <div className="danger-note neutral"><Icon name="lock" size={14} />当前为前端本地密码保护，不等同于服务端安全认证。</div>
          <Btn kind="outline" size="sm" icon="lock" onClick={() => openModal({ type: "password" })}>修改密码</Btn>
        </div>

        <div className="card card-span2">
          <div className="card-title sm">数据管理</div>
          <div className="muted xs mb">导出、备份与恢复</div>
          <div className="data-actions">
            <Btn kind="outline" icon="download" onClick={() => openModal({ type: "export" })}>导出数据（Excel/CSV）</Btn>
            <Btn kind="outline" icon="db" onClick={() => actions.backupData()}>立即备份</Btn>
            <div className="grow" />
            <Btn kind="ghost" danger icon="upload" onClick={() => openModal({ type: "restore" })}>从备份恢复</Btn>
          </div>
          <div className="danger-note"><Icon name="alert" size={14} />恢复属于高风险操作，将覆盖当前全部数据，需二次确认。</div>
        </div>
      </div>
    </div>
  );
}

/* ===================== 登录 ===================== */
function LoginPage({ onLogin }) {
  const [user, setUser] = React.useState("");
  const [pwd, setPwd] = React.useState("");
  const [err, setErr] = React.useState({});
  const [busy, setBusy] = React.useState(false);
  function submit(e) {
    e.preventDefault();
    const er = {};
    if (!user.trim()) er.user = "请输入账号";
    if (!pwd.trim()) er.pwd = "请输入密码";
    setErr(er);
    if (Object.keys(er).length) return;
    setBusy(true);
    setTimeout(() => {
      const res = window.Ledger.verifyLogin(user, pwd);
      setBusy(false);
      if (!res.ok) {
        setErr({ form: res.message || "账号或密码错误" });
        return;
      }
      onLogin();
    }, 350);
  }
  return (
    <div className="login-wrap">
      <div className="login-card">
        <div className="login-brand"><span className="brand-mark"><Icon name="coins" size={22} /></span><div><div className="brand-name">债务明细清单</div><div className="brand-sub">别人欠我的钱 · 记录与回款汇总</div></div></div>
        <form onSubmit={submit}>
          <Field label="账号" error={err.user}><input className="inp" value={user} onChange={(e) => setUser(e.target.value)} placeholder="输入账号" autoFocus /></Field>
          <Field label="密码" error={err.pwd}><input className="inp" type="password" value={pwd} onChange={(e) => setPwd(e.target.value)} placeholder="输入密码" /></Field>
          {err.form && <div className="field-msg err">{err.form}</div>}
          <Btn kind="primary" full type="submit" disabled={busy}>{busy ? "登录中…" : "登录"}</Btn>
        </form>
        <div className="login-foot"><span className="muted xs">默认账号 admin，默认密码 123456，登录后请在设置里修改密码</span></div>
      </div>
      <div className="login-note muted xs">所有页面需登录后访问 · 数据仅保存在本机浏览器 · 前端本地保护不等同于服务端认证</div>
    </div>
  );
}

Object.assign(window, { StatsPage, AuditPage, SettingsPage, LoginPage });
})();