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

/**
 * Generate the merchant welcome / registration email template.
 *
 * @param {object} params
 * @param {string} params.businessName - The merchant's business name
 * @param {string} params.email - The merchant's login email
 * @param {string} params.publicKey - The merchant's public API key
 * @param {string} params.accountNumber - The merchant's 9PSB virtual account number
 * @returns {string} Full HTML string
 */
export const merchantWelcomeTemplate = ({ businessName, email, publicKey, accountNumber }) => {
  const content = `
    <p style="font-size: 13px; color: #7c3aed; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 4px;">
      🎉 Welcome to Airpero
    </p>

    <p style="font-size: 22px; font-weight: 800; color: #1a1a2e; margin-bottom: 8px;">
      You're live, ${businessName}!
    </p>

    <p>
      Congratulations! Your Airpero merchant account has been successfully created.
      You can now start integrating the Airpero API to power your payment infrastructure.
    </p>

    <!-- Account Details Card -->
    <div style="background: #f8f5ff; border: 1px solid #e9d5ff; border-radius: 10px; padding: 24px; margin: 28px 0;">
      <p style="font-size: 13px; font-weight: 700; color: #7c3aed; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px;">
        Your Account Details
      </p>

      <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
        <tr>
          <td style="padding: 8px 0; color: #888; width: 40%;">Business Name</td>
          <td style="padding: 8px 0; font-weight: 700; color: #1a1a2e;">${businessName}</td>
        </tr>
        <tr style="border-top: 1px solid #e9d5ff;">
          <td style="padding: 8px 0; color: #888;">Login Email</td>
          <td style="padding: 8px 0; font-weight: 700; color: #1a1a2e;">${email}</td>
        </tr>
        <tr style="border-top: 1px solid #e9d5ff;">
          <td style="padding: 8px 0; color: #888;">Public Key</td>
          <td style="padding: 8px 0; font-weight: 600; color: #1a1a2e; font-family: monospace; font-size: 12px; word-break: break-all;">${publicKey}</td>
        </tr>
        ${accountNumber ? `
        <tr style="border-top: 1px solid #e9d5ff;">
          <td style="padding: 8px 0; color: #888;">Wallet Account No.</td>
          <td style="padding: 8px 0; font-weight: 700; color: #1a1a2e; font-size: 18px; letter-spacing: 1px;">${accountNumber}</td>
        </tr>
        ` : ""}
      </table>
    </div>

    <div style="background: #fff8ec; border-left: 4px solid #f59e0b; border-radius: 4px; padding: 14px 18px; margin-bottom: 24px;">
      <p style="font-size: 13px; color: #78350f; margin: 0;">
        <strong>Important:</strong> Your <strong>Secret Key</strong> was shown only once during registration. 
        Store it securely in a vault or environment variable. Never expose it in client-side code or share it publicly.
      </p>
    </div>

    <!-- Next Steps -->
    <p style="font-size: 15px; font-weight: 700; color: #1a1a2e; margin-bottom: 12px;">🚀 Next Steps</p>
    <ol style="font-size: 14px; color: #555; line-height: 2; padding-left: 20px;">
      <li>Log in to your <a href="https://dashboard.airpero.com" style="color: #7c3aed; font-weight: 600;">Merchant Dashboard</a></li>
      <li>Whitelist your server IP addresses for added security</li>
      <li>Set your Webhook URL to receive real-time transaction events</li>
      <li>Read the <a href="https://docs.airpero.com" style="color: #7c3aed; font-weight: 600;">API Documentation</a> to get started</li>
    </ol>

    <p style="margin-top: 28px;">
      Need help? Our team is ready to assist at
      <a href="mailto:support@airpero.com" style="color: #7c3aed; font-weight: 600;">support@airpero.com</a>.
    </p>
  `;

  return baseEmailLayout({ htmlContent: content, title: "Welcome to Airpero" });
};
