/**
 * Montador de Propostas UserVoz
 *
 * Instalação:
 * npm install nodemailer pdfkit
 *
 * Execução:
 * SMTP_PASSWORD="NOVA_SENHA" node montador-uservoz.mjs
 */

import http from "node:http";
import crypto from "node:crypto";
import nodemailer from "nodemailer";
import PDFDocument from "pdfkit";

const PORT = Number(process.env.PORT || 3000);

const SMTP = {
  host: process.env.SMTP_HOST || "smtp.hostinger.com",
  port: Number(process.env.SMTP_PORT || 465),
  user: process.env.SMTP_USER || "financeiro@uservoz.com",
  password: process.env.SMTP_PASSWORD,
  fromName:
    process.env.SMTP_FROM_NAME || "UserVoz Telecomunicações",
  cc: process.env.SMTP_CC || "comercial@uservoz.net",
};

const enviosRecentes = new Map();

const transportador = SMTP.password
  ? nodemailer.createTransport({
      host: SMTP.host,
      port: SMTP.port,

      // Porta 465 usa SSL/TLS direto.
      secure: SMTP.port === 465,

      // Porta 587 exige STARTTLS.
      requireTLS: SMTP.port === 587,

      auth: {
        user: SMTP.user,
        pass: SMTP.password,
      },

      connectionTimeout: 15000,
      greetingTimeout: 10000,
      socketTimeout: 30000,

      // Impede leitura de anexos externos.
      disableFileAccess: true,
      disableUrlAccess: true,

      // Não registrar conteúdo SMTP.
      logger: false,
      debug: false,
    })
  : null;

function emailValido(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i.test(
    String(email || "").trim()
  );
}

function dinheiro(valor) {
  return new Intl.NumberFormat("pt-BR", {
    style: "currency",
    currency: "BRL",
  }).format(Number(valor) || 0);
}

function escaparHTML(valor = "") {
  return String(valor).replace(/[&<>"']/g, (caractere) => {
    const mapa = {
      "&": "&amp;",
      "<": "&lt;",
      ">": "&gt;",
      '"': "&quot;",
      "'": "&#039;",
    };

    return mapa[caractere];
  });
}

