const SeoViewConteudos = ({ marca }) => {
  const [rows, setRows] = React.useState(null);
  const [camps, setCamps] = React.useState([]);
  const [open, setOpen] = React.useState(null);
  const [campanha, setCampanha] = React.useState('');
  const [err, setErr] = React.useState('');

  const load = () => window.seoFetch('/api/marketing/seo/suggestions').then(d => setRows(d.suggestions || [])).catch(e => setErr(e.message));
  React.useEffect(() => { load(); }, [marca]);
  React.useEffect(() => {
    fetch('/api/marketing/campanhas', { credentials: 'same-origin' })
      .then(r => r.json()).then(d => setCamps(Array.isArray(d) ? d : (d.campanhas || d.rows || []))).catch(() => {});
  }, []);

  const send = () => {
    window.seoFetch('/api/marketing/seo/suggestions/' + open.id + '/send-to-producao', {
      method: 'POST', body: JSON.stringify({ campanha_id: Number(campanha) }),
    }).then(() => { setOpen(null); load(); }).catch(e => setErr(e.message));
  };

  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 conteúdos…</div>;
  if (!rows.length) return <div className="card" style={{ padding: 20, fontSize: 13, color: 'var(--text-muted)' }}>Sem sugestões. O agente cria-as quando uma pesquisa de produto está entre a posição 4 e 20, não tem página, ou a marca não é citada.</div>;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {rows.map(r => (
        <div key={r.id} className="card" style={{ padding: 14 }}>
          <div style={{ display: 'flex', gap: 8, fontSize: 12, alignItems: 'center' }}>
            <span className="badge">{r.trigger}</span>
            <span>{r.tipo === 'website' ? 'Website' : 'Social'}</span>
            <span className="font-mono" style={{ color: 'var(--text-dim)' }}>{r.domain}</span>
            <span style={{ marginLeft: 'auto', color: 'var(--text-dim)' }}>{r.status}</span>
          </div>
          <div style={{ fontSize: 14, fontWeight: 600, marginTop: 6 }}>{r.title || (r.keywords || []).join(', ')}</div>
          <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 4 }}>{r.product_name || 'Sem produto'} · {(r.keywords || []).join(', ')}</div>
          {r.draft && <div style={{ fontSize: 12, marginTop: 8, whiteSpace: 'pre-wrap' }}>{String(r.draft).slice(0, 400)}</div>}
          <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
            {r.status !== 'sent' && <button className="btn btn-xs btn-ai" onClick={() => { setOpen(r); setCampanha(''); }}>Enviar para Produção</button>}
            {r.status !== 'sent' && <button className="btn btn-xs btn-ghost" onClick={() => window.seoFetch('/api/marketing/seo/suggestions/' + r.id + '/reject', { method: 'POST', body: '{}' }).then(load)}>Rejeitar</button>}
            {r.producao_peca_id && <span className="font-mono" style={{ fontSize: 11 }}>Peça #{r.producao_peca_id}</span>}
          </div>
        </div>
      ))}
      {open && (
        <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.35)', display: 'grid', placeItems: 'center', zIndex: 40 }} onClick={() => setOpen(null)}>
          <div className="card" style={{ padding: 16, width: 420, background: 'var(--bg-elev)' }} onClick={e => e.stopPropagation()}>
            <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 8 }}>Escolher campanha</div>
            <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 10 }}>{open.title}</div>
            <select value={campanha} onChange={e => setCampanha(e.target.value)} style={{ width: '100%', padding: 8, marginBottom: 12 }}>
              <option value="">Campanha…</option>
              {camps.map(c => <option key={c.id} value={c.id}>{c.titulo || c.nome || c.name || ('#' + c.id)}</option>)}
            </select>
            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
              <button className="btn btn-xs btn-ghost" onClick={() => setOpen(null)}>Cancelar</button>
              <button className="btn btn-xs btn-ai" disabled={!campanha} onClick={send}>Criar peça</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};
window.SeoViewConteudos = SeoViewConteudos;