// hydor-page-money.jsx — Receivables & Payables (AR/AP) page.
function MoneyPage() {
  const s = useHydor();
  const d = useDerive();
  const push = useToast();
  const [tab, setTab] = React.useState("receivable");
  const pname = (id) => { const p = s.products.find((x) => x.id === id); return p ? p : { code: "—", name: "" }; };
  const partyName = (id) => { const p = s.parties.find((x) => x.id === id); return p ? p.name : "—"; };
  const today = new Date().toISOString().slice(0, 10);
  const ageOf = (date) => Math.max(Hydor.num((new Date(today) - new Date(date)) / 86400000, 0), 0);

  // receivables: unpaid sales
  const recv = s.transactions.filter((t) => !t.deleted && t.type === "sale" && !t.paid)
    .map((t) => ({ t, amount: (d.txc[t.id] || {}).total || 0, age: ageOf(t.date) }))
    .sort((a, b) => b.age - a.age);
  // payables: unpaid purchases + unpaid costs
  const payPur = s.transactions.filter((t) => !t.deleted && t.type === "purchase" && !t.paid)
    .map((t) => ({ kind: "purchase", t, label: pname(t.productId).code + " · " + Hydor.fmtQty(t.qty) + " units", party: partyName(t.partyId), amount: t.qty * t.unitCost, date: t.date, age: ageOf(t.date), id: t.id }));
  const payCost = s.costs.filter((c) => !c.deleted && !c.paid)
    .map((c) => ({ kind: "cost", label: c.item, party: partyName(c.partyId), amount: c.amount * (c.taxable ? 1 + d.taxRate : 1), date: c.date, age: ageOf(c.date), id: c.id }));
  const pay = [...payPur, ...payCost].sort((a, b) => b.age - a.age);

  const totalRecv = recv.reduce((a, r) => a + r.amount, 0);
  const totalPay = pay.reduce((a, r) => a + r.amount, 0);

  const ageBadge = (age) => age > 60 ? <Badge color="red">{Math.round(age)}d overdue</Badge> : age > 30 ? <Badge color="amber">{Math.round(age)}d</Badge> : <Badge color="gray">{Math.round(age)}d</Badge>;

  // aging buckets
  const buckets = (items) => {
    const b = { "0–30": 0, "31–60": 0, "60+": 0 };
    items.forEach((i) => { if (i.age <= 30) b["0–30"] += i.amount; else if (i.age <= 60) b["31–60"] += i.amount; else b["60+"] += i.amount; });
    return b;
  };
  const recvB = buckets(recv), payB = buckets(pay);

  return (
    <div className="content-narrow">
      <div className="stat-strip" style={{ gridTemplateColumns: "repeat(3,1fr)" }}>
        <div className="mini-stat" style={{ borderLeft: "3px solid var(--pos)" }}><div className="ms-label">Receivable</div><div className="ms-value">{Hydor.fmtMoney0(totalRecv)}</div><div className="ms-sub">owed to you · {recv.length} invoices</div></div>
        <div className="mini-stat" style={{ borderLeft: "3px solid var(--warn)" }}><div className="ms-label">Payable</div><div className="ms-value">{Hydor.fmtMoney0(totalPay)}</div><div className="ms-sub">you owe · {pay.length} bills</div></div>
        <div className="mini-stat" style={{ borderLeft: "3px solid var(--accent)" }}><div className="ms-label">Net position</div><div className="ms-value">{Hydor.fmtMoney0(totalRecv - totalPay)}</div><div className="ms-sub">receivable − payable</div></div>
      </div>

      <div className="tabs">
        <button className={"tab" + (tab === "receivable" ? " on" : "")} onClick={() => setTab("receivable")}>Receivables ({recv.length})</button>
        <button className={"tab" + (tab === "payable" ? " on" : "")} onClick={() => setTab("payable")}>Payables ({pay.length})</button>
      </div>

      {/* aging strip */}
      <div style={{ display: "flex", gap: 10, marginBottom: 18 }}>
        {Object.entries(tab === "receivable" ? recvB : payB).map(([k, v]) => (
          <div key={k} className="hx-panel" style={{ flex: 1, padding: "13px 16px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <span style={{ fontSize: 12, color: "var(--text-3)" }}>{k} days</span>
            <span className="hx-num" style={{ fontSize: 16, fontWeight: 600, color: k === "60+" && v > 0 ? "var(--neg)" : "var(--text)" }}>{Hydor.fmtMoney0(v)}</span>
          </div>
        ))}
      </div>

      <div className="hx-panel" style={{ overflow: "hidden" }}>
        {tab === "receivable" ? (
          recv.length === 0 ? <Empty icon="check" title="Nothing outstanding">No unpaid customer invoices. Everything's collected.</Empty> : (
            <table className="hx-table">
              <thead><tr><th>Date</th><th>Customer</th><th>Product</th><th className="r">Amount</th><th>Age</th><th></th></tr></thead>
              <tbody>
                {recv.map(({ t, amount, age }) => (
                  <tr key={t.id}>
                    <td className="num" style={{ color: "var(--text-2)" }}>{Hydor.fmtDate(t.date)}</td>
                    <td style={{ fontWeight: 500 }}>{partyName(t.partyId)}</td>
                    <td><span className="hx-code">{pname(t.productId).code}</span> <span style={{ color: "var(--text-2)", fontSize: 12.5 }}>{Hydor.fmtQty(t.qty)} units</span></td>
                    <td className="r num" style={{ fontWeight: 600 }}>{Hydor.fmtMoney0(amount)}</td>
                    <td>{ageBadge(age)}</td>
                    <td className="r no-print"><Btn variant="ghost" sm icon="check" onClick={() => { Hydor.setPaid("tx", t.id, true); push("Marked collected."); }}>Collect</Btn></td>
                  </tr>
                ))}
              </tbody>
            </table>
          )
        ) : (
          pay.length === 0 ? <Empty icon="check" title="Nothing owed">No unpaid bills or purchases.</Empty> : (
            <table className="hx-table">
              <thead><tr><th>Date</th><th>Payee</th><th>For</th><th>Kind</th><th className="r">Amount</th><th>Age</th><th></th></tr></thead>
              <tbody>
                {pay.map((r) => (
                  <tr key={r.id}>
                    <td className="num" style={{ color: "var(--text-2)" }}>{Hydor.fmtDate(r.date)}</td>
                    <td style={{ fontWeight: 500 }}>{r.party}</td>
                    <td style={{ color: "var(--text-2)", fontSize: 12.5 }}>{r.label}</td>
                    <td><Badge color={r.kind === "cost" ? "purple" : "blue"}>{r.kind}</Badge></td>
                    <td className="r num" style={{ fontWeight: 600 }}>{Hydor.fmtMoney0(r.amount)}</td>
                    <td>{ageBadge(r.age)}</td>
                    <td className="r no-print"><Btn variant="ghost" sm icon="check" onClick={() => { Hydor.setPaid(r.kind === "cost" ? "cost" : "tx", r.id, true); push("Marked paid."); }}>Pay</Btn></td>
                  </tr>
                ))}
              </tbody>
            </table>
          )
        )}
      </div>
    </div>
  );
}
Object.assign(window, { MoneyPage });