{/* etapas */}

Etapas do funil

{stages.map((s) => { const q = (seqs[s.id] && seqs[s.id].emails || []).length; const on = seqs[s.id] && seqs[s.id].ativo; return ( ); })}

{/* régua da etapa */}

{!aberta ?

Escolha uma etapa

: ( <>

Régua de “{(stages.find((s) => s.id === aberta) || {}).nome}”

Os e-mails são agendados quando o lead entra nesta etapa.

setSeq(Object.assign({}, seq, { ativo: e.target.checked }))} /> Ativar

{(seq.emails || []).length === 0 && (

Nenhum e-mail nesta etapa ainda.

)} {(seq.emails || []).map((e, i) => (

E-mail {i + 1}

Enviar setEmail(i, "dias", ev.target.value)} /> {Number(e.dias) === 0 ? "dias depois (na hora)" : "dias após entrar na etapa"}

setEmail(i, "assunto", ev.target.value)} placeholder="Ex.: {nome}, tudo bem?" />

setEmail(i, "corpo", ev.target.value)}
                    placeholder={"Olá {nome},\n\nAqui é da KeS Assessoria..."} />
                </Field>
                <div className="form-row">
                  <Field label="Modelo (visual)" hint={templates.length ? "" : "Crie modelos na aba Modelos"}>
                    <select className="field" value={e.templateId || ""} onChange={(ev) => setEmail(i, "templateId", ev.target.value)}>
                      <option value="">Texto simples</option>
                      {templates.map((t) => <option key={t.id} value={t.id}>{t.nome}</option>)}
                    </select>
                  </Field>
                  <Field label="Cópia para (CC)" hint="Opcional — vírgula separa vários">
                    <input className="field" value={e.cc || ""} onChange={(ev) => setEmail(i, "cc", ev.target.value)} placeholder="alguem@empresa.com" />
                  </Field>
                </div>
                <AnexosCampo anexos={e.anexos || []} onChange={(lista) => setEmail(i, "anexos", lista)} teamId={tenantId} />
              </div>
            ))}

<Btn variant="subtle" size="sm" icon="plus" onClick={addEmail}>Adicionar e-mail à régua</Btn>
          </>
        )}
      </div>
    </div>
  );
}

/* -------- MODELOS (templates HTML "de site") -------- */
function ModelosEmail({ state, dispatch }) {
  const { useState } = React;
  const templates = (state.config && state.config.emailTemplates) || [];
  const [editando, setEditando] = useState(null);   // objeto template ou "novo"
  const [confirmaDel, setConfirmaDel] = useState(null);

// Amostra do modelo com uma mensagem de exemplo (miniatura)
  const amostra = (tpl) => String(tpl.html || "").replace(/\{mensagem\}/gi,
    "<p style='margin:0 0 14px'>Olá {nome}, esta é uma amostra do modelo.</p>");

return (
    <>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10, flexWrap: "wrap", marginBottom: 12 }}>
        <p className="muted" style={{ margin: 0, fontSize: 12.5 }}>
          Modelos deixam o e-mail com cara de site: cabeçalho, cores, botão e rodapé. A mensagem digitada entra no lugar do marcador <strong>{"{mensagem}"}</strong>.
        </p>
        <Btn variant="primary" size="sm" icon="plus" onClick={() => setEditando("novo")}>Novo modelo</Btn>
      </div>

{templates.length === 0 && (
        <div className="empty" style={{ padding: 30 }}>
          <Icon name="layout" size={36} />
          <div style={{ fontWeight: 700 }}>Nenhum modelo ainda</div>
          <div style={{ fontSize: 13 }}>Crie um modelo e use no envio avulso ou nas sequências.</div>
        </div>
      )}

