/**
 * Deposit Reminder Email Templates
 *
 * Bilingual templates for reminding customers about unpaid deposits
 * before their scheduled appointments.
 */

import type { EmailTemplate } from '../types';

export interface DepositReminderEmailParams {
  customerName: string;
  appointmentDate: string;
  appointmentTime: string;
  service: string;
  depositAmount: number;
  currency: string;
  paymentLink: string;
  language: 'en' | 'ar';
}

/**
 * Creates a deposit reminder email template
 * Sent 24 hours before appointment when deposit is unpaid
 */
export function createDepositReminderEmail(
  params: DepositReminderEmailParams
): EmailTemplate {
  const {
    customerName,
    appointmentDate,
    appointmentTime,
    service,
    depositAmount,
    currency,
    paymentLink,
    language,
  } = params;

  const isArabic = language === 'ar';

  // Format currency
  const formattedAmount = new Intl.NumberFormat(isArabic ? 'ar-SA' : 'en-US', {
    style: 'currency',
    currency: currency.toUpperCase(),
  }).format(depositAmount);

  const subject = isArabic
    ? `تذكير: دفعة مقدمة مطلوبة لموعدك غداً - ${service}`
    : `Reminder: Deposit Due for Your Appointment Tomorrow - ${service}`;

  const html = isArabic
    ? `
    <!DOCTYPE html>
    <html dir="rtl" lang="ar">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
        body { font-family: Arial, sans-serif; line-height: 1.8; color: #333; background: #f3f4f6; margin: 0; padding: 20px; }
        .container { max-width: 600px; margin: 0 auto; }
        .header { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 30px; text-align: center; border-radius: 12px 12px 0 0; }
        .header h1 { margin: 0; font-size: 24px; }
        .header p { margin: 10px 0 0 0; opacity: 0.9; }
        .content { background: white; padding: 30px; border-radius: 0 0 12px 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .booking-details { background: #f0fdf4; padding: 20px; margin: 20px 0; border-radius: 8px; border: 2px solid #10b981; }
        .detail-row { margin: 12px 0; display: flex; align-items: center; gap: 10px; }
        .detail-label { font-weight: bold; color: #059669; min-width: 100px; }
        .amount-box { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); padding: 25px; border-radius: 12px; margin: 25px 0; text-align: center; border: 2px solid #f59e0b; }
        .amount-value { font-size: 32px; font-weight: bold; color: #b45309; margin: 10px 0; }
        .pay-btn { display: inline-block; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 18px 50px; text-decoration: none; border-radius: 8px; font-weight: bold; font-size: 18px; margin: 20px 0; box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3); }
        .pay-btn:hover { transform: translateY(-2px); }
        .warning-box { background: #fef2f2; padding: 15px; border-radius: 6px; margin: 20px 0; border-right: 4px solid #ef4444; }
        .footer { text-align: center; margin-top: 20px; color: #6b7280; font-size: 14px; }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="header">
          <h1>تذكير بالدفعة المقدمة</h1>
          <p>موعدك غداً</p>
        </div>
        <div class="content">
          <p>عزيزي ${customerName}،</p>
          <p>نود تذكيرك بأن موعدك المحجوز <strong>غداً</strong> يتطلب دفعة مقدمة لتأكيد الحجز.</p>

          <div class="booking-details">
            <div class="detail-row">
              <span class="detail-label">📅 التاريخ:</span>
              <span>${appointmentDate}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">🕐 الوقت:</span>
              <span>${appointmentTime}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">🏷️ الخدمة:</span>
              <span>${service}</span>
            </div>
          </div>

          <div class="amount-box">
            <p style="margin: 0 0 5px 0; color: #92400e;">المبلغ المطلوب</p>
            <div class="amount-value">${formattedAmount}</div>
          </div>

          <div style="text-align: center;">
            <a href="${paymentLink}" class="pay-btn">ادفع الآن</a>
          </div>

          <div class="warning-box">
            <p style="margin: 0;"><strong>⚠️ مهم:</strong> يرجى إتمام الدفع قبل موعدك لضمان تأكيد حجزك. قد يتم إلغاء المواعيد غير المؤكدة.</p>
          </div>

          <p>إذا كان لديك أي استفسارات أو تحتاج إلى مساعدة، لا تتردد في التواصل معنا.</p>

          <p>مع أطيب التحيات،<br>فريق Mawidi</p>
        </div>
        <div class="footer">
          <p>© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.</p>
          <p style="font-size: 12px; color: #9ca3af;">إذا لم تقم بهذا الحجز، يرجى تجاهل هذا البريد الإلكتروني.</p>
        </div>
      </div>
    </body>
    </html>
  `
    : `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
        body { font-family: Arial, sans-serif; line-height: 1.8; color: #333; background: #f3f4f6; margin: 0; padding: 20px; }
        .container { max-width: 600px; margin: 0 auto; }
        .header { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 30px; text-align: center; border-radius: 12px 12px 0 0; }
        .header h1 { margin: 0; font-size: 24px; }
        .header p { margin: 10px 0 0 0; opacity: 0.9; }
        .content { background: white; padding: 30px; border-radius: 0 0 12px 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .booking-details { background: #f0fdf4; padding: 20px; margin: 20px 0; border-radius: 8px; border: 2px solid #10b981; }
        .detail-row { margin: 12px 0; display: flex; align-items: center; gap: 10px; }
        .detail-label { font-weight: bold; color: #059669; min-width: 100px; }
        .amount-box { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); padding: 25px; border-radius: 12px; margin: 25px 0; text-align: center; border: 2px solid #f59e0b; }
        .amount-value { font-size: 32px; font-weight: bold; color: #b45309; margin: 10px 0; }
        .pay-btn { display: inline-block; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 18px 50px; text-decoration: none; border-radius: 8px; font-weight: bold; font-size: 18px; margin: 20px 0; box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3); }
        .pay-btn:hover { transform: translateY(-2px); }
        .warning-box { background: #fef2f2; padding: 15px; border-radius: 6px; margin: 20px 0; border-left: 4px solid #ef4444; }
        .footer { text-align: center; margin-top: 20px; color: #6b7280; font-size: 14px; }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="header">
          <h1>Deposit Reminder</h1>
          <p>Your appointment is tomorrow!</p>
        </div>
        <div class="content">
          <p>Dear ${customerName},</p>
          <p>This is a friendly reminder that your upcoming appointment <strong>tomorrow</strong> requires a deposit to confirm your booking.</p>

          <div class="booking-details">
            <div class="detail-row">
              <span class="detail-label">📅 Date:</span>
              <span>${appointmentDate}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">🕐 Time:</span>
              <span>${appointmentTime}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">🏷️ Service:</span>
              <span>${service}</span>
            </div>
          </div>

          <div class="amount-box">
            <p style="margin: 0 0 5px 0; color: #92400e;">Amount Due</p>
            <div class="amount-value">${formattedAmount}</div>
          </div>

          <div style="text-align: center;">
            <a href="${paymentLink}" class="pay-btn">Pay Now</a>
          </div>

          <div class="warning-box">
            <p style="margin: 0;"><strong>⚠️ Important:</strong> Please complete your payment before your appointment to ensure your booking is confirmed. Unconfirmed appointments may be cancelled.</p>
          </div>

          <p>If you have any questions or need assistance, please don't hesitate to reach out to us.</p>

          <p>Best regards,<br>The Mawidi Team</p>
        </div>
        <div class="footer">
          <p>© ${new Date().getFullYear()} Mawidi. All rights reserved.</p>
          <p style="font-size: 12px; color: #9ca3af;">If you did not make this booking, please ignore this email.</p>
        </div>
      </div>
    </body>
    </html>
  `;

  const text = isArabic
    ? `تذكير بالدفعة المقدمة - موعدك غداً!

عزيزي ${customerName}،

نود تذكيرك بأن موعدك المحجوز غداً يتطلب دفعة مقدمة لتأكيد الحجز.

تفاصيل الموعد:
📅 التاريخ: ${appointmentDate}
🕐 الوقت: ${appointmentTime}
🏷️ الخدمة: ${service}

المبلغ المطلوب: ${formattedAmount}

ادفع الآن: ${paymentLink}

⚠️ مهم: يرجى إتمام الدفع قبل موعدك لضمان تأكيد حجزك. قد يتم إلغاء المواعيد غير المؤكدة.

إذا كان لديك أي استفسارات، لا تتردد في التواصل معنا.

مع أطيب التحيات،
فريق Mawidi

© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.`
    : `Deposit Reminder - Your Appointment is Tomorrow!

Dear ${customerName},

This is a friendly reminder that your upcoming appointment tomorrow requires a deposit to confirm your booking.

Appointment Details:
📅 Date: ${appointmentDate}
🕐 Time: ${appointmentTime}
🏷️ Service: ${service}

Amount Due: ${formattedAmount}

Pay Now: ${paymentLink}

⚠️ Important: Please complete your payment before your appointment to ensure your booking is confirmed. Unconfirmed appointments may be cancelled.

If you have any questions or need assistance, please don't hesitate to reach out to us.

Best regards,
The Mawidi Team

© ${new Date().getFullYear()} Mawidi. All rights reserved.`;

  return { subject, html, text };
}
