// SylenProspec — FLUXO screens 2 (pipeline river, lista, composer, detail, palette)
const { useState: uF2, useEffect: eF2, useMemo: mF2 } = React;
const F2 = window.SYLEN_DATA;

// ============ PIPELINE — river ============
function River({ leads, setLeads, onSelectLead, config }) {
  const cols = F2.STATUSES.filter(s => s.group !== 'dead');
  const [drag, setDrag] = uF2(null);
  const [over, setOver] = uF2(null);

  return (
    <div className="river">
      {cols.map(s => {
        const lc = leads.filter(l => l.status === s.id);
        return (
          <div
            key={s.id}
            className={`river-lane ${s.group === 'hot' ? 'hot' : ''}`}
            onDragOver={e => { e.preventDefault(); setOver(s.id); }}
            onDrop={() => {
              if (drag) {
                setLeads(prev => prev.map(l => l.id === drag.id ? { ...l, status: s.id } : l));
                window.SYLEN_API.updateLeadStatus(config, drag.id, s.id);
              }
              setDrag(null); setOver(null);
            }}
          >
            <div className="river-lane-h">
              <div className="river-lane-name">{s.label}</div>
              <div className="river-lane-count">{lc.length}</div>
            </div>
            {lc.map(l => {
              const lastReply = l.events.find(e => e.kind === 'reply');
              const lastEv = l.events[0];
              return (
                <div
                  key={l.id}
                  className={`river-card ${drag?.id === l.id ? 'dragging' : ''}`}
                  draggable
                  onDragStart={() => setDrag(l)}
                  onDragEnd={() => { setDrag(null); setOver(null); }}
                  onClick={() => onSelectLead(l)}
                  style={over === s.id ? { borderColor: 'var(--accent)' } : {}}
                >
                  <div className="river-card-name">{l.nome}</div>
                  <div className="river-card-row">
                    <span className="loc">{l.cidade} · {l.uf}</span>
                    <span className="age">{F2.timeAgo(l.lastActivity)}</span>
                  </div>
                  {lastReply ? (
                    <div className="river-card-snippet">"{lastReply.txt}"</div>
                  ) : lastEv ? (
                    <div className="river-card-snippet" style={{ borderLeftColor: 'var(--text-muted)', color: 'var(--text-muted)' }}>
                      → {lastEv.txt.slice(0, 80)}
                    </div>
                  ) : null}
                  <div className="river-card-row">
                    <span className={`list-score ${scoreCls(l.score)}`} style={{ fontSize: 18 }}>{l.score}</span>
                    <div style={{ display: 'flex', gap: 4 }}>
                      {l.whatsapp && <span className="mono" style={{ fontSize: 10, color: 'var(--text-muted)' }}>W</span>}
                      {l.email && <span className="mono" style={{ fontSize: 10, color: 'var(--text-muted)' }}>·E</span>}
                      {l.instagram && <span className="mono" style={{ fontSize: 10, color: 'var(--text-muted)' }}>·I</span>}
                    </div>
                  </div>
                </div>
              );
            })}
            {lc.length === 0 && <div className="empty">—</div>}
          </div>
        );
      })}
    </div>
  );
}

