// AdminTeamManagement (Stage 11 · RBAC)
//
// Super-admin / admin console for managing the platform team: invite admins,
// assign roles, grant per-company access, deactivate/reactivate, and remove.
// Reads/writes via the manage-admin-access + invite-admin edge functions
// (service-role enforced, permission-checked, audited). Self-contained IIFE
// exposing window.AdminTeamManagement; loaded before page-admin.jsx.

(function () {
  const { useState, useEffect, useMemo } = React;

  const ROLES = [
    { value: "super_admin", label: "Super Admin", color: "#0F2044", dot: "🔴", desc: "Full platform access including billing, platform config, all customers, and user management. Only grant to trusted team leads." },
    { value: "admin", label: "Admin", color: "#1C4ED8", dot: "🔵", desc: "Full access to all customer dashboards and analytics. Cannot access billing or platform configuration." },
    { value: "analyst", label: "Analyst", color: "#7C3AED", dot: "🟣", desc: "Read-only access to all customer dashboards. Cannot edit settings or contact customers. Ideal for reporting analysts." },
    { value: "support", label: "Support", color: "#059669", dot: "🟢", desc: "Access to assigned companies only. Can view dashboards, contact customers, and add support notes. Cannot view GL detail or run syncs." },
    { value: "onboarding", label: "Onboarding", color: "#D97706", dot: "🟡", desc: "Can onboard new customers and view their dashboards. Access limited to assigned companies during onboarding." },
    { value: "finance_reviewer", label: "Finance Reviewer", color: "#0891B2", dot: "🔵", desc: "Read-only financial dashboard access for assigned companies. Ideal for external accountants or advisors reviewing client financials." },
  ];
  const RESTRICTED = new Set(["support", "onboarding", "finance_reviewer"]);
  const PERM_FIELDS = [
    { key: "can_view_financials", label: "View financials" },
    { key: "can_view_gl", label: "View GL detail" },
    { key: "can_contact_customer", label: "Contact customer" },
    { key: "can_edit_settings", label: "Edit settings" },
    { key: "can_run_sync", label: "Run data sync" },
  ];
  const byVal = (v) => ROLES.find((r) => r.value === v) || { label: v, color: "#64748b", desc: "" };

  async function callFn(fn, body) {
    const db = window.supabaseClient;
    const { data: { session } } = await db.auth.getSession();
    const res = await fetch(`${window.SUPABASE_URL}/functions/v1/${fn}`, {
      method: "POST",
      headers: { "Content-Type": "application/json", "Authorization": `Bearer ${session?.access_token}`, "Apikey": window.SUPABASE_ANON_KEY },
      body: JSON.stringify(body || {}),
    });
    const data = await res.json();
    if (!res.ok) throw new Error(data.error || "Request failed");
    return data;
  }

  function RoleBadge({ role }) {
    const r = byVal(role);
    return <span style={{ background: r.color, color: "#fff", fontSize: 10.5, fontWeight: 700, padding: "3px 9px", borderRadius: 999, whiteSpace: "nowrap" }}>{r.label}</span>;
  }

  function PermToggle({ checked, label, onChange }) {
    return (
      <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12.5, color: "var(--text-2)", cursor: "pointer", padding: "3px 0" }}>
        <input type="checkbox" checked={!!checked} onChange={(e) => onChange(e.target.checked)} />
        {label}
      </label>
    );
  }

  // ── Slide-in: Invite Team Member ───────────────────────────────────────────
  function InvitePanel({ companies, onClose, onDone }) {
    const [fullName, setFullName] = useState("");
    const [email, setEmail] = useState("");
    const [role, setRole] = useState("analyst");
    const [search, setSearch] = useState("");
    const [selected, setSelected] = useState([]); // [{id,name}]
    const [perms, setPerms] = useState({ can_view_financials: true, can_view_gl: false, can_contact_customer: true, can_edit_settings: false, can_run_sync: false });
    const [notes, setNotes] = useState("");
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);
    const [success, setSuccess] = useState(null);

    const restricted = RESTRICTED.has(role);
    const roleDef = byVal(role);
    const matches = useMemo(() => {
      const q = search.trim().toLowerCase();
      const chosen = new Set(selected.map((s) => s.id));
      return (companies || []).filter((c) => !chosen.has(c.id) && (!q || (c.name || "").toLowerCase().includes(q) || (c.subdomain || "").toLowerCase().includes(q))).slice(0, 8);
    }, [search, companies, selected]);

    async function send() {
      const e = email.trim();
      if (!e) { setError("Email address is required."); return; }
      if (restricted && selected.length === 0) { setError("Assign at least one company for this role."); return; }
      setLoading(true); setError(null);
      try {
        const res = await callFn("invite-admin", {
          action: "invite", email: e, full_name: fullName.trim(), role,
          company_ids: restricted ? selected.map((s) => s.id) : [], permissions: perms, notes: notes.trim(),
        });
        setSuccess(res.message || `Invitation sent to ${e}.`);
        onDone && onDone();
      } catch (err) { setError(String(err.message || err)); }
      finally { setLoading(false); }
    }

    return (
      <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(8,12,20,0.45)", zIndex: 1000, display: "flex", justifyContent: "flex-end" }}>
        <div onClick={(e) => e.stopPropagation()} style={{ width: 460, maxWidth: "94vw", height: "100%", background: "var(--bg-card-solid,#fff)", boxShadow: "-4px 0 24px rgba(0,0,0,0.18)", overflowY: "auto", padding: "22px 24px" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
            <div style={{ fontSize: 16, fontWeight: 800, color: "var(--text)" }}>🛡️ Invite Team Member</div>
            <button className="pc-adm-modal-close" onClick={onClose}>✕</button>
          </div>

          {success ? (
            <div style={{ background: "rgba(16,185,129,0.10)", border: "1px solid rgba(16,185,129,0.30)", borderRadius: 8, padding: "14px 16px", fontSize: 13.5, color: "#10b981", lineHeight: 1.55 }}>
              ✓ {success}
              <div style={{ marginTop: 16 }}><button className="pc-adm-btn-primary" onClick={onClose}>Done</button></div>
            </div>
          ) : (
            <>
              <Field label="Full Name"><input className="pc-adm-input" placeholder="Jane Doe" value={fullName} onChange={(e) => setFullName(e.target.value)} /></Field>
              <Field label="Email Address *"><input className="pc-adm-input" type="email" placeholder="jane@example.com" value={email} onChange={(e) => setEmail(e.target.value)} /></Field>

              <Field label="Role *">
                <div style={{ display: "flex", flexDirection: "column", gap: 2, border: "1px solid var(--border)", borderRadius: 8, overflow: "hidden" }}>
                  {ROLES.map((r) => (
                    <button key={r.value} onClick={() => setRole(r.value)} style={{
                      display: "flex", alignItems: "center", gap: 8, padding: "9px 12px", border: "none", cursor: "pointer", textAlign: "left", fontSize: 13,
                      background: role === r.value ? "rgba(28,78,216,0.08)" : "transparent",
                      borderLeft: role === r.value ? `3px solid ${r.color}` : "3px solid transparent", fontWeight: role === r.value ? 700 : 500, color: "var(--text)",
                    }}>
                      <span>{r.dot}</span> {r.label}{role === r.value ? <span style={{ marginLeft: "auto", fontSize: 11, color: "var(--text-3)" }}>← selected</span> : null}
                    </button>
                  ))}
                </div>
              </Field>

              <div style={{ background: "var(--bg-elev-1,#f7f8fb)", border: "1px solid var(--border)", borderRadius: 8, padding: "10px 12px", fontSize: 12, color: "var(--text-2)", lineHeight: 1.55, marginBottom: 14 }}>
                <b style={{ color: "var(--text)" }}>{roleDef.label}:</b> {roleDef.desc}
              </div>

              {restricted && (
                <div style={{ border: "1px solid rgba(217,119,6,0.35)", background: "rgba(217,119,6,0.05)", borderRadius: 8, padding: "12px 14px", marginBottom: 14 }}>
                  <div style={{ fontSize: 12, fontWeight: 700, color: "#b45309", marginBottom: 8 }}>⚠️ Company Access (required for {roleDef.label})</div>
                  <input className="pc-adm-input" placeholder="🔍 Search companies…" value={search} onChange={(e) => setSearch(e.target.value)} style={{ marginBottom: 8 }} />
                  {search && matches.length > 0 && (
                    <div style={{ border: "1px solid var(--border)", borderRadius: 6, marginBottom: 8, maxHeight: 180, overflowY: "auto", background: "var(--bg-card-solid,#fff)" }}>
                      {matches.map((c) => (
                        <button key={c.id} onClick={() => { setSelected((s) => [...s, { id: c.id, name: c.name }]); setSearch(""); }}
                          style={{ display: "block", width: "100%", textAlign: "left", padding: "7px 10px", border: "none", background: "transparent", cursor: "pointer", fontSize: 12.5, color: "var(--text)" }}>
                          {c.name} <span style={{ color: "var(--text-3)", fontSize: 11 }}>{c.subdomain}</span>
                        </button>
                      ))}
                    </div>
                  )}
                  {selected.length > 0 && (
                    <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 10 }}>
                      {selected.map((s) => (
                        <span key={s.id} style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "var(--bg-elev-2,#eef2f7)", borderRadius: 999, padding: "3px 10px", fontSize: 12 }}>
                          {s.name}
                          <span style={{ cursor: "pointer", color: "var(--text-3)" }} onClick={() => setSelected((arr) => arr.filter((x) => x.id !== s.id))}>×</span>
                        </span>
                      ))}
                    </div>
                  )}
                  <div style={{ fontSize: 11.5, fontWeight: 700, color: "var(--text-2)", margin: "4px 0 4px" }}>Per-company permissions</div>
                  {PERM_FIELDS.map((p) => (
                    <PermToggle key={p.key} label={p.label} checked={perms[p.key]} onChange={(v) => setPerms((pp) => ({ ...pp, [p.key]: v }))} />
                  ))}
                </div>
              )}

              <Field label="Notes (internal)"><input className="pc-adm-input" placeholder="Optional" value={notes} onChange={(e) => setNotes(e.target.value)} /></Field>

              <div style={{ background: "rgba(220,38,38,0.07)", border: "1px solid rgba(220,38,38,0.25)", borderRadius: 8, padding: "10px 12px", fontSize: 12.5, color: "#b91c1c", lineHeight: 1.5, margin: "6px 0 16px" }}>
                ⚠️ This person will have access to customer financial data.
              </div>
              {error && <div style={{ fontSize: 12.5, color: "var(--danger,#dc2626)", marginBottom: 12 }}>{error}</div>}
              <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
                <button className="pc-adm-btn-ghost" onClick={onClose}>Cancel</button>
                <button className="pc-adm-btn-primary" disabled={loading || !email.trim()} onClick={send}>{loading ? "Sending…" : "Send Invitation →"}</button>
              </div>
            </>
          )}
        </div>
      </div>
    );
  }

  // ── Company Access Manager ─────────────────────────────────────────────────
  function AccessManager({ admin, companies, onClose, onChanged }) {
    const [grants, setGrants] = useState(admin.company_access || []);
    const [search, setSearch] = useState("");
    const [busy, setBusy] = useState(false);
    const assignedIds = new Set(grants.map((g) => g.company_id));
    const unassigned = useMemo(() => {
      const q = search.trim().toLowerCase();
      return (companies || []).filter((c) => !assignedIds.has(c.id) && (!q || (c.name || "").toLowerCase().includes(q))).slice(0, 10);
    }, [companies, grants, search]);

    async function refresh() {
      const d = await callFn("manage-admin-access", { action: "bootstrap" });
      const me = (d.admins || []).find((a) => a.id === admin.id);
      setGrants(me ? me.company_access : []);
      onChanged && onChanged();
    }
    async function addCompany(c) {
      setBusy(true);
      try { await callFn("manage-admin-access", { action: "grant_company_access", admin_user_id: admin.id, company_id: c.id, perms: { can_view_financials: true } }); await refresh(); setSearch(""); }
      catch (e) { alert(e.message || e); } finally { setBusy(false); }
    }
    async function togglePerm(g, key, val) {
      setBusy(true);
      try { await callFn("manage-admin-access", { action: "update_company_permissions", admin_user_id: admin.id, company_id: g.company_id, perms: { ...pickPerms(g), [key]: val } }); await refresh(); }
      catch (e) { alert(e.message || e); } finally { setBusy(false); }
    }
    async function remove(g) {
      setBusy(true);
      try { await callFn("manage-admin-access", { action: "revoke_company_access", admin_user_id: admin.id, company_id: g.company_id }); await refresh(); }
      catch (e) { alert(e.message || e); } finally { setBusy(false); }
    }
    function pickPerms(g) { const o = {}; PERM_FIELDS.forEach((p) => o[p.key] = g[p.key]); return o; }

    return (
      <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(8,12,20,0.45)", zIndex: 1000, display: "flex", justifyContent: "center", alignItems: "flex-start", padding: "40px 20px", overflowY: "auto" }}>
        <div onClick={(e) => e.stopPropagation()} style={{ width: 860, maxWidth: "96vw", background: "var(--bg-card-solid,#fff)", borderRadius: 12, boxShadow: "0 12px 48px rgba(0,0,0,0.22)", padding: "22px 24px" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 4 }}>
            <div style={{ fontSize: 15, fontWeight: 800, color: "var(--text)" }}>Managing access for: {admin.full_name || admin.email} — <RoleBadge role={admin.role} /></div>
            <button className="pc-adm-modal-close" onClick={onClose}>✕</button>
          </div>
          <div style={{ fontSize: 12, color: "var(--text-3)", marginBottom: 18 }}>{admin.email}</div>

          <div style={{ fontSize: 12.5, fontWeight: 700, color: "var(--text-2)", marginBottom: 8 }}>ASSIGNED COMPANIES ({grants.length})</div>
          <div className="pc-adm-table-wrap" style={{ marginBottom: 22 }}>
            <table className="pc-adm-table">
              <thead><tr><th>Company</th>{PERM_FIELDS.map((p) => <th key={p.key} style={{ textAlign: "center" }}>{p.label}</th>)}<th></th></tr></thead>
              <tbody>
                {grants.length === 0 && <tr><td colSpan={PERM_FIELDS.length + 2} style={{ textAlign: "center", padding: 20, color: "var(--text-3)" }}>No companies assigned yet.</td></tr>}
                {grants.map((g) => (
                  <tr key={g.company_id}>
                    <td style={{ paddingLeft: 14, fontWeight: 600, fontSize: 12.5 }}>{g.company_name}</td>
                    {PERM_FIELDS.map((p) => (
                      <td key={p.key} style={{ textAlign: "center" }}>
                        <input type="checkbox" checked={!!g[p.key]} disabled={busy} onChange={(e) => togglePerm(g, p.key, e.target.checked)} />
                      </td>
                    ))}
                    <td style={{ textAlign: "right", paddingRight: 14 }}>
                      <button className="pc-adm-btn-ghost" style={{ fontSize: 11.5, padding: "4px 10px", color: "var(--danger,#dc2626)" }} disabled={busy} onClick={() => remove(g)}>Remove</button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div style={{ fontSize: 12.5, fontWeight: 700, color: "var(--text-2)", marginBottom: 8 }}>ALL COMPANIES (not assigned)</div>
          <input className="pc-adm-input" placeholder="Search companies…" value={search} onChange={(e) => setSearch(e.target.value)} style={{ marginBottom: 8 }} />
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            {unassigned.map((c) => (
              <button key={c.id} disabled={busy} onClick={() => addCompany(c)} style={{ border: "1px solid var(--border)", background: "var(--bg-elev-1,#f7f8fb)", borderRadius: 8, padding: "6px 12px", fontSize: 12.5, cursor: "pointer", color: "var(--text)" }}>+ {c.name}</button>
            ))}
            {search && unassigned.length === 0 && <span style={{ fontSize: 12, color: "var(--text-3)" }}>No matches.</span>}
          </div>
        </div>
      </div>
    );
  }

  // ── Main ───────────────────────────────────────────────────────────────────
  function AdminTeamManagement() {
    const [data, setData] = useState(null);
    const [err, setErr] = useState(null);
    const [inviting, setInviting] = useState(false);
    const [managing, setManaging] = useState(null);
    const [busyId, setBusyId] = useState(null);

    async function load() {
      try { const d = await callFn("manage-admin-access", { action: "bootstrap" }); setData(d); setErr(null); }
      catch (e) { setErr(String(e.message || e)); setData({ admins: [], companies: [], me: {} }); }
    }
    useEffect(() => { load(); }, []);

    const admins = (data && data.admins) || [];
    const companies = (data && data.companies) || [];
    const isSuper = !!(data && data.me && (data.me.is_super || data.me.role === "super_admin"));
    const stats = useMemo(() => ({
      total: admins.length,
      active: admins.filter((a) => a.status === "Active").length,
      pending: admins.filter((a) => a.status === "Pending").length,
      restricted: admins.filter((a) => RESTRICTED.has(a.role)).length,
    }), [admins]);

    async function act(action, a, extra) {
      setBusyId(a.id);
      try { await callFn(action === "remove" ? "invite-admin" : "manage-admin-access", action === "remove" ? { action: "remove", adminUserId: a.id } : { action, admin_user_id: a.id, ...(extra || {}) }); await load(); }
      catch (e) { alert(e.message || e); } finally { setBusyId(null); }
    }
    async function resend(a) {
      setBusyId(a.id);
      try { await callFn("invite-admin", { action: "resend", userId: a.auth_user_id }); alert(`Invite re-sent to ${a.email}.`); }
      catch (e) { alert(e.message || e); } finally { setBusyId(null); }
    }
    function confirmRemove(a) { if (window.confirm(`Permanently remove ${a.email} from the admin team? They lose all access.`)) act("remove", a); }
    function changeRole(a) {
      const opts = ROLES.map((r) => r.value).join(", ");
      const next = window.prompt(`New role for ${a.email}\nOne of: ${opts}`, a.role);
      if (next && next !== a.role) act("update_role", a, { role: next.trim() });
    }

    const Stat = ({ label, value, color }) => (
      <div style={{ background: "var(--bg-card-solid,#fff)", border: "1px solid var(--border)", borderRadius: 10, padding: "12px 16px", minWidth: 150, flex: 1 }}>
        <div style={{ fontSize: 22, fontWeight: 800, color: color || "var(--text)" }}>{value}</div>
        <div style={{ fontSize: 11.5, color: "var(--text-3)", marginTop: 2 }}>{label}</div>
      </div>
    );

    return (
      <div className="pc-adm-section">
        <div className="pc-adm-section-header">
          <h2 className="pc-adm-section-title">👥 Team Management</h2>
          <button onClick={() => setInviting(true)} style={{ background: "#0F2044", color: "white", border: "none", padding: "9px 18px", borderRadius: 7, fontSize: 12.5, fontWeight: 600, cursor: "pointer", display: "flex", alignItems: "center", gap: 6 }}>🛡️ Invite Admin</button>
        </div>

        {err && <div style={{ background: "rgba(220,38,38,0.08)", border: "1px solid rgba(220,38,38,0.25)", borderRadius: 8, padding: "10px 14px", fontSize: 12.5, color: "#b91c1c", marginBottom: 16 }}>Could not load team ({err}). The RBAC tables may still be provisioning.</div>}

        <div style={{ display: "flex", gap: 12, marginBottom: 22, flexWrap: "wrap" }}>
          <Stat label="Total Admins" value={stats.total} />
          <Stat label="Active" value={stats.active} color="#059669" />
          <Stat label="Pending Invite" value={stats.pending} color="#d97706" />
          <Stat label="Restricted Access" value={stats.restricted} color="#1c4ed8" />
        </div>

        <div className="pc-adm-table-wrap">
          <table className="pc-adm-table">
            <thead><tr><th>Name</th><th>Email</th><th>Role</th><th>Companies</th><th>Last Login</th><th>Status</th><th style={{ textAlign: "right" }}>Actions</th></tr></thead>
            <tbody>
              {!data && <tr><td colSpan={7} style={{ textAlign: "center", padding: 28, color: "var(--text-3)" }}>Loading team…</td></tr>}
              {data && admins.length === 0 && <tr><td colSpan={7} style={{ textAlign: "center", padding: 28, color: "var(--text-3)" }}>No admins yet.</td></tr>}
              {admins.map((a) => {
                const restricted = RESTRICTED.has(a.role);
                const coCount = (a.company_access || []).length;
                const coNames = (a.company_access || []).map((g) => g.company_name).join(", ");
                return (
                  <tr key={a.id}>
                    <td style={{ paddingLeft: 14, fontWeight: 600, fontSize: 13 }}>
                      <span className="pc-adm-avatar-sm" style={{ marginRight: 8 }}>{(a.full_name || a.email || "?").slice(0, 2).toUpperCase()}</span>
                      {a.full_name || "—"}{a.is_self && <span style={{ fontSize: 11, color: "var(--text-3)", fontWeight: 400 }}> (you)</span>}
                    </td>
                    <td style={{ fontSize: 12.5 }}>{a.email}</td>
                    <td><RoleBadge role={a.role} /></td>
                    <td style={{ fontSize: 12.5 }}>{restricted ? <span title={coNames || "No companies assigned"}>{coCount} {coCount === 1 ? "company" : "companies"}</span> : <span style={{ color: "var(--text-3)" }}>All</span>}</td>
                    <td style={{ fontSize: 12, color: a.last_login_at ? "var(--text)" : "var(--text-3)" }}>{a.last_login_at ? fmtRelative(a.last_login_at) : "Never"}</td>
                    <td><span className="pc-adm-badge" style={{ background: a.status === "Active" ? "rgba(16,185,129,0.12)" : a.status === "Pending" ? "rgba(251,191,36,0.12)" : "rgba(100,116,139,0.12)", color: a.status === "Active" ? "#10b981" : a.status === "Pending" ? "#d97706" : "#64748b" }}>{a.status}</span></td>
                    <td style={{ textAlign: "right", paddingRight: 14 }}>
                      <div style={{ display: "inline-flex", gap: 5, flexWrap: "wrap", justifyContent: "flex-end" }}>
                        <button className="pc-adm-btn-ghost" style={{ fontSize: 11.5, padding: "4px 9px" }} disabled={busyId === a.id} onClick={() => changeRole(a)}>Edit</button>
                        {restricted && <button className="pc-adm-btn-ghost" style={{ fontSize: 11.5, padding: "4px 9px" }} disabled={busyId === a.id} onClick={() => setManaging(a)}>Manage Access</button>}
                        {a.status === "Pending" && <button className="pc-adm-btn-ghost" style={{ fontSize: 11.5, padding: "4px 9px" }} disabled={busyId === a.id} onClick={() => resend(a)}>Resend</button>}
                        {a.status === "Inactive"
                          ? <button className="pc-adm-btn-ghost" style={{ fontSize: 11.5, padding: "4px 9px" }} disabled={busyId === a.id || a.is_self} onClick={() => act("reactivate_admin", a)}>Reactivate</button>
                          : <button className="pc-adm-btn-ghost" style={{ fontSize: 11.5, padding: "4px 9px" }} disabled={busyId === a.id || a.is_self} onClick={() => act("deactivate_admin", a)}>Deactivate</button>}
                        {isSuper && <button className="pc-adm-btn-ghost" style={{ fontSize: 11.5, padding: "4px 9px", color: a.is_self ? "var(--text-3)" : "var(--danger,#dc2626)" }} disabled={busyId === a.id || a.is_self} onClick={() => confirmRemove(a)}>Remove</button>}
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>

        {inviting && <InvitePanel companies={companies} onClose={() => setInviting(false)} onDone={load} />}
        {managing && <AccessManager admin={managing} companies={companies} onClose={() => setManaging(null)} onChanged={load} />}
      </div>
    );
  }

  // Local helpers (page-admin defines its own; we keep these self-contained).
  function Field({ label, children }) {
    return <div style={{ marginBottom: 14 }}><div style={{ fontSize: 11.5, fontWeight: 600, color: "var(--text-2)", marginBottom: 5 }}>{label}</div>{children}</div>;
  }
  function fmtRelative(iso) {
    if (!iso) return "Never";
    const d = new Date(iso); const diff = (Date.now() - d.getTime()) / 1000;
    if (diff < 3600) return Math.max(1, Math.round(diff / 60)) + "m ago";
    if (diff < 86400) return Math.round(diff / 3600) + "h ago";
    if (diff < 2592000) return Math.round(diff / 86400) + "d ago";
    return d.toLocaleDateString();
  }

  window.AdminTeamManagement = AdminTeamManagement;
})();