import nodemailer from "nodemailer";

const C = "#F4EBD9";
const I = "#2B3A8C";
const R = "#FF4B3E";
const M = "#E8B23A";

export function getMailTransporter() {
  return nodemailer.createTransport({
    host: process.env.MAIL_HOST,
    port: Number(process.env.MAIL_PORT ?? 465),
    secure: process.env.MAIL_SECURE === "true",
    auth: { user: process.env.MAIL_USER, pass: process.env.MAIL_PASS },
  });
}

export async function sendToolaroMail({ to, subject, html, text }: { to: string; subject: string; html: string; text: string }) {
  const t = getMailTransporter();
  await t.sendMail({
    from: `"${process.env.MAIL_FROM_NAME ?? "Toolaro"}" <${process.env.MAIL_FROM}>`,
    to, subject, html, text,
  });
}

/** Coral CTA button with hard indigo offset shadow */
export function mailButton(label: string, url: string) {
  return `<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="margin:28px 0 4px;">
  <tr>
    <td>
      <table cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td bgcolor="${I}" style="padding:0 0 6px 6px;">
            <a href="${url}" target="_blank"
               style="display:inline-block;background:${R};color:#ffffff;font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:bold;letter-spacing:3px;text-decoration:none;padding:16px 40px;border:3px solid ${I};text-transform:uppercase;mso-padding-alt:16px 40px;">
              ${escapeHtml(label)}
            </a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>`;
}

/** Monospace OTP/2FA code block with dramatic shadow */
export function mailCode(code: string) {
  return `<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="margin:28px 0;">
  <tr>
    <td>
      <table cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td bgcolor="${I}" style="padding:0 0 8px 8px;">
            <table cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td bgcolor="${C}" style="border:3px solid ${I};padding:24px 56px;text-align:center;">
                  <span style="font-family:'Courier New',Courier,monospace;font-size:52px;font-weight:bold;color:${I};letter-spacing:16px;display:block;line-height:1;">${escapeHtml(code)}</span>
                  <span style="display:block;margin-top:10px;font-family:Arial,sans-serif;font-size:11px;color:#8899AA;letter-spacing:2px;text-transform:uppercase;">Einmal-Code</span>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>`;
}

/** Email signature block — goes inside every email body */
function mailSignature(signoff = "Viel Spaß mit deinen Tools!") {
  const base = (process.env.NEXT_PUBLIC_SITE_URL ?? "https://toolaro.org").replace(/\/$/, "");
  return `<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-top:36px;">
  <tr>
    <td>
      <table cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
          <td bgcolor="${M}" height="3" style="font-size:0;line-height:0;">&nbsp;</td>
        </tr>
      </table>
      <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-top:22px;">
        <tr>
          <td>
            <p style="margin:0 0 18px;font-family:Georgia,'Times New Roman',Times,serif;font-size:16px;font-style:italic;color:#5566AA;line-height:1.5;">${escapeHtml(signoff)}</p>
            <table cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td style="vertical-align:middle;">
                  <table cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td bgcolor="${R}" style="padding:0 0 4px 4px;">
                        <table cellpadding="0" cellspacing="0" border="0">
                          <tr>
                            <td bgcolor="${C}" style="border:2px solid ${I};width:40px;height:40px;text-align:center;vertical-align:middle;font-family:Georgia,serif;font-size:24px;font-weight:bold;color:${I};line-height:40px;padding:0 10px;">T</td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
                <td style="padding-left:14px;vertical-align:middle;">
                  <span style="display:block;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;color:${I};letter-spacing:3px;text-transform:uppercase;line-height:1;">Das Toolaro-Team</span>
                  <span style="display:block;margin-top:5px;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.4;">
                    <a href="${base}" style="color:${M};text-decoration:none;font-weight:bold;letter-spacing:1px;">toolaro.org</a>
                    <span style="color:#9BAABB;">&nbsp;&middot;&nbsp;Kostenlose Webtools für jeden Tag</span>
                  </span>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>`;
}