function gerarPDF(proposta) {
  return new Promise((resolve, reject) => {
    const documento = new PDFDocument({
      size: "A4",
      margin: 48,
      info: {
        Title: `Proposta Comercial ${proposta.numero}`,
        Author: "UserVoz Telecomunicações",
      },
    });

    const partes = [];

    documento.on("data", (parte) => partes.push(parte));
    documento.on("end", () => resolve(Buffer.concat(partes)));
    documento.on("error", reject);

    // Cabeçalho
    documento.rect(0, 0, 595, 105).fill("#0d2f5d");

    documento
      .fillColor("#ffffff")
      .font("Helvetica-Bold")
      .fontSize(25)
      .text("UserVoz", 48, 33);

    documento
      .fillColor("#55c7e8")
      .font("Helvetica")
      .fontSize(9)
      .text("TELECOMUNICAÇÕES", 49, 65);

    documento
      .fillColor("#ffffff")
      .font("Helvetica-Bold")
      .fontSize(16)
      .text("PROPOSTA COMERCIAL", 350, 42, {
        width: 195,
        align: "right",
      });

    // Identificação da proposta
    documento
      .fillColor("#17243a")
      .font("Helvetica-Bold")
      .fontSize(15)
      .text(`Proposta ${proposta.numero}`, 48, 130);

    documento
      .font("Helvetica")
      .fontSize(9)
      .fillColor("#66758b")
      .text(
        `Data de emissão: ${new Date().toLocaleDateString("pt-BR")}`
      )
      .text("Validade da proposta: 10 dias");

    // Dados do cliente
    documento
      .moveDown(1.5)
      .font("Helvetica-Bold")
      .fontSize(12)
      .fillColor("#0d2f5d")
      .text("DADOS DO CLIENTE");

    documento
      .moveDown(0.4)
      .font("Helvetica")
      .fontSize(10)
      .fillColor("#17243a")
      .text(`Empresa: ${proposta.empresa || "Não informado"}`)
      .text(`CNPJ: ${proposta.cnpj || "Não informado"}`)
      .text(`Contato: ${proposta.contato || "Não informado"}`)
      .text(`E-mail: ${proposta.email}`)
      .text(`Telefone: ${proposta.telefone || "Não informado"}`)
      .text(`Endereço: ${proposta.endereco || "Não informado"}`);

    // Produtos
    documento
      .moveDown(1.4)
      .font("Helvetica-Bold")
      .fontSize(12)
      .fillColor("#0d2f5d")
      .text("PRODUTOS E SERVIÇOS");

    documento.moveDown(0.5);

    const posicaoX = 48;
    const larguras = [265, 55, 90, 90];
    const cabecalhos = [
      "Serviço",
      "Qtd.",
      "Valor unitário",
      "Total",
    ];

    let posicaoY = documento.y;

    documento
      .rect(posicaoX, posicaoY, 500, 25)
      .fill("#eaf3ff");

    cabecalhos.forEach((cabecalho, indice) => {
      const x =
        posicaoX +
        larguras
          .slice(0, indice)
          .reduce((total, largura) => total + largura, 0);

      documento
        .fillColor("#0d2f5d")
        .font("Helvetica-Bold")
        .fontSize(8)
        .text(cabecalho, x + 5, posicaoY + 8, {
          width: larguras[indice] - 10,
        });
    });

    posicaoY += 25;

    proposta.itens.forEach((item) => {
      if (posicaoY > 700) {
        documento.addPage();
        posicaoY = 55;
      }

      const totalItem =
        Number(item.quantidade) * Number(item.valor);

      const valores = [
        item.nome,
        item.quantidade,
        dinheiro(item.valor),
        dinheiro(totalItem),
      ];

      documento
        .rect(posicaoX, posicaoY, 500, 31)
        .strokeColor("#dfe6ef")
        .stroke();

      valores.forEach((valor, indice) => {
        const x =
          posicaoX +
          larguras
            .slice(0, indice)
            .reduce((total, largura) => total + largura, 0);

        documento
          .fillColor("#17243a")
          .font("Helvetica")
          .fontSize(8)
          .text(String(valor), x + 5, posicaoY + 9, {
            width: larguras[indice] - 10,
          });
      });

      posicaoY += 31;
    });

    documento.y = posicaoY + 16;

    documento
      .font("Helvetica")
      .fontSize(10)
      .fillColor("#66758b")
      .text(`Condição de pagamento: ${proposta.condicao}`);

    if (Number(proposta.desconto) > 0) {
      documento.text(
        `Desconto aplicado: ${proposta.desconto}%`
      );
    }

    documento
      .moveDown(0.5)
      .font("Helvetica-Bold")
      .fontSize(17)
      .fillColor("#0d2f5d")
      .text(`Investimento total: ${dinheiro(proposta.total)}`, {
        align: "right",
      });

    if (proposta.observacoes) {
      documento
        .moveDown(1.2)
        .font("Helvetica-Bold")
        .fontSize(11)
        .fillColor("#0d2f5d")
        .text("OBSERVAÇÕES");

      documento
        .moveDown(0.3)
        .font("Helvetica")
        .fontSize(9)
        .fillColor("#17243a")
        .text(proposta.observacoes);
    }

    documento
      .moveDown(2)
      .font("Helvetica")
      .fontSize(8)
      .fillColor("#66758b")
      .text(
        "UserVoz Telecomunicações • WhatsApp (31) 3500-3607 • Telefone (31) 3500-3608",
        { align: "center" }
      );

    documento.end();
  });
}

