const SeoViewPesquisas = ({ marca }) => {
  const [rows, setRows] = React.useState(null);
  const [err, setErr] = React.useState('');
  React.useEffect(() => {
    setRows(null);
    window.seoFetch('/api/marketing/seo/keywords').then(d => setRows(d.keywords || [])).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 pesquisas…</div>;
  if (!rows.length) return <div className="card" style={{ padding: 20, fontSize: 13, color: 'var(--text-muted)' }}>Ainda não há pesquisas. Liga o Search Console ou o DataForSEO e corre um site.</div>;
  return (
    <div className="card" style={{ overflow: 'auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr 80px 80px 70px 1fr', padding: '8px 12px', fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', borderBottom: '1px solid var(--border)' }}>
        <div>Pesquisa</div><div>Produto</div><div>Posição</div><div>Impressões</div><div>Volume</div><div>Página</div>
      </div>
      {rows.map(r => (
        <div key={r.id} style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr 80px 80px 70px 1fr', padding: '8px 12px', fontSize: 12, borderTop: '1px solid var(--border)' }}>
          <div>{r.keyword}<div className="font-mono" style={{ fontSize: 10, color: 'var(--text-dim)' }}>{r.domain} · {r.source}</div></div>
          <div>{r.product_name || '—'}</div>
          <div className="font-mono">{r.position != null ? Number(r.position).toFixed(1) : '—'}</div>
          <div className="font-mono">{r.impressions || 0}</div>
          <div className="font-mono">{r.volume || '—'}</div>
          <div className="font-mono" style={{ fontSize: 11, overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.page || '—'}</div>
        </div>
      ))}
    </div>
  );
};
window.SeoViewPesquisas = SeoViewPesquisas;