import {
  isOtpPasswordResetEmailReason,
  isOtpRegistrationEmailReason,
} from "../../constants/otp";

export function otpEmailSubject(reason: string): string {
  if (isOtpRegistrationEmailReason(reason)) {
    return "Verify your Tank Track account";
  }
  if (isOtpPasswordResetEmailReason(reason)) {
    return "Reset your Tank Track password";
  }
  return "Tank Track verification code";
}

export const emailTemplateGeneric = (verificationCode: number, reason: string) => {
  const registration = isOtpRegistrationEmailReason(reason);
  return `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>${registration ? "Welcome to Tank Track" : "Password Reset"}</title>
    </head>
    <body style="font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #001f3f, #003B73); margin: 0; padding: 0; color: #ffffff;">
      <div style="max-width: 600px; margin: 50px auto; background: #0e1a2b; border-radius: 12px; overflow: hidden; box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);">
        
        <div style="background-color: #003B73; padding: 30px; text-align: center;">
          <h2 style="margin: 0; font-size: 24px; color: #ffffff;">${
            registration ? "Welcome to Tank Track" : "Reset Your Password"
          }</h2>
        </div>

        <div style="padding: 30px; text-align: center;">
          ${
            registration
              ? `<p style="font-size: 16px; margin-bottom: 20px; color: #cccccc; ">Thanks for joining Tank Track! Use the code below to verify your account:</p>`
              : `<p style="font-size: 16px; margin-bottom: 20px; color: #cccccc; ">Use the code below to reset your password. We’ve got you covered.</p>`
          }

          <div style="font-size: 40px; font-weight: bold; color: #D40000; margin: 20px 0;">${verificationCode}</div>

          <p style="font-size: 14px; color: #cccccc;">This code will expire in 10 minutes. If you didn’t request this, feel free to ignore it.</p>
        </div>

        <div style="background-color: #001f3f; padding: 15px; text-align: center; font-size: 12px; color: #888;">
          &copy; 2024 Tank Track. All rights reserved.
        </div>
      </div>
    </body>
    </html>
  `;
};

export function gasStationPaymentReceiptEmail(opts: {
  role: "payer" | "station";
  receiptNumber: string;
  amountLabel: string;
  stationName: string;
  stationAddress: string;
  payerName: string;
  paidAtLabel: string;
  note?: string | null;
}): string {
  const esc = (value: string) =>
    value
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;");

  const amountLabel = esc(opts.amountLabel);
  const stationName = esc(opts.stationName);
  const stationAddress = esc(opts.stationAddress);
  const payerName = esc(opts.payerName);
  const receiptNumber = esc(opts.receiptNumber);
  const paidAtLabel = esc(opts.paidAtLabel);
  const note = opts.note ? esc(opts.note) : null;

  const title =
    opts.role === "payer"
      ? "Your Tank Track payment receipt"
      : "You received a Tank Track payment";
  const intro =
    opts.role === "payer"
      ? `You paid <strong>${amountLabel}</strong> to <strong>${stationName}</strong>.`
      : `<strong>${payerName}</strong> paid <strong>${amountLabel}</strong> to <strong>${stationName}</strong>.`;

  return `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>${title}</title>
    </head>
    <body style="font-family: 'Segoe UI', sans-serif; background: #f4f6f8; margin: 0; padding: 0; color: #1a1a1a;">
      <div style="max-width: 600px; margin: 40px auto; background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.08);">
        <div style="background-color: #003B73; padding: 24px; text-align: center;">
          <h2 style="margin: 0; font-size: 22px; color: #ffffff;">${title}</h2>
        </div>
        <div style="padding: 28px;">
          <p style="font-size: 15px; color: #333; line-height: 1.5;">${intro}</p>
          <table style="width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px;">
            <tr>
              <td style="padding: 8px 0; color: #666;">Receipt</td>
              <td style="padding: 8px 0; text-align: right; font-weight: 600;">${receiptNumber}</td>
            </tr>
            <tr>
              <td style="padding: 8px 0; color: #666;">Amount</td>
              <td style="padding: 8px 0; text-align: right; font-weight: 600;">${amountLabel}</td>
            </tr>
            <tr>
              <td style="padding: 8px 0; color: #666;">Station</td>
              <td style="padding: 8px 0; text-align: right;">${stationName}</td>
            </tr>
            <tr>
              <td style="padding: 8px 0; color: #666;">Address</td>
              <td style="padding: 8px 0; text-align: right;">${stationAddress || "—"}</td>
            </tr>
            <tr>
              <td style="padding: 8px 0; color: #666;">Paid at</td>
              <td style="padding: 8px 0; text-align: right;">${paidAtLabel}</td>
            </tr>
            ${
              note
                ? `<tr>
              <td style="padding: 8px 0; color: #666;">Note</td>
              <td style="padding: 8px 0; text-align: right;">${note}</td>
            </tr>`
                : ""
            }
          </table>
          <p style="font-size: 12px; color: #888; margin-top: 24px;">This is a digital receipt from Tank Track. Keep it for your records.</p>
        </div>
        <div style="background-color: #001f3f; padding: 14px; text-align: center; font-size: 12px; color: #888;">
          &copy; ${new Date().getFullYear()} Tank Track. All rights reserved.
        </div>
      </div>
    </body>
    </html>
  `;
}
