const SeoViewPesquisas = ({ marca, jobs }) => {
  const { data, err, load } = window.useSeoLoad('/api/marketing/seo/keywords', [marca]);
  const W = window;
  if (err) return <W.SeoError message={err} onRetry={load} />;
  if (!data) return <W.SeoLoading label="A carregar pesquisas…" />;
  const rows = data.keywords || [];
  if (!rows.length) return <W.SeoMissingSources keys={['gsc', 'dataforseo', 'bing']} jobs={jobs} title="Ainda não há pesquisas." />;
  const cols = 'minmax(200px, 1.4fr) minmax(120px, 1fr) 80px 100px 80px minmax(160px, 1fr)';
  return (
    <W.SeoCard pad={false} style={{ overflowX: 'auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: cols, gap: 12, padding: '8px 14px', minWidth: 820, borderBottom: '1px solid var(--border)' }}>
        {['Pesquisa', 'Produto', 'Posição', 'Impressões', 'Volume', 'Página'].map(h => <W.SeoTh key={h}>{h}</W.SeoTh>)}
      </div>
      {rows.map(r => (
        <div key={r.id} style={{ display: 'grid', gridTemplateColumns: cols, gap: 12, padding: '10px 14px', minWidth: 820, fontSize: 12, borderBottom: '1px solid var(--border)', alignItems: 'center' }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 600 }}>{r.keyword}</div>
            <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>{r.domain} · {r.source === 'gsc' ? 'Search Console' : r.source === 'dfs_labs' ? 'DataForSEO' : r.source}</div>
          </div>
          <div style={{ color: 'var(--text-muted)' }}>{r.product_name || '—'}</div>
          <div style={{ fontFamily: 'var(--font-mono)' }}>{r.position != null ? Number(r.position).toLocaleString('pt-PT', { maximumFractionDigits: 1 }) : '—'}</div>
          <div style={{ fontFamily: 'var(--font-mono)' }}>{W.seoN(r.impressions)}</div>
          <div style={{ fontFamily: 'var(--font-mono)' }}>{r.volume ? W.seoN(r.volume) : '—'}</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={r.page || ''}>{r.page || '—'}</div>
        </div>
      ))}
    </W.SeoCard>
  );
};
window.SeoViewPesquisas = SeoViewPesquisas;