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

/**
 * Generate the transaction alert email template.
 * Used for notifying merchants of significant transaction events.
 *
 * @param {object} params
 * @param {string} params.businessName - Merchant's business name
 * @param {string} params.type - 'credit' | 'debit'
 * @param {number} params.amount - Transaction amount
 * @param {string} params.currency - Currency code (e.g. 'NGN')
 * @param {string} params.reference - Transaction reference
 * @param {string} params.narration - Transaction narration or description
 * @param {string} params.newBalance - Account balance after transaction
 * @param {string} params.timestamp - Formatted timestamp
 * @returns {string} Full HTML string
 */
export const transactionAlertTemplate = ({
  businessName,
  type,
  amount,
  currency = "NGN",
  reference,
  narration,
  newBalance,
  timestamp,
}) => {
  const isCredit = type === "credit";
  const typeColor = isCredit ? "#059669" : "#dc2626";
  const typeLabel = isCredit ? "CREDIT" : "DEBIT";
  const typeIcon = isCredit ? "⬆️" : "⬇️";
  const amountSign = isCredit ? "+" : "-";

  const formattedAmount = new Intl.NumberFormat("en-NG", {
    style: "currency",
    currency,
    minimumFractionDigits: 2,
  }).format(amount);

  const content = `
    <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: ${isCredit ? "rgba(5,150,105,0.07)" : "rgba(220,38,38,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 || "N/A"}</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>
        ${newBalance !== undefined ? `
        <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;">
            ${new Intl.NumberFormat("en-NG", { style: "currency", currency, minimumFractionDigits: 2 }).format(newBalance)}
          </td>
        </tr>
        ` : ""}
      </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>
  `;

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