const SeoViewAi = ({ marca }) => {
  const [rows, setRows] = React.useState(null);
  const [err, setErr] = React.useState('');
  React.useEffect(() => {
    setRows(null);
    window.seoFetch('/api/marketing/seo/ai-visibility').then(d => setRows(d.rows || [])).catch(e => setErr(e.message));
  }, [marca]);
  if (err) return <div style={{ color: 'var(--danger)', fontSize: 13 }}>{err}</div>;
  if (!rows) return <div style={{ color: 'var(--text-muted)', fontSize: 13 }}>A carregar visibilidade…</div>;
  if (!rows.length) return <div className="card" style={{ padding: 20, fontSize: 13, color: 'var(--text-muted)' }}>Ainda não há menções. Liga o DataForSEO e corre um site.</div>;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {rows.map(r => (
        <div key={r.id} className="card" style={{ padding: 12 }}>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center', fontSize: 12 }}>
            <span className="badge" style={{ background: r.mentioned ? 'var(--success)' : 'var(--warning)', color: '#fff' }}>{r.mentioned ? 'Citada' : 'Não citada'}</span>
            <span className="font-mono">{r.platform}</span>
            <span style={{ color: 'var(--text-dim)' }}>{r.domain}</span>
          </div>
          <div style={{ fontSize: 13, marginTop: 6 }}>{r.question}</div>
          {r.cited_url && <div className="font-mono" style={{ 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: {r.competitors.join(', ')}</div>}
        </div>
      ))}
    </div>
  );
};
window.SeoViewAi = SeoViewAi;