// ── Control-plane dashboard home ──────────────────────────────────────────
function CpDashboard({ nav }) {
  const [d, setD] = React.useState(null);
  const [err, setErr] = React.useState(null);

  React.useEffect(() => {
    cpApi.getStats().then(setD).catch((e) => setErr(e.message));
  }, []);

  if (err) return <div className="panel pad" style={{ color: "var(--danger)" }}>{err}</div>;
  if (!d) return <div style={{ color: "var(--ink-mute)" }}><Spinner /> Loading…</div>;

  const k = d.kpis;

  return (
    <div>
      <h1 style={{ fontSize: 24, marginBottom: 18 }}>Overview</h1>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(150px,1fr))", gap: 12, marginBottom: 24 }}>
        <KpiCard label="Tenants" value={k.total} />
        <KpiCard label="Active" value={k.active} tone="ok" />
        <KpiCard label="Suspended" value={k.suspended} tone={k.suspended ? "warn" : null} />
        <KpiCard label="Provisioning" value={k.provisioning} tone={k.provisioning ? "accent" : null} />
        <KpiCard label="Students (all tenants)"
          value={d.students ? d.students.total : "—"} />
      </div>

      {d.students && d.students.unreachable && d.students.unreachable.length > 0 && (
        <div className="panel pad" style={{ marginBottom: 20, fontSize: 13, color: "var(--ink-mute)" }}>
          {d.students.unreachable.length} tenant database(s) unreachable — student totals exclude {d.students.unreachable.join(", ")}.
        </div>
      )}

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }} className="dash-cols">
        {/* Recent tenants */}
        <div className="panel">
          <div style={{ padding: "16px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center" }}>
            <h3 style={{ fontSize: 15, flex: 1 }}>Recent tenants</h3>
            <a href="#/tenants" style={{ fontSize: 13 }}>View all</a>
          </div>
          {d.recentTenants.length === 0
            ? <div style={{ padding: 18, color: "var(--ink-mute)" }}>No tenants yet.</div>
            : d.recentTenants.map((t) => (
              <div key={t.id}
                onClick={() => nav(`#/tenants/${t.id}`)}
                style={{ padding: "12px 18px", borderBottom: "1px solid var(--line)", cursor: "pointer", display: "flex", alignItems: "center", gap: 10 }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 600 }}>
                    {t.name} {t.is_tenant_zero && <Pill tone="accent">zero</Pill>}
                  </div>
                  <div className="mono" style={{ fontSize: 12, color: "var(--ink-mute)", overflow: "hidden", textOverflow: "ellipsis" }}>{t.primary_subdomain}</div>
                </div>
                <StatusPill status={t.status} />
                <div style={{ fontSize: 12, color: "var(--ink-mute)", whiteSpace: "nowrap" }}>{timeAgo(t.created_at)}</div>
              </div>
            ))}
        </div>

        {/* Recent activity */}
        <div className="panel">
          <div style={{ padding: "16px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center" }}>
            <h3 style={{ fontSize: 15, flex: 1 }}>Recent activity</h3>
            <a href="#/audit" style={{ fontSize: 13 }}>Full log</a>
          </div>
          {d.recentAudit.length === 0
            ? <div style={{ padding: 18, color: "var(--ink-mute)" }}>Nothing logged yet.</div>
            : d.recentAudit.map((r) => (
              <div key={r.id} style={{ padding: "11px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "baseline", gap: 10 }}>
                <code style={{ fontSize: 12 }}>{r.action}</code>
                <div style={{ flex: 1, fontSize: 13, color: "var(--ink-mute)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                  {r.tenant_slug ? r.tenant_slug + " · " : ""}{r.actor_email || "—"}
                </div>
                <div style={{ fontSize: 12, color: "var(--ink-mute)", whiteSpace: "nowrap" }}>{timeAgo(r.created_at)}</div>
              </div>
            ))}
        </div>
      </div>
    </div>
  );
}

window.CpDashboard = CpDashboard;