function criarTemplateEmail(proposta) {
  const nome =
    proposta.contato ||
    proposta.empresa ||
    "cliente";

  return `
    <!doctype html>
    <html lang="pt-BR">
      <body style="
        margin:0;
        background:#f3f6fa;
        font-family:Arial,sans-serif;
        color:#17243a;
      ">
        <table
          width="100%"
          cellpadding="0"
          cellspacing="0"
          role="presentation"
        >
          <tr>
            <td align="center" style="padding:28px">
              <table
                width="600"
                cellpadding="0"
                cellspacing="0"
                role="presentation"
                style="
                  max-width:600px;
                  background:#ffffff;
                  border-radius:14px;
                  overflow:hidden;
                "
              >
                <tr>
                  <td style="
                    background:#0d2f5d;
                    padding:28px 34px;
                    color:#ffffff;
                  ">
                    <div style="
                      font-size:25px;
                      font-weight:700;
                    ">
                      User<span style="color:#55c7e8">Voz</span>
                    </div>

                    <div style="
                      font-size:9px;
                      letter-spacing:2px;
                    ">
                      TELECOMUNICAÇÕES
                    </div>
                  </td>
                </tr>

                <tr>
                  <td style="padding:34px">
                    <h1 style="
                      color:#0d2f5d;
                      font-size:22px;
                      margin:0 0 18px;
                    ">
                      Sua proposta comercial está pronta
                    </h1>

                    <p>Olá, ${escaparHTML(nome)}.</p>

                    <p>
                      Preparamos sua proposta comercial da
                      <strong>UserVoz Telecomunicações</strong>
                      conforme a solução selecionada.
                    </p>

                    <div style="
                      background:#eaf3ff;
                      border-radius:9px;
                      padding:18px;
                      margin:22px 0;
                    ">
                      <strong>
                        Proposta ${escaparHTML(proposta.numero)}
                      </strong>

                      <br>

                      <span style="color:#66758b">
                        Investimento:
                        ${escaparHTML(dinheiro(proposta.total))}
                      </span>
                    </div>

                    <p>
                      O documento completo está anexado em PDF
                      a este e-mail.
                    </p>

                    <p style="margin-top:28px">
                      Atenciosamente,<br>
                      <strong>
                        Equipe UserVoz Telecomunicações
                      </strong>
                    </p>
                  </td>
                </tr>

                <tr>
                  <td style="
                    background:#f5f8fb;
                    padding:18px 34px;
                    color:#66758b;
                    font-size:12px;
                  ">
                    WhatsApp: (31) 3500-3607<br>
                    Telefone: (31) 3500-3608
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </body>
    </html>
  `;
}

async function lerJSON(requisicao) {
  const partes = [];
  let tamanho = 0;

  for await (const parte of requisicao) {
    tamanho += parte.length;

    if (tamanho > 1_000_000) {
      throw new Error("Solicitação muito grande");
    }

    partes.push(parte);
  }

  return JSON.parse(
    Buffer.concat(partes).toString("utf8")
  );
}

function responderJSON(resposta, status, conteudo) {
  resposta.writeHead(status, {
    "Content-Type": "application/json; charset=utf-8",
    "Cache-Control": "no-store",
    "X-Content-Type-Options": "nosniff",
  });

  resposta.end(JSON.stringify(conteudo));
}

