import { baseEmailLayout } from "./baseLayout.js";

const purposeConfig = {
  login: {
    icon: "🔐",
    title: "Login Verification",
    intro: "We detected a sign-in attempt to your Airpero merchant account. Use the code below to confirm it was you.",
    ctaColor: "#7c3aed",
    ctaBg: "rgba(124, 58, 237, 0.08)",
  },
  payout: {
    icon: "💸",
    title: "Payout Authorization",
    intro: "A payout request is pending authorization on your account. Enter this one-time code to approve the transaction.",
    ctaColor: "#059669",
    ctaBg: "rgba(5, 150, 105, 0.08)",
  },
  password_reset: {
    icon: "🔑",
    title: "Password Reset Verification",
    intro: "You requested to reset your Airpero account password. Use this verification code to proceed.",
    ctaColor: "#d97706",
    ctaBg: "rgba(217, 119, 6, 0.08)",
  },
};

/**
 * Generate the OTP email template.
 *
 * @param {object} params
 * @param {string} params.name - Recipient's name or business name
 * @param {string} params.otp - The 6-digit OTP code
 * @param {string} params.purpose - 'login' | 'payout' | 'password_reset'
 * @param {number} params.expiryMinutes - Minutes before OTP expires
 * @returns {string} Full HTML string
 */
export const otpEmailTemplate = ({ name, otp, purpose, expiryMinutes = 10 }) => {
  const config = purposeConfig[purpose] || purposeConfig.login;

  const digits = otp.split("").map((d) => `
    <span style="
      display: inline-block;
      width: 44px;
      height: 54px;
      line-height: 54px;
      text-align: center;
      font-size: 26px;
      font-weight: 800;
      color: #1a1a2e;
      background: ${config.ctaBg};
      border: 2px solid ${config.ctaColor};
      border-radius: 8px;
      margin: 0 4px;
    ">${d}</span>
  `).join("");

  const content = `
    <p style="font-size: 13px; color: #888; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 4px;">
      ${config.icon} ${config.title}
    </p>

    <p style="font-size: 22px; font-weight: 800; color: #1a1a2e; margin-bottom: 8px;">
      Hi, ${name}
    </p>

    <p>${config.intro}</p>

    <div style="text-align: center; margin: 32px 0;">
      <p style="font-size: 12px; color: #888; margin-bottom: 12px; letter-spacing: 0.5px; text-transform: uppercase;">Your One-Time Code</p>
      <div>${digits}</div>
      <p style="font-size: 12px; color: #888; margin-top: 16px;">
        ⏱ Expires in <strong style="color: #1a1a2e;">${expiryMinutes} minutes</strong> &nbsp;·&nbsp; Single-use only
      </p>
    </div>

    <div style="background: #fff8ec; border-left: 4px solid #f59e0b; border-radius: 4px; padding: 14px 18px; margin-top: 8px;">
      <p style="font-size: 13px; color: #78350f; margin: 0;">
        <strong>Did not request this?</strong> Ignore this email. Your account remains secure.
        If this is unexpected, please <a href="mailto:support@airpero.com" style="color: #7c3aed; font-weight: 600;">contact support</a> immediately.
      </p>
    </div>
  `;

  return baseEmailLayout({ htmlContent: content, title: `Airpero — ${config.title}` });
};
