/* Hunian Kita — Administrator views: Platform overview, Estates, Operators, Audit */

function PlatformOverview({ ctx }) {
  const HK = window.HK, P = HK.platform;
  const ticketsByEstate = HK.estates.filter((e) => e.status === "Active").map((e) => ({ name: e.code + " · " + e.city.split(",")[0], val: e.tickets, color: e.color }));

  return (
    <div className="content-inner">
      <div className="kpi-grid">
        <KpiCard icon="building-2" iconBg="var(--accent-soft)" iconColor="var(--accent)" label="Estates managed"
          value={P.estates} delta={1} deltaNote={P.activeEstates + " active · 1 onboarding"} onClick={() => ctx.go("estates")} />
        <KpiCard icon="home" iconBg="var(--info-soft)" iconColor="var(--info)" label="Units under management"
          value={P.units.toLocaleString("id-ID")} delta={null} deltaNote={P.residents.toLocaleString("id-ID") + " residents"} spark={[3100, 3100, 3400, 3400, 3892, 3892].map((v) => v / 100)} sparkColor="var(--info)" />
        <KpiCard icon="banknote" iconBg="var(--pos-soft)" iconColor="var(--pos)" label="Platform MRR"
          value="Rp 11,68jt" delta={P.mrrDelta} deltaNote="recurring · per month" spark={[9.2, 9.6, 10.1, 10.8, 11.2, 11.68]} sparkColor="var(--pos)" />
        <KpiCard icon="gauge" iconBg="var(--warn-soft)" iconColor="var(--warn)" label="Avg. collection rate"
          value={P.collection + "%"} delta={P.collectionDelta} deltaNote={"across estates · uptime " + P.uptime + "%"} />
      </div>

      <div className="grid mt" style={{ gridTemplateColumns: "1.5fr 1fr" }}>
        <div className="card pad">
          <div className="card-h"><h3>Estate health</h3><span className="hint">live across the portfolio</span>
            <div className="right"><button className="btn ghost sm" onClick={() => ctx.go("estates")}>View all<Icon name="arrow-right" size={14} /></button></div></div>
          <table className="tbl">
            <thead><tr><th>Estate</th><th>Units</th><th>Collection</th><th>Open tickets</th><th>Status</th></tr></thead>
            <tbody>
              {HK.estates.map((e) => (
                <tr key={e.name} onClick={() => ctx.go("estates")}>
                  <td><div className="who"><span className="ci" style={{ background: e.color + "22", color: e.color, fontWeight: 800 }}>{e.code}</span>
                    <div><div className="nm">{e.name}</div><div className="meta">{e.city}</div></div></div></td>
                  <td className="strong unit">{e.units.toLocaleString("id-ID")}</td>
                  <td>{e.collection ? (
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}><div className="bar" style={{ width: 70 }}><span style={{ width: e.collection + "%", background: e.collection >= 90 ? "var(--pos)" : "var(--warn)" }} /></div>
                      <span className="strong" style={{ fontSize: 12.5 }}>{e.collection}%</span></div>
                  ) : <span className="muted">—</span>}</td>
                  <td>{e.tickets > 0 ? <span className={"badge " + (e.tickets >= 20 ? "neg" : "calm")}>{e.tickets} open</span> : <span className="muted">—</span>}</td>
                  <td><span className={"badge " + (e.status === "Active" ? "pos" : "warn")}><span className="bdot" />{e.status}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="card pad">
          <div className="card-h"><h3>Portfolio growth</h3><span className="hint">estates onboarded</span></div>
          <LineChart labels={P.estateTrend.map((d) => d.m)} height={170}
            series={[{ data: P.estateTrend.map((d) => d.v), color: "var(--accent)", fill: true }]} />
          <div className="divider" />
          <div className="glance-grid" style={{ gridTemplateColumns: "1fr 1fr" }}>
            <div className="glance"><Icon name="user-cog" size={18} /><div><div className="gv">{P.operators}</div><div className="gl">Operators</div></div></div>
            <div className="glance"><Icon name="message-square-warning" size={18} /><div><div className="gv">{P.openTickets}</div><div className="gl">Open tickets</div></div></div>
          </div>
        </div>
      </div>

      <div className="grid mt" style={{ gridTemplateColumns: "1fr 1.2fr" }}>
        <div className="card pad">
          <div className="card-h"><h3>Open tickets by estate</h3><span className="hint">this week</span></div>
          <HBars data={ticketsByEstate} />
        </div>
        <div className="card pad">
          <div className="card-h"><h3>Recent platform activity</h3><div className="right"><button className="btn ghost sm" onClick={() => ctx.go("audit")}>Audit log<Icon name="arrow-right" size={14} /></button></div></div>
          <div className="audit-list">
            {HK.audit.slice(0, 5).map((a, i) => (
              <div className="audit-row" key={i}>
                <span className={"ic badge " + a.c} style={{ width: 34, height: 34, borderRadius: 10, padding: 0, justifyContent: "center" }}><Icon name={a.ic} size={16} /></span>
                <div className="ax"><div className="at">{a.action}</div><div className="am">{a.who} · {a.target}</div></div>
                <span className="statline">{a.time}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function Estates({ ctx }) {
  const HK = window.HK;
  return (
    <div className="content-inner">
      <div className="section-title"><h2>Estates portfolio</h2><span className="statline">{HK.platform.estates} estates · {HK.platform.units.toLocaleString("id-ID")} units</span>
        <div className="right"><button className="btn primary" onClick={() => ctx.toast("Estate onboarding wizard opened")}><Icon name="plus" size={16} />Onboard estate</button></div></div>
      <div className="estate-grid">
        {HK.estates.map((e) => (
          <div className="estate-card" key={e.name} onClick={() => ctx.toast("Opening " + e.name)}>
            <div className="eh">
              <span className="ebadge" style={{ background: e.color }}>{e.code}</span>
              <div style={{ flex: 1, minWidth: 0 }}><div className="en">{e.name}</div><div className="ec">{e.city}</div></div>
              <span className={"badge " + (e.status === "Active" ? "pos" : "warn")}><span className="bdot" />{e.status}</span>
            </div>
            <div className="erow">
              <div className="estat"><div className="v">{e.units.toLocaleString("id-ID")}</div><div className="l">Units · {e.occ}% occ</div></div>
              <div className="estat"><div className="v">{e.collection ? e.collection + "%" : "—"}</div><div className="l">Collection</div></div>
              <div className="estat"><div className="v" style={{ color: e.tickets >= 20 ? "var(--neg)" : "var(--t1)" }}>{e.tickets}</div><div className="l">Open tickets</div></div>
            </div>
            <div className="ef">
              <span className="badge info">{e.plan}</span>
              <span className="statline" style={{ display: "flex", alignItems: "center", gap: 6, marginLeft: "auto" }}>
                <Icon name="user-round" size={13} />{e.manager === "—" ? "No manager yet" : e.manager}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Operators({ ctx }) {
  const HK = window.HK;
  return (
    <div className="content-inner">
      <div className="section-title"><h2>Operators & access</h2><span className="statline">{HK.operators.length} accounts across {HK.platform.activeEstates} estates</span>
        <div className="right"><button className="btn primary" onClick={() => ctx.toast("Invitation sent")}><Icon name="user-plus" size={16} />Invite operator</button></div></div>
      <div className="card pad">
        <table className="tbl">
          <thead><tr><th>Operator</th><th>Role</th><th>Estate</th><th>Access</th><th>Status</th><th>Last active</th><th></th></tr></thead>
          <tbody>
            {HK.operators.map((m) => (
              <tr key={m.email}>
                <td><div className="who"><Avatar name={m.name} size={30} color={m.color} /><div><div className="nm">{m.name}</div><div className="meta">{m.email}</div></div></div></td>
                <td className="strong">{m.role}</td>
                <td>{m.estate}</td>
                <td><span className="badge calm">{m.access}</span></td>
                <td><span className={"badge " + (m.status === "Active" ? "pos" : "warn")}><span className="bdot" />{m.status}</span></td>
                <td className="muted">{m.last}</td>
                <td onClick={(e) => e.stopPropagation()}><button className="iconbtn" style={{ width: 32, height: 32 }}><Icon name="ellipsis" size={16} /></button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function AuditLog({ ctx }) {
  const HK = window.HK;
  return (
    <div className="content-inner">
      <div className="card pad">
        <div className="card-h"><h3>Audit log</h3><span className="hint">platform-wide · newest first</span>
          <div className="right"><button className="btn ghost sm" onClick={() => ctx.toast("Audit log exported")}><Icon name="download" size={15} />Export</button></div></div>
        <div className="audit-list">
          {HK.audit.map((a, i) => (
            <div className="audit-row" key={i}>
              <span className={"ic badge " + a.c} style={{ width: 36, height: 36, borderRadius: 10, padding: 0, justifyContent: "center" }}><Icon name={a.ic} size={17} /></span>
              <div className="ax"><div className="at">{a.action}</div><div className="am">{a.who} · {a.target}</div></div>
              <span className="statline">{a.time}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PlatformOverview, Estates, Operators, AuditLog });