// SylenProspec — FLUXO · Operação (Setup) screen
// Makes the CRM template/white-label ready.
const { useState: uS, useEffect: eS } = React;
const D = window.SYLEN_DATA;

function Operacao({ config, setConfig }) {
  const [draft, setDraft] = uS(config);
  const [savedAt, setSavedAt] = uS(null);

  const current = D.PRESETS.find(p => p.id === draft.preset) || D.PRESETS[0];

  function applyPreset(id) {
    const p = D.PRESETS.find(x => x.id === id);
    if (!p) return;
    setDraft({ ...draft, preset: id, pitch: p.pitch });
  }

  function toggleChannel(k) {
    setDraft({ ...draft, channels: { ...draft.channels, [k]: !draft.channels[k] } });
  }

  function setWeight(k, v) {
    setDraft({ ...draft, scoreWeights: { ...draft.scoreWeights, [k]: v } });
  }

  function save() {
    D.saveConfig(draft);
    setConfig(draft);
    setSavedAt(Date.now());
    setTimeout(() => setSavedAt(null), 2500);
  }

  function reset() {
    setDraft(D.DEFAULT_CONFIG);
  }

  const channelsList = [
    { id: 'wpp',      l: 'WhatsApp',  d: 'Via WhatsApp Business API ou Z-API' },
    { id: 'email',    l: 'E-mail',    d: 'SMTP, SES, Resend' },
    { id: 'ig',       l: 'Instagram DM', d: 'Via Instagram Graph API' },
    { id: 'linkedin', l: 'LinkedIn',  d: 'Connection requests + InMail' },
    { id: 'x',        l: 'X / Twitter DM', d: 'Via Twitter API v2' },
  ];

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

      {/* INTRO */}
      <div className="setup-intro">
        <div className="setup-intro-l">
          <div className="setup-tag mono">SETUP DA OPERAÇÃO</div>
          <h2 className="setup-h">
            Configure o SylenProspec pro <span style={{ color: 'var(--accent-bright)' }}>seu negócio</span>
          </h2>
          <p className="setup-p">
            O SylenProspec é o CRM da Sylen AI, mas serve qualquer operação de prospecção.
            Comece de um modelo pronto, ajuste os segmentos da sua audiência, defina seus canais
            e ative os estágios do seu funil. Tudo aqui fica salvo localmente e propaga pro resto da app.
          </p>
        </div>
        <div className="setup-intro-r">
          <div className="setup-state">
            <div className="setup-state-row">
              <span className="mono">PRESET</span>
              <span>{current.label}</span>
            </div>
            <div className="setup-state-row">
              <span className="mono">CANAIS</span>
              <span>{Object.values(draft.channels).filter(Boolean).length} ativos</span>
            </div>
            <div className="setup-state-row">
              <span className="mono">PIPELINE</span>
              <span>{draft.pipeline.length} estágios</span>
            </div>
            <div className="setup-state-row">
              <span className="mono">RITMO</span>
              <span>{draft.pacing.perMinute}/min</span>
            </div>
          </div>
        </div>
      </div>

      {/* PRESETS */}
      <div className="setup-section">
        <div className="setup-sec-h">
          <div className="setup-sec-t">Modelo de operação</div>
          <div className="setup-sec-d">Comece de um preset pronto. Você pode customizar tudo depois.</div>
        </div>
        <div className="preset-grid">
          {D.PRESETS.map(p => (
            <div
              key={p.id}
              className={`preset-card ${draft.preset === p.id ? 'on' : ''}`}
              onClick={() => applyPreset(p.id)}
            >
              <div className="preset-card-h">
                <div className="preset-card-t">{p.label}</div>
                {draft.preset === p.id && <span className="preset-check">✓</span>}
              </div>
              <div className="preset-card-tag mono">{p.tag}</div>
              <div className="preset-card-segs">
                {p.segments.map(s => (
                  <span key={s.id} className="preset-card-chip">{s.label}</span>
                ))}
              </div>
            </div>
          ))}
          <div className="preset-card preset-custom">
            <div className="preset-card-h">
              <div className="preset-card-t">Personalizado</div>
            </div>
            <div className="preset-card-tag mono">Comece do zero</div>
            <div className="preset-card-segs">
              <span className="preset-card-chip dashed">+ adicione segmentos</span>
            </div>
          </div>
        </div>
      </div>

      {/* IDENTIDADE */}
      <div className="setup-section">
        <div className="setup-sec-h">
          <div className="setup-sec-t">Identidade da operação</div>
          <div className="setup-sec-d">Aparece em todos os templates como variáveis e no header do app.</div>
        </div>
        <div className="setup-grid-2">
          <div className="setup-field">
            <label className="setup-label">Nome do seu negócio</label>
            <input
              className="setup-input"
              value={draft.operationName}
              onChange={e => setDraft({ ...draft, operationName: e.target.value })}
              placeholder="ex: Sylen AI"
            />
            <div className="setup-hint mono">→ substitui {`{{minha_empresa}}`} nos templates</div>
          </div>
          <div className="setup-field">
            <label className="setup-label">Pitch em 1 linha</label>
            <input
              className="setup-input"
              value={draft.pitch}
              onChange={e => setDraft({ ...draft, pitch: e.target.value })}
              placeholder="O que você ajuda o cliente a alcançar?"
            />
            <div className="setup-hint mono">→ usado como abertura das sequências</div>
          </div>
        </div>
      </div>

      {/* SEGMENTOS */}
      <div className="setup-section">
        <div className="setup-sec-h">
          <div className="setup-sec-t">Segmentos da minha audiência</div>
          <div className="setup-sec-d">Quem você prospecta. Vira filtro em tudo: pipeline, lista, composer.</div>
        </div>
        <div className="seg-edit-list">
          {current.segments.map(s => (
            <div key={s.id} className="seg-edit-row">
              <div className="seg-edit-short mono">{s.short}</div>
              <input className="setup-input setup-input-flex" defaultValue={s.label} />
              <button className="seg-edit-del" title="Remover">✕</button>
            </div>
          ))}
          <button className="seg-edit-add">+ Adicionar segmento</button>
        </div>
      </div>

      {/* CANAIS */}
      <div className="setup-section">
        <div className="setup-sec-h">
          <div className="setup-sec-t">Canais de prospecção</div>
          <div className="setup-sec-d">Onde você fala com seus leads. Cada canal aparece na cadência.</div>
        </div>
        <div className="channel-grid">
          {channelsList.map(c => (
            <div
              key={c.id}
              className={`channel-card ${draft.channels[c.id] ? 'on' : ''}`}
              onClick={() => toggleChannel(c.id)}
            >
              <div className="channel-card-h">
                <div className="channel-card-t">{c.l}</div>
                <div className={`channel-toggle ${draft.channels[c.id] ? 'on' : ''}`}>
                  <div className="channel-toggle-dot" />
                </div>
              </div>
              <div className="channel-card-d">{c.d}</div>
            </div>
          ))}
        </div>
      </div>

      {/* PIPELINE */}
      <div className="setup-section">
        <div className="setup-sec-h">
          <div className="setup-sec-t">Estágios do funil</div>
          <div className="setup-sec-d">A ordem que aparece no Pipeline. Arraste pra reordenar (em breve).</div>
        </div>
        <div className="pipe-stages">
          {draft.pipeline.map((sid, i) => {
            const s = D.STATUSES.find(x => x.id === sid);
            if (!s) return null;
            return (
              <div key={sid} className={`pipe-stage ${s.group}`}>
                <span className="pipe-stage-n mono">{String(i + 1).padStart(2, '0')}</span>
                <span className="pipe-stage-l">{s.label}</span>
                <span className="pipe-stage-tag mono">{s.col}</span>
              </div>
            );
          })}
        </div>
        <div className="setup-hint mono" style={{ marginTop: 12 }}>
          → presets prontos: SDR Clássico · Enterprise B2B · Inbound &nbsp;&nbsp;(em breve)
        </div>
      </div>

      {/* SCORE WEIGHTS */}
      <div className="setup-section">
        <div className="setup-sec-h">
          <div className="setup-sec-t">Pesos do score de temperatura</div>
          <div className="setup-sec-d">Como o SylenProspec calcula se o lead é "quente". 0-100 total.</div>
        </div>
        <div className="weights-grid">
          {[
            { k: 'resposta',  l: 'Lead respondeu', d: 'Sinal mais forte' },
            { k: 'abertura',  l: 'Abriu / visualizou', d: 'Sinal médio' },
            { k: 'ticket',    l: 'Compatível c/ ticket', d: 'Fit comercial' },
            { k: 'recencia',  l: 'Recência da atividade', d: 'Quanto mais recente, melhor' },
          ].map(w => (
            <div key={w.k} className="weight-row">
              <div className="weight-l">
                <div className="weight-name">{w.l}</div>
                <div className="weight-d mono">{w.d}</div>
              </div>
              <div className="weight-r">
                <input
                  type="range" min="0" max="100"
                  value={draft.scoreWeights[w.k]}
                  onChange={e => setWeight(w.k, +e.target.value)}
                  className="weight-slider"
                />
                <span className="weight-val mono">{draft.scoreWeights[w.k]}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* CONEXÕES — Supabase + n8n webhooks (mesmas do projeto antigo) */}
      <div className="setup-section">
        <div className="setup-sec-h">
          <div className="setup-sec-t">Conexões · backend e automação</div>
          <div className="setup-sec-d">
            Suas integrações do projeto antigo continuam aqui. Preencha pra trocar o modo demo pelo banco real e fluxos n8n.
            Sem isso o CRM roda em modo demo com dados de exemplo.
          </div>
        </div>

        <div className="setup-conn-grid">
          <div className="setup-conn-card">
            <div className="setup-conn-h">
              <span className="setup-conn-t">Supabase</span>
              <span className={`setup-conn-pill ${draft.integrations?.supabaseUrl ? 'on' : ''}`}>
                {draft.integrations?.supabaseUrl ? 'CONFIGURADO' : 'DESCONECTADO'}
              </span>
            </div>
            <div className="setup-conn-d mono">
              Tabelas leads · mensagens_enviadas · notificacoes · Realtime ON
            </div>
            <div className="setup-field" style={{ marginTop: 10 }}>
              <label className="setup-label">URL do projeto</label>
              <input
                className="setup-input"
                value={draft.integrations?.supabaseUrl || ''}
                onChange={e => setDraft({ ...draft, integrations: { ...draft.integrations, supabaseUrl: e.target.value } })}
                placeholder="https://xxxxxxxx.supabase.co"
              />
            </div>
            <div className="setup-field" style={{ marginTop: 10 }}>
              <label className="setup-label">Chave de API (service_role recomendado)</label>
              <input
                type="password" className="setup-input"
                value={draft.integrations?.supabaseAnonKey || ''}
                onChange={e => setDraft({ ...draft, integrations: { ...draft.integrations, supabaseAnonKey: e.target.value } })}
                placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9…"
              />
              <div className="setup-hint mono">→ use service_role key para ler e escrever sem restrição de RLS</div>
            </div>
          </div>

          <div className="setup-conn-card">
            <div className="setup-conn-h">
              <span className="setup-conn-t">n8n · webhooks</span>
              <span className={`setup-conn-pill ${draft.integrations?.n8nBaseUrl ? 'on' : ''}`}>
                {draft.integrations?.n8nBaseUrl ? 'CONFIGURADO' : 'DESCONECTADO'}
              </span>
            </div>
            <div className="setup-conn-d mono">
              CPM-01 SerpAPI · CPM-02 E-mail · CPM-03 WPP · CPM-04 Instagram
            </div>
            <div className="setup-field" style={{ marginTop: 10 }}>
              <label className="setup-label">Base URL n8n</label>
              <input
                className="setup-input"
                value={draft.integrations?.n8nBaseUrl || ''}
                onChange={e => setDraft({ ...draft, integrations: { ...draft.integrations, n8nBaseUrl: e.target.value } })}
                placeholder="https://n8n.seu-dominio.easypanel.host"
              />
              <div className="setup-hint mono">→ paths abaixo são acoplados a essa base</div>
            </div>
            <div className="setup-field" style={{ marginTop: 10 }}>
              <label className="setup-label">Path · CPM-01 Busca SerpAPI</label>
              <input
                className="setup-input"
                value={draft.integrations?.webhookSerpapi || ''}
                onChange={e => setDraft({ ...draft, integrations: { ...draft.integrations, webhookSerpapi: e.target.value } })}
                placeholder="/webhook/cpm-busca-leads"
              />
            </div>
            <div className="setup-field" style={{ marginTop: 10 }}>
              <label className="setup-label">Path · CPM-02 Disparo E-mail</label>
              <input
                className="setup-input"
                value={draft.integrations?.webhookDisparoEmail || ''}
                onChange={e => setDraft({ ...draft, integrations: { ...draft.integrations, webhookDisparoEmail: e.target.value } })}
                placeholder="/webhook/cpm-disparo-email"
              />
            </div>
            <div className="setup-field" style={{ marginTop: 10 }}>
              <label className="setup-label">Path · CPM-03 Disparo WhatsApp</label>
              <input
                className="setup-input"
                value={draft.integrations?.webhookDisparoWpp || ''}
                onChange={e => setDraft({ ...draft, integrations: { ...draft.integrations, webhookDisparoWpp: e.target.value } })}
                placeholder="/webhook/cpm-disparo-wpp"
              />
            </div>
            <div className="setup-field" style={{ marginTop: 10 }}>
              <label className="setup-label">Path · CPM-04 Disparo Instagram</label>
              <input
                className="setup-input"
                value={draft.integrations?.webhookDisparoInstagram || ''}
                onChange={e => setDraft({ ...draft, integrations: { ...draft.integrations, webhookDisparoInstagram: e.target.value } })}
                placeholder="/webhook/cpm-disparo-instagram"
              />
            </div>
          </div>
        </div>

        <div className="setup-conn-note mono">
          → Estas credenciais ficam salvas localmente no navegador (mesmo padrão do projeto antigo).<br />
          → Não configurar = modo demo com dados de exemplo (não quebra nada).
        </div>
      </div>

      {/* PACING */}
      <div className="setup-section">
        <div className="setup-sec-h">
          <div className="setup-sec-t">Ritmo & segurança</div>
          <div className="setup-sec-d">Evita ser marcado como spam. Vale pra todos os canais.</div>
        </div>
        <div className="setup-grid-3">
          <div className="setup-field">
            <label className="setup-label">Mensagens / minuto</label>
            <input
              type="number" className="setup-input"
              value={draft.pacing.perMinute}
              onChange={e => setDraft({ ...draft, pacing: { ...draft.pacing, perMinute: +e.target.value } })}
            />
          </div>
          <div className="setup-field">
            <label className="setup-label">Janela início</label>
            <input
              type="number" className="setup-input" min="0" max="23"
              value={draft.pacing.windowStart}
              onChange={e => setDraft({ ...draft, pacing: { ...draft.pacing, windowStart: +e.target.value } })}
            />
            <div className="setup-hint mono">hora local</div>
          </div>
          <div className="setup-field">
            <label className="setup-label">Janela fim</label>
            <input
              type="number" className="setup-input" min="0" max="23"
              value={draft.pacing.windowEnd}
              onChange={e => setDraft({ ...draft, pacing: { ...draft.pacing, windowEnd: +e.target.value } })}
            />
            <div className="setup-hint mono">hora local</div>
          </div>
        </div>
        <label className="setup-toggle" style={{ marginTop: 14 }}>
          <input
            type="checkbox" checked={draft.pacing.antispam}
            onChange={e => setDraft({ ...draft, pacing: { ...draft.pacing, antispam: e.target.checked } })}
          />
          <span>Anti-spam ativo — pula contatos já abordados nos últimos 30 dias</span>
        </label>
      </div>

      {/* SEGURANÇA */}
      <div className="setup-section">
        <div className="setup-sec-h">
          <div className="setup-sec-t">Segurança · acesso</div>
          <div className="setup-sec-d">Senha exigida ao abrir o CRM. Deixe em branco para desativar o login.</div>
        </div>
        <div className="setup-grid-2">
          <div className="setup-field">
            <label className="setup-label">Senha de acesso</label>
            <input
              type="password" className="setup-input"
              value={draft.pin || ''}
              onChange={e => setDraft({ ...draft, pin: e.target.value })}
              placeholder="senha atual: sylen"
            />
            <div className="setup-hint mono">→ salva localmente · deixe vazio para sem senha</div>
          </div>
        </div>
      </div>

      {/* SAVE BAR */}
      <div className="setup-savebar">
        <button className="btn btn-ghost" onClick={reset}>Restaurar padrão</button>
        <div style={{ flex: 1 }} />
        {savedAt && (
          <span className="mono" style={{ fontSize: 11, color: 'var(--ok)' }}>
            ✓ salvo · agora
          </span>
        )}
        <button className="btn btn-primary" onClick={save}>Salvar configuração</button>
      </div>

    </div>
  );
}

window.Operacao = Operacao;