"use strict";
const { v4: uuidv4 } = require("uuid");

module.exports = {
  up: async (queryInterface, Sequelize) => {
    const now = new Date();
    
    const templates = [
      {
        id: uuidv4(),
        slug: "merchant_welcome",
        name: "Merchant Welcome",
        subject: "Welcome to Airpero, {{businessName}}! 🎉",
        availableVariables: "{{businessName}}, {{email}}, {{accountNumber}}",
        bodyHtml: `
    <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>
        {{#if 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>
        {{/if}}
      </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>`,
        createdAt: now,
        updatedAt: now,
      },
      {
        id: uuidv4(),
        slug: "otp_login",
        name: "Login OTP",
        subject: "Airpero — Your Login Verification Code: {{otp}}",
        availableVariables: "{{name}}, {{otp}}, {{expiryMinutes}}",
        bodyHtml: `
    <p style="font-size: 13px; color: #888; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 4px;">
      🔐 Login Verification
    </p>

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

    <p>We detected a sign-in attempt to your Airpero merchant account. Use the code below to confirm it was you.</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>
      
      <!-- We will inject the digits dynamically in the code, but here's a fallback box -->
      <div style="font-size: 32px; font-weight: bold; letter-spacing: 8px; color: #7c3aed; background: rgba(124, 58, 237, 0.08); padding: 15px; border-radius: 8px; border: 2px dashed #7c3aed; width: fit-content; margin: 0 auto;">
        {{otp}}
      </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>`,
        createdAt: now,
        updatedAt: now,
      },
      {
        id: uuidv4(),
        slug: "otp_payout",
        name: "Payout OTP",
        subject: "Airpero — Your Payout Authorization Code: {{otp}}",
        availableVariables: "{{name}}, {{otp}}, {{expiryMinutes}}",
        bodyHtml: `
    <p style="font-size: 13px; color: #888; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 4px;">
      💸 Payout Authorization
    </p>

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

    <p>A payout request is pending authorization on your account. Enter this one-time code to approve the transaction.</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 style="font-size: 32px; font-weight: bold; letter-spacing: 8px; color: #059669; background: rgba(5, 150, 105, 0.08); padding: 15px; border-radius: 8px; border: 2px dashed #059669; width: fit-content; margin: 0 auto;">
        {{otp}}
      </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>`,
        createdAt: now,
        updatedAt: now,
      },
      {
        id: uuidv4(),
        slug: "password_reset_link",
        name: "Password Reset Link",
        subject: "Airpero — Password Reset Request",
        availableVariables: "{{name}}, {{resetUrl}}",
        bodyHtml: `
    <p style="font-size: 13px; color: #888; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 4px;">
      🔑 Password Reset
    </p>

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

    <p>
      We received a request to reset the password for your Airpero merchant account. 
      Click the button below to create a new password. This link is valid for <strong>30 minutes</strong>.
    </p>

    <div style="text-align: center; margin: 36px 0;">
      <a href="{{resetUrl}}"
        style="
          display: inline-block;
          background: linear-gradient(135deg, #7c3aed, #5b21b6);
          color: #ffffff;
          text-decoration: none;
          font-size: 16px;
          font-weight: 700;
          padding: 16px 40px;
          border-radius: 8px;
          letter-spacing: 0.3px;
          box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
        ">
        Reset My Password
      </a>
    </div>

    <p style="font-size: 13px; color: #888; text-align: center;">
      Or paste this link directly into your browser:<br />
      <a href="{{resetUrl}}" style="color: #7c3aed; word-break: break-all; font-size: 12px;">{{resetUrl}}</a>
    </p>

    <div style="background: #fff8ec; border-left: 4px solid #f59e0b; border-radius: 4px; padding: 14px 18px; margin-top: 24px;">
      <p style="font-size: 13px; color: #78350f; margin: 0;">
        <strong>Did not request this?</strong> You can safely ignore this email. Your password will not change.
        If you believe this is suspicious, please <a href="mailto:support@airpero.com" style="color: #7c3aed; font-weight: 600;">contact support</a>.
      </p>
    </div>`,
        createdAt: now,
        updatedAt: now,
      },
      {
        id: uuidv4(),
        slug: "transaction_alert",
        name: "Transaction Alert",
        subject: "Airpero — Wallet {{typeLabel}} Alert",
        availableVariables: "{{businessName}}, {{type}}, {{typeLabel}}, {{typeColor}}, {{typeIcon}}, {{amountSign}}, {{formattedAmount}}, {{reference}}, {{narration}}, {{timestamp}}, {{newBalance}}",
        bodyHtml: `
    <p style="font-size: 13px; color: {{typeColor}}; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 4px;">
      {{typeIcon}} Transaction Alert
    </p>

    <p style="font-size: 22px; font-weight: 800; color: #1a1a2e; margin-bottom: 8px;">
      {{typeLabel}} — {{amountSign}}{{formattedAmount}}
    </p>

    <p>
      Hi <strong>{{businessName}}</strong>, a {{type}} transaction has been recorded on your merchant wallet.
    </p>

    <!-- Amount box -->
    <div style="text-align: center; margin: 28px 0;">
      <div style="
        display: inline-block;
        background: rgba(128,128,128,0.07);
        border: 2px solid {{typeColor}};
        border-radius: 12px;
        padding: 20px 40px;
      ">
        <p style="font-size: 13px; color: #888; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px;">{{typeLabel}}</p>
        <p style="font-size: 36px; font-weight: 900; color: {{typeColor}}; margin: 0;">{{amountSign}}{{formattedAmount}}</p>
      </div>
    </div>

    <!-- Transaction Details -->
    <div style="background: #f8f5ff; border: 1px solid #e9d5ff; border-radius: 10px; padding: 20px 24px; margin: 0 0 24px 0;">
      <p style="font-size: 13px; font-weight: 700; color: #7c3aed; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.5px;">Transaction Details</p>
      <table style="width: 100%; border-collapse: collapse; font-size: 13.5px;">
        <tr>
          <td style="padding: 7px 0; color: #888; width: 40%;">Reference</td>
          <td style="padding: 7px 0; font-weight: 600; color: #1a1a2e; font-family: monospace;">{{reference}}</td>
        </tr>
        <tr style="border-top: 1px solid #e9d5ff;">
          <td style="padding: 7px 0; color: #888;">Narration</td>
          <td style="padding: 7px 0; color: #1a1a2e;">{{narration}}</td>
        </tr>
        <tr style="border-top: 1px solid #e9d5ff;">
          <td style="padding: 7px 0; color: #888;">Date & Time</td>
          <td style="padding: 7px 0; color: #1a1a2e;">{{timestamp}}</td>
        </tr>
        {{#if newBalance}}
        <tr style="border-top: 1px solid #e9d5ff;">
          <td style="padding: 7px 0; color: #888;">New Balance</td>
          <td style="padding: 7px 0; font-weight: 700; color: #1a1a2e;">{{newBalance}}</td>
        </tr>
        {{/if}}
      </table>
    </div>

    <p style="font-size: 13px; color: #888;">
      If you did not initiate or expect this transaction, please 
      <a href="mailto:support@airpero.com" style="color: #7c3aed; font-weight: 600;">contact support</a> immediately.
    </p>`,
        createdAt: now,
        updatedAt: now,
      },
      {
        id: uuidv4(),
        slug: "new_device_login",
        name: "New Device Login Alert",
        subject: "Airpero — Security Alert: Login from a new location",
        availableVariables: "{{businessName}}, {{ipAddress}}, {{time}}",
        bodyHtml: `
    <p style="font-size: 13px; color: #dc2626; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 4px;">
      🚨 Security Alert
    </p>

    <p style="font-size: 22px; font-weight: 800; color: #1a1a2e; margin-bottom: 8px;">
      Login from a new device
    </p>

    <p>Hi <strong>{{businessName}}</strong>,</p>
    <p>We detected a successful login to your Airpero Merchant account from a device or location we don't recognize.</p>
    
    <div style="background: #f8f5ff; border: 1px solid #e9d5ff; border-radius: 10px; padding: 20px; margin: 20px 0;">
      <p style="margin: 0 0 10px 0; font-size: 14px;"><strong>IP Address:</strong> {{ipAddress}}</p>
      <p style="margin: 0; font-size: 14px;"><strong>Time:</strong> {{time}}</p>
    </div>

    <p>If this was you, you can safely ignore this email.</p>
    
    <div style="background: #fff8ec; border-left: 4px solid #f59e0b; border-radius: 4px; padding: 14px 18px; margin-top: 24px;">
      <p style="font-size: 13px; color: #78350f; margin: 0;">
        <strong>Wasn't you?</strong> Please change your password immediately and <a href="mailto:support@airpero.com" style="color: #7c3aed; font-weight: 600;">contact support</a> to secure your account.
      </p>
    </div>`,
        createdAt: now,
        updatedAt: now,
      },
      {
        id: uuidv4(),
        slug: "failed_otp_attempt",
        name: "Failed OTP Attempts",
        subject: "Airpero — Security Alert: Multiple failed OTP attempts",
        availableVariables: "{{name}}",
        bodyHtml: `
    <p style="font-size: 13px; color: #dc2626; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 4px;">
      🚨 Security Alert
    </p>

    <p style="font-size: 22px; font-weight: 800; color: #1a1a2e; margin-bottom: 8px;">
      Multiple failed OTP attempts
    </p>

    <p>Hi <strong>{{name}}</strong>,</p>
    <p>We detected multiple failed attempts to verify an OTP code on your account. For your security, the current OTP has been invalidated.</p>
    
    <p>If you were trying to log in or authorize a payout and made a mistake, you can simply request a new code.</p>

    <div style="background: #fff8ec; border-left: 4px solid #f59e0b; border-radius: 4px; padding: 14px 18px; margin-top: 24px;">
      <p style="font-size: 13px; color: #78350f; margin: 0;">
        <strong>Did not request an OTP?</strong> Someone may be trying to access your account. Please change your password immediately and <a href="mailto:support@airpero.com" style="color: #7c3aed; font-weight: 600;">contact support</a>.
      </p>
    </div>`,
        createdAt: now,
        updatedAt: now,
      },
      {
        id: uuidv4(),
        slug: "password_changed_success",
        name: "Password Changed Successfully",
        subject: "Airpero — Your password has been changed",
        availableVariables: "{{name}}",
        bodyHtml: `
    <p style="font-size: 13px; color: #059669; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 4px;">
      ✅ Security Update
    </p>

    <p style="font-size: 22px; font-weight: 800; color: #1a1a2e; margin-bottom: 8px;">
      Password Changed Successfully
    </p>

    <p>Hi <strong>{{name}}</strong>,</p>
    <p>This is a confirmation that the password for your Airpero account was just changed.</p>
    
    <p>If you made this change, you can safely ignore this email.</p>

    <div style="background: #fff8ec; border-left: 4px solid #f59e0b; border-radius: 4px; padding: 14px 18px; margin-top: 24px;">
      <p style="font-size: 13px; color: #78350f; margin: 0;">
        <strong>Did not make this change?</strong> Please <a href="mailto:support@airpero.com" style="color: #7c3aed; font-weight: 600;">contact support</a> immediately.
      </p>
    </div>`,
        createdAt: now,
        updatedAt: now,
      }
    ];

    await queryInterface.bulkInsert("EmailTemplates", templates);
  },

  down: async (queryInterface, Sequelize) => {
    await queryInterface.bulkDelete("EmailTemplates", null, {});
  },
};
