// Painel administrativo. NÃO existe no design aprovado: montado só com padrões já aprovados no Control Center
// (fila "Precisa da sua atenção", KpiCard compact, CcPanel). Dados ilustrativos (admin-data.js).
function AdminStatus({ status }) {
  const { Badge } = window.VRticeDesignSystem_d763eb;
  const [label, tone] = window.VXAdmin.ACCOUNT_STATUS[status];
  return <Badge tone={tone}>{label}</Badge>;
}

function AdminHomeScreen() {
  const { PageHeader, KpiCard, Button, Avatar, StatusDot } = window.VRticeDesignSystem_d763eb;
  const { go, bp } = useShell();
  const { can } = useAccess();
  const A = window.VXAdmin;
  const active = A.USERS.filter(u => u.status === 'ACTIVE'), noMfa = active.filter(u => !u.mfa), pending = A.USERS.filter(u => u.status === 'INVITED');
  const denied = A.AUDIT.filter(a => a.result === 'Negado');
  const alerts = A.INTEGRATIONS.filter(i => i.tone === 'warning' || i.tone === 'danger');
  const items = [
    { tone: 'warning', icon: 'ph-user-plus', t: '3 solicitações de acesso aguardando aprovação', d: pending.map(u => u.name).join(', ') + ' e 2 convites pendentes', cta: 'Revisar', route: 'users', perm: 'users.manage' },
    { tone: 'danger', icon: 'ph-plugs', t: alerts.length + ' integração com falha de sincronização', d: alerts.map(i => i.name + ' · ' + i.health).join(' · '), cta: 'Ver integração', route: 'integrations', perm: 'integrations.view' },
    { tone: 'warning', icon: 'ph-shield-warning', t: noMfa.length + ' membro ativo sem autenticação em dois fatores', d: noMfa.map(u => u.name).join(', '), cta: 'Ver usuários', route: 'users', perm: 'users.view' },
    { tone: 'info', icon: 'ph-prohibit', t: denied.length + ' acessos negados nos últimos 2 dias', d: denied.map(a => a.who + ' · ' + a.entity).join(' · '), cta: 'Auditoria', route: 'audit', perm: 'audit.view' },
  ].filter(a => can(a.perm));
  const shortcuts = [['users', 'Membros, convites e acesso por ambiente'], ['roles', 'Matriz de permissões por papel'], ['orgs', 'Organizações e ambientes do modelo de tenancy'], ['integrations', 'Status e saúde das conexões'], ['audit', 'Registro de ações e resultados'], ['config', 'Organização, segurança e preferências']]
    .map(([id, sub]) => [window.VX_NAV.meta[id], sub]).filter(([m]) => can(m.perm));
  const grid = { display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(min(220px,100%),1fr))', gap: 16 };
  const link = (route, label) => <a href="#" onClick={e => { e.preventDefault(); go(route); }} style={{ fontSize: 14, fontWeight: 600, textDecoration: 'none' }}>{label}</a>;
  const blocks = [
    { id: 'kpis', title: 'Indicadores', span: 12, node: (
      <div style={grid}>
        <KpiCard compact label="Membros ativos" value={String(active.length)} caption={A.USERS.length + ' no total · ' + pending.length + ' convidado'} />
        <KpiCard compact label="Roles" value={String(A.ROLES.length)} caption="Catálogo ilustrativo · real: 16 no banco" />
        <KpiCard compact label="Integrações com alerta" value={String(alerts.length)} valueColor={alerts.length ? 'var(--status-warning)' : undefined} caption={A.INTEGRATIONS.filter(i => i.tone === 'success').length + ' saudável · ' + A.INTEGRATIONS.filter(i => i.tone === 'neutral').length + ' sem configuração'} />
        <KpiCard compact label="Acessos negados" value={String(denied.length)} caption="Exemplo ilustrativo" />
      </div>) },
    { id: 'attention', title: 'Precisa da sua atenção', span: 8, node: (
      <CcPanel title="Precisa da sua atenção" sub="Ordenado por urgência" gap={8}>
        {items.map((a, k) => (
          <div key={a.t} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 0', ...cxRow(k), flexWrap: bp === 'mobile' ? 'wrap' : 'nowrap' }}>
            <span style={{ width: 38, height: 38, flex: 'none', borderRadius: 10, background: vxMix(VX_TONE[a.tone], 14), display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className={'ph ' + a.icon} style={{ fontSize: 19, color: VX_TONE[a.tone] }} /></span>
            <span style={{ flex: '1 1 220px', minWidth: 0, display: 'flex', flexDirection: 'column', gap: 3 }}><span style={{ fontSize: 14, fontWeight: 600 }}>{a.t}</span><span style={{ fontSize: 13, color: 'var(--text-muted)' }}>{a.d}</span></span>
            <Button size="sm" variant="secondary" onClick={() => go(a.route)}>{a.cta}</Button>
          </div>
        ))}
      </CcPanel>) },
    { id: 'modules', title: 'Módulos de administração', span: 4, node: (
      <CcPanel title="Módulos de administração" gap={8}>
        {shortcuts.map(([m, sub]) => <button key={m.id} type="button" className="vx-linkrow" onClick={() => go(m.id)} style={{ padding: '12px 14px', gap: 14, justifyContent: 'flex-start' }}><i className={'ph ' + m.icon} style={{ fontSize: 20, color: 'var(--text-accent)' }} /><span style={{ display: 'flex', flexDirection: 'column', gap: 2, textAlign: 'left', flex: 1 }}><strong style={{ fontSize: 14 }}>{m.label}</strong><span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{sub}</span></span><i className="ph ph-arrow-right" style={{ fontSize: 14, color: 'var(--text-subtle)' }} /></button>)}
      </CcPanel>) },
    ...(can('users.view') ? [{ id: 'members', title: 'Membros recentes', span: 7, node: (
      <CcPanel title="Membros recentes" gap={0} action={link('users', 'Usuários')}>
        {A.USERS.slice(0, 5).map((u, k) => <div key={u.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0', ...cxRow(k) }}><Avatar name={u.name} size={32} /><span style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 2 }}><span style={{ fontSize: 14, fontWeight: 600 }}>{u.name}</span><span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{A.ROLE[u.role].label} · {u.last}</span></span><AdminStatus status={u.status} /></div>)}
      </CcPanel>) }] : []),
    ...(can('integrations.view') ? [{ id: 'integrations', title: 'Saúde das integrações', span: 5, node: (
      <CcPanel title="Saúde das integrações" gap={4} action={link('integrations', 'Integrações')}>
        {A.INTEGRATIONS.filter(i => i.tone !== 'neutral' || i.status === 'Não configurada').slice(0, 5).map((i, k) => <div key={i.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, padding: '12px 0', ...cxRow(k) }}><span style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14 }}><StatusDot tone={i.tone} />{i.name}</span><span style={{ fontSize: 13, color: i.tone === 'warning' ? VX_TONE.warning : 'var(--text-muted)', textAlign: 'right' }}>{i.status}</span></div>)}
      </CcPanel>) }] : []),
  ];
  return <BlockGrid id="admin-home" blocks={blocks} header={<><PageHeader size="lg" eyebrow="ADMINISTRAÇÃO" title="Painel administrativo" description="Acesso, permissões, integrações e auditoria da organização em um só lugar." actions={<PBtn perm="users.manage" icon="ph-user-plus" onClick={() => go('users')}>Convidar usuário</PBtn>} /><DemoNotice>Os indicadores, alertas e atividades deste painel são exemplos. Integrações e CRM têm telas próprias com dados reais.</DemoNotice></>} />;
}
Object.assign(window, { AdminHomeScreen, AdminStatus });