/** Full Risograph email shell */
export function mailShell(title: string, body: string, preheader = "", signoff?: string) {
  const base = (process.env.NEXT_PUBLIC_SITE_URL ?? "https://toolaro.org").replace(/\/$/, "");
  return `<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<title>${escapeHtml(title)}</title>
<!--[if mso]><noscript><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript><![endif]-->
<style>
body,table,td{margin:0;padding:0;}
body{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background:${C};}
table{border-collapse:collapse!important;}
img{border:0;height:auto;line-height:100%;outline:none;text-decoration:none;}
a{color:${R};}
@media only screen and (max-width:640px){
  .w600{width:100%!important;max-width:100%!important;}
  .hpad{padding:20px!important;}
  .bpad{padding:28px 20px 36px!important;}
  .fpad{padding:16px 20px!important;}
  .code-text{font-size:34px!important;letter-spacing:8px!important;}
}
</style>
</head>
<body style="margin:0;padding:0;background:${C};">

${preheader ? `<div style="display:none;max-height:0;overflow:hidden;font-size:1px;line-height:1px;color:${C};">${escapeHtml(preheader)}&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;</div>` : ""}

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background:${C};padding:32px 16px 48px;">
<tr><td align="center">
<table class="w600" width="600" cellpadding="0" cellspacing="0" border="0" style="max-width:600px;width:100%;border:3px solid ${I};">

  <!-- ═══ TOP ACCENT ═══ -->
  <tr><td bgcolor="${R}" height="6" style="font-size:0;line-height:0;">&nbsp;</td></tr>

  <!-- ═══ HEADER ═══ -->
  <tr>
    <td class="hpad" bgcolor="${I}" style="padding:32px 40px 28px;">
      <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td style="vertical-align:middle;">

            <!-- T logo: cream box, coral offset shadow -->
            <table cellpadding="0" cellspacing="0" border="0" style="display:inline-table;">
              <tr>
                <td bgcolor="${R}" style="padding:0 0 6px 6px;">
                  <table cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td bgcolor="${C}" style="border:3px solid ${C};width:58px;height:58px;text-align:center;vertical-align:middle;font-family:Georgia,'Times New Roman',serif;font-size:38px;font-weight:bold;color:${I};line-height:58px;padding:0 16px;">T</td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>

            <!-- Wordmark block -->
            <span style="display:inline-block;vertical-align:middle;margin-left:18px;">
              <span style="display:block;font-family:Arial,Helvetica,sans-serif;font-size:26px;font-weight:bold;color:${C};letter-spacing:6px;line-height:1;text-transform:uppercase;">Toolaro</span>
              <span style="display:block;font-family:Arial,Helvetica,sans-serif;font-size:11px;color:#7788BB;letter-spacing:2px;text-transform:uppercase;margin-top:5px;">Dein Werkzeugkasten im Web</span>
            </span>

          </td>
        </tr>
      </table>
    </td>
  </tr>

  <!-- ═══ MUSTARD STRIPE ═══ -->
  <tr><td bgcolor="${M}" height="4" style="font-size:0;line-height:0;">&nbsp;</td></tr>

  <!-- ═══ BODY ═══ -->
  <tr>
    <td class="bpad" bgcolor="#ffffff" style="padding:36px 40px 44px;border-left:5px solid ${I};border-right:5px solid ${I};">

      <!-- Title -->
      <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom:24px;">
        <tr>
          <td>
            <h1 style="margin:0 0 12px;font-family:Georgia,'Times New Roman',Times,serif;font-size:32px;font-weight:bold;color:${I};line-height:1.2;">${escapeHtml(title)}</h1>
            <table cellpadding="0" cellspacing="0" border="0"><tr>
              <td bgcolor="${R}" width="52" height="4" style="font-size:0;line-height:0;">&nbsp;</td>
              <td bgcolor="${M}" width="20" height="4" style="font-size:0;line-height:0;">&nbsp;</td>
            </tr></table>
          </td>
        </tr>
      </table>

      <!-- Content -->
      <div style="font-family:Arial,Helvetica,sans-serif;font-size:15px;color:#1a1a2e;line-height:1.8;">
        ${body}
      </div>

      <!-- Signature -->
      ${mailSignature(signoff)}

    </td>
  </tr>

  <!-- ═══ CORAL STRIPE ═══ -->
  <tr><td bgcolor="${R}" height="4" style="font-size:0;line-height:0;">&nbsp;</td></tr>

  <!-- ═══ FOOTER ═══ -->
  <tr>
    <td class="fpad" bgcolor="${I}" style="padding:20px 40px 24px;">
      <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td style="font-family:Arial,Helvetica,sans-serif;font-size:11px;color:#5566AA;vertical-align:top;padding-right:16px;">
            Diese E-Mail wurde von <a href="${base}" style="color:#8899BB;text-decoration:none;">Toolaro.org</a> gesendet.<br>
            <span style="color:#3D4E7A;">
              <a href="${base}/imprint" style="color:#3D4E7A;text-decoration:none;">Impressum</a>&ensp;&middot;&ensp;<a href="${base}/privacy" style="color:#3D4E7A;text-decoration:none;">Datenschutz</a>&ensp;&middot;&ensp;<a href="${base}/contact" style="color:#3D4E7A;text-decoration:none;">Kontakt</a>
            </span>
          </td>
          <td align="right" style="vertical-align:bottom;white-space:nowrap;">
            <span style="font-family:Georgia,serif;font-size:13px;font-weight:bold;color:#2B3A6A;letter-spacing:2px;">toolaro.org</span>
          </td>
        </tr>
      </table>
    </td>
  </tr>

  <!-- ═══ BOTTOM ACCENT ═══ -->
  <tr><td bgcolor="${M}" height="3" style="font-size:0;line-height:0;">&nbsp;</td></tr>

</table>
</td></tr>
</table>

</body>
</html>`;
}

export function escapeHtml(str: string) {
  return str
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;");
}
