/* Hunian Kita — IPL billing & collection */

function Finance({ ctx }) {
  const HK = window.HK, K = HK.kpis;
  const [reminded, setReminded] = React.useState({});
  const [tab, setTab] = React.useState("Outstanding");

  const remind = (unit, name) => { setReminded((r) => ({ ...r, [unit]: true })); ctx.toast("Reminder sent to " + name + " (" + unit + ")"); };
  const remindAll = () => { const all = {}; HK.outstanding.forEach((o) => (all[o.unit] = true)); setReminded(all); ctx.toast("Reminders sent to all 89 unpaid units"); };

  const billedMay = 887, collectedMay = 798, paidPct = Math.round((collectedMay / billedMay) * 100);

  return (
    <div className="content-inner">
      <div className="kpi-grid">
        <div className="kpi" style={{ cursor: "default", alignItems: "center", flexDirection: "row", gap: 14 }}>
          <Gauge pct={K.collectionPct} />
          <div><div className="lbl">Collection rate · May</div>
            <div className="delta down"><Icon name="trending-down" size={14} />{K.collectionDelta}% vs Apr</div></div>
        </div>
        <KpiCard icon="banknote" iconBg="var(--pos-soft)" iconColor="var(--pos)" label="Collected — May"
          value="Rp 558,6jt" delta={null} deltaNote={collectedMay + " of " + billedMay + " units paid"} spark={HK.iplTrend.map((d) => d.collected)} sparkColor="var(--pos)" />
        <KpiCard icon="alert-circle" iconBg="var(--neg-soft)" iconColor="var(--neg)" label="Outstanding"
          value="Rp 158,4jt" delta={null} deltaNote={K.outstandingUnits + " units · 14 are 60+ days"} />
        <KpiCard icon="calendar-check" iconBg="var(--accent-soft)" iconColor="var(--accent)" label="On-time payers"
          value="76%" delta={2} deltaNote="paid before the 10th" spark={[71, 73, 72, 75, 74, 76]} />
      </div>

      <div className="grid mt" style={{ gridTemplateColumns: "1.5fr 1fr" }}>
        <div className="card pad">
          <div className="card-h"><h3>Billed vs collected</h3><span className="hint">Rp (millions) · per month</span>
            <div className="right legend">
              <span className="li"><span className="sw" style={{ background: "#3581E1" }} />Billed</span>
              <span className="li"><span className="sw" style={{ background: "#11936A" }} />Collected</span>
            </div></div>
          <LineChart labels={HK.iplTrend.map((d) => d.m)} money height={220}
            series={[{ data: HK.iplTrend.map((d) => d.billed), color: "#3581E1", fill: false },
                     { data: HK.iplTrend.map((d) => d.collected), color: "#11936A", fill: true }]} />
        </div>
        <div className="card pad">
          <div className="card-h"><h3>Receivables aging</h3><span className="hint">units</span></div>
          <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
            <Donut data={HK.aging} center={{ big: "89", small: "unpaid units" }} size={150} />
            <div className="legend" style={{ flexDirection: "column", gap: 10 }}>
              {HK.aging.map((a, i) => (
                <span className="li" key={i}><span className="sw" style={{ background: a.color }} />{a.label}<b style={{ marginLeft: 6, color: "var(--t1)" }}>{a.val}</b></span>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="card pad mt">
        <div className="card-h"><h3>Aturan IPL per RT/RW</h3><span className="hint">tiap RT/RW bisa beda tarif, denda, &amp; diskon</span>
          <div className="right"><button className="btn ghost sm" onClick={() => ctx.toast("Editor aturan IPL dibuka")}><Icon name="sliders-horizontal" size={15} />Atur aturan</button></div></div>
        <table className="tbl">
          <thead><tr><th>RT / RW</th><th>Unit</th><th>IPL / bln</th><th>Denda telat</th><th>Tenggang</th><th>Bayar setahun</th></tr></thead>
          <tbody>
            {HK.iplRules.map((r) => (
              <tr key={r.rtrw}>
                <td className="strong">{r.rtrw}</td>
                <td className="unit muted">{r.units}</td>
                <td className="amt">{HK.rp(r.base)}</td>
                <td><span className="badge warn">{HK.lateText(r)}</span></td>
                <td className="muted">tgl {r.grace}</td>
                <td><span className="badge pos"><Icon name="tag" size={12} />{r.annual}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="card pad mt">
        <div className="card-h">
          <h3>Collection ledger</h3>
          <div className="right">
            <div className="seg"><button className={tab === "Outstanding" ? "on" : ""} onClick={() => setTab("Outstanding")}>Outstanding · 89</button>
              <button className={tab === "Paid" ? "on" : ""} onClick={() => setTab("Paid")}>Paid · 798</button></div>
            <button className="btn primary sm" onClick={remindAll}><Icon name="send" size={15} />Remind all unpaid</button>
          </div>
        </div>

        {tab === "Outstanding" ? (
          <table className="tbl">
            <thead><tr><th>Unit</th><th>Resident</th><th>Pokok</th><th>Denda</th><th>Total tagihan</th><th>Aging</th><th></th></tr></thead>
            <tbody>
              {HK.outstanding.map((o) => {
                const denda = HK.dendaOf(HK.iplRules[3], o.amount, o.months);
                return (
                <tr key={o.unit}>
                  <td className="strong unit">{o.unit}</td>
                  <td><div className="who"><Avatar name={o.name} size={28} /><span className="nm">{o.name}</span></div></td>
                  <td className="amt">{HK.rp(o.amount)}</td>
                  <td className="amt" style={{ color: denda ? "var(--neg)" : "var(--t3)" }}>{denda ? "+ " + HK.rp(denda) : "—"}</td>
                  <td className="amt">{HK.rp(o.amount + denda)}</td>
                  <td><span className={"badge " + (o.months >= 3 ? "neg" : o.months >= 2 ? "warn" : "calm")}>{o.aging}</span></td>
                  <td onClick={(e) => e.stopPropagation()}>
                    {reminded[o.unit]
                      ? <span className="badge pos"><Icon name="check" size={12} />Reminded</span>
                      : <button className="btn ghost sm" onClick={() => remind(o.unit, o.name)}><Icon name="bell" size={14} />Remind</button>}
                  </td>
                </tr>
              ); })}
            </tbody>
          </table>
        ) : (
          <div className="paid-empty">
            <Icon name="check-circle" size={30} style={{ color: "var(--pos)" }} />
            <div><b>798 units fully paid for May.</b><div className="statline">Auto-reconciled from payment gateway · last sync 11:40</div></div>
          </div>
        )}
      </div>
    </div>
  );
}

window.Finance = Finance;