<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(240px,1fr))", gap: 14 }}>
        {templates.map((tpl) => (
          <div key={tpl.id} className="card" style={{ overflow: "hidden", display: "flex", flexDirection: "column" }}>
            <iframe title={tpl.nome} sandbox="" srcDoc={amostra(tpl)}
              style={{ width: "100%", height: 190, border: "none", background: "#eef1f5", pointerEvents: "none", transform: "scale(1)", transformOrigin: "top left" }} />
            <div style={{ padding: "10px 12px", display: "flex", alignItems: "center", gap: 8 }}>
              <div style={{ flex: 1, minWidth: 0, fontWeight: 700, fontSize: 13.5, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{tpl.nome}</div>
              <button className="iconbtn" title="Editar" onClick={() => setEditando(tpl)}><Icon name="pencil" size={14} /></button>
              <button className="iconbtn" title="Duplicar" onClick={() => duplicar(tpl)}><Icon name="copy" size={14} /></button>
              <button className="iconbtn" title="Excluir" style={{ color: "var(--kes-red-400)" }} onClick={() => setConfirmaDel(tpl)}><Icon name="trash" size={14} /></button>
            </div>
          </div>
        ))}
      </div>

{editando && <TemplateEmailModal template={editando === "novo" ? null : editando} onSalvar={salvarUm} onClose={() => setEditando(null)} />}
      {confirmaDel && (
        <Modal title="Excluir modelo?" onClose={() => setConfirmaDel(null)}
          footer={<><Btn variant="ghost" onClick={() => setConfirmaDel(null)}>Cancelar</Btn>
            <Btn variant="danger" icon="trash" onClick={() => excluir(confirmaDel)}>Excluir</Btn></>}>
          <p style={{ margin: 0 }}>O modelo <strong>{confirmaDel.nome}</strong> será removido. Sequências que o usam voltam a mandar texto simples.</p>
        </Modal>
      )}
    </>
  );
}

/* -------- Editor de modelo: opções visuais + HTML livre + prévia ao vivo -------- */
function TemplateEmailModal({ template, onSalvar, onClose }) {
  const { useState, useMemo } = React;
  const KM = window.KESMAIL;
  const [nome, setNome] = useState(template ? template.nome : "");
  const [modo, setModo] = useState(template && template.modo === "html" ? "html" : "visual");
  const [props, setProps] = useState((template && template.props) || {
    base: "classico", cor: "#132a4a", cabecalho: "KeS Assessoria", logoUrl: "",
    titulo: "", botaoTexto: "", botaoLink: "", rodape: "KeS Assessoria · comercial@kesassessoria.com.br",
  });
  const [htmlLivre, setHtmlLivre] = useState(template && template.modo === "html" ? template.html
    : KM.montarTemplateHtml((template && template.props) || { base: "classico", cor: "#132a4a", cabecalho: "KeS Assessoria" }));
  const [err, setErr] = useState("");
  const setP = (k, v) => setProps((s) => Object.assign({}, s, { [k]: v }));

const htmlAtual = modo === "visual" ? KM.montarTemplateHtml(props) : htmlLivre;
  const previa = useMemo(() => String(htmlAtual || "").replace(/\{mensagem\}/gi,
    "<p style='margin:0 0 14px'>Olá {nome}, esta é uma <strong>mensagem de exemplo</strong> para você ver o modelo.</p><p style='margin:0 0 14px'>O texto digitado na hora do envio aparece aqui.</p>"), [htmlAtual]);

{modo === "visual" ? (
            <>
              <Field label="Estilo">
                <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                  {BASES.map(([id, rot]) => (
                    <Btn key={id} variant={props.base === id ? "primary" : "subtle"} size="sm" onClick={() => setP("base", id)}>{rot}</Btn>
                  ))}
                </div>
              </Field>
              <Field label="Cor principal">
                <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
                  <input type="color" value={props.cor} onChange={(e) => setP("cor", e.target.value)} style={{ width: 42, height: 32, border: "none", background: "none", cursor: "pointer" }} />
                  <input className="field" value={props.cor} onChange={(e) => setP("cor", e.target.value)} style={{ width: 110 }} />
                </div>
              </Field>
              <Field label="Nome no cabeçalho"><input className="field" value={props.cabecalho} onChange={(e) => setP("cabecalho", e.target.value)} /></Field>
              <Field label="Logo (URL da imagem)" hint="Opcional — cole o endereço de uma imagem"><input className="field" value={props.logoUrl} onChange={(e) => setP("logoUrl", e.target.value)} placeholder="https://…/logo.png" /></Field>
              <Field label="Título grande" hint="Opcional — aparece antes da mensagem"><input className="field" value={props.titulo} onChange={(e) => setP("titulo", e.target.value)} placeholder="Ex.: Bem-vindo, {nome}!" /></Field>
              <Field label="Botão — texto"><input className="field" value={props.botaoTexto} onChange={(e) => setP("botaoTexto", e.target.value)} placeholder="Ex.: Agendar reunião" /></Field>
              <Field label="Botão — link"><input className="field" value={props.botaoLink} onChange={(e) => setP("botaoLink", e.target.value)} placeholder="https://…" /></Field>
              <Field label="Rodapé"><input className="field" value={props.rodape} onChange={(e) => setP("rodape", e.target.value)} /></Field>
            </>
          ) : (
            <Field label="HTML do e-mail" hint="Use {mensagem} onde o texto digitado deve entrar; {nome}, {empresa} e {responsavel} também funcionam">
              <textarea className="field" style={{ minHeight: 320, fontFamily: "monospace", fontSize: 12 }} value={htmlLivre} onChange={(e) => setHtmlLivre(e.target.value)} />
            </Field>
          )}
          {err && <div className="form-err"><Icon name="alert" size={14} />{err}</div>}
        </div>

<div>
          <div className="eyebrow" style={{ fontSize: 10.5, marginBottom: 6 }}>Prévia (como o cliente vê)</div>
          <iframe title="previa" sandbox="" srcDoc={previa}
            style={{ width: "100%", height: 430, border: "1px solid var(--border-dark)", borderRadius: "var(--radius-md)", background: "#eef1f5" }} />
        </div>
      </div>
    </Modal>
  );
}

