// Shell do console: rail navy + navegação + contexto de ponto + painel de comando.
const DSa = window.WiFi_eeb21e;
const { CharlesLogoMark: LogoA, Badge: BadgeA } = DSa;
const { Icone: IconeA, CmdPainel: CmdPainelA, PontoMenu: PontoMenuA } = window;

const GESTAO_TELAS = [
 { id: 'visao', rot: 'Visão geral', ic: 'grid' },
 { id: 'inventario', rot: 'Dispositivos', ic: 'lista' },
 { id: 'listabranca', rot: 'Lista branca', ic: 'escudo' },
 { id: 'ssids', rot: 'SSIDs & bridges', ic: 'wifi' },
 { id: 'telas', rot: 'Telas do portal', ic: 'tela' },
 { id: 'registros', rot: 'E-mails capturados', ic: 'mail' },
 { id: 'iot', rot: 'IoT', ic: 'cpu' }];

function GestaoApp() {
 // Sessão real: o cookie HttpOnly (gestao_sessao, path=/api) é a fonte de verdade.
 // O JS nunca lê o cookie — pergunta ao servidor por GET /api/auth/eu.
 const [sessao, setSessao] = React.useState(null);      // {email, perfil} | null
 const [carregando, setCarregando] = React.useState(true);
 const [erroLink, setErroLink] = React.useState(null);  // 'expirado'|'substituido'|null

 React.useEffect(() => {
  let vivo = true;
  (async () => {
   // 1) token do e-mail (?acesso=). O POST troca o token por uma sessão. A troca é IDEMPOTENTE
   //    no servidor dentro do TTL (15 min): filtros de e-mail (Microsoft Safe Links etc.) que
   //    detonam o link num sandbox — executando o JS e até clicando — não queimam o token; o
   //    humano troca depois e entra. Por isso podemos trocar já no load, sem fricção.
   const params = new URLSearchParams(window.location.search);
   const token = params.get('acesso');
   if (token) {
    try {
     const r = await fetch(`/api/auth/acesso/${encodeURIComponent(token)}`, { method: 'POST' });
     limparUrl();
     if (r.ok) { const d = await r.json(); if (vivo) { setSessao(d); setCarregando(false); } return; }
     // erro: talvez o cookie já exista (self-heal via /eu) antes de mostrar a tela de erro
     const err = await r.json().catch(() => ({}));
     const eu = await fetch('/api/auth/eu');
     if (eu.ok) { const d = await eu.json(); if (vivo) { setSessao(d); setCarregando(false); } return; }
     if (vivo) { setErroLink(err.erro || 'expirado'); }
    } catch (e) { limparUrl(); if (vivo) setErroLink('expirado'); }
   }
   // 2) sem token (ou após erro): já tem sessão pelo cookie?
   try {
    const r = await fetch('/api/auth/eu', { headers: { 'Accept': 'application/json' } });
    if (vivo && !sessao) setSessao(r.ok ? await r.json() : null);
   } catch (e) { if (vivo) setSessao(null); }
   if (vivo) setCarregando(false);
  })();
  return () => { vivo = false; };
 }, []);

 const sair = async () => {
  try { await fetch('/api/auth/sair', { method: 'POST' }); } catch (e) {}
  setSessao(null); setErroLink(null);
 };

 const [tela, setTela] = React.useState('visao');
 const [sel, setSel] = React.useState(['habibi']);
 const [cmd, setCmd] = React.useState(null);
 const go = (t, s) => { if (s) setSel([s]); setTela(t); };
 const COMP = { visao: window.TelaVisaoGeral, inventario: window.TelaInventario, listabranca: window.TelaListaBranca, ssids: window.TelaSsids, telas: window.TelaTelasPortal, registros: window.TelaRegistros, iot: window.TelaIot };
 const Corpo = COMP[tela];
 const rotulo = GESTAO_TELAS.find(t => t.id === tela).rot;

 if (carregando) return <div style={{ minHeight: '100vh', background: 'hsl(var(--background))', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'hsl(var(--muted-foreground))', fontFamily: 'var(--app-font-sans)', fontSize: 14 }}>Carregando…</div>;
 if (!sessao) { const TL = window.TelaLogin; return <TL erroInicial={erroLink} />; }
 return <div style={{ display: 'flex', minHeight: '100vh', background: 'hsl(var(--background))', color: 'hsl(var(--foreground))', fontFamily: 'var(--app-font-sans)' }}>
  <div style={{ width: 216, flex: 'none', background: 'hsl(var(--sidebar))', color: 'hsl(var(--sidebar-foreground))', display: 'flex', flexDirection: 'column', padding: '18px 12px', boxSizing: 'border-box' }}>
   <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '0 8px 16px' }}>
    <LogoA size={30} light />
    <div style={{ minWidth: 0 }}>
     <div style={{ fontFamily: 'var(--app-font-display)', fontWeight: 800, fontSize: 14, letterSpacing: '.02em' }}>CHARLES</div>
     <div style={{ fontSize: 11, opacity: .65 }}>Gestão WiFi</div>
    </div>
   </div>
   <nav style={{ display: 'grid', gap: 3 }}>
    {GESTAO_TELAS.map(t => <button key={t.id} onClick={() => setTela(t.id)} className="hover-elevate" style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px', borderRadius: 'var(--radius-md)', border: 'none', cursor: 'pointer', textAlign: 'left', fontSize: 13.5, fontFamily: 'var(--app-font-sans)', background: tela === t.id ? 'hsl(var(--sidebar-primary))' : 'transparent', color: tela === t.id ? '#fff' : 'hsl(var(--sidebar-foreground))', fontWeight: tela === t.id ? 600 : 400 }}>
     <IconeA nome={t.ic} />{t.rot}
    </button>)}
   </nav>
   <div style={{ flex: 1 }} />
   <div style={{ borderTop: '1px solid hsl(var(--sidebar-accent))', margin: '12px 4px 0', padding: '10px 4px 0' }}>
    <div style={{ fontSize: 11.5, opacity: .85, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={sessao.email}>{sessao.email}</div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 }}>
     <span style={{ fontSize: 10.5, opacity: .5, flex: 1 }}>{sessao.perfil === 'gestao' ? 'gestão CHARLES' : sessao.perfil}</span>
     <button onClick={sair} className="hover-elevate" style={{ background: 'transparent', color: 'hsl(var(--sidebar-foreground))', border: '1px solid hsl(var(--sidebar-accent))', borderRadius: 'var(--radius-md)', padding: '4px 10px', fontSize: 11.5, cursor: 'pointer', fontFamily: 'var(--app-font-sans)' }}>Sair</button>
    </div>
    <div style={{ fontSize: 11, lineHeight: 1.6, opacity: .55, marginTop: 10 }}>3 pontos · malha WG 10.88.0.0/24<br />via VM01 (jump)</div>
   </div>
  </div>
  <div style={{ flex: 1, minWidth: 0, padding: '24px 28px 28px', boxSizing: 'border-box' }}>
   <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18, flexWrap: 'wrap' }}>
    <h1 style={{ fontFamily: 'var(--app-font-display)', fontWeight: 700, fontSize: 22, margin: 0, flex: '1 1 auto' }}>{rotulo}</h1>
    {tela !== 'visao' ? <PontoMenuA sel={sel} setSel={setSel} /> : null}
   </div>
   <Corpo site={sel[0]} sitesSel={sel} openCmd={setCmd} go={go} />
   <div style={{ marginTop: 22, fontSize: 11.5, color: 'hsl(var(--muted-foreground))' }}>Dados ao vivo dos roteadores via VM01 (malha WG). Escrita executa só na Maria Fernanda (piloto); nos demais pontos, gera comando revisável.</div>
  </div>
  <CmdPainelA cmd={cmd} onClose={() => setCmd(null)} />
 </div>;
}

function limparUrl() {
 try { window.history.replaceState({}, document.title, window.location.pathname); } catch (e) {}
}

window.GestaoApp = GestaoApp;