const SeoViewAi = ({ marca, jobs }) => {
  const { data, err, load } = window.useSeoLoad('/api/marketing/seo/ai-visibility', [marca]);
  const W = window;
  if (err) return <W.SeoError message={err} onRetry={load} />;
  if (!data) return <W.SeoLoading label="A carregar visibilidade AI…" />;
  const rows = data.rows || [];
  if (!rows.length) return <W.SeoMissingSources keys={['dataforseo', 'ga4']} jobs={jobs} title="Ainda não há menções em assistentes AI." />;
  const cited = rows.filter(r => r.mentioned).length;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: 10 }}>
        <W.SeoStat label="Perguntas verificadas" value={W.seoN(rows.length)} />
        <W.SeoStat label="Marca citada" value={W.seoN(cited)} tone={W.SEO_C.ok} />
        <W.SeoStat label="Marca não citada" value={W.seoN(rows.length - cited)} tone={rows.length - cited ? W.SEO_C.warn : undefined} />
      </div>
      <W.SeoCard pad={false}>
        {rows.map(r => (
          <div key={r.id} style={{ padding: '12px 14px', borderBottom: '1px solid var(--border)' }}>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 12, flexWrap: 'wrap' }}>
              <span style={{ fontSize: 11, fontWeight: 650, color: r.mentioned ? W.SEO_C.ok : W.SEO_C.warn }}>{r.mentioned ? 'Citada' : 'Não citada'}</span>
              <span style={{ color: 'var(--text-muted)' }}>{r.platform}</span>
              <span style={{ color: 'var(--text-dim)' }}>{r.domain}</span>
              <span style={{ marginLeft: 'auto', color: 'var(--text-dim)' }}>{W.seoHora(r.checked_at)}</span>
            </div>
            <div style={{ fontSize: 13, marginTop: 6, fontWeight: 550 }}>{r.question}</div>
            {r.cited_url && <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-muted)', marginTop: 4 }}>{r.cited_url}</div>}
            {(r.competitors || []).length > 0 && <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 4 }}>Concorrentes citados: {r.competitors.join(', ')}</div>}
          </div>
        ))}
      </W.SeoCard>
    </div>
  );
};
window.SeoViewAi = SeoViewAi;