// Tela 1 — Visão geral dos pontos.
const DSv = window.WiFi_eeb21e;
const { Card: CardV, CardContent: CardContentV, Badge: BadgeV, Separator: SepV } = DSv;
const { Dot: DotV, BtnMini: BtnMiniV, TermoDica: TermoV } = window;

function KV({ k, children }) {
 return <div style={{ display: 'flex', gap: 10, fontSize: 13, lineHeight: 1.5 }}>
  <div style={{ width: 92, flex: 'none', color: 'hsl(var(--muted-foreground))' }}>{k}</div>
  <div style={{ minWidth: 0 }}>{children}</div>
 </div>;
}

function TelaVisaoGeral({ go }) {
 const { dados, carregando, erro, recarrega } = window.useCarrega(() => window.GestaoAPI.visao(), []);
 const meta = window.GESTAO_META;
 return <window.CargaBox carregando={carregando} erro={erro} onTentar={recarrega} linhas={3}>
  {(() => {
  const sites = (dados && dados.sites) || {};
  return <div>
  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(320px,1fr))', gap: 16 }}>
   {Object.keys(meta).map(slug => {
    const s = { ...meta[slug], ...(sites[slug] || {}) };
    const devices = s.devices || [];
    const online = devices.filter(d => d.status === 'online').length;
    const geral = s.status || (devices.length && online === devices.length ? 'online' : 'aviso');
    return <CardV key={slug}>
     <CardContentV style={{ padding: 18 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
       <div style={{ fontFamily: 'var(--app-font-display)', fontWeight: 700, fontSize: 17, flex: 1, minWidth: 0 }}>{s.label}</div>
       <BadgeV variant="secondary">{s.tipo}</BadgeV>
       <DotV s={geral} />
      </div>
      <div style={{ fontSize: 12, color: 'hsl(var(--muted-foreground))', fontFamily: 'var(--app-font-mono)', marginTop: 2 }}>{s.host} · {s.hw}</div>
      <SepV style={{ margin: '12px 0' }} />
      <div style={{ display: 'grid', gap: 6 }}>
       <KV k="Roteadores">{`${online}/${devices.length} online`}</KV>
       <KV k="Clientes">{s.clientes != null ? `${s.clientes} agora` : '—'}</KV>
       <KV k="Rede">{s.rede}</KV>
       <KV k="Portal">{(s.portal || {}).tipo === 'charles'
        ? <span style={{ display: 'inline-flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}><BadgeV>Portal CHARLES</BadgeV><span style={{ fontSize: 12, color: 'hsl(var(--muted-foreground))' }}>{s.portal.nota}</span></span>
        : <span style={{ display: 'inline-flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}><BadgeV variant="progress">migração pendente</BadgeV><span style={{ fontSize: 12, color: 'hsl(var(--muted-foreground))' }}>{s.portal.nota}</span></span>}</KV>
      </div>
      <SepV style={{ margin: '12px 0' }} />
      <div style={{ display: 'grid', gap: 8 }}>
       {devices.map((d, i) => <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 8, fontSize: 12.5 }}>
        <DotV s={d.status} />
        <span style={{ fontWeight: 600 }}>{d.nome}</span>
        <span style={{ fontFamily: 'var(--app-font-mono)', color: 'hsl(var(--muted-foreground))', fontSize: 11.5 }}>{d.host}</span>
        <span style={{ color: 'hsl(var(--muted-foreground))', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 }}>{d.linha}</span>
       </div>)}
      </div>
      <div style={{ marginTop: 14, display: 'flex', gap: 8 }}>
       <BtnMiniV onClick={() => go('inventario', slug)}>Dispositivos</BtnMiniV>
       <BtnMiniV onClick={() => go('listabranca', slug)}>Lista branca</BtnMiniV>
       <BtnMiniV onClick={() => go('ssids', slug)}>SSIDs</BtnMiniV>
      </div>
     </CardContentV>
    </CardV>;
   })}
  </div>
 </div>;
  })()}
 </window.CargaBox>;
}
window.TelaVisaoGeral = TelaVisaoGeral;