/**
 * E-mail da plataforma para os clientes da Ktalogu, pelo Resend.
 *
 * Só liga com RESEND_API_KEY no servidor. O remetente vem de EMAIL_REMETENTE
 * (ex.: "Ktalogu <no-reply@mail.ktalogu.com.br>"), que precisa ser de um
 * domínio verificado no Resend.
 */

export function emailConfigurado() {
  return Boolean(String(process.env.RESEND_API_KEY || "").trim() && String(process.env.EMAIL_REMETENTE || "").trim());
}

export async function enviarEmail(para: string, assunto: string, html: string, texto: string): Promise<{ ok: true } | { ok: false; erro: string }> {
  const chave = String(process.env.RESEND_API_KEY || "").trim();
  const remetente = String(process.env.EMAIL_REMETENTE || "").trim();
  if (!chave || !remetente) return { ok: false, erro: "E-mail não configurado (RESEND_API_KEY / EMAIL_REMETENTE)." };
  try {
    const resposta = await fetch("https://api.resend.com/emails", {
      method: "POST",
      headers: { Authorization: `Bearer ${chave}`, "Content-Type": "application/json" },
      body: JSON.stringify({ from: remetente, to: [para], subject: assunto, html, text: texto }),
    });
    if (resposta.ok) return { ok: true };
    const corpo = await resposta.text().catch(() => "");
    return { ok: false, erro: `Resend HTTP ${resposta.status}: ${corpo.slice(0, 300)}` };
  } catch (e) {
    return { ok: false, erro: e instanceof Error ? e.message : String(e) };
  }
}

/* ------------------------------------------------------------------ */
/* O desenho                                                           */
/* ------------------------------------------------------------------ */

/*
 * Tabelas e estilo em linha: é o que Gmail, Outlook e o Mail do celular
 * respeitam. As logos são PNG no storage público (e-mail não mostra SVG),
 * geradas a partir de public/brand-logo-purple.svg.
 */
const LOGO_BRANCA = "https://ptpstwltddugnnlewvbw.supabase.co/storage/v1/object/public/products/plataforma/email/logo-ktalogu-branca.png";
const LOGO_ROXA = "https://ptpstwltddugnnlewvbw.supabase.co/storage/v1/object/public/products/plataforma/email/logo-ktalogu-roxa.png";

const COR = {
  marca: "#4425A7",
  marcaEscura: "#2F1780",
  fundo: "#EFEDF6",
  texto: "#1C1830",
  suave: "#5F5A73",
  linha: "#ECEAF3",
};

const FONTE = "'Segoe UI', Roboto, Helvetica, Arial, sans-serif";

export type TomDoEmail = "marca" | "bom" | "atencao" | "ruim";

/* A bolinha da etiqueta: verde é boa notícia, amarelo é prazo, vermelho é ação necessária. */
const COR_DO_TOM: Record<TomDoEmail, string> = { marca: "#CFC4FF", bom: "#7BE3B9", atencao: "#FCD34D", ruim: "#FF9DB8" };

export type ConteudoDoEmail = {
  /** Linha curta que o Gmail mostra depois do assunto, na lista de e-mails. */
  resumo: string;
  /** Rótulo acima do título, na faixa roxa. */
  etiqueta: string;
  titulo: string;
  paragrafos: string[];
  /** Os números que importam, em linhas "rótulo … valor". */
  linhas?: Array<{ rotulo: string; valor: string }>;
  botao?: { texto: string; link: string };
  /** Um código para copiar (ex.: Pix copia-e-cola), numa caixa que quebra a linha. */
  codigo?: { rotulo: string; valor: string };
  tom?: TomDoEmail;
};

function escapar(texto: string) {
  return texto.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c] as string);
}