/* -------- Campo de ANEXOS (upload pro Storage, chips com remover) -------- */
function AnexosCampo({ anexos, onChange, teamId }) {
  const { useState, useRef } = React;
  const DB = window.KESDB;
  const [subindo, setSubindo] = useState(false);
  const [erro, setErro] = useState("");
  const inputRef = useRef(null);
  const lista = anexos || [];
  const fmtTam = (b) => (b > 1048576 ? (b / 1048576).toFixed(1) + " MB" : Math.max(1, Math.round(b / 1024)) + " KB");

async function escolher(ev) {
    const arqs = Array.from(ev.target.files || []);
    ev.target.value = "";
    if (!arqs.length) return;
    setErro("");
    for (const arq of arqs) {
      if (arq.size > 15 * 1024 * 1024) { setErro("“" + arq.name + "” passa de 15MB."); continue; }
      setSubindo(true);
      const r = await DB.mailUpload(teamId, arq, arq.name);
      setSubindo(false);
      if (!r || !r.ok) { setErro("Não consegui subir “" + arq.name + "” (" + ((r && r.error) || "erro") + ")."); continue; }
      onChange(lista.concat([{ nome: arq.name, url: r.url, tam: arq.size }]));
    }
  }

return (
    <Field label="Anexos" hint="Até 15MB por arquivo — vão junto do e-mail">
      <input ref={inputRef} type="file" multiple style={{ display: "none" }} onChange={escolher} />
      <div style={{ display: "flex", flexWrap: "wrap", gap: 6, alignItems: "center" }}>
        {lista.map((a, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "var(--kes-navy-700)", borderRadius: 20, padding: "5px 8px 5px 12px", fontSize: 12 }}>
            <Icon name="paperclip" size={12} /> {a.nome}{a.tam ? " · " + fmtTam(a.tam) : ""}
            <button className="iconbtn" title="Remover" style={{ width: 20, height: 20 }}
              onClick={() => onChange(lista.filter((_, x) => x !== i))}><Icon name="x" size={12} /></button>
          </span>
        ))}
        <Btn variant="subtle" size="sm" icon="paperclip" onClick={() => inputRef.current && inputRef.current.click()} disabled={subindo}>
          {subindo ? "Subindo…" : "Anexar arquivo"}
        </Btn>
      </div>
      {erro && <div className="form-err" style={{ marginTop: 6 }}><Icon name="alert" size={13} />{erro}</div>}
    </Field>
  );
}

