/* 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', '6':'importar' };
      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} />;
    if (sub === 'importar')      return <AdminImportScreen 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 = () => {
  const [events, setEvents]     = React.useState(null);
  const [total, setTotal]       = React.useState(0);
  const [error, setError]       = React.useState(null);
  const [filter, setFilter]     = React.useState('');
  const [loadingMore, setLoadingMore] = React.useState(false);
  const [offset, setOffset]     = React.useState(0);
  const PAGE = 100;

  const fetchEvents = (off = 0, append = false) => {
    if (!append) setEvents(null);
    else setLoadingMore(true);
    fetch(`/api/audit-log?limit=${PAGE}&offset=${off}`)
      .then(r => r.ok ? r.json() : r.json().then(e => Promise.reject(e.error || r.status)))
      .then(d => {
        setEvents(prev => append ? [...(prev || []), ...d.events] : d.events);
        setTotal(d.total);
        setOffset(off + d.events.length);
      })
      .catch(e => setError(String(e)))
      .finally(() => setLoadingMore(false));
  };

  React.useEffect(() => { fetchEvents(0); }, []);

  const ACTION_LABELS = {
    login:      { verb: 'entrou',    color: 'var(--text-muted)' },
    logout:     { verb: 'saiu',      color: 'var(--text-dim)' },
    patch_user: { verb: 'alterou',   color: 'oklch(0.55 0.18 230)' },
  };

  const fmtTs = (iso) => {
    const d = new Date(iso);
    const today = new Date();
    const isToday = d.toDateString() === today.toDateString();
    const time = d.toLocaleTimeString('pt-PT', { hour: '2-digit', minute: '2-digit' });
    if (isToday) return time;
    return d.toLocaleDateString('pt-PT', { day: '2-digit', month: 'short' }) + ' ' + time;
  };

  const fmtMeta = (action, meta) => {
    if (action === 'login')  return meta.ip ? `IP ${meta.ip}` : '';
    if (action === 'logout') return '';
    if (action === 'patch_user' && meta.fields?.length) {
      return meta.fields.join(', ');
    }
    return '';
  };

  const fmtActor = (actor) => actor.split('@')[0].replace('.', ' ').replace(/\b\w/g, c => c.toUpperCase());

  const filtered = (events || []).filter(e => {
    if (!filter) return true;
    const q = filter.toLowerCase();
    return e.actor.includes(q) || e.action.includes(q) || (e.target || '').toLowerCase().includes(q);
  });

  const counts = (events || []).reduce((acc, e) => { acc[e.action] = (acc[e.action] || 0) + 1; return acc; }, {});

  return (
    <AdminStubFrame
      kicker="AUDIT"
      title={`Audit log${total ? ` — ${total} eventos` : ''}`}
      desc="Cronologia de todas as acções administrativas no portal: logins, logouts, alterações de utilizadores e permissões."
    >
      <div style={{ display: 'flex', gap: 8, marginBottom: 14, flexWrap: 'wrap', alignItems: 'center' }}>
        {[['', 'Tudo'], ['login', 'Logins'], ['logout', 'Logouts'], ['patch_user', 'Alterações']].map(([val, label]) => {
          const count = val ? (counts[val] || 0) : (events?.length || 0);
          const active = filter === val;
          return (
            <button key={val} onClick={() => setFilter(val)} style={{
              padding: '5px 10px', borderRadius: 14,
              border: '1px solid var(--border)',
              background: active ? 'var(--text)' : 'var(--bg-elev)',
              color: active ? 'var(--bg)' : 'var(--text-muted)',
              fontSize: 11, fontWeight: active ? 600 : 500, cursor: 'pointer',
            }}>{label}{events ? ` (${count})` : ''}</button>
          );
        })}
        <input
          value={filter}
          onChange={e => setFilter(e.target.value)}
          placeholder="Filtrar por email, acção, target…"
          style={{ marginLeft: 'auto', padding: '5px 10px', fontSize: 11, border: '1px solid var(--border)', borderRadius: 6, background: 'var(--bg-elev)', color: 'var(--text)', width: 220 }}
        />
      </div>

      {events === null && !error && (
        <div style={{ padding: '20px', textAlign: 'center', color: 'var(--text-dim)', fontSize: 12 }}>A carregar…</div>
      )}
      {error && (
        <div style={{ padding: '12px 14px', borderRadius: 8, background: 'oklch(0.97 0.04 25)', border: '1px solid oklch(0.88 0.08 25)', color: 'oklch(0.5 0.18 25)', fontSize: 12 }}>
          Erro: {error}
        </div>
      )}
      {events && events.length === 0 && (
        <div style={{ padding: '24px', textAlign: 'center', color: 'var(--text-dim)', fontSize: 12, border: '1px dashed var(--border)', borderRadius: 8 }}>
          Sem eventos registados ainda. Os próximos logins e alterações aparecerão aqui.
        </div>
      )}
      {filtered.length > 0 && (
        <div style={{ borderRadius: 8, border: '1px solid var(--border)', overflow: 'hidden' }}>
          {filtered.map((e, i) => {
            const lbl = ACTION_LABELS[e.action] || { verb: e.action, color: 'var(--text-muted)' };
            const metaStr = fmtMeta(e.action, e.meta || {});
            return (
              <div key={e.id} style={{
                display: 'grid', gridTemplateColumns: '90px 1fr auto', gap: 14, alignItems: 'baseline',
                padding: '11px 14px', fontSize: 12,
                borderBottom: i < filtered.length - 1 ? '1px solid var(--border)' : 'none',
                background: 'var(--bg-elev)',
              }}>
                <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text-dim)', fontSize: 11 }}>{fmtTs(e.created_at)}</span>
                <span style={{ lineHeight: 1.5 }}>
                  <strong style={{ fontWeight: 600 }}>{fmtActor(e.actor)}</strong>
                  <span style={{ color: lbl.color, margin: '0 6px' }}>{lbl.verb}</span>
                  {e.target && e.action !== 'login' && e.action !== 'logout' && (
                    <span style={{ color: 'var(--text-muted)' }}>{e.target}</span>
                  )}
                </span>
                {metaStr && (
                  <span style={{ fontSize: 10.5, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', whiteSpace: 'nowrap' }}>{metaStr}</span>
                )}
              </div>
            );
          })}
        </div>
      )}
      {events && offset < total && (
        <button
          onClick={() => fetchEvents(offset, true)}
          disabled={loadingMore}
          style={{ marginTop: 10, padding: '7px 14px', fontSize: 12, borderRadius: 6, border: '1px solid var(--border)', background: 'var(--bg-elev)', color: 'var(--text-muted)', cursor: 'pointer', width: '100%' }}
        >
          {loadingMore ? 'A carregar…' : `Carregar mais (${total - offset} restantes)`}
        </button>
      )}
    </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;