/* ============================================================
   KeS Metas — E-MAILS
   ------------------------------------------------------------
   • SEQUÊNCIA POR ETAPA (drip): para cada etapa do funil, uma
     régua de e-mails com tempo próprio (ex.: na hora, +2 dias, +5 dias).
     Quando o lead ENTRA na etapa, os e-mails são agendados na fila.
   • ENVIO ESPECÍFICO: um e-mail avulso para um lead (modal).
   • A fila (outbox) é lida pelo n8n, que envia pelo Brevo
     (remetente comercial@kesassessoria.com.br) e marca "enviado".
     O app NUNCA guarda senha/API — igual ao WhatsApp.
   ============================================================ */

/* ---- Variáveis do texto: {nome} {empresa} {responsavel} ---- */
function aplicarVars(txt, lead, users) {
  const resp = lead && lead.responsavelId ? (users || []).find((u) => u.id === lead.responsavelId) : null;
  return String(txt || "")
    .replace(/\{nome\}/gi, (lead && lead.nome) || "")
    .replace(/\{empresa\}/gi, (lead && lead.empresa) || "")
    .replace(/\{responsavel\}/gi, (resp && resp.nome) || "KeS Assessoria");
}

/* ---- Texto simples -> HTML (escapa e mantém parágrafos/quebras) ---- */
function corpoParaHtml(txt) {
  const esc = String(txt || "")
    .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
  return esc.split(/\n{2,}/).map((par) =>
    '<p style="margin:0 0 14px">' + par.replace(/\n/g, "<br>") + "</p>").join("");
}

/* ---- TEMPLATES: monta o HTML "de site" a partir das opções escolhidas ----
   O lugar onde a mensagem digitada entra é o marcador {mensagem}.           */
function montarTemplateHtml(p) {
  p = p || {};
  const cor = p.cor || "#132a4a";
  const logo = p.logoUrl ? '<img src="' + p.logoUrl + '" alt="" style="max-height:44px;vertical-align:middle">' : "";
  const cab = p.cabecalho || "KeS Assessoria";
  const titulo = p.titulo ? '<h1 style="margin:0 0 16px;font-size:24px;line-height:1.25;color:#101828">' + p.titulo + "</h1>" : "";
  const botao = (p.botaoTexto && p.botaoLink)
    ? '<div style="text-align:center;margin:26px 0 6px"><a href="' + p.botaoLink + '" style="display:inline-block;background:' + cor + ';color:#ffffff;text-decoration:none;font-weight:700;font-size:15px;padding:13px 34px;border-radius:8px">' + p.botaoTexto + "</a></div>"
    : "";
  const rodape = p.rodape || "KeS Assessoria · comercial@kesassessoria.com.br";
  const base = p.base || "classico";

  const abre = '<div style="margin:0;padding:28px 12px;background:#eef1f5;font-family:Arial,Helvetica,sans-serif">' +
    '<div style="max-width:600px;margin:0 auto;background:#ffffff;border-radius:12px;overflow:hidden;border:1px solid #e3e7ee">';
  const fecha = '<div style="padding:18px 34px;background:#f5f7fa;border-top:1px solid #e3e7ee;font-size:12px;color:#8a94a6;text-align:center">' + rodape + "</div></div></div>";
  const corpoMeio = '<div style="padding:30px 34px;font-size:15px;line-height:1.65;color:#344054">' + titulo + "{mensagem}" + botao + "</div>";

  if (base === "moderno") {
    return abre +
      '<div style="background:linear-gradient(135deg,' + cor + "," + cor + 'cc);padding:34px;text-align:center">' +
      (logo ? logo + "<br><br>" : "") +
      '<div style="color:#ffffff;font-size:21px;font-weight:800">' + cab + "</div></div>" +
      corpoMeio + fecha;
  }
  if (base === "minimal") {
    return abre.replace("border:1px solid #e3e7ee", "border:1px solid #e3e7ee;border-top:4px solid " + cor) +
      '<div style="padding:26px 34px 0;font-size:13px;letter-spacing:.4px;text-transform:uppercase;color:' + cor + ';font-weight:800">' +
      (logo ? logo + " " : "") + cab + "</div>" + corpoMeio + fecha;
  }
  // clássico: faixa de cor no topo com logo + nome
  return abre +
    '<div style="background:' + cor + ';padding:20px 34px;color:#ffffff;font-size:18px;font-weight:800">' +
    (logo ? logo + " " : "") + cab + "</div>" + corpoMeio + fecha;
}

