// Telas 4 e 5 — SSIDs & bridges + Telas do portal.
const DSr = window.WiFi_eeb21e;
const { Card: CardR, CardContent: CardContentR, CardHeader: CardHeaderR, CardTitle: CardTitleR, Badge: BadgeR, Button: BtnR, Input: InputR, Label: LabelR, Separator: SepR } = DSr;
const { GTh: ThR, GTd: TdR, BtnMini: BtnMiniR, TermoDica: TermoR, SelectG: SelR, mkLinha: mkR, slugSsid, Dot: DotR } = window;

function TelaSsids({ site, sitesSel, openCmd }) {
 const meta = window.GESTAO_META;
 const list = sitesSel && sitesSel.length ? sitesSel : [site];
 const multi = list.length > 1;
 const [alvo, setAlvo] = React.useState(list[0]);
 React.useEffect(() => setAlvo(a => list.includes(a) ? a : list[0]), [list.join(',')]);
 const s = meta[alvo];
 const carga = window.useCarrega(() => Promise.all(list.map(k => window.GestaoAPI.ssids(k)
   .then(r => (r.ssids || []).map(c => ({ ...c, __k: k, __rot: meta[k].label })))))
   .then(a => a.flat()), [list.join(',')]);
 const vRows = carga.dados || [];
 const qcom = s.stack === 'qcom';
 const temAcao = multi ? vRows.some(x => meta[x.__k].stack !== 'qcom') : !qcom;
 const [nome, setNome] = React.useState('');
 const [banda, setBanda] = React.useState('2ghz');
 const [seg, setSeg] = React.useState('portal');
 const criar = () => {
  const cfg = 'cfg-' + slugSsid(nome);
  const linhas = qcom
   ? [mkR(s.alvo, `/interface wifi configuration add name=${cfg} ssid="${nome}"${seg === 'wpa2' ? ' security.authentication-types=wpa2-psk security.passphrase="TROCAR-SENHA"' : ''}`),
      mkR(s.alvo, `/interface wifi provisioning print`)]
   : [mkR(s.alvo, `/caps-man configuration add name=${cfg} ssid="${nome}" datapath.bridge=${s.bridge.replace(' (inline)', '')}${banda === '5ghz' ? ' channel.band=5ghz-ac' : ' channel.band=2ghz-g/n'}${seg === 'wpa2' ? ' security.authentication-types=wpa2-psk security.passphrase="TROCAR-SENHA"' : ''}`),
      mkR(s.alvo, `/caps-man provisioning print detail`)];
  openCmd({
   titulo: 'Criar SSID', alvo: s.alvo, slug: alvo, acao: 'ssid-add', onSucesso: () => carga.recarrega(),
   nome, banda, seg, cfg, stack: s.stack, bridge: s.bridge, linhas,
   nota: qcom
    ? 'Ponto wifi-qcom: depois de criar a configuration, vincule na provisioning (segunda linha lista as regras). SSID aberto cai no portal do hotspot da bridge.'
    : 'Molde do playbook: a config nasce apontando para a bridge do hotspot — nada de bridge nova. Vincule na regra de provisioning existente (segunda linha lista).'
  });
 };
 const trocarBridge = c => { const sc = meta[c.__k]; const destino = c.__k === 'habibi' ? 'Bridge_Hotspot' : 'dp-bridge-hotspot'; openCmd({
  titulo: 'Trocar bridge do SSID', alvo: sc.alvo, slug: c.__k, acao: 'ssid-bridge', cfg: c.cfg, bridge: destino, onSucesso: () => carga.recarrega(),
  linhas: [mkR(sc.alvo, c.__k === 'habibi' ? `/caps-man configuration set ${c.cfg} datapath.bridge=Bridge_Hotspot` : `/caps-man configuration set ${c.cfg} datapath=dp-bridge-hotspot`)],
  nota: 'É o comando do swap validado em produção — o servidor confere se a bridge destino tem DHCP ativo antes de aplicar. Rollback: trocar o valor de volta.'
 }); };
 return <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 300px', gap: 16, alignItems: 'start' }}>
  <CardR>
   <CardHeaderR style={{ paddingBottom: 6 }}>
    <CardTitleR as="h2" style={{ fontSize: 16 }}>{multi ? 'SSIDs — pontos selecionados' : `SSIDs — ${s.label}`}</CardTitleR>
    <div style={{ fontSize: 12.5, color: 'hsl(var(--muted-foreground))', marginTop: 2 }}>{multi ? <span>Pilha por ponto: <TermoR dica="Controlador central de APs do RouterOS — os CAPs herdam as configurations">CAPsMAN v1</TermoR> nos condomínios · <TermoR dica="WiFi nativo do RouterOS 7 no hAP ax³ — comandos /interface wifi">wifi-qcom</TermoR> no Campo Gás</span> : qcom ? <span>Pilha <TermoR dica="WiFi nativo do RouterOS 7 no hAP ax³ — comandos /interface wifi">wifi-qcom</TermoR> — sem CAPsMAN</span> : <span>Pilha <TermoR dica="Controlador central de APs do RouterOS — os CAPs herdam as configurations">CAPsMAN v1</TermoR> — datapath aponta a bridge</span>}</div>
   </CardHeaderR>
   <CardContentR style={{ paddingTop: 0, overflowX: 'auto' }}>
    <window.CargaBox carregando={carga.carregando} erro={carga.erro} onTentar={carga.recarrega} linhas={4}>
    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
     <thead><tr>{multi ? <ThR>Ponto</ThR> : null}<ThR>Configuration</ThR><ThR>SSID</ThR><ThR>Destino (datapath)</ThR>{temAcao ? <ThR>Ação</ThR> : null}</tr></thead>
     <tbody>
      {vRows.map((c) => <tr key={c.__k + c.cfg}>
       {multi ? <TdR>{c.__rot}</TdR> : null}
       <TdR mono>{c.cfg}</TdR><TdR><span style={{ fontWeight: 600 }}>{c.ssid}</span></TdR><TdR mono>{c.datapath || '-'}</TdR>
       {temAcao ? <TdR>{meta[c.__k].stack !== 'qcom' ? <BtnMiniR onClick={() => trocarBridge(c)}>Trocar bridge</BtnMiniR> : null}</TdR> : null}
      </tr>)}
     </tbody>
    </table>
    </window.CargaBox>
   </CardContentR>
  </CardR>
  <CardR>
   <CardHeaderR style={{ paddingBottom: 6 }}><CardTitleR as="h2" style={{ fontSize: 16 }}>Criar SSID</CardTitleR></CardHeaderR>
   <CardContentR style={{ paddingTop: 4 }}>
    {multi ? <div style={{ marginBottom: 12 }}>
     <LabelR htmlFor="ss-ponto">Ponto de destino</LabelR>
     <div style={{ height: 6 }} />
     <SelR id="ss-ponto" value={alvo} onChange={e => setAlvo(e.target.value)}>{list.map(k => <option key={k} value={k}>{dados[k].label}</option>)}</SelR>
    </div> : null}
    <LabelR htmlFor="ss-nome">Nome da rede</LabelR>
    <div style={{ height: 6 }} />
    <InputR id="ss-nome" placeholder="ex.: CHARLES Eventos" value={nome} onChange={e => setNome(e.target.value)} />
    <div style={{ height: 12 }} />
    <LabelR htmlFor="ss-banda">Banda</LabelR>
    <div style={{ height: 6 }} />
    <SelR id="ss-banda" value={banda} onChange={e => setBanda(e.target.value)}>
     <option value="2ghz">2.4 GHz — alcance</option>
     <option value="5ghz">5 GHz — velocidade</option>
    </SelR>
    <div style={{ height: 12 }} />
    <LabelR htmlFor="ss-seg">Segurança</LabelR>
    <div style={{ height: 6 }} />
    <SelR id="ss-seg" value={seg} onChange={e => setSeg(e.target.value)}>
     <option value="portal">Aberta — cai no portal</option>
     <option value="wpa2">WPA2 com senha</option>
    </SelR>
    <div style={{ height: 12 }} />
    <div style={{ fontSize: 12, color: 'hsl(var(--muted-foreground))', lineHeight: 1.5, marginBottom: 12 }}>{`Destino fixo: ${s.bridge}. Regra do playbook: nada de bridge, DHCP ou rede nova.`}</div>
    <BtnR disabled={nome.trim().length < 3} onClick={criar} style={{ width: '100%' }}>Gerar comando</BtnR>
   </CardContentR>
  </CardR>
 </div>;
}

