/* payments.jsx — 资金对账 view */
function Payments({ state, dispatch, openModal }) {
  const { calc, fmt } = window.LP;
  const [cur, setCur] = React.useState("GBP");
  const [dir, setDir] = React.useState("all");
  const [q, setQ] = React.useState("");

  const all = state.payments;
  const owner = state.meta.owner || "Elaine";
  const byCur = all.filter((p) => p.currency === cur);

  // reconciliation per intermediary (people who RECEIVE from students)
  const recipients = [...new Set(byCur.filter((p) => p.dir === "in").map((p) => p.to))];
  const ledgers = recipients
    .map((person) => ({ person, isOwner: person === owner, ...calc.ledgerFor(byCur, person, cur) }))
    .sort((a, b) => (a.isOwner - b.isOwner) || (b.received - a.received));

  // totals
  const totalIn = byCur.filter((p) => p.dir === "in" && p.status !== "returned").reduce((a, p) => a + p.amount, 0);
  const totalOut = byCur.filter((p) => p.dir === "out").reduce((a, p) => a + p.amount, 0);
  const pending = byCur.filter((p) => p.dir === "in" && p.status === "pending");

  let rows = byCur;
  if (dir !== "all") rows = rows.filter((p) => p.dir === dir);
  if (q.trim()) {
    const k = q.toLowerCase();
    rows = rows.filter((p) => (p.student + " " + p.from + " " + p.to + " " + p.note).toLowerCase().includes(k));
  }
  rows = [...rows].sort((a, b) => (a.date < b.date ? 1 : -1));

  const statusTone = { cleared: "green", pending: "amber", returned: "neutral" };
  const statusLabel = { cleared: "已结清", pending: "待结清", returned: "已退回" };

  return (
    <div className="view">
      <div className="page-head">
        <div>
          <h1>资金对账 <span className="page-head-en">Payments</span></h1>
          <p className="page-sub">收款流向 · 中间人结算 · 谁欠谁</p>
        </div>
        <Button variant="primary" icon={<Icon.plus size={16} />} onClick={() => openModal({ type: "payment" })}>记一笔</Button>
      </div>

      <div className="cur-tabs">
        {["GBP", "RMB"].map((c) => (
          <button key={c} className={cur === c ? "is-active" : ""} onClick={() => setCur(c)}>
            {c === "GBP" ? "£ GBP" : "¥ RMB"}
            <span className="cur-tabs-count">{all.filter((p) => p.currency === c).length}</span>
          </button>
        ))}
      </div>

      <div className="stat-grid">
        <StatCard label="总收款" value={fmt.money(totalIn, cur)} sub="students → 中间人/Elaine" tone="green" icon={<Icon.arrowDownRight size={20} />} />
        <StatCard label="总转出" value={fmt.money(totalOut, cur)} sub="中间人 → Elaine/其他" tone="blue" icon={<Icon.arrowUpRight size={20} />} />
        <StatCard label="待结清" value={fmt.money(pending.reduce((a, p) => a + p.amount, 0), cur)} sub={`${pending.length} 笔 pending`} tone={pending.length ? "amber" : "neutral"} icon={<Icon.clock size={20} />} />
      </div>

      {/* reconciliation */}
      <Card className="recon">
        <SectionHead title="中间人结算 / 谁欠谁" action={<Badge tone="neutral">{cur}</Badge>} />
        <div className="recon-grid">
          {ledgers.map((l) => (
            <div key={l.person} className={"recon-card" + (!l.isOwner && l.holding > 0 ? " is-owed" : "") + (l.isOwner ? " is-owner" : "")}>
              <div className="recon-top">
                <Avatar name={l.person} size={36} />
                <div>
                  <strong>{l.person}</strong>
                  <span className="muted sm">{l.isOwner ? "账户持有人" : "中间人账户"}</span>
                </div>
                {l.isOwner && <Badge tone="green">Owner</Badge>}
              </div>
              <div className="recon-flow">
                <div className="rf-item"><em>{l.isOwner ? "直接收到" : "收到"}</em><span className="mono pos">{fmt.money(l.received, cur)}</span></div>
                {!l.isOwner && <><Icon.arrowRight size={14} className="rf-arrow" /><div className="rf-item"><em>已转出</em><span className="mono">{fmt.money(l.paidOut, cur)}</span></div></>}
              </div>
              <div className="recon-owed">
                <span>{l.isOwner ? "状态" : "待转给 " + owner}</span>
                {l.isOwner
                  ? <strong className="mono pos" style={{ fontSize: 14 }}>已到账 ✓</strong>
                  : <strong className={"mono " + (l.holding > 0 ? "warn" : "pos")}>{fmt.money(l.holding, cur)}</strong>}
              </div>
            </div>
          ))}
          {ledgers.length === 0 && <p className="muted sm">该币种暂无收款记录</p>}
        </div>
      </Card>

      {/* ledger table */}
      <Card pad={false}>
        <div className="card-pad toolbar">
          <div className="search">
            <Icon.search size={16} />
            <input placeholder="搜索学生 / 备注…" value={q} onChange={(e) => setQ(e.target.value)} />
          </div>
          <div className="seg">
            {[["all", "全部"], ["in", "收入"], ["out", "转出"]].map(([k, l]) => (
              <button key={k} className={dir === k ? "is-active" : ""} onClick={() => setDir(k)}>{l}</button>
            ))}
          </div>
        </div>
        <div className="pay-table">
          <div className="pay-head">
            <span>日期</span><span>方向</span><span>来源 → 去向</span><span>学生 / 备注</span><span className="ta-r">金额</span><span>状态</span><span></span>
          </div>
          {rows.map((p) => (
            <div key={p.id} className="pay-row">
              <span className="mono muted">{fmt.date(p.date)}</span>
              <span>{p.dir === "in" ? <Badge tone="green"><Icon.arrowDownRight size={12} /> 收</Badge> : <Badge tone="blue"><Icon.arrowUpRight size={12} /> 转</Badge>}</span>
              <span className="pay-flow"><strong>{p.from}</strong> <Icon.arrowRight size={13} /> <strong>{p.to}</strong></span>
              <span className="pay-meta">{p.student && <span className="pay-student">{p.student}</span>}{p.note && <em>{p.note}</em>}</span>
              <span className="ta-r mono pay-amt">{fmt.money(p.amount, p.currency)}</span>
              <span><Badge tone={statusTone[p.status]} dot>{statusLabel[p.status]}</Badge></span>
              <span className="pay-act">
                <IconButton label="编辑" icon={<Icon.edit size={15} />} onClick={() => openModal({ type: "payment", payment: p })} />
                <IconButton label="删除" danger icon={<Icon.trash size={15} />} onClick={() => openModal({ type: "confirm", title: "删除收款记录", message: `删除 ${fmt.date(p.date)} · ${fmt.money(p.amount, p.currency)}？`, onConfirm: () => dispatch({ type: "delPayment", id: p.id }) })} />
              </span>
            </div>
          ))}
          {rows.length === 0 && <div className="card-pad"><EmptyState icon={<Icon.wallet size={24} />} title="没有记录" /></div>}
        </div>
      </Card>
    </div>
  );
}

window.Payments = Payments;