function AdminScreen() {
  const [tab, setTab] = useState("users");

  const roleColor = (r) => ({
    "Admin": "danger",
    "Editor": "primary",
    "Analyst": "ok",
    "Data Engineer": "warn",
    "Governance Lead": "primary",
    "Executive Viewer": "primary",
    "Viewer": "",
  }[r] || "");

  const permMatrix = [
    { role: "Admin", dash: "F", data: "F", user: "F", alert: "F", audit: "F" },
    { role: "Editor", dash: "F", data: "E", user: "V", alert: "E", audit: "V" },
    { role: "Analyst", dash: "E", data: "E", user: "-", alert: "V", audit: "-" },
    { role: "Data Engineer", dash: "V", data: "F", user: "-", alert: "V", audit: "V" },
    { role: "Governance Lead", dash: "V", data: "E", user: "V", alert: "V", audit: "F" },
    { role: "Executive Viewer", dash: "V", data: "V", user: "-", alert: "V", audit: "-" },
    { role: "Viewer", dash: "V", data: "-", user: "-", alert: "-", audit: "-" },
  ];
  const pKey = (v) => ({ F: "Full", E: "Edit", V: "View", "-": "—" }[v] || v);
  const pColor = (v) => ({ F: "var(--ok)", E: "var(--primary)", V: "var(--ink-2)", "-": "var(--ink-4)" }[v]);
  const pBg = (v) => ({ F: "var(--ok-tint)", E: "var(--primary-tint)", V: "var(--panel-2)", "-": "transparent" }[v]);

  return (
    <div className="screen">
      <div className="screen-head">
        <div>
          <div className="screen-title">Users & Access Control</div>
          <div className="screen-sub"><b className="mono">248</b> total users across <b className="mono">18</b> departments · SSO via Keycloak · MFA compliance <b style={{ color: 'var(--ok)' }}>96.4%</b></div>
        </div>
        <div className="screen-actions">
          <button className="btn"><Icon name="download"/>Audit export</button>
          <button className="btn"><Icon name="shield"/>Compliance</button>
          <button className="btn primary"><Icon name="plus"/>Invite user</button>
        </div>
      </div>

      {/* Compliance banner */}
      <div className="card" style={{ marginBottom: 14, background: 'linear-gradient(90deg, var(--ok-tint), var(--panel) 50%)' }}>
        <div style={{ padding: 12, display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ width: 34, height: 34, borderRadius: 8, background: 'var(--ok)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
            <Icon name="shield" size={16} style={{ color: 'white' }}/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 600 }}>System compliant with 5 standards</div>
            <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 2 }}>ISO 27001 · SOC 2 Type II · DPDP (India) · GDPR · HIPAA · Last audit: <b className="mono">Jun 12, 2026</b></div>
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            {["ISO 27001", "SOC 2", "DPDP", "GDPR", "HIPAA"].map(s => <span key={s} className="tag ok" style={{ fontSize: 10.5 }}><Icon name="check" size={9}/>{s}</span>)}
          </div>
        </div>
      </div>

      <div style={{ borderBottom: '1px solid var(--border)', marginBottom: 16, display: 'flex', gap: 4 }}>
        {[{ id: "users", label: "Users", count: 248 }, { id: "roles", label: "Roles & Permissions", count: 7 }, { id: "audit", label: "Audit Log", count: "Live" }].map(t => (
          <button key={t.id} onClick={() => setTab(t.id)}
            style={{ padding: '10px 14px', border: 'none', background: 'none', color: tab === t.id ? 'var(--ink)' : 'var(--ink-3)', fontWeight: tab === t.id ? 600 : 500, fontSize: 13, cursor: 'pointer', borderBottom: '2px solid ' + (tab === t.id ? 'var(--primary)' : 'transparent'), marginBottom: -1, fontFamily: 'inherit' }}
          >{t.label} <span style={{ color: 'var(--ink-4)', fontWeight: 500 }}>· {t.count}</span></button>
        ))}
      </div>

      {tab === "users" && (
        <div className="card">
          <div className="card-body" style={{ padding: 0 }}>
            <table className="data">
              <thead><tr>
                <th>User</th>
                <th>Role</th>
                <th>Department</th>
                <th>MFA</th>
                <th>Last active</th>
                <th></th>
              </tr></thead>
              <tbody>
                {USERS.map((u, i) => (
                  <tr key={i}>
                    <td>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                        <div className="avatar" style={{ width: 30, height: 30, fontSize: 11, background: `linear-gradient(140deg, hsl(${i * 47} 60% 55%), hsl(${i * 47 + 30} 60% 45%))` }}>{u.name.split(' ').map(n => n[0]).slice(0, 2).join('')}</div>
                        <div>
                          <div style={{ fontWeight: 500 }}>{u.name}</div>
                          <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{u.email}</div>
                        </div>
                      </div>
                    </td>
                    <td><span className={`tag ${roleColor(u.role)}`}>{u.role}</span></td>
                    <td style={{ color: 'var(--ink-2)' }} className="small">{u.dept}</td>
                    <td>
                      {u.mfa ? <span style={{ color: 'var(--ok)', display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 11.5, fontWeight: 500 }}><Icon name="check" size={12}/>Enabled</span>
                             : <span style={{ color: 'var(--accent-2)', display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 11.5, fontWeight: 500 }}><Icon name="alert" size={12}/>Required</span>}
                    </td>
                    <td style={{ color: 'var(--ink-2)' }} className="small">{u.last}</td>
                    <td>
                      <div style={{ display: 'flex', gap: 4 }}>
                        <button className="icon-btn" style={{ width: 24, height: 24 }}><Icon name="key" size={11}/></button>
                        <button className="icon-btn" style={{ width: 24, height: 24 }}><Icon name="moreH" size={11}/></button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {tab === "roles" && (
        <div className="card">
          <div className="card-head">
            <div>
              <h3>Permission Matrix</h3>
              <div className="sub">RBAC · Full / Edit / View / — · ABAC policies overlay per-department</div>
            </div>
            <button className="btn sm"><Icon name="plus" size={11}/>New role</button>
          </div>
          <div className="card-body" style={{ padding: 0 }}>
            <table className="data">
              <thead><tr>
                <th>Role</th>
                <th style={{ textAlign: 'center' }}>Dashboards</th>
                <th style={{ textAlign: 'center' }}>Data Sources</th>
                <th style={{ textAlign: 'center' }}>User Mgmt</th>
                <th style={{ textAlign: 'center' }}>Alerts</th>
                <th style={{ textAlign: 'center' }}>Audit Log</th>
                <th className="num">Users</th>
              </tr></thead>
              <tbody>
                {permMatrix.map((p, i) => (
                  <tr key={p.role}>
                    <td><span className={`tag ${roleColor(p.role)}`} style={{ fontSize: 11.5 }}>{p.role}</span></td>
                    {["dash","data","user","alert","audit"].map(k => (
                      <td key={k} style={{ textAlign: 'center' }}>
                        <span style={{ display: 'inline-block', minWidth: 44, padding: '3px 8px', borderRadius: 4, background: pBg(p[k]), color: pColor(p[k]), fontSize: 11, fontWeight: 600 }}>{pKey(p[k])}</span>
                      </td>
                    ))}
                    <td className="num" style={{ color: 'var(--ink-3)' }}>{[4, 22, 68, 12, 3, 6, 133][i]}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {tab === "audit" && (
        <div className="card">
          <div className="card-head">
            <div>
              <h3>Audit Log</h3>
              <div className="sub">Immutable · WORM storage · Retained 7 years per DPDP</div>
            </div>
            <div className="hstack">
              <span className="tag ok"><span className="live-dot"/>Streaming</span>
              <button className="btn sm"><Icon name="filter" size={11}/>Filter</button>
              <button className="btn sm"><Icon name="download" size={11}/>Export</button>
            </div>
          </div>
          <div className="card-body" style={{ padding: 0 }}>
            {AUDIT_LOG.map((a, i) => (
              <div key={i} style={{ padding: '10px 14px', borderTop: i > 0 ? '1px solid var(--border)' : 0, display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--ink-4)', width: 68, flexShrink: 0 }}>{a.at}</span>
                <div style={{ width: 6, height: 6, borderRadius: 50, background: a.who === 'system' ? 'var(--accent-2)' : a.who === 'AI Copilot' ? 'var(--primary)' : 'var(--ok)', marginTop: 5, flexShrink: 0 }}/>
                <div style={{ flex: 1, fontSize: 12.5 }}>
                  <b style={{ color: 'var(--ink)' }}>{a.who}</b> <span style={{ color: 'var(--ink-2)' }}>{a.action}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

window.AdminScreen = AdminScreen;