export function montarEmail(dados: ConteudoDoEmail) {
  const tom = dados.tom ?? "marca";
  const paragrafos = dados.paragrafos
    .map((p) => `<p style="margin:0 0 16px;font-family:${FONTE};font-size:16px;line-height:1.6;color:${COR.suave}">${escapar(p)}</p>`)
    .join("");

  const linhas = dados.linhas?.length
    ? `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin:8px 0 26px;border-collapse:collapse">
${dados.linhas
  .map(
    (l, i) => `<tr>
<td style="padding:13px 0;${i ? `border-top:1px solid ${COR.linha};` : ""}font-family:${FONTE};font-size:14px;color:${COR.suave}">${escapar(l.rotulo)}</td>
<td align="right" style="padding:13px 0;${i ? `border-top:1px solid ${COR.linha};` : ""}font-family:${FONTE};font-size:15px;font-weight:700;color:${COR.texto}">${escapar(l.valor)}</td>
</tr>`
  )
  .join("")}
</table>`
    : "";

  const codigo = dados.codigo
    ? `<p style="margin:4px 0 8px;font-family:${FONTE};font-size:13px;font-weight:700;color:${COR.texto}">${escapar(dados.codigo.rotulo)}</p>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin:0 0 24px"><tr>
<td style="padding:14px 16px;border-radius:12px;background:#F6F4FC;border:1px dashed #C9C1E8;font-family:Consolas,'Courier New',monospace;font-size:12px;line-height:1.55;color:${COR.texto};word-break:break-all">${escapar(dados.codigo.valor)}</td>
</tr></table>`
    : "";

  const botao = dados.botao
    ? `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin:6px 0 0">
<tr><td align="center" bgcolor="${COR.marca}" style="border-radius:14px;background:${COR.marca}">
<a href="${escapar(dados.botao.link)}" style="display:block;padding:17px 24px;font-family:${FONTE};font-size:16px;font-weight:700;color:#FFFFFF;text-decoration:none;border-radius:14px">${escapar(dados.botao.texto)} &rarr;</a>
</td></tr>
<tr><td align="center" style="padding:14px 0 0;font-family:${FONTE};font-size:12px;line-height:1.5;color:${COR.suave}">
Se o botão não abrir, copie e cole no navegador:<br><a href="${escapar(dados.botao.link)}" style="color:${COR.marca};text-decoration:underline;word-break:break-all">${escapar(dados.botao.link.replace(/^https?:\/\//, ""))}</a>
</td></tr>
</table>`
    : "";

  const html = `<!doctype html>
<html lang="pt-BR" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="color-scheme" content="light">
<meta name="supported-color-schemes" content="light">
<title>${escapar(dados.titulo)}</title>
</head>
<body style="margin:0;padding:0;background:${COR.fundo}">
<div style="display:none;max-height:0;overflow:hidden;opacity:0;color:transparent">${escapar(dados.resumo)}&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;</div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" bgcolor="${COR.fundo}" style="background:${COR.fundo}">
<tr><td align="center" style="padding:32px 14px">

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="max-width:580px;border-collapse:separate">

<tr><td bgcolor="${COR.marca}" style="background:${COR.marca};background-image:linear-gradient(135deg,${COR.marca} 0%,${COR.marcaEscura} 100%);border-radius:22px 22px 0 0;padding:30px 34px 34px">
<img src="${LOGO_BRANCA}" width="132" alt="Ktalogu" style="display:block;width:132px;height:auto;border:0;outline:none">
<table role="presentation" cellpadding="0" cellspacing="0" style="margin:34px 0 12px"><tr>
<td style="padding:5px 12px;border-radius:999px;background:rgba(255,255,255,0.14);font-family:${FONTE};font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:${COR_DO_TOM[tom]}">&#9679;&nbsp; ${escapar(dados.etiqueta)}</td>
</tr></table>
<h1 style="margin:0;font-family:${FONTE};font-size:28px;line-height:1.22;font-weight:800;color:#FFFFFF;letter-spacing:-0.4px">${escapar(dados.titulo)}</h1>
</td></tr>

<tr><td bgcolor="#FFFFFF" style="background:#FFFFFF;border-radius:0 0 22px 22px;padding:32px 34px 34px">
${paragrafos}
${linhas}
${codigo}
${botao}
</td></tr>

<tr><td align="center" style="padding:28px 20px 6px">
<img src="${LOGO_ROXA}" width="86" alt="Ktalogu" style="display:block;width:86px;height:auto;border:0;opacity:0.55">
</td></tr>
<tr><td align="center" style="padding:10px 24px 0;font-family:${FONTE};font-size:12px;line-height:1.6;color:${COR.suave}">
Gestão para gráficas, brindes e personalizados.<br>
Este endereço não recebe respostas. Para falar com a gente, chame o suporte no WhatsApp.<br>
Você recebeu este e-mail porque tem uma conta na Ktalogu.
</td></tr>

</table>
</td></tr>
</table>
</body>
</html>`;

  const texto = [
    dados.titulo,
    "",
    ...dados.paragrafos,
    ...(dados.linhas?.length ? ["", ...dados.linhas.map((l) => `${l.rotulo}: ${l.valor}`)] : []),
    ...(dados.codigo ? ["", `${dados.codigo.rotulo}`, dados.codigo.valor] : []),
    ...(dados.botao ? ["", `${dados.botao.texto}: ${dados.botao.link}`] : []),
    "",
    "Este endereço não recebe respostas. Para falar com a gente, chame o suporte no WhatsApp.",
  ].join("\n");
  return { html, texto };
}