// Roles e permissões (Administração, interno): catálogo REAL de papéis e das permissões de cada um, somente leitura.
// O catálogo muda por migration revisada (a API não tem permissão de escrita), nunca por esta tela.
function RolesScreen() {
  const { PageHeader, Alert, Card, Badge, Skeleton, EmptyState } = window.VRticeDesignSystem_d763eb;
  const { can } = useAccess();
  const [sel, setSel] = React.useState('');
  const [st] = useRemote(() => window.VxAccessAdmin.loadRoleCatalog(window.VxAuth.db()), []);
  const roles = st.data || [];
  const role = roles.find(r => r.key === sel) || roles[0];
  const byResource = role ? role.permissions.reduce((a, k) => { const [res, act] = k.split('.'); (a[res] = a[res] || []).push(act); return a; }, {}) : {};
  const ownerOnly = new Set(['roles.manage', 'security.manage', 'settings.manage', 'api_tokens.create', 'api_tokens.delete', 'api_tokens.manage', 'api_tokens.view']);
  return (
    <>
      <PageHeader size="lg" eyebrow="ADMINISTRAÇÃO" title="Roles e permissões" description="Quem pode ver e fazer o quê. A decisão final é sempre do servidor (RBAC + RLS)." />
      <Alert tone="info" title="Catálogo somente leitura">Papéis e permissões são alterados por migration revisada, não por esta tela. Permissões marcadas como "só do proprietário" não podem ser concedidas por administradores.</Alert>
      {!can('roles.manage') && <Alert tone="warning" title="Detalhes restritos">O detalhe das permissões de cada papel exige roles.manage.</Alert>}
      {st.loading ? <Skeleton height={240} radius={20} />
        : st.error ? <Alert tone="danger" title="Não foi possível carregar">{st.error}</Alert>
        : !roles.length ? <EmptyState variant="block" icon="ph-key" title="Nenhum papel visível">O catálogo de papéis não está acessível para a sua conta.</EmptyState>
        : <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap', alignItems: 'flex-start' }}>
          <Card variant="panel" padding={12} gap={4} style={{ flex: '1 1 260px', maxWidth: 320 }}>
            {roles.map(r => <button key={r.key} type="button" onClick={() => setSel(r.key)} aria-pressed={role && role.key === r.key} className="vx-row" style={{ textAlign: 'left', display: 'flex', flexDirection: 'column', gap: 2, padding: '10px 12px', cursor: 'pointer', borderRadius: 10, border: 'none', background: role && role.key === r.key ? 'var(--overlay-06)' : 'transparent', color: 'inherit', fontFamily: 'inherit' }}>
              <span style={{ fontSize: 14, fontWeight: 600 }}>{r.name || r.key}</span>
              <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{r.key} · {r.permissions.length} permissões</span>
            </button>)}
          </Card>
          {role && <Card variant="flat" padding="24px 28px" gap={16} style={{ flex: '2 1 420px' }}>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
              <h3 style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>{role.name || role.key}</h3>
              <Badge variant="meta" tone="info">{role.scope}</Badge>
              {role.environment_kind && <Badge variant="meta" tone="neutral">Ambiente {role.environment_kind}</Badge>}
            </div>
            {role.description && <span style={{ fontSize: 14, color: 'var(--text-muted)' }}>{role.description}</span>}
            {can('roles.manage') ? (Object.keys(byResource).length ? Object.entries(byResource).map(([res, acts]) => (
              <div key={res} style={{ display: 'flex', gap: 10, alignItems: 'baseline', flexWrap: 'wrap', borderTop: '1px solid var(--border-subtle)', paddingTop: 10 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, minWidth: 190 }}>{res}</span>
                {acts.map(a => <Badge key={a} variant="meta" tone={ownerOnly.has(res + '.' + a) ? 'warning' : 'neutral'}>{a}{ownerOnly.has(res + '.' + a) ? ' · só do proprietário' : ''}</Badge>)}
              </div>)) : <span style={{ color: 'var(--text-muted)' }}>Este papel não concede nenhuma permissão.</span>) : <span style={{ color: 'var(--text-muted)' }}>Sem acesso ao detalhe.</span>}
          </Card>}
        </div>}
    </>
  );
}
window.RolesScreen = RolesScreen;