async function enviarProposta(requisicao, resposta) {
  const dataEnvio = new Date().toISOString();
  let destinatario = "não identificado";

  try {
    if (!transportador) {
      return responderJSON(resposta, 503, {
        ok: false,
        mensagem:
          "A variável SMTP_PASSWORD ainda não foi configurada.",
      });
    }

    const proposta = await lerJSON(requisicao);

    destinatario = String(proposta.email || "")
      .trim()
      .toLowerCase();

    if (!emailValido(destinatario)) {
      return responderJSON(resposta, 400, {
        ok: false,
        mensagem: "Informe um e-mail válido.",
      });
    }

    if (
      !Array.isArray(proposta.itens) ||
      proposta.itens.length === 0
    ) {
      return responderJSON(resposta, 400, {
        ok: false,
        mensagem: "Adicione pelo menos um produto.",
      });
    }

    // Prevenção de envio duplicado
    const identificador = crypto
      .createHash("sha256")
      .update(
        `${destinatario}|${proposta.numero}|${proposta.total}`
      )
      .digest("hex");

    const envioAnterior = enviosRecentes.get(identificador);

    if (
      envioAnterior &&
      Date.now() - envioAnterior < 60_000
    ) {
      return responderJSON(resposta, 409, {
        ok: false,
        mensagem:
          "Esta proposta já foi enviada. Aguarde um minuto.",
      });
    }

    enviosRecentes.set(identificador, Date.now());

    const pdf = await gerarPDF(proposta);

    const numeroSeguro = String(proposta.numero)
      .replace(/[^a-z0-9-]/gi, "");

    await transportador.sendMail({
      from: {
        name: SMTP.fromName,
        address: SMTP.user,
      },

      to: destinatario,

      cc: SMTP.cc,

      subject:
        "Sua proposta comercial — UserVoz Telecomunicações",

      html: criarTemplateEmail(proposta),

      attachments: [
        {
          filename:
            `Proposta-UserVoz-${numeroSeguro}.pdf`,

          content: pdf,

          contentType: "application/pdf",
        },
      ],
    });

    // Não registra senha, PDF ou conteúdo do e-mail.
    console.log(
      JSON.stringify({
        data: dataEnvio,
        destinatario,
        resultado: "sucesso",
      })
    );

    return responderJSON(resposta, 200, {
      ok: true,
      mensagem:
        `Proposta enviada com sucesso para ${destinatario}.`,
    });
  } catch (erro) {
    console.error(
      JSON.stringify({
        data: dataEnvio,
        destinatario,
        resultado: "erro",
        tipo: erro?.name || "Erro",
      })
    );

    return responderJSON(resposta, 500, {
      ok: false,
      mensagem:
        "Não foi possível enviar. Confira o SMTP e tente novamente.",
    });
  }
}