/* ---- Junta template + mensagem digitada + variáveis do lead ---- */
function renderEmailHtml(template, corpoTexto, lead, users) {
  if (!template || !template.html) return "";
  const html = String(template.html).replace(/\{mensagem\}/gi, corpoParaHtml(corpoTexto));
  return aplicarVars(html, lead, users);
}

/* ---- Monta os e-mails de uma sequência para 1 lead (sem enviar) ---- */
function montarSequencia(seq, lead, users, stageId, deId, templates) {
  if (!seq || !seq.ativo || !Array.isArray(seq.emails) || !lead || !lead.email) return [];
  const agora = Date.now();
  return seq.emails.filter((e) => (e.assunto || "").trim() && (e.corpo || "").trim()).map((e, i) => {
    const tpl = e.templateId ? (templates || []).find((t) => t.id === e.templateId) : null;
    const m = {
      para: String(lead.email).trim().toLowerCase(),
      paraNome: lead.nome || "",
      leadId: lead.id,
      assunto: aplicarVars(e.assunto, lead, users),
      corpo: aplicarVars(e.corpo, lead, users),
      ts: agora,
      agendadoPara: agora + (parseInt(e.dias, 10) || 0) * 86400000,
      status: "pendente",
      origem: "sequencia",
      seqStage: stageId,
      seqIndex: i,
      de: deId || null,
    };
    if (tpl) { m.templateId = tpl.id; m.html = renderEmailHtml(tpl, e.corpo, lead, users); }
    if (e.cc && String(e.cc).trim()) m.cc = String(e.cc).trim();
    if (Array.isArray(e.anexos) && e.anexos.length) m.anexos = e.anexos.map((a) => ({ nome: a.nome, url: a.url }));
    return m;
  });
}
window.KESMAIL = { aplicarVars, montarSequencia, montarTemplateHtml, renderEmailHtml, corpoParaHtml };

/* ============================ TELA ============================ */
function EmailScreen({ state, dispatch, viewer }) {
  const { useState, useEffect } = React;
  const DB = window.KESDB;
  const tenantId = tenantIdAtual(state);
  const [aba, setAba] = useState("seq");           // seq | fila
  const [fila, setFila] = useState([]);
  const [erroBanco, setErroBanco] = useState(false);

  useEffect(() => {
    setFila([]); setErroBanco(false);
    if (!DB || !DB.mailListen || !tenantId) return;
    return DB.mailListen(tenantId, {}, (lista, err) => {
      if (err) { setErroBanco(true); return; }
      setFila(lista || []);
    });
  }, [tenantId]);

  const seqs = (state.config && state.config.emailSeqs) || {};
  const salvarSeqs = (novo) => dispatch({ type: "SET_CONFIG", patch: { emailSeqs: novo } });
  const etapasAtivas = Object.keys(seqs).filter((k) => seqs[k] && seqs[k].ativo).length;

  const pend = fila.filter((m) => m.status === "pendente");
  const env = fila.filter((m) => m.status === "enviado");
  const err = fila.filter((m) => m.status === "erro");

  return (
    <div className="content">
      <div className="topbar">
        <div className="ttl">
          <h1 style={{ display: "flex", alignItems: "center", gap: 10 }}>
            E-mails
            {etapasAtivas > 0 && <span className="wa-status ok" style={{ fontSize: 11, padding: "4px 11px" }}><span className="wa-dot" /> {etapasAtivas} sequência(s) ativa(s)</span>}
          </h1>
          <p>Régua de e-mails por etapa do funil + envios avulsos. Remetente: <strong>comercial@kesassessoria.com.br</strong></p>
        </div>
        <div className="actions">
          <Btn variant={aba === "seq" ? "primary" : "subtle"} size="sm" icon="sliders" onClick={() => setAba("seq")}>Sequências</Btn>
          <Btn variant={aba === "modelos" ? "primary" : "subtle"} size="sm" icon="layout" onClick={() => setAba("modelos")}>Modelos</Btn>
          <Btn variant={aba === "fila" ? "primary" : "subtle"} size="sm" icon="mail" onClick={() => setAba("fila")}>Fila {pend.length ? "(" + pend.length + ")" : ""}</Btn>
        </div>
      </div>

      {erroBanco && (
        <div className="wa-supervisao" style={{ background: "rgba(224,60,49,.12)", borderColor: "var(--kes-red-400)", color: "var(--kes-red-400)" }}>
          <Icon name="alert" size={15} /> O banco recusou a leitura da fila de e-mails — falta publicar as regras.
        </div>
      )}

      {aba === "seq" ? (
        <SequenciasPorEtapa state={state} seqs={seqs} onSalvar={salvarSeqs} dispatch={dispatch} />
      ) : aba === "modelos" ? (
        <ModelosEmail state={state} dispatch={dispatch} />
      ) : (
        <FilaEmails pend={pend} env={env} err={err} />
      )}
    </div>
  );
}

