// Rent / property module
function Rent() {
  const { useState } = React;
  const [units, setUnits] = useState(D.units);
  const [propFilter, setPropFilter] = useState("All");
  const [sel, setSel] = useState(null);

  const totalUnits = D.properties.reduce((s, p) => s + p.units, 0);
  const occupied = D.properties.reduce((s, p) => s + p.occupied, 0);
  const rentRoll = D.properties.reduce((s, p) => s + p.rent, 0);
  const collected = units.filter((u) => u.paid === true).reduce((s, u) => s + u.rent, 0);
  const dueUnits = units.filter((u) => u.paid === false);
  const expiring = units.filter((u) => ["Jun 2026", "Jul 2026", "Aug 2026"].includes(u.ends));

  const visible = units.filter((u) => propFilter === "All" || u.prop === propFilter);
  const selUnit = sel ? units.find((u) => u.unit === sel) : null;

  const recordPayment = (unit) => {
    setUnits((list) => list.map((u) => (u.unit === unit ? { ...u, paid: true } : u)));
    notify(T("rent.paymentRecorded", { month: TV("June"), unit: unit }));
    setSel(null);
  };

  return (
    <div className="page" data-screen-label="Rent">
      <KpiBar>
        <Stat label={T("rent.occupancy")} value={Math.round((occupied / totalUnits) * 100) + "%"} sub={T("rent.ofUnits", { occupied: occupied, total: totalUnits })} />
        <Stat label={T("rent.monthlyRentRoll")} value={money(rentRoll)} sub={T("rent.propertiesN", { n: D.properties.length })} />
        <Stat label={T("rent.collectedMonth", { month: TV("June") })} value={money(collected)} sub={T("rent.paymentsStillDueN", { n: dueUnits.length })} />
        <Stat label={T("rent.leasesEnding90")} value={String(expiring.length)} sub={T("dash.tenantsOnNoticeN", { n: units.filter((u) => u.status === "Notice").length })} />
      </KpiBar>

      <div className="prop-grid">
        {D.properties.map((p) => (
          <button key={p.id} className={"card prop" + (propFilter === p.name ? " on" : "")}
            onClick={() => setPropFilter(propFilter === p.name ? "All" : p.name)}>
            <span className="prop-ico"><Icon name="building" size={18} /></span>
            <span className="prop-name display">{p.name}</span>
            <span className="prop-addr">{p.addr}</span>
            <Progress value={(p.occupied / p.units) * 100} />
            <span className="prop-meta">
              <span>{T("rent.occupiedRatio", { occupied: p.occupied, total: p.units })}</span>
              <span className="mono strong">{money(p.rent)}{T("rent.perMonthShort")}</span>
            </span>
          </button>
        ))}
      </div>

      <div className="toolbar page-toolbar">
            <Chips active={propFilter} onChange={setPropFilter} options={[{ id: "All", label: T("rent.allProperties") }]
              .concat(D.properties.map((p) => ({ id: p.name, label: p.name })))} />
          </div>
      <div className="grid-23">
        <section className="card">
          <DataTable rowKey={(r) => r.unit} onRow={(r) => r.status !== "Vacant" && setSel(r.unit)} rows={visible} cols={[
            { k: "unit", label: T("rent.unit"), w: "90px", render: (r) => <span className="mono strong">{r.unit}</span> },
            { k: "tenant", label: T("rent.tenant"), render: (r) => r.tenant === "—" ? <span className="dim">—</span> : <span className="cellwho"><Avatar name={r.tenant} size={24} />{r.tenant}</span> },
            { k: "rent", label: T("rent.rentPerMonth"), align: "right", w: "100px", render: (r) => <span className="mono strong">{money(r.rent)}</span> },
            { k: "ends", label: T("rent.leaseEnds"), w: "100px", render: (r) => <span className="dim">{r.ends}</span> },
            { k: "paid", label: T("rent.monthRent", { month: TV("June") }), w: "100px", render: (r) => r.paid === null ? <span className="dim">—</span> : <Badge tone={r.paid ? "green" : "amber"}>{r.paid ? "Paid" : "Due"}</Badge> },
            { k: "status", label: T("common.status"), w: "110px", render: (r) => <Badge>{r.status}</Badge> }
          ]} />
        </section>

        <section className="card pad">
          <SectionHead title={T("rent.renewalsToHandle")} />
          <ul className="leave-list">
            {expiring.map((u) => (
              <li key={u.unit} className="leave-row">
                <span className="attn-ico amber"><Icon name="calendar" size={16} /></span>
                <span className="leave-main">
                  <b>{u.unit} · {u.tenant}</b>
                  <small>{u.prop} · {T("rent.endsOn", { date: u.ends })}{u.status === "Notice" ? " · " + T("rent.gaveNotice") : ""}</small>
                </span>
                <Btn small variant="subtle" onClick={() => notify(T("rent.renewalOfferSent", { name: u.tenant }))}>{T("rent.offerRenewal")}</Btn>
              </li>
            ))}
          </ul>
        </section>
      </div>

      <Drawer open={!!selUnit} onClose={() => setSel(null)}
        title={selUnit ? selUnit.unit + " · " + selUnit.prop : ""}
        sub={selUnit ? T("rent.leaseEndsOn", { date: selUnit.ends }) : ""}
        footer={selUnit && selUnit.paid === false ? (
          <div className="btnrow">
            <Btn variant="primary" icon="check" onClick={() => recordPayment(selUnit.unit)}>{T("rent.recordMonthPayment", { month: TV("June") })}</Btn>
            <Btn icon="send" onClick={() => notify(T("rent.reminderSentTo", { name: selUnit.tenant }))}>{T("acct.sendReminder")}</Btn>
          </div>
        ) : null}>
        {selUnit ? (
          <div>
            <div className="amount-hero">
              <span className="display">{money(selUnit.rent)}<small>{T("rent.perMonthShort")}</small></span>
              <Badge>{selUnit.status}</Badge>
            </div>
            <KV k={T("rent.tenant")} v={selUnit.tenant} />
            <KV k={T("rent.property")} v={selUnit.prop} />
            <KV k={T("rent.leaseEnds")} v={selUnit.ends} />
            <KV k={T("rent.monthRent", { month: TV("June") })} v={selUnit.paid ? TV("Paid") : TV("Due")} />
            <KV k={T("rent.depositHeld")} v={money(selUnit.rent * 2)} mono />
            <div className="lineitems">
              <div className="li-head">{T("rent.paymentHistory")}</div>
              {["May", "April", "March"].map((m) => (
                <div key={m} className="li-row">
                  <span>{TV(m)} 2026</span>
                  <span className="dim" style={{ flex: 1, marginInlineStart: 10 }}>{TV("Bank transfer")}</span>
                  <span className="mono strong">{money(selUnit.rent)}</span>
                </div>
              ))}
            </div>
          </div>
        ) : null}
      </Drawer>
    </div>
  );
}
window.Rent = Rent;