// Telas 6 e 7 — E-mails capturados + IoT.
const DSk = window.WiFi_eeb21e;
const { Card: CardK, CardContent: CardContentK, CardHeader: CardHeaderK, CardTitle: CardTitleK, Badge: BadgeK, Button: BtnK, Input: InputK, Label: LabelK } = DSk;
const { GTh: ThK, GTd: TdK, TermoDica: TermoK, BtnMini: BtnMiniK, mkLinha: mkK } = window;

function TelaRegistros({ site, sitesSel }) {
 const list = sitesSel && sitesSel.length ? sitesSel : [site];
 const carga = window.useCarrega(() => window.GestaoAPI.registros(), []);
 const todos = ((carga.dados && carga.dados.registros) || []).map(r => ({
  quando: (r.ts_utc || '').replace('T', ' ').slice(0, 16),
  email: r.email || '-', ponto: r.condominio || r.ponto || '-', origem: r.origem_roteador || r.ip || '-',
 }));
 const rows = todos.filter(r => list.includes(r.ponto));
 const baixarCsv = () => {
  const csv = 'quando,email,ponto,origem\n' + rows.map(r => `${r.quando},${r.email},${r.ponto},${r.origem}`).join('\n');
  const a = document.createElement('a');
  a.href = URL.createObjectURL(new Blob([csv], { type: 'text/csv' }));
  a.download = list.length > 1 ? 'portal-registros.csv' : `portal-registros-${list[0]}.csv`; a.click(); URL.revokeObjectURL(a.href);
 };
 return <div>
  <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 14, flexWrap: 'wrap' }}>
   <BadgeK variant="secondary">{list.length > 1 ? `${rows.length} nos pontos selecionados` : `${rows.length} neste ponto`}</BadgeK>
   <BadgeK variant="secondary">{`${todos.length} no total`}</BadgeK>
   <div style={{ flex: 1 }} />
   <BtnMiniK onClick={baixarCsv}>Baixar CSV</BtnMiniK>
  </div>
  <window.CargaBox carregando={carga.carregando} erro={carga.erro} onTentar={carga.recarrega} linhas={5}>
  <CardK>
   <CardContentK style={{ padding: '4px 8px', overflowX: 'auto' }}>
    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
     <thead><tr><ThK>Quando</ThK><ThK>E-mail</ThK><ThK>Ponto</ThK><ThK>Origem</ThK></tr></thead>
     <tbody>
      {rows.map((r, i) => <tr key={i}>
       <TdK mono>{r.quando}</TdK><TdK>{r.email}</TdK><TdK>{r.ponto}</TdK>
       <TdK mono>{r.origem} <TermoK dica="O docker-proxy reescreve o IP de origem — quem identifica o ponto é o campo enviado pela própria página">(mascarada)</TermoK></TdK>
      </tr>)}
     </tbody>
    </table>
    {!rows.length ? <div style={{ padding: 16, fontSize: 13, color: 'hsl(var(--muted-foreground))' }}>Nenhum registro dos pontos selecionados ainda.</div> : null}
   </CardContentK>
  </CardK>
  </window.CargaBox>
  <div style={{ fontSize: 12, color: 'hsl(var(--muted-foreground))', marginTop: 10, lineHeight: 1.5 }}>A base de contatos pertence ao CORE — este espelho é operacional. Leitura oficial por SSH na VM01: <span style={{ fontFamily: 'var(--app-font-mono)', fontSize: 11.5 }}>sudo tail /opt/charles/wifi-monitor/data/portal/*.jsonl</span></div>
 </div>;
}

function TelaIot({ site }) {
 const carga = window.useCarrega(() => window.GestaoAPI.iot(), []);
 const vistos = ((carga.dados && carga.dados.registros) || []).map(v => ({
  mac: (v.mac || '-').toUpperCase(),
  quando: (v.ts_utc || '').replace('T', ' ').slice(0, 16),
  idioma: v.lang || (Array.isArray(v.langs) ? v.langs[0] : '-') || '-',
  tela: v.tela || '-',
 }));
 const [mac, setMac] = React.useState('');
 const [res, setRes] = React.useState(null);
 const consultar = () => {
  const m = mac.trim().toUpperCase();
  setRes(vistos.find(v => v.mac === m) || { naoVisto: true, mac: m });
 };
 return <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 300px', gap: 16, alignItems: 'start' }}>
  <CardK>
   <CardHeaderK style={{ paddingBottom: 6 }}>
    <CardTitleK as="h2" style={{ fontSize: 16 }}>Avisos IoT vistos</CardTitleK>
    <div style={{ fontSize: 12.5, color: 'hsl(var(--muted-foreground))', marginTop: 2 }}>Aparelhos que abriram a página de aviso da rede IoT — comprovadamente NÃO são IoT (têm tela).</div>
   </CardHeaderK>
   <CardContentK 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><ThK>MAC</ThK><ThK>Visto em</ThK><ThK>Idioma</ThK><ThK>Tela</ThK></tr></thead>
     <tbody>
      {vistos.map((v, i) => <tr key={i}>
       <TdK mono>{v.mac}</TdK><TdK mono>{v.quando}</TdK><TdK>{v.idioma}</TdK><TdK>{v.tela}</TdK>
      </tr>)}
     </tbody>
    </table>
    {!vistos.length ? <div style={{ padding: 16, fontSize: 13, color: 'hsl(var(--muted-foreground))' }}>Nenhum aviso IoT registrado ainda.</div> : null}
    </window.CargaBox>
   </CardContentK>
  </CardK>
  <CardK>
   <CardHeaderK style={{ paddingBottom: 6 }}><CardTitleK as="h2" style={{ fontSize: 16 }}>Consultar MAC</CardTitleK></CardHeaderK>
   <CardContentK style={{ paddingTop: 4 }}>
    <LabelK htmlFor="iot-mac">MAC do aparelho</LabelK>
    <div style={{ height: 6 }} />
    <InputK id="iot-mac" placeholder="AA:BB:CC:DD:EE:FF" value={mac} onChange={e => setMac(e.target.value)} style={{ fontFamily: 'var(--app-font-mono)' }} />
    <div style={{ height: 12 }} />
    <BtnK onClick={consultar} disabled={mac.trim().length < 11} style={{ width: '100%' }}>Consultar</BtnK>
    {res ? <div style={{ marginTop: 14, fontSize: 13, lineHeight: 1.55, background: 'hsl(var(--secondary))', border: '1px solid hsl(var(--border))', borderRadius: 'var(--radius-lg)', padding: '12px 14px' }}>
     {res.naoVisto
      ? <span>Este MAC ainda não abriu o aviso IoT.</span>
      : <span>Visto em {res.quando} ({res.idioma}) · tela {res.tela}.<br />Abriu o aviso → tem navegador, não é IoT.</span>}
    </div> : null}
   </CardContentK>
  </CardK>
 </div>;
}
Object.assign(window, { TelaRegistros, TelaIot });