// Platform-wide admin console. Only rendered for users whose /me payload has
// is_super_admin — the API enforces the same check, this is just the UI half.
// Every table sits in an overflow-x wrapper and every header row wraps, so the
// screen works at 390px without a horizontal page scroll.

function SAStat({ label, value, sub, tone }) {
  return (
    <div style={{ flex: '1 1 150px', minWidth: 0, background: 'var(--slate-0)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 14, boxShadow: 'var(--shadow-xs)' }}>
      <div style={{ fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>{label}</div>
      <div style={{ fontSize: 'var(--text-2xl)', fontWeight: 'var(--fw-extrabold)', letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums', color: tone || 'var(--text-strong)', marginTop: 4 }}>{value}</div>
      {sub && <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-muted)', marginTop: 2 }}>{sub}</div>}
    </div>
  );
}

function SATh({ children, w }) {
  return (
    <th style={{ textAlign: 'left', padding: '9px 12px', fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.04em', borderBottom: '1px solid var(--border-subtle)', whiteSpace: 'nowrap', width: w }}>{children}</th>
  );
}

function SATd({ children, strong }) {
  return (
    <td style={{ padding: '10px 12px', fontSize: 'var(--text-sm)', color: strong ? 'var(--text-strong)' : 'var(--text-body)', fontWeight: strong ? 'var(--fw-bold)' : 'var(--fw-regular)', borderBottom: '1px solid var(--border-subtle)', whiteSpace: 'nowrap' }}>{children}</td>
  );
}

function SuperAdmin() {
  const [tab, setTab] = React.useState('overview');
  const [overview, setOverview] = React.useState(null);
  const [workspaces, setWorkspaces] = React.useState([]);
  const [users, setUsers] = React.useState([]);
  const [activity, setActivity] = React.useState([]);
  const [errorLogs, setErrorLogs] = React.useState([]);
  const [errSummary, setErrSummary] = React.useState(null);
  const [errFilter, setErrFilter] = React.useState('');      // type filter
  const [errQuery, setErrQuery] = React.useState('');        // search text
  const [errShowResolved, setErrShowResolved] = React.useState(false);
  const [errBusy, setErrBusy] = React.useState(null);        // id being resolved
  const [explaining, setExplaining] = React.useState(null);  // id being explained
  const [explanations, setExplanations] = React.useState({}); // id -> text
  const [loading, setLoading] = React.useState(true);
  const [err, setErr] = React.useState('');
  const [busyUser, setBusyUser] = React.useState(null);
  const [expandedErr, setExpandedErr] = React.useState(null);
  const [members, setMembers] = React.useState([]);
  const [expandedMember, setExpandedMember] = React.useState(null);
  const [busyMember, setBusyMember] = React.useState(null);
  const [memberSearch, setMemberSearch] = React.useState('');
  const [health, setHealth] = React.useState(null);
  const [healthLoading, setHealthLoading] = React.useState(false);
  const [analytics, setAnalytics] = React.useState(null);
  const [security, setSecurity] = React.useState(null);
  const [bcast, setBcast] = React.useState({ title: '', body: '' });
  const [bcastMsg, setBcastMsg] = React.useState('');

  React.useEffect(() => {
    if (tab === 'analytics' && !analytics && window.API?.superAdminAnalytics) window.API.superAdminAnalytics().then(r => setAnalytics(r?.data||null)).catch(()=>{});
    if (tab === 'security' && !security && window.API?.superAdminSecurity) window.API.superAdminSecurity().then(r => setSecurity(r?.data||null)).catch(()=>{});
  }, [tab]);

  async function sendBroadcast() {
    if (!bcast.title.trim() || !window.API?.superAdminBroadcast) return;
    setBcastMsg('Sending…');
    try { const r = await window.API.superAdminBroadcast(bcast); setBcastMsg('Sent to ' + (r?.data?.sent ?? 0) + ' members.'); setBcast({ title: '', body: '' }); }
    catch { setBcastMsg('Failed to send.'); }
  }
  async function impersonate(u) {
    if (!window.confirm('Log in as ' + u.name + '? You will be signed in as this user.')) return;
    try {
      const r = await window.API.superAdminImpersonate(u.id);
      if (r?.data?.token) { localStorage.setItem('tf_auth_token', r.data.token); localStorage.setItem('tf_auth_user', JSON.stringify(r.data.user)); window.location.reload(); }
    } catch { alert('Could not impersonate.'); }
  }
  async function toggleUserStatus(u, status) {
    try { await window.API.superAdminSetUserStatus(u.id, status); alert('User ' + (status==='inactive'?'suspended':'reactivated') + '.'); } catch { alert('Failed.'); }
  }

  async function runHealthCheck() {
    if (!window.API || !window.API.superAdminHealth) return;
    setHealthLoading(true);
    try {
      const r = await window.API.superAdminHealth();
      setHealth(r?.data || r || null);
    } catch (e) {
      setHealth({ ok: false, checks: [{ name: 'request', status: 'fail', detail: e?.message || 'Could not run health check' }] });
    } finally {
      setHealthLoading(false);
    }
  }

  // Reload the error list applying the current filter/search/resolved toggle,
  // plus the summary counts, without reloading the whole platform.
  const loadErrors = React.useCallback(async () => {
    if (!window.API || !window.API.getErrorLogs) return;
    try {
      const q = {};
      if (errFilter) q.type = errFilter;
      if (errQuery) q.q = errQuery;
      if (errShowResolved) q.resolved = 1;
      const [el, s] = await Promise.all([
        window.API.getErrorLogs(Object.keys(q).length ? q : undefined),
        window.API.getErrorLogSummary ? window.API.getErrorLogSummary() : Promise.resolve({ data: null }),
      ]);
      setErrorLogs(el?.data || []);
      setErrSummary(s?.data || null);
    } catch {}
  }, [errFilter, errQuery, errShowResolved]);

  // Re-fetch errors when a filter changes — but only while the Errors tab is
  // open, and debounced, so typing in search doesn't fire a request per
  // keystroke (that burst was exhausting the DB connection limit). The initial
  // load is handled by the main platform fetch below, so we skip first mount.
  const errFirst = React.useRef(true);
  React.useEffect(() => {
    if (tab !== 'errors') return;
    if (errFirst.current) { errFirst.current = false; return; }
    const t = setTimeout(() => { loadErrors(); }, 400);
    return () => clearTimeout(t);
  }, [loadErrors, tab]);

  async function resolveError(id, status) {
    if (!window.API || !window.API.setErrorStatus) return;
    setErrBusy(id);
    try { await window.API.setErrorStatus(id, status); await loadErrors(); }
    catch {} finally { setErrBusy(null); }
  }

  async function explainError(id) {
    if (!window.API || !window.API.explainError) return;
    setExplaining(id);
    try {
      const r = await window.API.explainError(id);
      setExplanations(prev => ({ ...prev, [id]: (r && (r.explanation || (r.data && r.data.explanation))) || 'No explanation returned.' }));
    } catch { setExplanations(prev => ({ ...prev, [id]: 'Could not get an explanation.' })); }
    finally { setExplaining(null); }
  }

  React.useEffect(() => {
    let alive = true;
    (async () => {
      setLoading(true);
      setErr('');
      try {
        // Load SEQUENTIALLY, not all-at-once. The shared MySQL has a low
        // connection limit; firing 7 heavy super-admin queries in parallel
        // exhausted it and every one returned a 2002 "Operation not permitted"
        // 500. One-at-a-time is a hair slower but reliable. Each is guarded so
        // one failure doesn't abort the rest.
        const safe = async (fn) => { try { return await fn(); } catch { return null; } };
        const o   = await safe(() => window.API.superAdminOverview());
        if (!alive) return; setOverview(o?.data || null);
        const w   = await safe(() => window.API.superAdminWorkspaces());
        if (!alive) return; setWorkspaces(w?.data || []);
        const u   = await safe(() => window.API.superAdminUsers());
        if (!alive) return; setUsers(u?.data || []);
        const a   = await safe(() => window.API.superAdminActivity());
        if (!alive) return; setActivity(a?.data || []);
        const el  = await safe(() => window.API.getErrorLogs ? window.API.getErrorLogs() : { data: [] });
        if (!alive) return; setErrorLogs(el?.data || []);
        const mem = await safe(() => window.API.superAdminMembers ? window.API.superAdminMembers() : { data: [] });
        if (!alive) return; setMembers(mem?.data || []);
        const s   = await safe(() => window.API.getErrorLogSummary ? window.API.getErrorLogSummary() : { data: null });
        if (!alive) return; setErrSummary(s?.data || null);
      } catch (e) {
        if (alive) setErr(e?.message || 'Could not load platform data.');
      } finally {
        if (alive) setLoading(false);
      }
    })();
    return () => { alive = false; };
  }, []);

  async function toggleSuperAdmin(u) {
    const next = !u.is_super_admin;
    if (next && !window.confirm(`Make ${u.email} a super admin? They will see every workspace on the platform.`)) return;
    if (!next && !window.confirm(`Remove super admin from ${u.email}?`)) return;
    setBusyUser(u.id);
    try {
      await window.API.setSuperAdmin(u.id, next);
      setUsers(prev => prev.map(x => x.id === u.id ? { ...x, is_super_admin: next ? 1 : 0 } : x));
    } catch (e) {
      alert(e?.message || 'Could not change super admin.');
    } finally {
      setBusyUser(null);
    }
  }

  const money = n => '₨' + Number(n || 0).toLocaleString('en-PK', { maximumFractionDigits: 0 });
  const when = d => d ? new Date(d.replace(' ', 'T')).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }) : '—';
  const whenTime = d => d ? new Date(d.replace(' ', 'T')).toLocaleString('en-GB', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' }) : '—';

  // Same controllable tab set as the per-workspace editor in Settings.jsx.
  const SA_TABS = [
    ['dashboard', 'Dashboard'], ['tasks', 'Tasks'], ['projects', 'Projects'],
    ['calendar', 'Calendar'], ['crm', 'Client CRM'], ['pipeline', 'Sales pipeline'],
    ['portal', 'Client portal'], ['content', 'Content'], ['ads', 'Meta Ads'],
    ['email', 'Email'], ['finance', 'Finance'], ['reports', 'Reports'],
    ['docs', 'Docs & Files'], ['files', 'Files'], ['team', 'Team'], ['chat', 'Team Chat'],
    ['automations', 'Automations'], ['activity', 'Activity Log'],
    ['integrations', 'Integrations'], ['workspace', 'Workspace'],
  ];
  const SA_MEMBER_DEFAULT = ['dashboard', 'tasks', 'projects', 'calendar', 'chat'];

  // Which tabs a member currently sees: explicit hidden_tabs wins, else role default.
  function visibleTabsFor(m) {
    const hidden = Array.isArray(m.hidden_tabs) ? m.hidden_tabs : null;
    if (hidden) return SA_TABS.map(t => t[0]).filter(id => hidden.indexOf(id) === -1);
    if ((m.role || 'member') === 'member') return SA_MEMBER_DEFAULT.slice();
    return SA_TABS.map(t => t[0]);
  }

  async function toggleMemberTab(m, tabId) {
    if (!window.API || !window.API.setMemberTabs) return;
    const current = members.find(x => x.id === m.id) || m;
    const visible = new Set(visibleTabsFor(current));
    if (visible.has(tabId)) visible.delete(tabId); else visible.add(tabId);
    const hidden = SA_TABS.map(t => t[0]).filter(id => !visible.has(id));
    const prev = members;
    setMembers(members.map(x => x.id === m.id ? { ...x, hidden_tabs: hidden } : x));
    setBusyMember(m.id);
    try {
      await window.API.setMemberTabs(m.id, hidden);
    } catch (e) {
      setMembers(prev);
      alert(e?.message || 'Could not update tab access.');
    } finally {
      setBusyMember(null);
    }
  }

  // Colour-code the status pill so 500s jump out.
  const statusTone = s => s >= 500 ? 'var(--red-600)' : s === 403 || s === 401 ? 'var(--amber-600)' : 'var(--text-muted)';
  const typeLabel = t => ({ server_500: 'Server error', permission_denied: 'Permission', api_failed: 'API failed', client_error: 'Client', user_reported: '🙋 User reported' }[t] || t);

  const TABS = [
    { id: 'overview',   label: 'Overview',   icon: 'layout-dashboard' },
    { id: 'analytics',  label: 'Analytics',  icon: 'chart-line' },
    { id: 'workspaces', label: 'Workspaces', icon: 'briefcase' },
    { id: 'users',      label: 'Users',      icon: 'users' },
    { id: 'broadcast',  label: 'Broadcast',  icon: 'megaphone' },
    { id: 'security',   label: 'Security',   icon: 'shield-alert' },
    { id: 'activity',   label: 'Activity',   icon: 'activity' },
    { id: 'tabaccess',  label: 'Tab Access', icon: 'sliders-horizontal' },
    { id: 'health',     label: 'Health',     icon: 'heart-pulse' },
    { id: 'errors',     label: 'Errors',     icon: 'triangle-alert' },
  ];

  // Auto-run the health check the first time the Health tab is opened.
  React.useEffect(() => {
    if (tab === 'health' && !health && !healthLoading) runHealthCheck();
  }, [tab]);

  return (
    <div style={{ padding: '22px 20px 40px', maxWidth: 1200, margin: '0 auto' }}>
      {/* Header — wraps on narrow screens */}
      <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 10, marginBottom: 18 }}>
        <div style={{ width: 38, height: 38, borderRadius: 10, background: 'var(--blue-600)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <Icon name="shield" size={20} style={{ color: 'white' }} />
        </div>
        <div style={{ flex: '1 1 200px', minWidth: 0 }}>
          <h1 style={{ fontSize: 'var(--text-xl)', fontWeight: 'var(--fw-extrabold)', letterSpacing: '-0.02em', margin: 0 }}>Super Admin</h1>
          <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)', margin: '2px 0 0' }}>Platform-wide view across every workspace</p>
        </div>
      </div>

      {/* Tabs — scroll sideways on mobile instead of pushing the page */}
      <div style={{ display: 'flex', gap: 2, overflowX: 'auto', WebkitOverflowScrolling: 'touch', borderBottom: '1px solid var(--border-subtle)', marginBottom: 20 }}>
        {TABS.map(t => (
          <button key={t.id} onClick={() => setTab(t.id)}
            style={{ display: 'inline-flex', alignItems: 'center', gap: 7, flexShrink: 0, whiteSpace: 'nowrap', padding: '9px 16px', border: 'none', borderBottom: tab === t.id ? '2px solid var(--blue-600)' : '2px solid transparent', background: 'none', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: tab === t.id ? 'var(--fw-bold)' : 'var(--fw-medium)', color: tab === t.id ? 'var(--blue-700)' : 'var(--text-muted)', cursor: 'pointer', marginBottom: -1 }}>
            <Icon name={t.icon} size={15} /> {t.label}
          </button>
        ))}
      </div>

      {loading && <p style={{ color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>Loading platform data…</p>}
      {err && !loading && (
        <div style={{ padding: 14, border: '1px solid var(--red-200)', background: 'var(--red-50)', borderRadius: 'var(--radius-lg)', color: 'var(--red-700)', fontSize: 'var(--text-sm)' }}>{err}</div>
      )}

      {/* ---------- OVERVIEW ---------- */}
      {!loading && !err && tab === 'overview' && overview && (
        <>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginBottom: 14 }}>
            <SAStat label="Workspaces" value={overview.workspaces} sub={`+${overview.new_workspaces_30d} in 30d`} />
            <SAStat label="Users" value={overview.users} sub={`+${overview.new_users_30d} in 30d`} />
            <SAStat label="Clients" value={overview.clients} />
            <SAStat label="Projects" value={overview.projects} />
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginBottom: 14 }}>
            <SAStat label="Revenue (paid)" value={money(overview.revenue_paid)} tone="var(--green-600)" />
            <SAStat label="Outstanding" value={money(overview.outstanding)} tone="var(--amber-600)" />
            <SAStat label="Invoices" value={`${overview.invoices_paid}/${overview.invoices}`} sub="paid / total" />
            <SAStat label="Open tasks" value={`${overview.open_tasks}/${overview.tasks}`} sub="open / total" />
          </div>
        </>
      )}

      {/* ---------- ANALYTICS ---------- */}
      {!loading && !err && tab === 'analytics' && (
        analytics ? (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
              <SAStat label="Daily active" value={analytics.dau} sub="users today" />
              <SAStat label="Monthly active" value={analytics.mau} sub="last 30 days" />
              <SAStat label="Total users" value={analytics.total_users} sub={`+${analytics.new_users_7d} in 7d`} tone="var(--blue-600)" />
              <SAStat label="Active workspaces" value={analytics.active_workspaces_7d + '/' + analytics.total_workspaces} sub="active 7d / total" />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
              <SAStat label="Storage used" value={(analytics.storage_bytes/1048576).toFixed(1) + ' MB'} sub={analytics.file_count + ' files'} tone="var(--violet-600)" />
              <SAStat label="Projects" value={analytics.total_projects} />
              <SAStat label="Tasks" value={analytics.total_tasks} />
              <SAStat label="New (30d)" value={analytics.new_users_30d} sub="signups" tone="var(--green-600)" />
            </div>
            <div style={{ border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 16 }}>
              <div style={{ fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-subtle)', marginBottom: 12 }}>Signups — last 7 days</div>
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 90 }}>
                {analytics.signups_7d.map((d,i) => { const max = Math.max(1, ...analytics.signups_7d.map(x=>x.count)); return (
                  <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
                    <div style={{ width: '100%', maxWidth: 40, height: Math.max(3, (d.count/max)*70), background: 'var(--blue-500)', borderRadius: 4 }} title={d.count + ' signups'} />
                    <span style={{ fontSize: 9, color: 'var(--text-subtle)' }}>{d.date.slice(5)}</span>
                  </div>
                ); })}
              </div>
            </div>
          </div>
        ) : <p style={{ color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>Loading analytics…</p>
      )}

      {/* ---------- BROADCAST ---------- */}
      {!loading && !err && tab === 'broadcast' && (
        <div style={{ maxWidth: 560 }}>
          <div style={{ border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 18 }}>
            <div style={{ fontSize: 'var(--text-md)', fontWeight: 'var(--fw-bold)', color: 'var(--text-strong)', marginBottom: 4 }}>Broadcast to all workspaces</div>
            <p style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', margin: '0 0 14px' }}>Sends an in-app notification to every active member across every workspace.</p>
            <input value={bcast.title} onChange={e => setBcast(b => ({ ...b, title: e.target.value }))} placeholder="Title (e.g. Scheduled maintenance tonight)" style={{ width: '100%', height: 38, padding: '0 12px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', fontSize: 'var(--text-sm)', fontFamily: 'var(--font-sans)', outline: 'none', boxSizing: 'border-box', marginBottom: 10 }} />
            <textarea value={bcast.body} onChange={e => setBcast(b => ({ ...b, body: e.target.value }))} placeholder="Message…" style={{ width: '100%', minHeight: 90, padding: '10px 12px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', fontSize: 'var(--text-sm)', fontFamily: 'var(--font-sans)', outline: 'none', boxSizing: 'border-box', resize: 'vertical', marginBottom: 12 }} />
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <button onClick={sendBroadcast} disabled={!bcast.title.trim()} style={{ height: 38, padding: '0 18px', background: bcast.title.trim()?'var(--blue-600)':'var(--slate-300)', color: '#fff', border: 'none', borderRadius: 'var(--radius-md)', cursor: bcast.title.trim()?'pointer':'default', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', fontFamily: 'var(--font-sans)' }}>Send broadcast</button>
              {bcastMsg && <span style={{ fontSize: 'var(--text-sm)', color: 'var(--green-600)', fontWeight: 'var(--fw-semibold)' }}>{bcastMsg}</span>}
            </div>
          </div>
        </div>
      )}

      {/* ---------- SECURITY ---------- */}
      {!loading && !err && tab === 'security' && (
        security ? (
          <div>
            <div style={{ fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-subtle)', marginBottom: 10 }}>Recent failed logins</div>
            {(!security.failed_logins || security.failed_logins.length === 0) ? (
              <div style={{ padding: 20, textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)' }}>No failed logins recorded. ✓</div>
            ) : (
              <div style={{ overflowX: 'auto' }} data-scroll-x>
                <table style={{ width: '100%', minWidth: 560, borderCollapse: 'collapse' }}>
                  <thead><tr style={{ borderBottom: '1px solid var(--border-subtle)' }}>{['Email','Browser','OS','Attempts','Last'].map((h,i)=><th key={i} style={{ textAlign: i===3?'right':'left', padding: '10px 12px', fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', textTransform: 'uppercase', color: 'var(--text-subtle)' }}>{h}</th>)}</tr></thead>
                  <tbody>
                    {security.failed_logins.map((f,i) => (
                      <tr key={i} style={{ borderBottom: '1px solid var(--border-subtle)' }}>
                        <td style={{ padding: '9px 12px', fontSize: 'var(--text-sm)', color: 'var(--text-strong)' }}>{f.user_email||'—'}</td>
                        <td style={{ padding: '9px 12px', fontSize: 'var(--text-sm)', color: 'var(--text-muted)' }}>{f.browser||'—'}</td>
                        <td style={{ padding: '9px 12px', fontSize: 'var(--text-sm)', color: 'var(--text-muted)' }}>{f.os||'—'}</td>
                        <td style={{ padding: '9px 12px', fontSize: 'var(--text-sm)', textAlign:'right', color: 'var(--amber-600)', fontWeight:'var(--fw-bold)' }}>{f.occurrences}</td>
                        <td style={{ padding: '9px 12px', fontSize: 'var(--text-xs)', color: 'var(--text-subtle)' }}>{f.last_seen ? new Date(String(f.last_seen).replace(' ','T')+'Z').toLocaleString('en-GB') : ''}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        ) : <p style={{ color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>Loading security…</p>
      )}

      {/* ---------- WORKSPACES ---------- */}
      {!loading && !err && tab === 'workspaces' && (
        <div style={{ background: 'var(--slate-0)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
          <div style={{ overflowX: 'auto' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
              <thead><tr>
                <SATh>Workspace</SATh><SATh>Members</SATh><SATh>Clients</SATh>
                <SATh>Projects</SATh><SATh>Invoices</SATh><SATh>Revenue</SATh><SATh>Created</SATh>
              </tr></thead>
              <tbody>
                {workspaces.map(w => (
                  <tr key={w.id}>
                    <SATd strong>{w.name}</SATd>
                    <SATd>{w.members}</SATd>
                    <SATd>{w.clients}</SATd>
                    <SATd>{w.projects}</SATd>
                    <SATd>{w.invoices}</SATd>
                    <SATd>{money(w.revenue)}</SATd>
                    <SATd>{when(w.created_at)}</SATd>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          {!workspaces.length && <p style={{ padding: 16, color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>No workspaces.</p>}
        </div>
      )}

      {/* ---------- USERS ---------- */}
      {!loading && !err && tab === 'users' && (
        <div style={{ background: 'var(--slate-0)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
          <div style={{ overflowX: 'auto' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
              <thead><tr>
                <SATh>Name</SATh><SATh>Email</SATh><SATh>Workspaces</SATh>
                <SATh>Joined</SATh><SATh w="150">Super admin</SATh><SATh w="180">Actions</SATh>
              </tr></thead>
              <tbody>
                {users.map(u => (
                  <tr key={u.id}>
                    <SATd strong>{u.name || '—'}</SATd>
                    <SATd>{u.email}</SATd>
                    <SATd>
                      {(u.memberships || []).length
                        ? (u.memberships || []).map(m => `${m.workspace} (${m.role})`).join(', ')
                        : '—'}
                    </SATd>
                    <SATd>{when(u.created_at)}</SATd>
                    <SATd>
                      <button onClick={() => toggleSuperAdmin(u)} disabled={busyUser === u.id}
                        style={{ padding: '5px 12px', borderRadius: 7, cursor: busyUser === u.id ? 'wait' : 'pointer', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', whiteSpace: 'nowrap',
                          border: u.is_super_admin ? 'none' : '1px solid var(--slate-200)',
                          background: u.is_super_admin ? 'var(--blue-600)' : 'var(--slate-50)',
                          color: u.is_super_admin ? 'white' : 'var(--text-body)' }}>
                        {u.is_super_admin ? 'Super admin' : 'Make admin'}
                      </button>
                    </SATd>
                    <SATd>
                      <div style={{ display: 'inline-flex', gap: 5 }}>
                        <button onClick={() => impersonate(u)} title="Log in as this user" style={{ padding: '5px 9px', borderRadius: 7, border: '1px solid var(--slate-200)', background: 'var(--slate-50)', cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', color: 'var(--text-body)' }}>Impersonate</button>
                        <button onClick={() => toggleUserStatus(u, 'inactive')} title="Suspend across all workspaces" style={{ padding: '5px 9px', borderRadius: 7, border: '1px solid var(--red-200)', background: 'transparent', cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', color: 'var(--red-600)' }}>Suspend</button>
                      </div>
                    </SATd>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          {!users.length && <p style={{ padding: 16, color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>No users.</p>}
        </div>
      )}

      {/* ---------- ACTIVITY ---------- */}
      {!loading && !err && tab === 'activity' && (
        <div style={{ background: 'var(--slate-0)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
          <div style={{ overflowX: 'auto' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
              <thead><tr><SATh>Workspace</SATh><SATh>Action</SATh><SATh>Entity</SATh><SATh>When</SATh></tr></thead>
              <tbody>
                {activity.map(a => (
                  <tr key={a.id}>
                    <SATd strong>{a.workspace || '—'}</SATd>
                    <SATd>{a.action}</SATd>
                    <SATd>{a.entity_type || '—'}</SATd>
                    <SATd>{when(a.created_at)}</SATd>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          {!activity.length && <p style={{ padding: 16, color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>No activity yet.</p>}
        </div>
      )}

      {/* ---------- TAB ACCESS ---------- */}
      {!loading && !err && tab === 'tabaccess' && (
        <div>
          <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)', margin: '0 0 12px' }}>
            Control which sidebar tabs each member can see, across every workspace. Unticked tabs are hidden and blocked for that member.
          </p>
          <input
            value={memberSearch}
            onChange={e => setMemberSearch(e.target.value)}
            placeholder="Search by name, email or workspace…"
            style={{ width: '100%', maxWidth: 380, height: 36, padding: '0 12px', marginBottom: 16, border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', background: 'var(--slate-0)', color: 'var(--text-body)' }}
          />
          {(() => {
            const q = memberSearch.trim().toLowerCase();
            const filtered = q
              ? members.filter(m => `${m.name} ${m.email} ${m.workspace}`.toLowerCase().includes(q))
              : members;
            if (!filtered.length) {
              return <p style={{ padding: 16, color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>No members found.</p>;
            }
            return (
              <div style={{ background: 'var(--slate-0)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
                {filtered.map((m, i) => {
                  const visibleSet = new Set(visibleTabsFor(m));
                  const hiddenCount = SA_TABS.length - visibleSet.size;
                  const open = expandedMember === m.id;
                  return (
                    <div key={m.id} style={{ borderBottom: i < filtered.length - 1 ? '1px solid var(--border-subtle)' : 'none' }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '11px 14px', cursor: 'pointer' }}
                        onClick={() => setExpandedMember(open ? null : m.id)}>
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div style={{ fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                            {m.name} <span style={{ color: 'var(--text-subtle)', fontWeight: 'var(--fw-medium)' }}>· {m.role || 'member'}</span>
                          </div>
                          <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.email} — {m.workspace}</div>
                        </div>
                        <span style={{ flexShrink: 0, fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-semibold)', padding: '3px 9px', borderRadius: 'var(--radius-full)', background: hiddenCount > 0 ? 'var(--amber-50)' : 'var(--slate-100)', color: hiddenCount > 0 ? 'var(--amber-700)' : 'var(--text-muted)' }}>
                          {hiddenCount > 0 ? `${hiddenCount} hidden` : 'All tabs'}
                        </span>
                        <Icon name={open ? 'chevron-up' : 'chevron-down'} size={16} style={{ color: 'var(--text-subtle)', flexShrink: 0 }} />
                      </div>
                      {open && (
                        <div style={{ padding: '4px 14px 16px', background: 'var(--slate-25, var(--slate-50))' }}>
                          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))', gap: '6px 16px' }}>
                            {SA_TABS.map(([id, label]) => (
                              <label key={id} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 'var(--text-sm)', color: 'var(--text-body)', cursor: busyMember === m.id ? 'wait' : 'pointer', userSelect: 'none' }}>
                                <input type="checkbox" checked={visibleSet.has(id)} disabled={busyMember === m.id}
                                  onChange={() => toggleMemberTab(m, id)}
                                  style={{ width: 16, height: 16, accentColor: 'var(--blue-600)', cursor: 'inherit' }} />
                                {label}
                              </label>
                            ))}
                          </div>
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            );
          })()}
        </div>
      )}

      {/* ---------- HEALTH ---------- */}
      {!loading && !err && tab === 'health' && (
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
            <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)', margin: 0, flex: 1 }}>
              Runs live checks over the parts that fail quietly — database, tab-permission column, notifications, audit log, mailbox. Any failure is also saved to the Errors tab.
            </p>
            <button onClick={runHealthCheck} disabled={healthLoading}
              style={{ display: 'inline-flex', alignItems: 'center', gap: 6, flexShrink: 0, height: 34, padding: '0 14px', background: 'var(--blue-600)', color: '#fff', border: 'none', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', cursor: healthLoading ? 'wait' : 'pointer', opacity: healthLoading ? 0.7 : 1 }}>
              <Icon name="refresh-cw" size={15} /> {healthLoading ? 'Running…' : 'Run again'}
            </button>
          </div>
          {healthLoading && !health && <p style={{ color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>Running checks…</p>}
          {health && (
            <>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '8px 14px', borderRadius: 'var(--radius-lg)', marginBottom: 14, background: health.ok ? 'var(--green-50)' : 'var(--red-50)', color: health.ok ? 'var(--green-700)' : 'var(--red-700)', fontWeight: 'var(--fw-bold)', fontSize: 'var(--text-sm)' }}>
                <Icon name={health.ok ? 'circle-check-big' : 'triangle-alert'} size={16} />
                {health.ok ? 'All systems healthy' : 'Some checks failed — see below'}
              </div>
              <div style={{ background: 'var(--slate-0)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
                {(health.checks || []).map((c, i) => {
                  const tone = c.status === 'ok' ? 'var(--green-600)' : c.status === 'warn' ? 'var(--amber-600)' : 'var(--red-600)';
                  const icon = c.status === 'ok' ? 'circle-check' : c.status === 'warn' ? 'circle-alert' : 'circle-x';
                  return (
                    <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '11px 14px', borderBottom: i < health.checks.length - 1 ? '1px solid var(--border-subtle)' : 'none' }}>
                      <Icon name={icon} size={16} style={{ color: tone, flexShrink: 0, marginTop: 1 }} />
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>{c.name}</div>
                        {c.detail && <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', marginTop: 1, wordBreak: 'break-word' }}>{c.detail}</div>}
                      </div>
                      <span style={{ flexShrink: 0, fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', textTransform: 'uppercase', letterSpacing: '0.04em', color: tone }}>{c.status}</span>
                    </div>
                  );
                })}
              </div>
            </>
          )}
        </div>
      )}

      {/* ---------- ERRORS ---------- */}
      {!loading && !err && tab === 'errors' && (
        <div>
        {/* Stat cards */}
        {errSummary && (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10, marginBottom: 14 }}>
            {[
              { label: 'Open', val: errSummary.open, tone: 'var(--blue-600)' },
              { label: 'Today', val: errSummary.today, tone: 'var(--text-strong)' },
              { label: 'Server 500s', val: errSummary.server_500, tone: 'var(--red-600)' },
              { label: 'User reported', val: errSummary.user_reported, tone: 'var(--orange-500)' },
              { label: 'Total (all)', val: errSummary.total, tone: 'var(--text-muted)' },
            ].map(c => (
              <div key={c.label} style={{ background: 'var(--slate-0)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', padding: '12px 14px' }}>
                <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-muted)', fontWeight: 'var(--fw-semibold)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{c.label}</div>
                <div style={{ fontSize: 'var(--text-2xl)', fontWeight: 'var(--fw-extrabold)', color: c.tone }}>{c.val ?? 0}</div>
              </div>
            ))}
          </div>
        )}
        {/* Filter bar */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 12, alignItems: 'center' }}>
          <input value={errQuery} onChange={e => setErrQuery(e.target.value)} placeholder="Search message / endpoint / user…"
            style={{ flex: 1, minWidth: 180, height: 34, padding: '0 12px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', outline: 'none' }} />
          <select value={errFilter} onChange={e => setErrFilter(e.target.value)}
            style={{ height: 34, padding: '0 10px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', background: 'var(--slate-0)', cursor: 'pointer' }}>
            <option value="">All types</option>
            <option value="server_500">Server error</option>
            <option value="api_failed">API failed</option>
            <option value="client_error">Client</option>
            <option value="permission_denied">Permission</option>
            <option value="user_reported">User reported</option>
          </select>
          <label style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 'var(--text-sm)', color: 'var(--text-body)', cursor: 'pointer' }}>
            <input type="checkbox" checked={errShowResolved} onChange={e => setErrShowResolved(e.target.checked)} /> Show resolved
          </label>
        </div>
        <div style={{ background: 'var(--slate-0)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
          <div style={{ overflowX: 'auto' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
              <thead><tr>
                <SATh w="60">Count</SATh><SATh>Last seen</SATh><SATh>Type</SATh><SATh w="70">Status</SATh>
                <SATh>Endpoint</SATh><SATh>User</SATh><SATh>Message</SATh>
              </tr></thead>
              <tbody>
                {errorLogs.map(e => (
                  <React.Fragment key={e.id}>
                    <tr onClick={() => setExpandedErr(expandedErr === e.id ? null : e.id)} style={{ cursor: 'pointer' }}>
                      <SATd>
                        <span style={{ display: 'inline-block', minWidth: 22, textAlign: 'center', padding: '1px 7px', borderRadius: 10,
                          fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)',
                          background: (e.occurrences || 1) >= 10 ? 'var(--red-100)' : 'var(--slate-100)',
                          color: (e.occurrences || 1) >= 10 ? 'var(--red-700)' : 'var(--text-muted)' }}>
                          {e.occurrences || 1}×
                        </span>
                      </SATd>
                      <SATd>{whenTime(e.last_seen || e.created_at)}</SATd>
                      <SATd>{typeLabel(e.type)}</SATd>
                      <SATd><span style={{ fontWeight: 'var(--fw-bold)', color: statusTone(e.status_code) }}>{e.status_code || '—'}</span></SATd>
                      <SATd>{e.method ? e.method + ' ' : ''}{e.endpoint || '—'}</SATd>
                      <SATd>{e.user_email || '—'}{e.user_role ? ` (${e.user_role})` : ''}</SATd>
                      <SATd>{e.message || '—'}</SATd>
                    </tr>
                    {expandedErr === e.id && (
                      <tr>
                        <td colSpan={7} style={{ padding: '12px 16px', background: 'var(--slate-50)', borderBottom: '1px solid var(--border-subtle)' }}>
                          {/* Context row: where + who + on what */}
                          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px 18px', fontSize: 'var(--text-2xs)', color: 'var(--text-body)', marginBottom: 10 }}>
                            {e.screen && <span><strong>Screen:</strong> {e.screen}{e.previous_screen ? ` (from ${e.previous_screen})` : ''}</span>}
                            {(e.browser || e.os) && <span><strong>Client:</strong> {[e.browser, e.os, e.device].filter(Boolean).join(' · ')}</span>}
                            <span><strong>First seen:</strong> {whenTime(e.first_seen || e.created_at)}</span>
                            {e.workspace_id && <span><strong>Workspace:</strong> {String(e.workspace_id).slice(0, 8)}</span>}
                          </div>
                          {e.request_data && (
                            <div style={{ marginBottom: 10 }}>
                              <div style={{ fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', color: 'var(--text-muted)', marginBottom: 3 }}>REQUEST DATA (sensitive fields redacted)</div>
                              <pre style={{ margin: 0, fontSize: 'var(--text-2xs)', color: 'var(--text-body)', whiteSpace: 'pre-wrap', wordBreak: 'break-word', fontFamily: 'monospace', background: 'var(--slate-0)', padding: 8, borderRadius: 6, border: '1px solid var(--border-subtle)' }}>{(() => { try { return JSON.stringify(JSON.parse(e.request_data), null, 2); } catch { return e.request_data; } })()}</pre>
                            </div>
                          )}
                          {e.detail && (
                            <div>
                              <div style={{ fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', color: 'var(--text-muted)', marginBottom: 3 }}>STACK TRACE</div>
                              <pre style={{ margin: 0, fontSize: 'var(--text-2xs)', color: 'var(--text-body)', whiteSpace: 'pre-wrap', wordBreak: 'break-word', fontFamily: 'monospace', maxHeight: 220, overflowY: 'auto', background: 'var(--slate-0)', padding: 8, borderRadius: 6, border: '1px solid var(--border-subtle)' }}>{e.detail}</pre>
                            </div>
                          )}
                          {/* AI explanation */}
                          {explanations[e.id] && (
                            <div style={{ marginTop: 10 }}>
                              <div style={{ fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', color: 'var(--blue-600)', marginBottom: 3 }}>🤖 AI EXPLANATION</div>
                              <pre style={{ margin: 0, fontSize: 'var(--text-xs)', color: 'var(--text-body)', whiteSpace: 'pre-wrap', wordBreak: 'break-word', fontFamily: 'var(--font-sans)', background: 'var(--blue-50)', padding: 10, borderRadius: 6, border: '1px solid var(--blue-100)' }}>{explanations[e.id]}</pre>
                            </div>
                          )}
                          {/* Action buttons */}
                          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 12 }} onClick={ev => ev.stopPropagation()}>
                            <button onClick={() => explainError(e.id)} disabled={explaining === e.id}
                              style={{ height: 30, padding: '0 12px', background: 'var(--blue-600)', color: '#fff', border: 'none', borderRadius: 'var(--radius-sm)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-semibold)', cursor: 'pointer', opacity: explaining === e.id ? 0.6 : 1 }}>
                              {explaining === e.id ? 'Explaining…' : '🤖 Explain with AI'}
                            </button>
                            {e.resolved_status !== 'resolved' && (
                              <button onClick={() => resolveError(e.id, 'resolved')} disabled={errBusy === e.id}
                                style={{ height: 30, padding: '0 12px', background: 'transparent', color: 'var(--green-600)', border: '1px solid var(--green-300)', borderRadius: 'var(--radius-sm)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-semibold)', cursor: 'pointer' }}>
                                ✓ Mark resolved
                              </button>
                            )}
                            {e.resolved_status !== 'ignored' && (
                              <button onClick={() => resolveError(e.id, 'ignored')} disabled={errBusy === e.id}
                                style={{ height: 30, padding: '0 12px', background: 'transparent', color: 'var(--text-muted)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-sm)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-semibold)', cursor: 'pointer' }}>
                                Ignore
                              </button>
                            )}
                            {e.resolved_status && e.resolved_status !== 'open' && (
                              <button onClick={() => resolveError(e.id, 'open')} disabled={errBusy === e.id}
                                style={{ height: 30, padding: '0 12px', background: 'transparent', color: 'var(--blue-600)', border: '1px solid var(--blue-200)', borderRadius: 'var(--radius-sm)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-semibold)', cursor: 'pointer' }}>
                                Re-open
                              </button>
                            )}
                            <span style={{ alignSelf: 'center', fontSize: 'var(--text-2xs)', color: 'var(--text-subtle)' }}>Status: {e.resolved_status || 'open'}</span>
                          </div>
                        </td>
                      </tr>
                    )}
                  </React.Fragment>
                ))}
              </tbody>
            </table>
          </div>
          {!errorLogs.length && <p style={{ padding: 16, color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>No errors recorded — clean so far. 🎉</p>}
          {!!errorLogs.length && <p style={{ padding: '10px 14px', fontSize: 'var(--text-2xs)', color: 'var(--text-muted)', borderTop: '1px solid var(--border-subtle)' }}>{errorLogs.length} distinct error{errorLogs.length !== 1 ? 's' : ''} (grouped). Click a row for full context, AI explanation, and resolve/ignore.</p>}
        </div>
        </div>
      )}
    </div>
  );
}

window.SuperAdmin = SuperAdmin;