// ============ LISTA ============
function ListaF({ leads, onSelectLead }) {
  const [q, setQ] = uF2('');
  const [fs, setFs] = uF2('');
  const [fseg, setFseg] = uF2('');
  const filtered = leads
    .filter(l => !fs || l.status === fs)
    .filter(l => !fseg || l.segmento === fseg)
    .filter(l => !q || l.nome.toLowerCase().includes(q.toLowerCase()) || l.cidade.toLowerCase().includes(q.toLowerCase()));

  return (
    <div className="list-page">
      <div className="lp-toolbar">
        <input className="input" placeholder="Buscar…" value={q} onChange={e => setQ(e.target.value)} style={{ width: 260 }} />
        <select className="input" value={fs} onChange={e => setFs(e.target.value)}>
          <option value="">Todos status</option>
          {F2.STATUSES.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}
        </select>
        <select className="input" value={fseg} onChange={e => setFseg(e.target.value)}>
          <option value="">Todos segmentos</option>
          {Object.entries(F2.SEGMENTS).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
        </select>
        <div style={{ flex: 1 }} />
        <span className="mono" style={{ fontSize: 11, color: 'var(--text-muted)' }}>
          {filtered.length} / {leads.length}
        </span>
      </div>

      <div className="list-row head">
        <span>ID</span>
        <span>Empresa</span>
        <span>Localização</span>
        <span style={{ textAlign: 'right' }}>Score</span>
        <span>Status</span>
        <span style={{ textAlign: 'right' }}>Última</span>
      </div>

      {filtered.map(l => (
        <div key={l.id} className="list-row" onClick={() => onSelectLead(l)}>
          <span className="list-id">{l.id}</span>
          <div>
            <div className="list-name">{l.nome}</div>
            <div className="list-sub">{l.contato} · {l.cargo}</div>
          </div>
          <div className="list-loc">{l.cidade} · {l.uf}</div>
          <div className={`list-score ${scoreCls(l.score)}`} style={{ textAlign: 'right' }}>{l.score}</div>
          <div className="list-status">
            <span style={{
              width: 6, height: 6, borderRadius: '50%',
              background: stOf(l.status).group === 'hot' ? 'var(--accent)' :
                          stOf(l.status).group === 'warm' ? '#E8C547' :
                          stOf(l.status).group === 'sent' ? '#7A95C9' :
                          stOf(l.status).group === 'dead' ? '#4A4845' : '#6B6963',
              boxShadow: stOf(l.status).group === 'hot' ? '0 0 8px var(--accent)' : 'none',
            }} />
            {stOf(l.status).label}
          </div>
          <div className="list-age">{F2.timeAgo(l.lastActivity)}</div>
        </div>
      ))}
    </div>
  );
}

// ============ COMPOSER ============
// Modo CADÊNCIA: dia 1 WPP → se sem resposta → dia 3 E-mail → dia 5 IG
// Modo PULSO ÚNICO: 1 canal, 1 mensagem
function Composer({ leads, onSelectLead, config }) {
  const [mode, setMode] = uF2('cadence'); // 'cadence' | 'single'
  const [audSeg, setAudSeg] = uF2(new Set(['hotel']));
  const [previewIdx, setPv] = uF2(0);
  const [sending, setSending] = uF2(false);
  const [activeStep, setActiveStep] = uF2(0);

  // Default 3-step cadence
  const [steps, setSteps] = uF2([
    { day: 1, ch: 'wpp',   txt: 'Oi {{contato}}, tudo bem? Vi que a {{empresa}} é referência em {{cidade}}. Ajudamos negócios em {{uf}} a aumentar resultados em ~30% em 60 dias. Posso te mandar 1 caso parecido em 2min?' },
    { day: 3, ch: 'email', txt: 'Oi {{contato}},\n\nMandei mensagem no WhatsApp há alguns dias e quis garantir que chegou. É rápido: ajudamos a {{empresa}} (e empresas como a sua em {{cidade}}) a operar com mais previsibilidade comercial.\n\nVale 15min de call?\n\n— Sylen AI' },
    { day: 5, ch: 'ig',    txt: 'Oi {{contato}}! Vi o perfil da {{empresa}} — trabalho incrível. Último toque por aqui: posso te mandar 1 case de empresa parecida que dobrou pipeline em 90 dias? Só me responde "sim" se fizer sentído.' },
  ]);

  // Single-shot state
  const [single, setSingle] = uF2({
    ch: 'wpp',
    txt: 'Oi {{contato}}, sou da Sylen AI. Ajudamos empresas como a {{empresa}} em {{cidade}} a operar com mais inteligência. Topa 5min pra eu te mostrar?',
  });

  const aud = leads.filter(l => audSeg.has(l.segmento) && !['nao_interessado', 'sem_contato', 'reuniao_agendada'].includes(l.status));
  const previewLead = aud[previewIdx % Math.max(aud.length, 1)] || leads[0];

  eF2(() => {
    const t = setInterval(() => setPv(i => i + 1), 4500);
    return () => clearInterval(t);
  }, []);

  function toggleSeg(k) {
    const n = new Set(audSeg);
    n.has(k) ? n.delete(k) : n.add(k);
    setAudSeg(n);
  }

  function updateStep(i, patch) {
    setSteps(prev => prev.map((s, j) => j === i ? { ...s, ...patch } : s));
  }

  const currentStep = steps[activeStep];
  const currentTxt = mode === 'cadence' ? currentStep.txt : single.txt;
  const currentCh = mode === 'cadence' ? currentStep.ch : single.ch;
  const previewBody = F2.renderTemplate(currentTxt, previewLead).split(/(\{\{\w+\}\})/g).map((p, i) =>
    p.match(/^\{\{\w+\}\}$/) ? <span key={i} className="var">{p}</span> : <React.Fragment key={i}>{p}</React.Fragment>
  );

  async function launch() {
    if (aud.length === 0) return;
    setSending(true);
    const cfg = config || window.SYLEN_DATA.loadConfig();
    const n8nBase = cfg?.integrations?.n8nBaseUrl || '';

    if (!n8nBase) {
      // Modo demo — simula disparo
      await new Promise(r => setTimeout(r, 2200));
      setSending(false);
      alert('Modo demo · configure n8n em Operação → Conexões para disparar de verdade.');
      return;
    }

    try {
      const stepsToSend = mode === 'cadence' ? steps : [{ ...single, day: 1 }];
      for (const step of stepsToSend) {
        const wPath = step.ch === 'email'
          ? (cfg.integrations.webhookDisparoEmail  || '/webhook/cpm-disparo-email')
          : step.ch === 'wpp'
          ? (cfg.integrations.webhookDisparoWpp    || '/webhook/cpm-disparo-wpp')
          : (cfg.integrations.webhookDisparoInstagram || '/webhook/cpm-disparo-instagram');

        await window.SYLEN_API.callWebhook(cfg, wPath, {
          leads: aud.map(l => ({
            lead_id:          l.id,
            mensagem:         F2.renderTemplate(step.txt, l),
            canal:            step.ch,
            whatsapp:         l.whatsapp,
            email:            l.email,
            instagram_handle: (l.instagram || '').replace('@', ''),
          })),
          day_offset: step.day || 1,
        });
      }
      alert(`Disparo iniciado para ${aud.length} leads.`);
    } catch (e) {
      alert('Erro ao disparar: ' + e.message);
    }
    setSending(false);
  }

  const chMeta = {
    wpp:   { l: 'WhatsApp', short: 'WPP',   glyph: 'W' },
    email: { l: 'E-mail',   short: 'EMAIL', glyph: 'E' },
    ig:    { l: 'Instagram DM', short: 'IG', glyph: 'I' },
  };

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

      {/* LEFT: audience + mode */}
      <div className="cp-left">
        <div className="cp-h">Tipo de disparo</div>
        <div className="mode-stack">
          <div className={`mode-card ${mode === 'cadence' ? 'on' : ''}`} onClick={() => setMode('cadence')}>
            <div className="mode-card-h">
              <span className="mode-card-t">Cadência</span>
              <span className="mode-card-tag">recomendado</span>
            </div>
            <div className="mode-card-d">
              3 mensagens em sequência, em canais diferentes, com pausa entre elas. <b>Para automaticamente</b> se o lead responder.
            </div>
          </div>
          <div className={`mode-card ${mode === 'single' ? 'on' : ''}`} onClick={() => setMode('single')}>
            <div className="mode-card-h">
              <span className="mode-card-t">Pulso único</span>
            </div>
            <div className="mode-card-d">
              1 mensagem em 1 canal, sem follow-up automático. Para campanhas pontuais.
            </div>
          </div>
        </div>

        <div className="cp-h" style={{ marginTop: 28 }}>Audiência por segmento</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          {Object.entries(F2.SEGMENTS).map(([k, v]) => (
            <label key={k} className="seg-check">
              <input type="checkbox" checked={audSeg.has(k)} onChange={() => toggleSeg(k)} />
              <span>{v.label}</span>
              <span className="mono">{leads.filter(l => l.segmento === k).length}</span>
            </label>
          ))}
        </div>

        <div className="cp-h" style={{ marginTop: 24 }}>Quem está fora</div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--text-muted)', lineHeight: 1.6 }}>
          ✕ leads marcados "não interessado"<br />
          ✕ reunião já agendada<br />
          ✕ sem contato (3+ tentativas)
        </div>
      </div>

      {/* CENTER: explanation + cadence builder + editor */}
      <div className="cp-center">

        {mode === 'cadence' ? (
          <React.Fragment>
            {/* EXPLANATION BANNER */}
            <div className="clarity-banner">
              <div className="clarity-icon">!</div>
              <div>
                <div className="clarity-h">Como funciona a cadência</div>
                <div className="clarity-d">
                  O lead recebe <b>uma mensagem por vez</b>, em canais diferentes, com pausa entre elas. <b>Não</b> é disparo simultâneo em 3 redes.<br />
                  Assim que o lead responder em qualquer canal, a sequência para automaticamente.
                </div>
              </div>
            </div>

            {/* CADENCE TIMELINE */}
            <div>
              <div className="cp-h">Sequência · clique em um passo para editar</div>
              <div className="cadence-timeline">
                {steps.map((s, i) => (
                  <React.Fragment key={i}>
                    <div
                      className={`cad-step ${activeStep === i ? 'on' : ''}`}
                      onClick={() => setActiveStep(i)}
                    >
                      <div className="cad-day mono">DIA {s.day}</div>
                      <div className="cad-ch">{chMeta[s.ch].l}</div>
                      <div className="cad-snippet">
                        {s.txt.split('\n')[0].slice(0, 40)}…
                      </div>
                      <div className="cad-num mono">{i + 1}/{steps.length}</div>
                    </div>
                    {i < steps.length - 1 && (
                      <div className="cad-arrow">
                        <div className="cad-arrow-wait mono">aguarda {steps[i+1].day - s.day}d</div>
                        <div className="cad-arrow-line">
                          <div className="cad-arrow-tip">→</div>
                        </div>
                        <div className="cad-arrow-cond mono">se sem resposta</div>
                      </div>
                    )}
                  </React.Fragment>
                ))}
              </div>
              <div className="cad-foot">
                <span className="cad-foot-pill">
                  <span className="live-dot" style={{ background: 'var(--ok)' }} />
                  Para automaticamente se o lead responder em qualquer canal
                </span>
              </div>
            </div>

            {/* EDITOR FOR ACTIVE STEP */}
            <div>
              <div className="cp-h">
                Editando passo {activeStep + 1} — <b style={{ color: 'var(--accent)' }}>Dia {currentStep.day} · {chMeta[currentStep.ch].l}</b>
              </div>
              <textarea
                className="compose-editor"
                value={currentStep.txt}
                onChange={e => updateStep(activeStep, { txt: e.target.value })}
              />
              <VarRow onAdd={v => updateStep(activeStep, { txt: currentStep.txt + ' ' + v })} />
            </div>
          </React.Fragment>
        ) : (
          <React.Fragment>
            {/* SINGLE MODE */}
            <div className="clarity-banner">
              <div className="clarity-icon">!</div>
              <div>
                <div className="clarity-h">Modo pulso único</div>
                <div className="clarity-d">
                  Envia <b>1 mensagem</b> em <b>1 canal</b> para toda a audiência. Sem follow-up automático.
                </div>
              </div>
            </div>

            <div>
              <div className="cp-h">Canal</div>
              <div className="chan-row">
                {Object.entries(chMeta).map(([k, m]) => (
                  <div key={k} className={`chan-pill ${single.ch === k ? 'on' : ''}`} onClick={() => setSingle({ ...single, ch: k })}>
                    {m.l}
                  </div>
                ))}
              </div>
            </div>

            <div>
              <div className="cp-h">Mensagem</div>
              <textarea
                className="compose-editor"
                value={single.txt}
                onChange={e => setSingle({ ...single, txt: e.target.value })}
              />
              <VarRow onAdd={v => setSingle({ ...single, txt: single.txt + ' ' + v })} />
            </div>
          </React.Fragment>
        )}

        {/* SEND ROW */}
        <div className="send-row">
          <button className="send-cta" onClick={launch} disabled={sending || aud.length === 0}>
            <span style={{ fontFamily: 'var(--font-mono)' }}>▶</span>
            {sending ? 'Iniciando…' : mode === 'cadence' ? `Iniciar cadência para ${aud.length}` : `Disparar para ${aud.length}`}
          </button>
          <div className="send-meta">
            {mode === 'cadence' ? (
              <React.Fragment>
                {aud.length} leads · {steps.length} passos · duração ~{steps[steps.length-1].day}d · <b>pára ao primeiro reply</b>
              </React.Fragment>
            ) : (
              <React.Fragment>
                Pacing: <b>~30/min</b> &nbsp;·&nbsp; Janela: <b>08-19h</b> &nbsp;·&nbsp; Anti-spam: <b>ON</b>
              </React.Fragment>
            )}
          </div>
        </div>
      </div>

      {/* RIGHT: live preview */}
      <div className="cp-right">
        <div className="cp-h">Preview ao vivo · {aud.length} leads</div>
        <div className="mono" style={{ fontSize: 10, color: 'var(--text-muted)', marginBottom: 16 }}>
          {mode === 'cadence' ? `Passo ${activeStep + 1} de ${steps.length} · ` : ''}
          Trocando lead a cada 4s · {(previewIdx % Math.max(aud.length, 1)) + 1}/{aud.length}
        </div>

        {(() => {
          const lead = aud[previewIdx % aud.length];
          if (!lead) return null;
          return (
            <div className="preview-card" onClick={() => onSelectLead(lead)} style={{ cursor: 'pointer' }}>
              <div className="preview-meta">
                <span>{chMeta[currentCh].short}</span><span>→</span>
                <span style={{ color: 'var(--accent)' }}>{lead.nome}</span>
              </div>
              <div className="preview-body">{previewBody}</div>
            </div>
          );
        })()}

        {mode === 'cadence' && (
          <div style={{ marginTop: 18 }}>
            <div className="cp-h">Outros passos da sequência</div>
            {steps.map((s, i) => (
              i !== activeStep && (
                <div key={i} className="step-mini" onClick={() => setActiveStep(i)}>
                  <div className="step-mini-h">
                    <span className="mono">Dia {s.day}</span>
                    <span>·</span>
                    <span style={{ color: 'var(--accent)' }}>{chMeta[s.ch].l}</span>
                  </div>
                  <div className="step-mini-d">
                    {F2.renderTemplate(s.txt, previewLead).split('\n')[0].slice(0, 70)}…
                  </div>
                </div>
              )
            ))}
          </div>
        )}

        <div className="cp-h" style={{ marginTop: 24 }}>Próximos na fila</div>
        {aud.slice(0, 5).map((l) => (
          <div key={l.id} className="queue-mini">
            <span>{l.nome}</span>
            <span className="mono">{l.uf}</span>
          </div>
        ))}
      </div>

    </div>
  );
}

