// SylenProspec — FLUXO · Campanhas (SerpAPI lead capture)
const { useState: uC, useEffect: eC } = React;
const Cdata = window.SYLEN_DATA;

function Campanhas({ onSelectAudience, config }) {
  const [list, setList] = uC(Cdata.loadCampanhas());
  const [expanded, setExpanded] = uC(null);
  const [creating, setCreating] = uC(false);
  const [newC, setNewC] = uC({ nome: '', destino: '', dataInicio: '', dataFim: '' });
  const [searchState, setSearchState] = uC({}); // {campId: 'idle'|'searching'|'done'}
  const [searchResult, setSearchResult] = uC({}); // {campId: {count, newLeads}}
  const [edits, setEdits] = uC({}); // pending category/region/results edits

  function persist(next) {
    setList(next);
    Cdata.saveCampanhas(next);
  }

  function createCampanha() {
    if (!newC.nome) return;
    const c = {
      id: 'cmp-' + Date.now(),
      nome: newC.nome,
      destino: newC.destino || newC.nome,
      dataInicio: newC.dataInicio,
      dataFim: newC.dataFim,
      categoria: '',
      regiao: newC.destino || '',
      resultados: 20,
      status: 'ativa',
      leadsCaptados: 0,
      lastSearch: null,
    };
    persist([c, ...list]);
    setNewC({ nome: '', destino: '', dataInicio: '', dataFim: '' });
    setCreating(false);
    setExpanded(c.id);
  }

  function toggleStatus(cmp) {
    const next = list.map(c => c.id === cmp.id ? { ...c, status: c.status === 'ativa' ? 'pausada' : 'ativa' } : c);
    persist(next);
  }

  function deleteCampanha(cmp) {
    if (!confirm(`Excluir campanha "${cmp.nome}"?`)) return;
    persist(list.filter(c => c.id !== cmp.id));
  }

  function updateField(cmp, patch) {
    setEdits({ ...edits, [cmp.id]: { ...edits[cmp.id], ...patch } });
  }

  function getField(cmp, k) {
    return (edits[cmp.id] && k in edits[cmp.id]) ? edits[cmp.id][k] : cmp[k];
  }

  function startSearch(cmp) {
    const cat = getField(cmp, 'categoria');
    const reg = getField(cmp, 'regiao');
    const res = +getField(cmp, 'resultados') || 20;
    if (!cat || !reg) return alert('Preencha categoria e região antes da busca.');

    setSearchState({ ...searchState, [cmp.id]: 'searching' });
    setSearchResult({ ...searchResult, [cmp.id]: null });

    const base = config?.integrations?.n8nBaseUrl || '';
    const path = config?.integrations?.webhookSerpapi || '/webhook/cpm-busca-leads';
    const webhookUrl = base ? base.replace(/\/$/, '') + path : '';

    // Se webhook n8n configurado, chama o real. Senão, mocka.
    if (webhookUrl) {
      fetch(webhookUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          campaign_id: cmp.id,
          categoria: cat,
          regiao: reg,
          paginas: res,
        }),
      })
      .then(r => r.json().catch(() => ({})))
      .then(data => {
        const total = data.total ?? data.encontrados ?? res;
        const novos = data.novos ?? Math.floor(total * 0.85);
        const dupes = total - novos;
        setSearchState(s => ({ ...s, [cmp.id]: 'done' }));
        setSearchResult(s => ({ ...s, [cmp.id]: { total, novos, dupes } }));
        persist(list.map(c => c.id === cmp.id ? {
          ...c, categoria: cat, regiao: reg, resultados: res,
          leadsCaptados: c.leadsCaptados + novos,
          lastSearch: new Date().toISOString(),
        } : c));
      })
      .catch(err => {
        console.error(err);
        setSearchState(s => ({ ...s, [cmp.id]: 'idle' }));
        alert('Erro ao chamar webhook n8n: ' + err.message);
      });
      return;
    }

    // Mock fallback
    setTimeout(() => {
      const captured = Math.floor(res * (0.7 + Math.random() * 0.25));
      const dupes = Math.floor(captured * 0.15);
      const novos = captured - dupes;
      setSearchState(s => ({ ...s, [cmp.id]: 'done' }));
      setSearchResult(s => ({ ...s, [cmp.id]: { total: captured, novos, dupes } }));
      persist(list.map(c => c.id === cmp.id ? {
        ...c, categoria: cat, regiao: reg, resultados: res,
        leadsCaptados: c.leadsCaptados + novos,
        lastSearch: new Date().toISOString(),
      } : c));
    }, 2400);
  }

  function formatDate(iso) {
    if (!iso) return '—';
    return new Date(iso).toLocaleDateString('pt-BR', { day: '2-digit', month: 'short', year: '2-digit' });
  }

  return (
    <div className="camp-page">

      {/* HEADER ACTION */}
      <div className="camp-top">
        <div className="mono" style={{ fontSize: 11, color: 'var(--text-muted)' }}>
          {list.length} campanhas · {list.filter(c => c.status === 'ativa').length} ativas
        </div>
        <button className="btn btn-primary" onClick={() => setCreating(!creating)}>
          {creating ? '✕ Cancelar' : '+ Nova campanha'}
        </button>
      </div>

      {/* NEW CAMPAIGN FORM (inline) */}
      {creating && (
        <div className="camp-new">
          <div className="setup-label" style={{ marginBottom: 14, color: 'var(--accent-bright)' }}>
            NOVA CAMPANHA
          </div>
          <div className="camp-new-grid">
            <div className="setup-field">
              <label className="setup-label">Nome da campanha *</label>
              <input
                className="setup-input"
                value={newC.nome}
                onChange={e => setNewC({ ...newC, nome: e.target.value })}
                placeholder="ex: Florianópolis · Junho 2026"
                autoFocus
              />
            </div>
            <div className="setup-field">
              <label className="setup-label">Destino / localização</label>
              <input
                className="setup-input"
                value={newC.destino}
                onChange={e => setNewC({ ...newC, destino: e.target.value })}
                placeholder="ex: Florianópolis, SC"
              />
            </div>
            <div className="setup-field">
              <label className="setup-label">Data início</label>
              <input
                type="date" className="setup-input"
                value={newC.dataInicio}
                onChange={e => setNewC({ ...newC, dataInicio: e.target.value })}
              />
            </div>
            <div className="setup-field">
              <label className="setup-label">Data fim</label>
              <input
                type="date" className="setup-input"
                value={newC.dataFim}
                onChange={e => setNewC({ ...newC, dataFim: e.target.value })}
              />
            </div>
          </div>
          <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
            <button className="btn btn-primary" onClick={createCampanha} disabled={!newC.nome}>
              Criar campanha
            </button>
            <button className="btn btn-ghost" onClick={() => { setCreating(false); setNewC({ nome: '', destino: '', dataInicio: '', dataFim: '' }); }}>
              Cancelar
            </button>
          </div>
        </div>
      )}

      {/* CAMPAIGN LIST */}
      <div className="camp-list">
        {list.map(c => {
          const isOpen = expanded === c.id;
          const sState = searchState[c.id] || 'idle';
          const sRes = searchResult[c.id];
          return (
            <div key={c.id} className={`camp-card ${isOpen ? 'open' : ''}`}>

              {/* HEAD */}
              <div className="camp-card-head" onClick={() => setExpanded(isOpen ? null : c.id)}>
                <div className="camp-card-info">
                  <div className="camp-card-title-row">
                    <div className="camp-card-title">{c.nome}</div>
                    <span className={`camp-status camp-status-${c.status}`}>
                      <span className="camp-status-dot" />
                      {c.status}
                    </span>
                  </div>
                  <div className="camp-card-meta mono">
                    <span>◎ {c.destino}</span>
                    <span>·</span>
                    <span>▦ {formatDate(c.dataInicio)} → {formatDate(c.dataFim)}</span>
                    <span>·</span>
                    <span style={{ color: 'var(--accent-bright)' }}>{c.leadsCaptados} captados</span>
                    {c.lastSearch && (
                      <React.Fragment>
                        <span>·</span>
                        <span>última busca {Cdata.timeAgo(c.lastSearch)}</span>
                      </React.Fragment>
                    )}
                  </div>
                </div>
                <div className="camp-card-actions" onClick={e => e.stopPropagation()}>
                  <button className="btn btn-ghost" onClick={() => toggleStatus(c)} title={c.status === 'ativa' ? 'Pausar' : 'Ativar'}>
                    {c.status === 'ativa' ? '⏸' : '▶'}
                  </button>
                  <button className="btn btn-primary" onClick={() => setExpanded(isOpen ? null : c.id)}>
                    ⌕ Buscar Leads
                  </button>
                </div>
              </div>

              {/* EXPANDED PANEL */}
              {isOpen && (
                <div className="camp-card-body">
                  <div className="camp-search-grid">
                    <div className="setup-field">
                      <label className="setup-label">Categoria</label>
                      <input
                        className="setup-input"
                        value={getField(c, 'categoria')}
                        onChange={e => updateField(c, { categoria: e.target.value })}
                        placeholder="hotéis, pousadas, agências de viagem…"
                      />
                      <div className="setup-hint mono">→ termo de busca SerpAPI</div>
                    </div>
                    <div className="setup-field">
                      <label className="setup-label">Região</label>
                      <input
                        className="setup-input"
                        value={getField(c, 'regiao')}
                        onChange={e => updateField(c, { regiao: e.target.value })}
                        placeholder="Florianópolis, SC"
                      />
                      <div className="setup-hint mono">→ localização da busca</div>
                    </div>
                    <div className="setup-field">
                      <label className="setup-label">Meta de resultados</label>
                      <input
                        type="number" className="setup-input"
                        value={getField(c, 'resultados')}
                        onChange={e => updateField(c, { resultados: e.target.value })}
                        min="1" max="100"
                      />
                      <div className="setup-hint mono">→ máx por busca</div>
                    </div>
                  </div>

                  <div className="camp-search-action">
                    <button
                      className="btn btn-primary camp-search-btn"
                      onClick={() => startSearch(c)}
                      disabled={sState === 'searching'}
                    >
                      {sState === 'searching' ? (
                        <React.Fragment>
                          <span className="spin">◐</span>
                          Buscando no SerpAPI…
                        </React.Fragment>
                      ) : (
                        <React.Fragment>
                          <span style={{ fontFamily: 'var(--font-mono)' }}>⌕</span>
                          Iniciar Busca no SerpAPI
                        </React.Fragment>
                      )}
                    </button>
                    {sState === 'idle' && c.leadsCaptados > 0 && (
                      <div className="camp-search-hint mono">
                        Já captou {c.leadsCaptados} leads nesta campanha
                      </div>
                    )}
                    {!config?.integrations?.n8nBaseUrl && (
                      <div className="camp-search-hint mono" style={{ color: 'var(--warm)' }}>
                        modo demo · configure n8n em Operação → Conexões
                      </div>
                    )}
                  </div>

                  {/* SEARCH RESULT */}
                  {sState === 'searching' && (
                    <div className="camp-search-progress">
                      <div className="camp-search-progress-bar">
                        <div className="camp-search-progress-fill" />
                      </div>
                      <div className="mono" style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 8 }}>
                        Coletando resultados orgânicos · enriquecendo contatos · checando duplicatas…
                      </div>
                    </div>
                  )}
                  {sState === 'done' && sRes && (
                    <div className="camp-search-result">
                      <div className="camp-search-result-h">
                        <span style={{ color: 'var(--ok)', fontSize: 16 }}>✓</span>
                        <span className="mono" style={{ fontSize: 11, color: 'var(--text-muted)' }}>BUSCA CONCLUÍDA</span>
                      </div>
                      <div className="camp-search-result-stats">
                        <div className="csr-stat">
                          <div className="csr-stat-n">{sRes.total}</div>
                          <div className="csr-stat-l mono">total encontrado</div>
                        </div>
                        <div className="csr-stat">
                          <div className="csr-stat-n" style={{ color: 'var(--accent-bright)' }}>+{sRes.novos}</div>
                          <div className="csr-stat-l mono">novos na base</div>
                        </div>
                        <div className="csr-stat">
                          <div className="csr-stat-n" style={{ color: 'var(--text-muted)' }}>{sRes.dupes}</div>
                          <div className="csr-stat-l mono">duplicatas ignoradas</div>
                        </div>
                      </div>
                      <div style={{ display: 'flex', gap: 10, marginTop: 14 }}>
                        <button className="btn btn-primary" onClick={() => onSelectAudience && onSelectAudience(c)}>
                          ▶ Disparar para esses leads
                        </button>
                        <button className="btn btn-ghost">Ver leads captados</button>
                      </div>
                    </div>
                  )}

                  <div className="camp-card-foot">
                    <button className="btn btn-ghost" onClick={() => deleteCampanha(c)} style={{ color: 'var(--text-muted)' }}>
                      ✕ Excluir campanha
                    </button>
                    <div style={{ flex: 1 }} />
                    <div className="mono" style={{ fontSize: 10, color: 'var(--text-muted)' }}>
                      ID: {c.id}
                    </div>
                  </div>
                </div>
              )}
            </div>
          );
        })}

        {list.length === 0 && (
          <div className="camp-empty">
            <div className="display" style={{ fontSize: 22, color: 'var(--text-dim)', marginBottom: 6 }}>
              Nenhuma campanha ainda
            </div>
            <div style={{ color: 'var(--text-muted)', fontSize: 13, marginBottom: 16 }}>
              Crie uma campanha pra definir destino, período e categoria de prospecção.
            </div>
            <button className="btn btn-primary" onClick={() => setCreating(true)}>
              + Criar primeira campanha
            </button>
          </div>
        )}
      </div>

    </div>
  );
}

window.Campanhas = Campanhas;