/* ADMIN wrapper — modo privilegiado.
   Gating: window.AdminUsersData.canAccessAdminMode(user) (5 emails nominais).
   Light theme intencional — ADMIN é "governance · gestão", oposto visual ao DEV (dark · build).
   Secondary sidebar interna NÃO usada — sub-nav vive na sidebar principal (accordion).
   Sub-pages: inicio · utilizadores · empresas · audit · integracoes. */

const AdminWrapper = ({ user }) => {
  const [sub, setSub] = useSubNav('digi-admin-sub', 'inicio');

  // Gating defensivo (sidebar já filtra; este é o backstop se alguém forçar #screen=admin)
  const canAccess = window.AdminUsersData?.canAccessAdminMode?.(user);

  // Forçar light theme em ADMIN (modo "claro/governance")
  React.useEffect(() => {
    if (!canAccess) return;
    const prev = document.documentElement.dataset.theme;
    document.documentElement.dataset.theme = 'light';
    return () => { if (prev) document.documentElement.dataset.theme = prev; };
  }, [canAccess]);

  // Hotkeys 1–5 sem swallowing
  React.useEffect(() => {
    if (!canAccess) return;
    const onKey = (e) => {
      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
      if (e.metaKey || e.ctrlKey) return;
      const map = { '1':'inicio', '2':'utilizadores', '3':'empresas', '4':'audit', '5':'integracoes' };
      if (map[e.key]) setSub(map[e.key]);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [canAccess]);

  if (!canAccess) {
    return (
      <div style={{
        flex: 1, display: 'grid', placeItems: 'center', padding: 40,
        background: 'var(--bg)', color: 'var(--text)',
      }}>
        <div style={{
          maxWidth: 460, padding: 28, borderRadius: 12,
          border: '1px solid var(--border)', background: 'var(--bg-elev)',
          textAlign: 'center',
        }}>
          <div style={{
            width: 44, height: 44, margin: '0 auto 14px', borderRadius: 10,
            background: 'oklch(0.95 0.04 30)', color: 'oklch(0.45 0.18 30)',
            display: 'grid', placeItems: 'center',
          }}>
            <Icon name="lock" size={22} />
          </div>
          <h2 className="font-display" style={{ margin: 0, fontSize: 20, fontWeight: 600 }}>Sem acesso ao modo ADMIN</h2>
          <p style={{ margin: '8px 0 0', fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.55 }}>
            O console ADMIN é restrito a 5 utilizadores nominais. Pede acesso a Rui Leitão ou Fábio Costa se precisares.
          </p>
        </div>
      </div>
    );
  }

  // Render da sub-página
  const renderSub = () => {
    if (sub === 'inicio')        return <AdminOverview user={user} onNavigate={setSub} />;
    if (sub === 'utilizadores')  return <AdminUsersScreen user={user} />;
    if (sub === 'empresas')      return <AdminEmpresasStub user={user} />;
    if (sub === 'audit')         return <AdminAuditStub user={user} />;
    if (sub === 'integracoes')   return <AdminIntegracoesStub user={user} />;
    return <AdminOverview user={user} onNavigate={setSub} />;
  };

  return (
    <div style={{
      flex: 1, minHeight: 0, height: '100%',
      display: 'flex', flexDirection: 'column',
      background: 'var(--bg)', overflow: 'hidden',
    }}>
      {renderSub()}
    </div>
  );
};

// ────────────────────────────────────────────────────────────
// Stubs intencionais — formas finais com mocks coerentes
// (AD4 — refinaremos depois conforme prioridade)
// ────────────────────────────────────────────────────────────

const AdminStubFrame = ({ kicker, title, desc, children }) => (
  <div style={{ flex: 1, overflow: 'auto', padding: '28px 32px' }}>
    <div style={{ maxWidth: 1100, margin: '0 auto' }}>
      <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.08em' }}>ADMIN · {kicker}</div>
      <h1 className="font-display" style={{ margin: '6px 0 8px', fontSize: 26, fontWeight: 600, letterSpacing: '-0.01em' }}>{title}</h1>
      <p style={{ margin: 0, fontSize: 13.5, color: 'var(--text-muted)', lineHeight: 1.55, maxWidth: 720 }}>{desc}</p>
      <div style={{ marginTop: 22 }}>{children}</div>
    </div>
  </div>
);

const AdminEmpresasStub = () => {
  const [_tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const h = () => setTick(t => t + 1);
    window.addEventListener('digi-users-loaded', h);
    return () => window.removeEventListener('digi-users-loaded', h);
  }, []);
  const empresas = window.AdminUsersData?.EMPRESAS || [];
  return (
    <AdminStubFrame
      kicker="EMPRESAS"
      title="Empresas do Grupo"
      desc="Configuração das 6 entidades operacionais + 4 marcas comerciais. Branding, NIF, moradas, defaults por país, chaves Apollo/Cognism por empresa, mapeamentos com SAP."
    >
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 14 }}>
        {empresas.map(e => (
          <div key={e.code} style={{
            padding: 16, borderRadius: 10,
            border: '1px solid var(--border)', background: 'var(--bg-elev)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
              <div style={{
                width: 32, height: 32, borderRadius: 7, fontSize: 11, fontWeight: 700,
                background: e.color || 'var(--brand-900)', color: '#fff',
                display: 'grid', placeItems: 'center', fontFamily: 'var(--font-display)',
              }}>{e.code}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 600, lineHeight: 1.2 }}>{e.nome}</div>
                <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>{e.pais || '—'}{e.tipo ? ` · ${e.tipo}` : ''}</div>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, fontSize: 11.5 }}>
              <div>
                <div style={{ color: 'var(--text-dim)' }}>Colab.</div>
                <div style={{ fontWeight: 600 }}>{e.colaboradores ?? '—'}</div>
              </div>
              <div>
                <div style={{ color: 'var(--text-dim)' }}>Faturação</div>
                <div style={{ fontWeight: 600 }}>{e.faturacao || '—'}</div>
              </div>
            </div>
            <div style={{ marginTop: 10, paddingTop: 10, borderTop: '1px solid var(--border)', display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {(e.marcas || []).slice(0,3).map(m => (
                <span key={m} style={{ padding: '2px 6px', fontSize: 10, fontFamily: 'var(--font-mono)', borderRadius: 4, background: 'var(--surface-muted)', color: 'var(--text-muted)' }}>{m}</span>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{
        marginTop: 18, padding: 14, borderRadius: 8,
        border: '1px dashed var(--border)', background: 'var(--surface-muted)',
        fontSize: 12, color: 'var(--text-muted)',
      }}>
        Próximo: editor por empresa (branding, NIF, moradas, ligações SAP/Apollo, defaults de email/footer/cookie).
      </div>
    </AdminStubFrame>
  );
};

const AdminAuditStub = () => {
  // Mock realista — últimos 12 eventos cross-system
  const events = [
    { ts: '14:32', actor: 'Fábio Costa',   verb: 'updated', target: 'permissões de Daniel Marques', meta: 'sales_pipeline +manage_clients' },
    { ts: '14:18', actor: 'Rui Leitão',    verb: 'invited', target: '3 utilizadores via SCIM',       meta: 'tipo=comercial' },
    { ts: '13:55', actor: 'Sistema',       verb: 'sync',    target: 'AD → Portal',                   meta: '193 users · 0 drift' },
    { ts: '13:40', actor: 'João Paulino',  verb: 'rotated', target: 'API key Apollo',                meta: 'expira em 90d' },
    { ts: '13:12', actor: 'Fábio Silva',   verb: 'enabled', target: 'feature flag voice_widget',     meta: 'scope=Comercial PT' },
    { ts: '12:50', actor: 'Patrícia Mota', verb: 'exported', target: 'aging report Q3',              meta: '142 cliente · 2.3 MB' },
    { ts: '12:31', actor: 'Sistema',       verb: 'alert',   target: 'login fora de horário',         meta: 'Marta Leal · 03:14 UTC' },
    { ts: '11:58', actor: 'Márcio Fojo',   verb: 'created', target: 'KB chunk batch',                meta: '+1.247 chunks · sales_pt' },
    { ts: '11:22', actor: 'Fábio Costa',   verb: 'archived', target: '2 utilizadores inactivos',     meta: 'Mário Pinto, Susana Cruz' },
    { ts: '10:45', actor: 'Rui Leitão',    verb: 'changed', target: 'role de Marco Fernandes',       meta: 'manager → director' },
    { ts: '10:12', actor: 'Sistema',       verb: 'failed',  target: 'sync SAP HR',                   meta: 'timeout · retry 14:00', warn: true },
    { ts: '09:30', actor: 'Fábio Costa',   verb: 'logged in', target: '—',                            meta: 'Lisboa · MacOS' },
  ];
  return (
    <AdminStubFrame
      kicker="AUDIT"
      title="Audit log — últimas 24h"
      desc="Cronologia imutável de todas as acções administrativas: alterações de permissões, sincronizações AD/SCIM, rotação de keys, feature flags, exports de dados, falhas de sistema. Filtros por actor/verbo/target/data."
    >
      <div style={{ display: 'flex', gap: 8, marginBottom: 14, flexWrap: 'wrap', fontSize: 11.5 }}>
        {['Tudo (12)', 'Permissões (3)', 'Sync (2)', 'Auth (2)', 'Falhas (1)'].map((c, i) => (
          <button key={c} style={{
            padding: '5px 10px', borderRadius: 14,
            border: '1px solid var(--border)',
            background: i === 0 ? 'var(--text)' : 'var(--bg-elev)',
            color: i === 0 ? 'var(--bg)' : 'var(--text-muted)',
            fontSize: 11, fontWeight: i === 0 ? 600 : 500,
          }}>{c}</button>
        ))}
        <div style={{ flex: 1 }} />
        <button style={{ padding: '5px 10px', borderRadius: 6, border: '1px solid var(--border)', background: 'var(--bg-elev)', fontSize: 11, color: 'var(--text-muted)' }}>
          <Icon name="download" size={11} style={{ marginRight: 4, verticalAlign: -1 }} />Exportar CSV
        </button>
      </div>
      <div style={{ borderRadius: 8, border: '1px solid var(--border)', overflow: 'hidden' }}>
        {events.map((e, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '60px 1fr auto', gap: 14, alignItems: 'baseline',
            padding: '11px 14px', fontSize: 12,
            borderBottom: i < events.length - 1 ? '1px solid var(--border)' : 'none',
            background: e.warn ? 'oklch(0.97 0.04 50)' : 'var(--bg-elev)',
          }}>
            <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text-dim)', fontSize: 11 }}>{e.ts}</span>
            <span style={{ lineHeight: 1.5 }}>
              <strong style={{ fontWeight: 600 }}>{e.actor}</strong>
              <span style={{ color: e.warn ? 'oklch(0.55 0.18 50)' : 'var(--text-muted)', margin: '0 6px' }}>{e.verb}</span>
              <span>{e.target}</span>
            </span>
            <span style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>{e.meta}</span>
          </div>
        ))}
      </div>
    </AdminStubFrame>
  );
};

const AdminIntegracoesStub = () => {
  const ints = [
    { name: 'Microsoft 365', cat: 'Identity', status: 'connected', last: 'há 12 min', meta: 'SCIM · 193 users · 0 drift' },
    { name: 'SAP Business One', cat: 'ERP', status: 'connected', last: 'há 28 min', meta: '1.247 clientes · 89 OPs activas' },
    { name: 'Apollo.io', cat: 'Sales intel', status: 'connected', last: 'há 2 h', meta: '8.450 leads · 2.1k credits restantes' },
    { name: 'WhatsApp Business', cat: 'Channel', status: 'connected', last: 'há 3 min', meta: '4 números · 2.341 conversas/mês' },
    { name: 'Zoho CRM', cat: 'CRM', status: 'syncing', last: 'a sincronizar...', meta: '3.450 deals · last error 09:22' },
    { name: 'Gmail / Google Workspace', cat: 'Email', status: 'partial', last: 'há 1 dia', meta: '3 contas com erro de OAuth', warn: true },
    { name: 'Outlook 365', cat: 'Email', status: 'connected', last: 'há 8 min', meta: '189 mailboxes' },
    { name: 'Cognism', cat: 'Sales intel', status: 'disconnected', last: 'desligado há 2 dias', meta: 'Trial expirou — renovar?' },
  ];
  const statusDot = (s) => ({
    connected: 'oklch(0.65 0.18 145)',
    syncing: 'oklch(0.7 0.15 230)',
    partial: 'oklch(0.7 0.18 70)',
    disconnected: 'oklch(0.65 0.04 250)',
  }[s]);
  return (
    <AdminStubFrame
      kicker="INTEGRAÇÕES"
      title="Integrações — 8 ligadas"
      desc="Identidade (M365 · SCIM), ERP (SAP B1), CRM (Zoho), inteligência de vendas (Apollo, Cognism), canais (WhatsApp, Outlook, Gmail). Saúde, último sync, erros, rotação de keys."
    >
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 12 }}>
        {ints.map(i => (
          <div key={i.name} style={{
            padding: 14, borderRadius: 9,
            border: '1px solid var(--border)',
            background: i.warn ? 'oklch(0.98 0.02 70)' : 'var(--bg-elev)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
              <span style={{ width: 8, height: 8, borderRadius: 8, background: statusDot(i.status), boxShadow: `0 0 0 3px ${statusDot(i.status)}22` }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 600, lineHeight: 1.2 }}>{i.name}</div>
                <div style={{ fontSize: 10.5, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.04em' }}>{i.cat.toUpperCase()}</div>
              </div>
              <button style={{ padding: '3px 8px', fontSize: 10.5, borderRadius: 5, border: '1px solid var(--border)', background: 'transparent', color: 'var(--text-muted)' }}>Configurar</button>
            </div>
            <div style={{ fontSize: 11.5, color: 'var(--text-muted)', lineHeight: 1.5 }}>{i.meta}</div>
            <div style={{ marginTop: 6, fontSize: 10.5, color: 'var(--text-dim)' }}>{i.last}</div>
          </div>
        ))}
      </div>
    </AdminStubFrame>
  );
};

window.AdminWrapper = AdminWrapper;
window.AdminEmpresasStub = AdminEmpresasStub;
window.AdminAuditStub = AdminAuditStub;
window.AdminIntegracoesStub = AdminIntegracoesStub;