const HTML = String.raw`
<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">

  <meta
    name="viewport"
    content="width=device-width,initial-scale=1"
  >

  <title>Montador de Propostas UserVoz</title>

  <style>
    :root {
      --navy: #0d2f5d;
      --blue: #2478e5;
      --cyan: #55c7e8;
      --ink: #17243a;
      --muted: #66758b;
      --line: #dfe6ef;
      --background: #f3f6fa;
      --green: #159a68;
      --red: #c73b4d;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: var(--background);
      color: var(--ink);
      font-family: Arial, sans-serif;
      font-size: 14px;
    }

    button,
    input,
    textarea {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    header {
      padding: 18px 4vw;
      background: linear-gradient(
        105deg,
        #09274f,
        #114680
      );
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .marca {
      font-size: 25px;
      font-weight: 800;
    }

    .marca b {
      color: var(--cyan);
    }

    .marca small {
      display: block;
      font-size: 8px;
      letter-spacing: 2.7px;
    }

    .workspace {
      width: min(1250px, 94vw);
      margin: 28px auto;
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 22px;
      align-items: start;
    }

    .painel,
    .resumo {
      background: white;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 22px;
      margin-bottom: 18px;
      box-shadow: 0 7px 24px rgba(23, 54, 86, 0.05);
    }

    h1 {
      font-size: 27px;
      margin: 0 0 8px;
    }

    h2 {
      font-size: 17px;
    }

    .introducao {
      color: var(--muted);
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }

    .largura-total {
      grid-column: 1 / -1;
    }

    label {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 12px;
      font-weight: 700;
    }

    input,
    textarea {
      width: 100%;
      border: 1px solid #d7e0ea;
      border-radius: 8px;
      padding: 11px;
      outline: none;
    }

    input:focus,
    textarea:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(36, 120, 229, 0.1);
    }

    .produtos {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .produto {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 13px;
      display: flex;
      flex-direction: column;
    }

    .categoria {
      font-size: 9px;
      color: #527092;
      font-weight: 800;
      text-transform: uppercase;
    }

    .produto h3 {
      font-size: 13px;
    }

    .produto p {
      font-size: 11px;
      color: var(--muted);
      flex: 1;
    }

    .adicionar {
      align-self: flex-end;
      width: 31px;
      height: 31px;
      border: 0;
      border-radius: 7px;
      background: var(--blue);
      color: white;
      font-size: 18px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
    }

    th,
    td {
      padding: 9px;
      border-bottom: 1px solid var(--line);
      text-align: left;
    }

    th {
      background: #f5f8fb;
      color: var(--muted);
    }

    td input {
      padding: 7px;
    }

    .remover {
      border: 0;
      background: transparent;
      color: var(--red);
      font-size: 18px;
    }

    aside {
      position: sticky;
      top: 18px;
    }

    .prazos {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .prazos button {
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: white;
    }

    .prazos button.ativo {
      border: 2px solid var(--blue);
      background: #f4f9ff;
    }

    .linha {
      display: flex;
      justify-content: space-between;
      margin: 10px 0;
      color: var(--muted);
    }

    .total {
      margin: 15px 0;
      color: var(--navy);
      font-size: 28px;
      font-weight: 800;
    }

    .principal,
    .secundario {
      width: 100%;
      padding: 12px;
      border-radius: 9px;
      font-weight: 800;
    }

    .principal {
      border: 0;
      background: var(--blue);
      color: white;
    }

    .principal:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }

    .secundario {
      margin-top: 8px;
      border: 1px solid var(--line);
      background: white;
      color: var(--navy);
    }

    .status {
      display: none;
      margin-top: 12px;
      padding: 11px;
      border-radius: 8px;
      font-size: 12px;
    }

    .status.sucesso {
      display: block;
      background: #eaf8f2;
      color: #08794f;
    }

    .status.erro {
      display: block;
      background: #fff0f1;
      color: #a92d3d;
    }

    @media (max-width: 950px) {
      .workspace {
        grid-template-columns: 1fr;
      }

      aside {
        position: static;
      }
    }

    @media (max-width: 700px) {
      .grid,
      .produtos {
        grid-template-columns: 1fr;
      }

      .largura-total {
        grid-column: auto;
      }

      table {
        display: block;
        overflow-x: auto;
      }
    }

    @media print {
      header {
        print-color-adjust: exact;
      }

      .produtos,
      .principal,
      .secundario {
        display: none;
      }

      .workspace {
        display: block;
        width: 100%;
      }

      .painel,
      .resumo {
        box-shadow: none;
      }
    }
  </style>
</head>

<body>
  <header>
    <div class="marca">
      User<b>Voz</b>
      <small>TELECOMUNICAÇÕES</small>
    </div>

    <strong>Montador de Propostas</strong>
  </header>

  <main class="workspace">
    <section>
      <h1>Monte a proposta comercial</h1>

      <p class="introducao">
        Preencha o cliente, escolha os serviços e envie o
        PDF por e-mail.
      </p>

      <div class="painel">
        <h2>1. Dados do cliente</h2>

        <div class="grid">
          <label class="largura-total">
            Razão social / Nome

            <input id="empresa">
          </label>

          <label>
            CNPJ

            <input
              id="cnpj"
              placeholder="00.000.000/0000-00"
            >
          </label>

          <label>
            Contato

            <input id="contato">
          </label>

          <label>
            E-mail destinatário

            <input
              id="email"
              type="email"
              required
            >
          </label>

          <label>
            WhatsApp

            <input id="telefone">
          </label>

          <label class="largura-total">
            Endereço

            <input id="endereco">
          </label>
        </div>
      </div>

      <div class="painel">
        <h2>2. Produtos e serviços</h2>

        <div id="produtos" class="produtos"></div>
      </div>

      <div class="painel">
        <h2>3. Itens selecionados</h2>

        <table>
          <thead>
            <tr>
              <th>Serviço</th>
              <th>Qtd.</th>
              <th>Valor</th>
              <th>Total</th>
              <th></th>
            </tr>
          </thead>

          <tbody id="itens"></tbody>
        </table>

        <label style="margin-top:15px">
          Observações

          <textarea
            id="observacoes"
            rows="4"
          ></textarea>
        </label>
      </div>
    </section>

    <aside>
      <div class="resumo">
        <small>RESUMO DA PROPOSTA</small>

        <h2>Investimento</h2>

        <div class="prazos">
          <button
            class="ativo"
            data-prazo="mensal"
          >
            Mensal
          </button>

          <button data-prazo="semestral">
            Semestral −5%
          </button>

          <button data-prazo="anual">
            Anual −10%
          </button>
        </div>

        <div id="calculo"></div>

        <div id="total" class="total">
          R$ 0,00
        </div>

        <button
          id="enviar"
          class="principal"
        >
          Enviar proposta em PDF
        </button>

        <button
          class="secundario"
          onclick="window.print()"
        >
          Imprimir / salvar PDF
        </button>

        <div id="status" class="status"></div>
      </div>
    </aside>
  </main>

  <script>
    const catalogo = [
      {
        id: "ramal",
        nome: "Ramal PABX com chamadas ilimitadas",
        categoria: "PABX Virtual",
        preco: 29.9,
      },
      {
        id: "numero",
        nome: "Número virtual",
        categoria: "PABX Virtual",
        preco: 25,
      },
      {
        id: "did",
        nome: "DID para revenda",
        categoria: "Revenda VoIP",
        preco: 16,
      },
      {
        id: "did-ilimitado",
        nome: "DID atacado com ilimitadas",
        categoria: "Revenda VoIP",
        preco: 16.9,
      },
      {
        id: "white-label",
        nome: "PABX White Label — 10 canais",
        categoria: "Revenda VoIP",
        preco: 800,
      },
      {
        id: "pa",
        nome: "PA de atendimento humano",
        categoria: "Discador",
        preco: 120,
      },
      {
        id: "whatsapp",
        nome: "WhatsApp + chatbot",
        categoria: "Discador",
        preco: 250,
      },
      {
        id: "tronco",
        nome: "Recarga Tronco SIP",
        categoria: "Telefonia",
        preco: 500,
      },
    ];

    let itens = [
      {
        ...catalogo[0],
        quantidade: 5,
        valor: 29.9,
      },
      {
        ...catalogo[1],
        quantidade: 1,
        valor: 25,
      },
    ];

    let prazo = "mensal";
    let ultimoTotal = 0;

    const elemento = (id) =>
      document.getElementById(id);

    const moeda = (valor) =>
      Number(valor).toLocaleString("pt-BR", {
        style: "currency",
        currency: "BRL",
      });

    function renderizarProdutos() {
      elemento("produtos").innerHTML = catalogo
        .map(
          (produto) => \`
            <article class="produto">
              <span class="categoria">
                \${produto.categoria}
              </span>

              <h3>\${produto.nome}</h3>

              <p>
                \${moeda(produto.preco)}/mês
              </p>

              <button
                class="adicionar"
                onclick="adicionar('\${produto.id}')"
              >
                ＋
              </button>
            </article>
          \`
        )
        .join("");
    }

    function adicionar(id) {
      const produto = catalogo.find(
        (item) => item.id === id
      );

      const existente = itens.find(
        (item) => item.id === id
      );

      if (existente) {
        existente.quantidade++;
      } else {
        itens.push({
          ...produto,
          quantidade: 1,
          valor: produto.preco,
        });
      }

      renderizarItens();
    }

    function remover(id) {
      itens = itens.filter(
        (item) => item.id !== id
      );

      renderizarItens();
    }

    function alterar(id, campo, valor) {
      const item = itens.find(
        (produto) => produto.id === id
      );

      item[campo] = Math.max(
        campo === "quantidade" ? 1 : 0,
        Number(valor) || 0
      );

      renderizarItens();
    }

    function renderizarItens() {
      elemento("itens").innerHTML = itens
        .map(
          (item) => \`
            <tr>
              <td>\${item.nome}</td>

              <td>
                <input
                  type="number"
                  min="1"
                  value="\${item.quantidade}"
                  onchange="
                    alterar(
                      '\${item.id}',
                      'quantidade',
                      this.value
                    )
                  "
                >
              </td>

              <td>
                <input
                  type="number"
                  min="0"
                  step="0.01"
                  value="\${item.valor}"
                  onchange="
                    alterar(
                      '\${item.id}',
                      'valor',
                      this.value
                    )
                  "
                >
              </td>

              <td>
                \${moeda(
                  item.quantidade * item.valor
                )}
              </td>

              <td>
                <button
                  class="remover"
                  onclick="remover('\${item.id}')"
                >
                  ×
                </button>
              </td>
            </tr>
          \`
        )
        .join("");

      calcular();
    }

    function calcular() {
      const mensalidade = itens.reduce(
        (total, item) =>
          total +
          item.quantidade * item.valor,
        0
      );

      const meses =
        prazo === "mensal"
          ? 1
          : prazo === "semestral"
          ? 6
          : 12;

      const percentualDesconto =
        prazo === "semestral"
          ? 0.05
          : prazo === "anual"
          ? 0.1
          : 0;

      const valorBruto = mensalidade * meses;

      const valorDesconto =
        valorBruto * percentualDesconto;

      ultimoTotal =
        valorBruto - valorDesconto;

      elemento("calculo").innerHTML = \`
        <div class="linha">
          <span>Mensalidade</span>
          <strong>\${moeda(mensalidade)}</strong>
        </div>

        \${
          meses > 1
            ? \`
              <div class="linha">
                <span>\${meses} meses</span>
                <strong>\${moeda(valorBruto)}</strong>
              </div>

              <div class="linha">
                <span>Desconto</span>
                <strong>
                  − \${moeda(valorDesconto)}
                </strong>
              </div>
            \`
            : ""
        }
      \`;

      elemento("total").textContent =
        moeda(ultimoTotal);
    }

    function formatarCNPJ(valor) {
      return valor
        .replace(/\D/g, "")
        .slice(0, 14)
        .replace(/^(\d{2})(\d)/, "$1.$2")
        .replace(
          /^(\d{2})\.(\d{3})(\d)/,
          "$1.$2.$3"
        )
        .replace(
          /\.(\d{3})(\d)/,
          ".$1/$2"
        )
        .replace(
          /(\d{4})(\d)/,
          "$1-$2"
        );
    }

    async function consultarCNPJ() {
      const cnpj = elemento("cnpj")
        .value
        .replace(/\D/g, "");

      if (cnpj.length !== 14) {
        return;
      }

      try {
        const resposta = await fetch(
          "https://brasilapi.com.br/api/cnpj/v1/" +
            cnpj
        );

        if (!resposta.ok) {
          return;
        }

        const empresa = await resposta.json();

        elemento("empresa").value =
          empresa.razao_social ||
          empresa.nome_fantasia ||
          "";

        elemento("email").value =
          empresa.email || "";

        elemento("telefone").value =
          empresa.ddd_telefone_1 ||
          empresa.ddd_telefone_2 ||
          "";

        elemento("endereco").value = [
          empresa.logradouro,
          empresa.numero,
          empresa.complemento,
          empresa.bairro,
          empresa.municipio,
          empresa.uf,
          empresa.cep,
        ]
          .filter(Boolean)
          .join(", ");
      } catch {
        // Mantém os campos disponíveis
        // para preenchimento manual.
      }
    }

    elemento("cnpj").addEventListener(
      "input",
      (evento) => {
        evento.target.value =
          formatarCNPJ(evento.target.value);

        clearTimeout(window.tempoCNPJ);

        window.tempoCNPJ = setTimeout(
          consultarCNPJ,
          500
        );
      }
    );

    document
      .querySelectorAll("[data-prazo]")
      .forEach((botao) => {
        botao.addEventListener("click", () => {
          document
            .querySelectorAll("[data-prazo]")
            .forEach((item) =>
              item.classList.remove("ativo")
            );

          botao.classList.add("ativo");

          prazo = botao.dataset.prazo;

          calcular();
        });
      });

    elemento("enviar").addEventListener(
      "click",
      async () => {
        const botao = elemento("enviar");
        const status = elemento("status");

        const email =
          elemento("email").value.trim();

        status.className = "status";

        if (
          !/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(
            email
          )
        ) {
          status.textContent =
            "Informe um e-mail válido.";

          status.className =
            "status erro";

          return;
        }

        botao.disabled = true;

        botao.textContent =
          "Gerando PDF e enviando...";

        const meses =
          prazo === "mensal"
            ? 1
            : prazo === "semestral"
            ? 6
            : 12;

        const desconto =
          prazo === "semestral"
            ? 5
            : prazo === "anual"
            ? 10
            : 0;

        const proposta = {
          numero:
            "UV-" +
            new Date().getFullYear() +
            "-" +
            Date.now()
              .toString()
              .slice(-6),

          empresa:
            elemento("empresa").value,

          cnpj:
            elemento("cnpj").value,

          contato:
            elemento("contato").value,

          email,

          telefone:
            elemento("telefone").value,

          endereco:
            elemento("endereco").value,

          observacoes:
            elemento("observacoes").value,

          itens,

          condicao:
            prazo +
            " (" +
            meses +
            " mês(es))",

          desconto,

          total: ultimoTotal,
        };

        try {
          const resposta = await fetch(
            "/api/enviar-proposta",
            {
              method: "POST",

              headers: {
                "Content-Type":
                  "application/json",
              },

              body: JSON.stringify(proposta),
            }
          );

          const resultado =
            await resposta.json();

          if (!resposta.ok) {
            throw new Error(
              resultado.mensagem
            );
          }

          status.textContent =
            resultado.mensagem;

          status.className =
            "status sucesso";
        } catch (erro) {
          status.textContent =
            erro.message ||
            "Erro ao enviar a proposta.";

          status.className =
            "status erro";
        } finally {
          setTimeout(() => {
            botao.disabled = false;

            botao.textContent =
              "Enviar proposta em PDF";
          }, 5000);
        }
      }
    );

    renderizarProdutos();
    renderizarItens();
  </script>
</body>
</html>
`;

const servidor = http.createServer(
  async (requisicao, resposta) => {
    const url = new URL(
      requisicao.url,
      `http://${requisicao.headers.host || "localhost"}`
    );

    if (
      requisicao.method === "GET" &&
      url.pathname === "/"
    ) {
      resposta.writeHead(200, {
        "Content-Type":
          "text/html; charset=utf-8",

        "Cache-Control": "no-store",

        "X-Content-Type-Options":
          "nosniff",

        "X-Frame-Options":
          "SAMEORIGIN",
      });

      return resposta.end(HTML);
    }

    if (
      requisicao.method === "POST" &&
      url.pathname ===
        "/api/enviar-proposta"
    ) {
      return enviarProposta(
        requisicao,
        resposta
      );
    }

    responderJSON(resposta, 404, {
      ok: false,
      mensagem: "Rota não encontrada.",
    });
  }
);

servidor.listen(PORT, () => {
  console.log(
    `Montador disponível em http://localhost:${PORT}`
  );

  if (!SMTP.password) {
    console.warn(
      "SMTP_PASSWORD não configurada. O envio está desativado."
    );
  }
});