/* -------- Sequências por etapa (a régua) -------- */
function SequenciasPorEtapa({ state, seqs, onSalvar, dispatch }) {
  const { useState } = React;
  const stages = state.stages || [];
  const templates = (state.config && state.config.emailTemplates) || [];
  const tenantId = tenantIdAtual(state);
  const [aberta, setAberta] = useState(stages[0] ? stages[0].id : null);
  const seq = seqs[aberta] || { ativo: false, emails: [] };

  const setSeq = (novo) => onSalvar(Object.assign({}, seqs, { [aberta]: novo }));
  const setEmail = (i, campo, val) => {
    const emails = (seq.emails || []).slice();
    emails[i] = Object.assign({}, emails[i], { [campo]: val });
    setSeq(Object.assign({}, seq, { emails }));
  };
  const addEmail = () => setSeq(Object.assign({}, seq, { emails: (seq.emails || []).concat([{ assunto: "", corpo: "", dias: (seq.emails || []).length === 0 ? 0 : 2 }]) }));
  const delEmail = (i) => setSeq(Object.assign({}, seq, { emails: (seq.emails || []).filter((_, x) => x !== i) }));

  return (
    <div className="email-cols">
      {/* etapas */}
      <div className="card" style={{ padding: 8 }}>
        <div className="eyebrow" style={{ fontSize: 10.5, padding: "8px 8px 6px" }}>Etapas do funil</div>
        {stages.map((s) => {
          const q = (seqs[s.id] && seqs[s.id].emails || []).length;
          const on = seqs[s.id] && seqs[s.id].ativo;
          return (
            <button key={s.id} className={"nav-item" + (aberta === s.id ? " active" : "")} style={{ width: "100%", justifyContent: "space-between" }}
              onClick={() => setAberta(s.id)}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 8, minWidth: 0 }}>
                <span style={{ width: 7, height: 7, borderRadius: 9, background: on ? "var(--ok)" : "var(--fg3)", flexShrink: 0 }} />
                <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{s.nome}</span>
              </span>
              {q > 0 && <Badge tone="muted">{q}</Badge>}
            </button>
          );
        })}
      </div>

      {/* régua da etapa */}
      <div className="card" style={{ padding: 18 }}>
        {!aberta ? <div className="empty">Escolha uma etapa</div> : (
          <>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, flexWrap: "wrap", marginBottom: 12 }}>
              <div>
                <h3 style={{ margin: 0, fontSize: "var(--text-md)" }}>Régua de “{(stages.find((s) => s.id === aberta) || {}).nome}”</h3>
                <p className="muted" style={{ margin: "4px 0 0", fontSize: 12.5 }}>Os e-mails são agendados quando o lead <strong>entra</strong> nesta etapa.</p>
              </div>
              <label className="cfg-toggle" style={{ margin: 0 }}>
                <input type="checkbox" checked={!!seq.ativo} onChange={(e) => setSeq(Object.assign({}, seq, { ativo: e.target.checked }))} />
                <span><strong>Ativar</strong></span>
              </label>
            </div>

            {(seq.emails || []).length === 0 && (
              <div className="empty" style={{ padding: 22 }}><Icon name="mail" size={32} /><div style={{ fontSize: 13 }}>Nenhum e-mail nesta etapa ainda.</div></div>
            )}

            {(seq.emails || []).map((e, i) => (
              <div key={i} style={{ border: "1px solid var(--border-dark)", borderRadius: "var(--radius-md)", padding: 14, marginBottom: 10 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10, flexWrap: "wrap" }}>
                  <Badge tone="muted">E-mail {i + 1}</Badge>
                  <div style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                    <span className="muted" style={{ fontSize: 12.5 }}>Enviar</span>
                    <input type="number" min="0" className="field" style={{ width: 74, padding: "6px 8px" }}
                      value={e.dias === 0 ? 0 : (e.dias || 0)} onChange={(ev) => setEmail(i, "dias", ev.target.value)} />
                    <span className="muted" style={{ fontSize: 12.5 }}>{Number(e.dias) === 0 ? "dias depois (na hora)" : "dias após entrar na etapa"}</span>
                  </div>
                  <button className="iconbtn" title="Remover" onClick={() => delEmail(i)} style={{ marginLeft: "auto", color: "var(--kes-red-400)" }}><Icon name="trash" size={15} /></button>
                </div>
                <Field label="Assunto"><input className="field" value={e.assunto || ""} onChange={(ev) => setEmail(i, "assunto", ev.target.value)} placeholder="Ex.: {nome}, tudo bem?" /></Field>
                <Field label="Mensagem" hint="Use {nome}, {empresa} e {responsavel}">
                  <textarea className="field" style={{ minHeight: 110 }} value={e.corpo || ""} onChange={(ev) => 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);

  const salvarTodos = (lista) => dispatch({ type: "SET_CONFIG", patch: { emailTemplates: lista } });
  const salvarUm = (tpl) => {
    const existe = templates.some((t) => t.id === tpl.id);
    salvarTodos(existe ? templates.map((t) => (t.id === tpl.id ? tpl : t)) : templates.concat([tpl]));
    setEditando(null);
    dispatch({ type: "TOAST", msg: "Modelo “" + tpl.nome + "” salvo." });
  };
  const duplicar = (tpl) => {
    const copia = Object.assign({}, tpl, { id: "tpl-" + Date.now(), nome: tpl.nome + " (cópia)" });
    salvarTodos(templates.concat([copia]));
  };
  const excluir = (tpl) => { salvarTodos(templates.filter((t) => t.id !== tpl.id)); setConfirmaDel(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]);

  function salvar() {
    if (!nome.trim()) return setErr("Dê um nome ao modelo.");
    if (modo === "html" && htmlLivre.indexOf("{mensagem}") < 0) return setErr("O HTML precisa ter o marcador {mensagem} — é onde a mensagem digitada entra.");
    onSalvar({
      id: template ? template.id : "tpl-" + Date.now(),
      nome: nome.trim(), modo, props: modo === "visual" ? props : undefined,
      html: htmlAtual,
    });
  }

  const BASES = [["classico", "Clássico"], ["moderno", "Moderno"], ["minimal", "Minimalista"]];
  return (
    <Modal title={template ? "Editar modelo" : "Novo modelo de e-mail"} onClose={onClose} wide
      footer={<><Btn variant="ghost" onClick={onClose}>Cancelar</Btn>
        <Btn variant="primary" icon="check" onClick={salvar}>Salvar modelo</Btn></>}>
      <div className="email-cols wide">
        <div>
          <Field label="Nome do modelo" required><input className="field" value={nome} onChange={(e) => setNome(e.target.value)} placeholder="Ex.: Boas-vindas" /></Field>
          <div style={{ display: "flex", gap: 6, margin: "4px 0 12px" }}>
            <Btn variant={modo === "visual" ? "primary" : "subtle"} size="sm" onClick={() => setModo("visual")}>Visual</Btn>
            <Btn variant={modo === "html" ? "primary" : "subtle"} size="sm" onClick={() => { if (modo === "visual") setHtmlLivre(KM.montarTemplateHtml(props)); setModo("html"); }}>HTML livre</Btn>
          </div>

          {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;