function VarRow({ onAdd }) {
  return (
    <div style={{ display: 'flex', gap: 8, marginTop: 10, alignItems: 'center', flexWrap: 'wrap' }}>
      <span className="mono" style={{ fontSize: 10, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
        Variáveis:
      </span>
      {['{{contato}}', '{{empresa}}', '{{cidade}}', '{{uf}}'].map(v => (
        <span key={v} className="var-chip" onClick={() => onAdd(v)}>{v}</span>
      ))}
    </div>
  );
}

// ============ DETAIL ============
function DetailF({ lead, onClose, onDelete, onMarkLost }) {
  const [tab, setTab] = uF2('all');
  if (!lead) return null;

  const events = [...lead.events].reverse();

  return (
    <div className="det-overlay" onKeyDown={e => e.key === 'Escape' && onClose()}>
      <div className="det-bg" onClick={onClose} />
      <div className="det">

        <div className="det-left">
          <div className="det-head">
            <div className="det-tag">{lead.id} · {F2.SEGMENTS[lead.segmento].label}</div>
            <div className="det-name">{lead.nome}</div>
            <div className="det-loc">{lead.cidade}, {lead.uf}</div>
          </div>

          <div className="det-section">
            <h4>Temperatura</h4>
            <div className="det-score-big">{lead.score}<span className="of">/100</span></div>
            <div className="focus-reasons">
              {lead.scoreReasons.map((r, i) => <div key={i}>{r}</div>)}
            </div>
          </div>

          <div className="det-section">
            <h4>Sugestão Sylen</h4>
            <div className="suggestion">
              {lead.score >= 75
                ? '→ Enviar proposta comercial agora. Janela ótima.'
                : lead.score >= 50
                ? '→ Follow-up WPP nas próximas 24h.'
                : '→ Aguardar 3d antes de tentar novamente.'}
            </div>
          </div>

          <div className="det-section">
            <h4>Pessoa</h4>
            <div className="kv"><span className="k">Nome</span><span className="v" style={{ fontFamily: 'var(--font-body)' }}>{lead.contato}</span></div>
            <div className="kv"><span className="k">Cargo</span><span className="v" style={{ fontFamily: 'var(--font-body)' }}>{lead.cargo}</span></div>
            <div className="kv"><span className="k">WhatsApp</span><span className="v">{lead.whatsapp}</span></div>
            <div className="kv"><span className="k">E-mail</span><span className="v" style={{ fontSize: 11 }}>{lead.email}</span></div>
            <div className="kv"><span className="k">Instagram</span><span className="v">{lead.instagram}</span></div>
          </div>

          <div className="det-section">
            <h4>Histórico (auditoria)</h4>
            <div className="mono" style={{ fontSize: 10, color: 'var(--text-muted)', lineHeight: 1.7 }}>
              {lead.events.map((e, i) => (
                <div key={i}>{e.t.slice(5, 16).replace('T', ' ')} · {e.kind} · {e.ch}</div>
              ))}
            </div>
          </div>

          <div className="det-section" style={{ marginTop: 'auto', paddingTop: 20, borderTop: '1px solid var(--border)', display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <button
              className="btn"
              style={{ flex: 1, background: 'transparent', border: '1px solid var(--border)', color: 'var(--text-dim)', fontSize: 12 }}
              onClick={() => { onMarkLost && onMarkLost(lead); onClose(); }}
            >
              Marcar como perdido
            </button>
            <button
              className="btn"
              style={{ flex: 1, background: 'transparent', border: '1px solid #7a2020', color: '#c05050', fontSize: 12 }}
              onClick={() => {
                if (window.confirm(`Excluir "${lead.nome}" permanentemente?`)) {
                  onDelete && onDelete(lead);
                  onClose();
                }
              }}
            >
              Excluir lead
            </button>
          </div>
        </div>

        <div className="det-right">
          <div className="det-tabs">
            {[{ id: 'all', l: 'Tudo' }, { id: 'wpp', l: 'WhatsApp' }, { id: 'email', l: 'E-mail' }, { id: 'ig', l: 'Instagram' }].map(t => (
              <div key={t.id} className={`det-tab ${tab === t.id ? 'on' : ''}`} onClick={() => setTab(t.id)}>{t.l}</div>
            ))}
            <div style={{ flex: 1 }} />
            <span className="mono" style={{ fontSize: 10, color: 'var(--text-muted)', alignSelf: 'center', paddingBottom: 10 }}>caixa unificada</span>
          </div>

          <div className="det-chat">
            <div className="chat-day">hoje</div>
            {events.map((ev, i) => {
              if (tab !== 'all' && ev.ch !== tab && ev.ch !== '—') return null;
              if (ev.kind === 'send') {
                return (
                  <div key={i} className="bubble out">
                    {ev.txt}
                    <div className="bubble-meta">
                      <span className="bubble-ch">{ev.ch}</span>
                      {F2.fmtTime(ev.t)} · entregue
                    </div>
                  </div>
                );
              }
              if (ev.kind === 'reply') {
                return (
                  <div key={i} className="bubble in">
                    {ev.txt}
                    <div className="bubble-meta">
                      <span className="bubble-ch">{ev.ch}</span>
                      {F2.fmtTime(ev.t)}
                    </div>
                  </div>
                );
              }
              return <div key={i} className="event-pill">{F2.fmtTime(ev.t)} · {ev.txt}</div>;
            })}
          </div>

          <div className="det-compose">
            <input className="input" placeholder="Responder…" />
            <button className="btn btn-primary">Enviar</button>
          </div>
        </div>

      </div>
    </div>
  );
}

// ============ COMMAND PALETTE ============
function CmdP({ open, onClose, onAction }) {
  const [q, setQ] = uF2('');
  const [idx, setIdx] = uF2(0);
  eF2(() => { if (open) { setQ(''); setIdx(0); } }, [open]);
  if (!open) return null;

  const items = [
    { cat: 'Ir',   label: 'Feed',        act: { t: 'nav', v: 'feed' } },
    { cat: 'Ir',   label: 'Modo Foco',   act: { t: 'nav', v: 'focus' } },
    { cat: 'Ir',   label: 'Pipeline',    act: { t: 'nav', v: 'pipeline' } },
    { cat: 'Ir',   label: 'Disparo',     act: { t: 'nav', v: 'composer' } },
    { cat: 'Ir',   label: 'Todos os leads', act: { t: 'nav', v: 'lista' } },
    { cat: 'Ação', label: 'Novo lead',   act: { t: 'nav', v: 'lista' } },
    ...F2.LEADS.map(l => ({ cat: 'Lead', label: l.nome + ' · ' + l.cidade, act: { t: 'lead', lead: l } })),
  ];
  const filtered = items.filter(i => i.label.toLowerCase().includes(q.toLowerCase())).slice(0, 8);

  return (
    <div className="cp-overlay" onClick={onClose}>
      <div className="cp-box" onClick={e => e.stopPropagation()}>
        <input
          className="cp-input" autoFocus
          placeholder="O que você quer fazer?"
          value={q} onChange={e => { setQ(e.target.value); setIdx(0); }}
          onKeyDown={e => {
            if (e.key === 'ArrowDown') { e.preventDefault(); setIdx(Math.min(idx + 1, filtered.length - 1)); }
            if (e.key === 'ArrowUp')   { e.preventDefault(); setIdx(Math.max(idx - 1, 0)); }
            if (e.key === 'Enter')     { e.preventDefault(); filtered[idx] && onAction(filtered[idx].act); onClose(); }
            if (e.key === 'Escape')    { onClose(); }
          }}
        />
        <div className="cp-list">
          {filtered.map((it, i) => (
            <div key={i} className={`cp-item ${i === idx ? 'on' : ''}`} onClick={() => { onAction(it.act); onClose(); }}>
              <span className="cp-cat">{it.cat}</span>
              <span>{it.label}</span>
              {i === idx && <span className="kbd">↵</span>}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ============ NOVO LEAD MANUAL ============
function NewLeadModal({ onClose, onSave }) {
  const [saving, setSaving] = uF2(false);
  const [form, setForm] = uF2({
    nome: '', segmento: 'hotel', localizacao: '',
    whatsapp: '', email: '', instagram: '',
    website: '', contato: '', cargo: '',
  });

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  async function handleSubmit(e) {
    e.preventDefault();
    if (!form.nome.trim()) return;
    setSaving(true);
    await onSave(form);
    setSaving(false);
    onClose();
  }

  const inp = {
    background: 'var(--bg-2)', border: '1px solid var(--border)',
    borderRadius: 8, color: 'var(--text)', fontSize: 13,
    padding: '8px 12px', width: '100%', outline: 'none',
    fontFamily: 'var(--font-body)',
  };
  const lbl = { display: 'block', fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 5 };

  return (
    <div className="det-overlay">
      <div className="det-bg" onClick={onClose} />
      <div style={{ position: 'relative', zIndex: 1, background: 'var(--bg)', border: '1px solid var(--border)', borderRadius: 16, padding: '2rem', width: 580, maxWidth: '95vw', maxHeight: '90vh', overflowY: 'auto' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1.5rem' }}>
          <div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--text-muted)', marginBottom: 4 }}>NOVO LEAD</div>
            <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--text)', fontFamily: 'var(--font-display)' }}>Adicionar manualmente</div>
          </div>
          <button onClick={onClose} style={{ background: 'none', border: '1px solid var(--border)', borderRadius: 8, color: 'var(--text-muted)', cursor: 'pointer', padding: '6px 10px', fontSize: 13 }}>✕</button>
        </div>

        <form onSubmit={handleSubmit}>
          {/* Nome + Segmento */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 180px', gap: 12, marginBottom: 14 }}>
            <div>
              <label style={lbl}>Nome da empresa *</label>
              <input style={inp} value={form.nome} onChange={e => set('nome', e.target.value)} placeholder="Pousada Vista Mar" required autoFocus />
            </div>
            <div>
              <label style={lbl}>Segmento</label>
              <select style={inp} value={form.segmento} onChange={e => set('segmento', e.target.value)}>
                {Object.entries(F2.SEGMENTS).map(([k, v]) => (
                  <option key={k} value={k}>{v.label}</option>
                ))}
              </select>
            </div>
          </div>

          {/* Localização */}
          <div style={{ marginBottom: 14 }}>
            <label style={lbl}>Localização</label>
            <input style={inp} value={form.localizacao} onChange={e => set('localizacao', e.target.value)} placeholder="Florianópolis, SC" />
          </div>

          {/* Contatos */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 14 }}>
            <div>
              <label style={lbl}>WhatsApp</label>
              <input style={inp} value={form.whatsapp} onChange={e => set('whatsapp', e.target.value)} placeholder="+55 48 99999-0000" />
            </div>
            <div>
              <label style={lbl}>E-mail</label>
              <input style={inp} value={form.email} onChange={e => set('email', e.target.value)} placeholder="contato@empresa.com" type="email" />
            </div>
            <div>
              <label style={lbl}>Instagram</label>
              <input style={inp} value={form.instagram} onChange={e => set('instagram', e.target.value)} placeholder="@handle" />
            </div>
            <div>
              <label style={lbl}>Website</label>
              <input style={inp} value={form.website} onChange={e => set('website', e.target.value)} placeholder="https://empresa.com" />
            </div>
          </div>

          {/* Pessoa de contato */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: '1.5rem' }}>
            <div>
              <label style={lbl}>Nome do contato</label>
              <input style={inp} value={form.contato} onChange={e => set('contato', e.target.value)} placeholder="Maria Silva" />
            </div>
            <div>
              <label style={lbl}>Cargo</label>
              <input style={inp} value={form.cargo} onChange={e => set('cargo', e.target.value)} placeholder="Gerente Comercial" />
            </div>
          </div>

          <div style={{ display: 'flex', gap: 10 }}>
            <button type="submit" disabled={saving || !form.nome.trim()} className="btn btn-primary" style={{ flex: 1, opacity: saving ? 0.6 : 1 }}>
              {saving ? 'Salvando…' : '+ Adicionar lead'}
            </button>
            <button type="button" onClick={onClose} className="btn btn-ghost">Cancelar</button>
          </div>
        </form>
      </div>
    </div>
  );
}

Object.assign(window, { River, ListaF, Composer, DetailF, CmdP, NewLeadModal });