/* -------- Fila / enviados -------- */
function FilaEmails({ pend, env, err }) {
  const K = window.KES;
  const quando = (ts) => { const d = new Date(ts || 0); return d.toLocaleString("pt-BR", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" }); };
  const Linha = ({ m, tag, tone }) => (
    <div style={{ display: "flex", gap: 12, alignItems: "center", padding: "11px 14px", borderBottom: "1px solid var(--border-dark)", flexWrap: "wrap" }}>
      <Badge tone={tone}>{tag}</Badge>
      <div style={{ flex: 1, minWidth: 200 }}>
        <div style={{ fontWeight: 700, fontSize: 13.5 }}>{m.assunto}</div>
        <div className="muted" style={{ fontSize: 11.5 }}>
          {m.paraNome ? m.paraNome + " · " : ""}{m.para}
          {m.cc ? " · CC: " + m.cc : ""}
          {m.anexos && m.anexos.length ? " · 📎" + m.anexos.length : ""}
          {m.templateId ? " · modelo" : ""}
          {m.origem === "sequencia" ? " · régua" : m.origem === "campanha" ? " · campanha" : " · avulso"}
        </div>
      </div>
      <span className="muted" style={{ fontSize: 11.5, whiteSpace: "nowrap" }}>
        {m.status === "pendente" ? "sai em " + quando(m.agendadoPara) : quando(m.ts)}
      </span>
    </div>
  );
  return (
    <>
      <div className="cards-3" style={{ marginBottom: 14 }}>
        <div className="goal-card"><div className="eyebrow">Na fila</div><div className="kval" style={{ fontSize: 26 }}>{pend.length}</div></div>
        <div className="goal-card"><div className="eyebrow">Enviados</div><div className="kval" style={{ fontSize: 26, color: "var(--ok)" }}>{env.length}</div></div>
        <div className="goal-card"><div className="eyebrow">Com erro</div><div className="kval" style={{ fontSize: 26, color: err.length ? "var(--kes-red-400)" : "var(--fg3)" }}>{err.length}</div></div>
      </div>
      <div className="card" style={{ overflow: "hidden" }}>
        {pend.length === 0 && env.length === 0 && err.length === 0 ? (
          <div className="empty"><Icon name="mail" size={40} /><div style={{ fontWeight: 700 }}>Nenhum e-mail ainda</div><div style={{ fontSize: 13 }}>Ative uma régua ou envie um e-mail pelo cartão do lead.</div></div>
        ) : (<>
          {err.map((m) => <Linha key={m._id} m={m} tag="erro" tone="bad" />)}
          {pend.map((m) => <Linha key={m._id} m={m} tag="fila" tone="warn" />)}
          {env.slice(0, 40).map((m) => <Linha key={m._id} m={m} tag="enviado" tone="good" />)}
        </>)}
      </div>
    </>
  );
}

/* -------- Modal de envio avulso (usado no cartão do lead) -------- */
function EnviarEmailModal({ lead, state, viewer, dispatch, onClose }) {
  const { useState } = React;
  const DB = window.KESDB;
  const KM = window.KESMAIL;
  const tenantId = tenantIdAtual(state);
  const templates = (state.config && state.config.emailTemplates) || [];
  const [f, setF] = useState({ assunto: "", corpo: "", cc: "", templateId: "", anexos: [] });
  const [previa, setPrevia] = useState(false);
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState("");
  const set = (k, v) => setF((s) => ({ ...s, [k]: v }));
  const tpl = f.templateId ? templates.find((t) => t.id === f.templateId) : null;

const ccInvalido = () => String(f.cc || "").split(/[,;]/).map((s) => s.trim()).filter(Boolean)
    .find((s) => !/^\S+@\S+\.\S+$/.test(s));

async function enviar() {
    if (!lead.email) return setErr("Este lead não tem e-mail cadastrado.");
    if (!f.assunto.trim()) return setErr("Informe o assunto.");
    if (!f.corpo.trim()) return setErr("Escreva a mensagem.");
    const ccRuim = ccInvalido();
    if (ccRuim) return setErr("E-mail inválido na cópia: " + ccRuim);
    setBusy(true); setErr("");
    const K = window.KES;
    const para = String(lead.email).trim().toLowerCase();
    const assunto = KM.aplicarVars(f.assunto, lead, state.users);
    const corpo = KM.aplicarVars(f.corpo, lead, state.users);
    const html = tpl ? KM.renderEmailHtml(tpl, f.corpo, lead, state.users) : "";
    const cc = String(f.cc || "").trim();
    const anexos = (f.anexos || []).map((a) => ({ nome: a.nome, url: a.url }));
    const base = { para, paraNome: lead.nome || "", leadId: lead.id, assunto, corpo,
      ts: Date.now(), agendadoPara: Date.now(), origem: "avulso", de: viewer.id };
    if (html) { base.html = html; base.templateId = tpl.id; }
    if (cc) base.cc = cc;
    if (anexos.length) base.anexos = anexos;

// Envio individual: sai AGORA pelo Google (Apps Script da conta comercial@).
    // As respostas do cliente voltam para quem enviou (replyTo).
    if (K.EmailService && K.EmailService.configured) {
      const env = await K.EmailService.enviar({ para, assunto, corpo, replyTo: viewer.email || "", cc, html, anexos });
      setBusy(false);
      if (!env.ok) {
        await DB.mailQueue(tenantId, Object.assign({}, base, { status: "erro", erro: env.error || "" }));
        return setErr("Não foi possível enviar: " + (env.error || "erro desconhecido"));
      }
      await DB.mailQueue(tenantId, Object.assign({}, base, { status: "enviado", enviadoEm: Date.now() }));
      dispatch({ type: "TOAST", msg: "E-mail enviado para " + para + " ✅" });
      return onClose();
    }

// Motor ainda não configurado → só guarda na fila (não sai).
    const r = await DB.mailQueue(tenantId, Object.assign({}, base, { status: "pendente" }));
    setBusy(false);
    if (!r || !r.ok) return setErr("Não foi possível colocar o e-mail na fila.");
    dispatch({ type: "TOAST", msg: "E-mail guardado na fila (motor de e-mail ainda não configurado)." });
    onClose();
  }

return (
    <Modal title={"E-mail para " + lead.nome} onClose={onClose} wide
      footer={<><Btn variant="ghost" onClick={onClose} disabled={busy}>Cancelar</Btn>
        <Btn variant="primary" icon="mail" onClick={enviar} disabled={busy || !lead.email}>{busy ? "Enviando…" : "Enviar e-mail"}</Btn></>}>
      <div style={{ padding: "8px 12px", background: "var(--kes-navy-700)", borderRadius: "var(--radius-md)", fontSize: 12.5, marginBottom: 10 }}>
        Para: <strong>{lead.email || "— sem e-mail cadastrado —"}</strong>{lead.empresa ? " · " + lead.empresa : ""}
      </div>
      <div className="form-row">
        <Field label="Cópia para (CC)" hint="Vários e-mails separados por vírgula">
          <input className="field" value={f.cc} onChange={(e) => set("cc", e.target.value)} placeholder="fulano@empresa.com, chefe@empresa.com" />
        </Field>
        <Field label="Modelo (visual do e-mail)" hint={templates.length ? "Opcional — deixa o e-mail com cara de site" : "Crie modelos na aba E-mails → Modelos"}>
          <select className="field" value={f.templateId} onChange={(e) => { set("templateId", e.target.value); if (!e.target.value) setPrevia(false); }}>
            <option value="">Texto simples (sem modelo)</option>
            {templates.map((t) => <option key={t.id} value={t.id}>{t.nome}</option>)}
          </select>
        </Field>
      </div>
      <Field label="Assunto" required><input className="field" value={f.assunto} onChange={(e) => set("assunto", e.target.value)} placeholder="Ex.: {nome}, sobre nossa conversa" /></Field>
      <Field label="Mensagem" required hint="Use {nome}, {empresa} e {responsavel}">
        <textarea className="field" style={{ minHeight: 130 }} value={f.corpo} onChange={(e) => set("corpo", e.target.value)} placeholder={"Olá {nome},\n\n..."} />
      </Field>
      <AnexosCampo anexos={f.anexos} onChange={(lista) => set("anexos", lista)} teamId={tenantId} />
      {tpl && (
        <div style={{ margin: "6px 0 2px" }}>
          <Btn variant="subtle" size="sm" icon="eye" onClick={() => setPrevia(!previa)}>{previa ? "Fechar prévia" : "Ver prévia com o modelo"}</Btn>
          {previa && (
            <iframe title="previa-envio" sandbox="" srcDoc={KM.renderEmailHtml(tpl, f.corpo || "Sua mensagem aparece aqui…", lead, state.users)}
              style={{ width: "100%", height: 300, border: "1px solid var(--border-dark)", borderRadius: "var(--radius-md)", background: "#eef1f5", marginTop: 8 }} />
          )}
        </div>
      )}
      {err && <div className="form-err"><Icon name="alert" size={14} />{err}</div>}
    </Modal>
  );
}

window.EmailScreen = EmailScreen;
window.EnviarEmailModal = EnviarEmailModal;

' + p.titulo + "

E-mails {etapasAtivas > 0 && {etapasAtivas} sequência(s) ativa(s)}

Régua de “{(stages.find((s) => s.id === aberta) || {}).nome}”