function TelaTelasPortal({ site, sitesSel, openCmd }) {
 const dados = window.GESTAO_META;
 const list = sitesSel && sitesSel.length ? sitesSel : [site];
 const multi = list.length > 1;
 const [alvo, setAlvo] = React.useState(list[0]);
 React.useEffect(() => setAlvo(a => list.includes(a) ? a : list[0]), [list.join(',')]);
 const tp = window.GESTAO_TELAS_PORTAL;
 const v0 = tp.venues[alvo];
 const [nome, setNome] = React.useState(v0.nome);
 const [mark, setMark] = React.useState(v0.mark);
 const [sub, setSub] = React.useState(v0.sub);
 const [cores, setCores] = React.useState(v0.cores);
 React.useEffect(() => { const v = tp.venues[alvo]; setNome(v.nome); setMark(v.mark); setSub(v.sub); setCores(v.cores); }, [alvo]);
 const publicar = () => openCmd({
  titulo: 'Gerar e publicar telas do portal', alvo: alvo,
  linhas: ['app/.venv/bin/python ops/gera_telas.py', `app/.venv/bin/python ops/upload_telas.py ${alvo}`, mkR(alvo, '/file print where name~"hotspot-charles"')],
  nota: 'gera_telas.py aplica nome, inicial, subtítulo e PONTO por cima da base; upload sobe os 10 arquivos para flash/hotspot-charles/. Páginas autocontidas: nada externo carrega antes do login. A terceira linha confere os arquivos na flash.'
 });
 const cor = (k, rot) => <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
  <input type="color" value={cores[k]} onChange={e => setCores({ ...cores, [k]: e.target.value })} aria-label={rot} style={{ width: 34, height: 28, border: '1px solid hsl(var(--border))', borderRadius: 6, padding: 1, background: 'hsl(var(--card))', cursor: 'pointer' }} />
  <div style={{ fontSize: 12.5 }}>{rot}<div style={{ fontFamily: 'var(--app-font-mono)', fontSize: 11, color: 'hsl(var(--muted-foreground))' }}>{cores[k]}</div></div>
 </div>;
 return <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 320px', gap: 16, alignItems: 'start' }}>
  <CardR>
   <CardHeaderR style={{ paddingBottom: 6 }}><CardTitleR as="h2" style={{ fontSize: 16 }}>{`Branding do ponto — ${dados[alvo].label}`}</CardTitleR></CardHeaderR>
   <CardContentR style={{ paddingTop: 4 }}>
    {multi ? <div style={{ marginBottom: 12 }}>
     <LabelR htmlFor="tp-ponto">Editar ponto</LabelR>
     <div style={{ height: 6 }} />
     <SelR id="tp-ponto" value={alvo} onChange={e => setAlvo(e.target.value)}>{list.map(k => <option key={k} value={k}>{dados[k].label}</option>)}</SelR>
    </div> : null}
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 110px', gap: 12 }}>
     <div><LabelR htmlFor="tp-nome">Nome do ponto</LabelR><div style={{ height: 6 }} /><InputR id="tp-nome" value={nome} onChange={e => setNome(e.target.value)} /></div>
     <div><LabelR htmlFor="tp-mark">Inicial</LabelR><div style={{ height: 6 }} /><InputR id="tp-mark" value={mark} maxLength={2} onChange={e => setMark(e.target.value.toUpperCase())} /></div>
    </div>
    <div style={{ height: 12 }} />
    <LabelR htmlFor="tp-sub">Subtítulo</LabelR>
    <div style={{ height: 6 }} />
    <InputR id="tp-sub" value={sub} onChange={e => setSub(e.target.value)} />
    <div style={{ height: 14 }} />
    <div style={{ display: 'flex', gap: 18, flexWrap: 'wrap' }}>{cor('acao', 'Ação')}{cor('fundo', 'Fundo')}{cor('texto', 'Texto')}</div>
    <SepR style={{ margin: '14px 0' }} />
    <div style={{ fontSize: 12.5, color: 'hsl(var(--muted-foreground))', lineHeight: 1.5 }}>Arquivos publicados ({tp.arquivos.length}):</div>
    <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 8 }}>
     {tp.arquivos.map(a => <span key={a} style={{ fontFamily: 'var(--app-font-mono)', fontSize: 11, background: 'hsl(var(--secondary))', border: '1px solid hsl(var(--border))', borderRadius: 6, padding: '3px 8px' }}>{a}</span>)}
    </div>
    <div style={{ marginTop: 16 }}><BtnR onClick={publicar}>Gerar + publicar</BtnR></div>
   </CardContentR>
  </CardR>
  <div>
   <div style={{ fontSize: 12, color: 'hsl(var(--muted-foreground))', marginBottom: 8, fontWeight: 600 }}>Prévia do login (na flash do roteador)</div>
   <div style={{ background: cores.fundo, border: '1px solid hsl(var(--border))', borderRadius: 'var(--radius-xl)', padding: 22, boxShadow: 'var(--shadow-sm)' }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
     <div style={{ width: 40, height: 40, borderRadius: 9999, background: cores.acao, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--app-font-display)', fontWeight: 800, fontSize: 15 }}>{mark || '?'}</div>
     <div><div style={{ fontFamily: 'var(--app-font-display)', fontWeight: 700, fontSize: 16, color: cores.texto }}>{nome || '—'}</div><div style={{ fontSize: 12, color: cores.texto, opacity: .6 }}>{sub}</div></div>
    </div>
    <div style={{ marginTop: 16, fontSize: 12.5, color: cores.texto, opacity: .8 }}>Informe seu e-mail para conectar:</div>
    <div style={{ marginTop: 8, background: '#FFFDF8', border: '1px solid hsl(var(--border))', borderRadius: 8, padding: '9px 12px', fontSize: 13, color: cores.texto, opacity: .55 }}>voce@email.com.br</div>
    <div style={{ marginTop: 10, background: cores.acao, color: '#fff', borderRadius: 8, padding: '10px 12px', fontSize: 14, fontWeight: 700, textAlign: 'center' }}>Conectar</div>
   </div>
   <div style={{ fontSize: 11.5, color: 'hsl(var(--muted-foreground))', marginTop: 8, lineHeight: 1.5 }}>Autenticação local no roteador (<TermoR dica="Senha nunca viaja em claro: o navegador envia um resumo MD5 com o desafio do roteador">CHAP</TermoR> + fallback), reconexão por cookie de 3 dias.</div>
  </div>
 </div>;
}
Object.assign(window, { TelaSsids, TelaTelasPortal });