/**
 * Email Service Utility
 *
 * Handles email sending via SMTP with support for both:
 * - Local development (MailHog)
 * - Production (external SMTP provider)
 */

import nodemailer from "nodemailer";

// SMTP Configuration from environment variables
const SMTP_CONFIG = {
  host: process.env.SMTP_HOST || "localhost",
  port: parseInt(process.env.SMTP_PORT || "1025"),
  secure: process.env.SMTP_SECURE === "true", // true for 465, false for other ports
  auth:
    process.env.SMTP_USER && process.env.SMTP_PASS
      ? {
          user: process.env.SMTP_USER,
          pass: process.env.SMTP_PASS,
        }
      : undefined,
};

const FROM_EMAIL = process.env.SMTP_FROM || "noreply@mawidi.com";

// Create reusable transporter
const transporter = nodemailer.createTransport(SMTP_CONFIG);

// Verify transporter configuration on module load (development only)
if (process.env.NODE_ENV === "development") {
  transporter
    .verify()
    .then(() => console.log("✅ SMTP server ready"))
    .catch((error) => console.error("❌ SMTP error:", error.message));
}

/**
 * Email Template Types
 */
interface EmailTemplate {
  subject: string;
  html: string;
  text: string;
}

/**
 * Send an email
 */
export async function sendEmail(
  to: string,
  template: EmailTemplate,
): Promise<boolean> {
  try {
    const info = await transporter.sendMail({
      from: FROM_EMAIL,
      to,
      subject: template.subject,
      html: template.html,
      text: template.text,
    });

    console.log("📧 Email sent:", info.messageId);
    return true;
  } catch (error) {
    console.error("❌ Email send failed:", error);
    return false;
  }
}

/**
 * OTP Email Template - Professional with personalization
 */
export function createOTPEmail(
  otp: string,
  language: "ar" | "en",
  name?: string,
  purpose: "login" | "signup" | "reset" = "login",
): EmailTemplate {
  const isArabic = language === "ar";

  // Personalized greeting
  const greeting = name
    ? isArabic
      ? `مرحباً ${name}،`
      : `Hello ${name},`
    : isArabic
      ? "مرحباً،"
      : "Hello,";

  // Purpose-specific message
  const purposeMessage = isArabic
    ? {
        login:
          "لقد طلبت تسجيل الدخول إلى حسابك في Mawidi. استخدم رمز التحقق التالي لإكمال عملية تسجيل الدخول بأمان:",
        signup:
          "شكراً لاختيارك Mawidi! استخدم رمز التحقق التالي لإكمال عملية التسجيل:",
        reset:
          "لقد طلبت إعادة تعيين كلمة المرور الخاصة بك. استخدم رمز التحقق التالي:",
      }
    : {
        login:
          "You requested to log in to your Mawidi account. Use the verification code below to complete your secure login:",
        signup:
          "Thank you for choosing Mawidi! Use the verification code below to complete your registration:",
        reset:
          "You requested to reset your password. Use the verification code below:",
      };

  const subject = isArabic
    ? `رمز تسجيل الدخول الآمن - Mawidi`
    : `Your Secure Login Code - Mawidi`;

  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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
          line-height: 1.6;
          color: #1f2937;
          background: #f3f4f6;
          margin: 0;
          padding: 20px;
        }
        .email-wrapper { background: #f3f4f6; padding: 40px 20px; }
        .container {
          max-width: 600px;
          margin: 0 auto;
          background: white;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .header {
          background: linear-gradient(135deg, #10b981 0%, #059669 100%);
          color: white;
          padding: 40px 30px;
          text-align: center;
        }
        .logo {
          font-size: 32px;
          font-weight: 800;
          margin-bottom: 8px;
          letter-spacing: -0.5px;
        }
        .header-subtitle {
          font-size: 16px;
          opacity: 0.95;
          font-weight: 500;
        }
        .content {
          background: white;
          padding: 40px 30px;
        }
        .greeting {
          font-size: 18px;
          font-weight: 600;
          color: #1f2937;
          margin-bottom: 20px;
        }
        .message {
          font-size: 15px;
          color: #4b5563;
          margin-bottom: 30px;
          line-height: 1.7;
        }
        .otp-container {
          background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
          border: 2px solid #10b981;
          border-radius: 12px;
          padding: 30px;
          margin: 30px 0;
          text-align: center;
        }
        .otp-label {
          font-size: 13px;
          color: #065f46;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 1px;
          margin-bottom: 15px;
        }
        .otp-code {
          font-size: 36px;
          font-weight: 800;
          letter-spacing: 12px;
          color: #059669;
          font-family: 'Courier New', monospace;
          margin: 0;
          padding: 10px;
        }
        .otp-expiry {
          font-size: 13px;
          color: #065f46;
          margin-top: 15px;
          font-weight: 500;
        }
        .security-notice {
          background: #fef3c7;
          border-right: 4px solid #f59e0b;
          padding: 20px;
          border-radius: 8px;
          margin: 25px 0;
        }
        .security-notice p {
          margin: 0;
          font-size: 14px;
          color: #92400e;
          font-weight: 500;
        }
        .footer {
          background: #f9fafb;
          padding: 30px;
          text-align: center;
          border-top: 1px solid #e5e7eb;
        }
        .footer-text {
          color: #6b7280;
          font-size: 13px;
          margin: 5px 0;
        }
        .support-link {
          color: #10b981;
          text-decoration: none;
          font-weight: 600;
        }
        .support-link:hover {
          color: #059669;
        }
      </style>
    </head>
    <body>
      <div class="email-wrapper">
        <div class="container">
          <div class="header">
            <div class="logo">Mawidi</div>
            <div class="header-subtitle">منصة إدارة المواعيد الذكية</div>
          </div>
          <div class="content">
            <p class="greeting">${greeting}</p>
            <p class="message">${purposeMessage[purpose]}</p>

            <div class="otp-container">
              <div class="otp-label">رمز التحقق الخاص بك</div>
              <div class="otp-code">${otp}</div>
              <div class="otp-expiry">⏱ صالح لمدة 10 دقائق</div>
            </div>

            <div class="security-notice">
              <p><strong>🔒 ملاحظة أمنية:</strong> لا تشارك هذا الرمز مع أي شخص. فريق Mawidi لن يطلب منك أبداً مشاركة رمز التحقق.</p>
            </div>

            <p class="message">إذا لم تطلب هذا الرمز، يمكنك تجاهل هذه الرسالة بأمان. حسابك محمي ولم يتم الوصول إليه.</p>
          </div>
          <div class="footer">
            <p class="footer-text">هل تحتاج إلى مساعدة؟ <a href="mailto:support@mawidi.com" class="support-link">اتصل بالدعم</a></p>
            <p class="footer-text">© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.</p>
          </div>
        </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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
          line-height: 1.6;
          color: #1f2937;
          background: #f3f4f6;
          margin: 0;
          padding: 20px;
        }
        .email-wrapper { background: #f3f4f6; padding: 40px 20px; }
        .container {
          max-width: 600px;
          margin: 0 auto;
          background: white;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .header {
          background: linear-gradient(135deg, #10b981 0%, #059669 100%);
          color: white;
          padding: 40px 30px;
          text-align: center;
        }
        .logo {
          font-size: 32px;
          font-weight: 800;
          margin-bottom: 8px;
          letter-spacing: -0.5px;
        }
        .header-subtitle {
          font-size: 16px;
          opacity: 0.95;
          font-weight: 500;
        }
        .content {
          background: white;
          padding: 40px 30px;
        }
        .greeting {
          font-size: 18px;
          font-weight: 600;
          color: #1f2937;
          margin-bottom: 20px;
        }
        .message {
          font-size: 15px;
          color: #4b5563;
          margin-bottom: 30px;
          line-height: 1.7;
        }
        .otp-container {
          background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
          border: 2px solid #10b981;
          border-radius: 12px;
          padding: 30px;
          margin: 30px 0;
          text-align: center;
        }
        .otp-label {
          font-size: 13px;
          color: #065f46;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 1px;
          margin-bottom: 15px;
        }
        .otp-code {
          font-size: 36px;
          font-weight: 800;
          letter-spacing: 12px;
          color: #059669;
          font-family: 'Courier New', monospace;
          margin: 0;
          padding: 10px;
        }
        .otp-expiry {
          font-size: 13px;
          color: #065f46;
          margin-top: 15px;
          font-weight: 500;
        }
        .security-notice {
          background: #fef3c7;
          border-left: 4px solid #f59e0b;
          padding: 20px;
          border-radius: 8px;
          margin: 25px 0;
        }
        .security-notice p {
          margin: 0;
          font-size: 14px;
          color: #92400e;
          font-weight: 500;
        }
        .footer {
          background: #f9fafb;
          padding: 30px;
          text-align: center;
          border-top: 1px solid #e5e7eb;
        }
        .footer-text {
          color: #6b7280;
          font-size: 13px;
          margin: 5px 0;
        }
        .support-link {
          color: #10b981;
          text-decoration: none;
          font-weight: 600;
        }
        .support-link:hover {
          color: #059669;
        }
      </style>
    </head>
    <body>
      <div class="email-wrapper">
        <div class="container">
          <div class="header">
            <div class="logo">Mawidi</div>
            <div class="header-subtitle">Smart Appointment Management</div>
          </div>
          <div class="content">
            <p class="greeting">${greeting}</p>
            <p class="message">${purposeMessage[purpose]}</p>

            <div class="otp-container">
              <div class="otp-label">Your Verification Code</div>
              <div class="otp-code">${otp}</div>
              <div class="otp-expiry">⏱ Valid for 10 minutes</div>
            </div>

            <div class="security-notice">
              <p><strong>🔒 Security Notice:</strong> Never share this code with anyone. The Mawidi team will never ask you to share your verification code.</p>
            </div>

            <p class="message">If you didn't request this code, you can safely ignore this message. Your account remains secure and has not been accessed.</p>
          </div>
          <div class="footer">
            <p class="footer-text">Need help? <a href="mailto:support@mawidi.com" class="support-link">Contact Support</a></p>
            <p class="footer-text">© ${new Date().getFullYear()} Mawidi. All rights reserved.</p>
          </div>
        </div>
      </div>
    </body>
    </html>
  `;

  const text = isArabic
    ? `${greeting}\n\n${purposeMessage[purpose]}\n\nرمز التحقق الخاص بك: ${otp}\n\n⏱ هذا الرمز صالح لمدة 10 دقائق فقط.\n\n🔒 ملاحظة أمنية: لا تشارك هذا الرمز مع أي شخص.\n\nإذا لم تطلب هذا الرمز، يرجى تجاهل هذه الرسالة.\n\n© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.`
    : `${greeting}\n\n${purposeMessage[purpose]}\n\nYour verification code: ${otp}\n\n⏱ This code is valid for 10 minutes only.\n\n🔒 Security Notice: Never share this code with anyone.\n\nIf you didn't request this code, please ignore this message.\n\n© ${new Date().getFullYear()} Mawidi. All rights reserved.`;

  return { subject, html, text };
}

/**
 * Welcome Email Template
 */
export function createWelcomeEmail(
  name: string,
  language: "ar" | "en",
): EmailTemplate {
  const isArabic = language === "ar";

  const subject = isArabic ? "مرحباً بك في Mawidi!" : "Welcome to Mawidi!";

  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.6; color: #333; }
        .container { max-width: 600px; margin: 0 auto; padding: 20px; }
        .header { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 30px; text-align: center; border-radius: 8px 8px 0 0; }
        .content { background: #f9fafb; padding: 30px; border-radius: 0 0 8px 8px; }
        .cta-button { display: inline-block; background: #10b981; color: white; padding: 12px 30px; text-decoration: none; border-radius: 6px; margin: 20px 0; }
        .footer { text-align: center; margin-top: 20px; color: #6b7280; font-size: 14px; }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="header">
          <h1>🎉 مرحباً بك في Mawidi!</h1>
        </div>
        <div class="content">
          <p>عزيزي ${name}،</p>
          <p>شكراً لانضمامك إلى Mawidi! نحن متحمسون لمساعدتك في تحويل إدارة المواعيد الخاصة بك.</p>
          <p><strong>الخطوات التالية:</strong></p>
          <ol>
            <li>أكمل ملف تعريف شركتك</li>
            <li>اختر خطة الاشتراك المناسبة</li>
            <li>ابدأ في جدولة المواعيد</li>
          </ol>
          <a href="${process.env.NEXT_PUBLIC_APP_URL || "http://localhost:9000"}/ar/dashboard" class="cta-button">
            ابدأ الآن
          </a>
        </div>
        <div class="footer">
          <p>© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.</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.6; color: #333; }
        .container { max-width: 600px; margin: 0 auto; padding: 20px; }
        .header { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 30px; text-align: center; border-radius: 8px 8px 0 0; }
        .content { background: #f9fafb; padding: 30px; border-radius: 0 0 8px 8px; }
        .cta-button { display: inline-block; background: #10b981; color: white; padding: 12px 30px; text-decoration: none; border-radius: 6px; margin: 20px 0; }
        .footer { text-align: center; margin-top: 20px; color: #6b7280; font-size: 14px; }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="header">
          <h1>🎉 Welcome to Mawidi!</h1>
        </div>
        <div class="content">
          <p>Dear ${name},</p>
          <p>Thank you for joining Mawidi! We're excited to help you transform your appointment management.</p>
          <p><strong>Next Steps:</strong></p>
          <ol>
            <li>Complete your company profile</li>
            <li>Choose your subscription plan</li>
            <li>Start scheduling appointments</li>
          </ol>
          <a href="${process.env.NEXT_PUBLIC_APP_URL || "http://localhost:9000"}/en/dashboard" class="cta-button">
            Get Started
          </a>
        </div>
        <div class="footer">
          <p>© ${new Date().getFullYear()} Mawidi. All rights reserved.</p>
        </div>
      </div>
    </body>
    </html>
  `;

  const text = isArabic
    ? `مرحباً ${name}،\n\nشكراً لانضمامك إلى Mawidi!\n\nالخطوات التالية:\n1. أكمل ملف تعريف شركتك\n2. اختر خطة الاشتراك المناسبة\n3. ابدأ في جدولة المواعيد\n\n© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.`
    : `Dear ${name},\n\nThank you for joining Mawidi!\n\nNext Steps:\n1. Complete your company profile\n2. Choose your subscription plan\n3. Start scheduling appointments\n\n© ${new Date().getFullYear()} Mawidi. All rights reserved.`;

  return { subject, html, text };
}

/**
 * Password Reset Email Template
 */
export function createPasswordResetEmail(
  otp: string,
  language: "ar" | "en",
): EmailTemplate {
  const isArabic = language === "ar";

  const subject = isArabic
    ? "إعادة تعيين كلمة المرور - Mawidi"
    : "Password Reset - Mawidi";

  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.6; color: #333; }
        .container { max-width: 600px; margin: 0 auto; padding: 20px; }
        .header { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 30px; text-align: center; border-radius: 8px 8px 0 0; }
        .content { background: #f9fafb; padding: 30px; border-radius: 0 0 8px 8px; }
        .otp-code { font-size: 32px; font-weight: bold; letter-spacing: 8px; text-align: center; background: white; padding: 20px; margin: 20px 0; border-radius: 8px; border: 2px solid #10b981; }
        .warning { background: #fef3c7; padding: 15px; border-radius: 6px; margin: 20px 0; border-left: 4px solid #f59e0b; }
        .footer { text-align: center; margin-top: 20px; color: #6b7280; font-size: 14px; }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="header">
          <h1>🔐 إعادة تعيين كلمة المرور</h1>
        </div>
        <div class="content">
          <p>مرحباً،</p>
          <p>لقد تلقينا طلباً لإعادة تعيين كلمة المرور الخاصة بك.</p>
          <div class="otp-code">${otp}</div>
          <p>استخدم هذا الرمز لإعادة تعيين كلمة المرور الخاصة بك. الرمز صالح لمدة 10 دقائق.</p>
          <div class="warning">
            <strong>⚠️ تحذير أمني:</strong> إذا لم تطلب إعادة تعيين كلمة المرور، يرجى تجاهل هذه الرسالة وتأمين حسابك.
          </div>
        </div>
        <div class="footer">
          <p>© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.</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.6; color: #333; }
        .container { max-width: 600px; margin: 0 auto; padding: 20px; }
        .header { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 30px; text-align: center; border-radius: 8px 8px 0 0; }
        .content { background: #f9fafb; padding: 30px; border-radius: 0 0 8px 8px; }
        .otp-code { font-size: 32px; font-weight: bold; letter-spacing: 8px; text-align: center; background: white; padding: 20px; margin: 20px 0; border-radius: 8px; border: 2px solid #10b981; }
        .warning { background: #fef3c7; padding: 15px; border-radius: 6px; margin: 20px 0; border-left: 4px solid #f59e0b; }
        .footer { text-align: center; margin-top: 20px; color: #6b7280; font-size: 14px; }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="header">
          <h1>🔐 Password Reset</h1>
        </div>
        <div class="content">
          <p>Hello,</p>
          <p>We received a request to reset your password.</p>
          <div class="otp-code">${otp}</div>
          <p>Use this code to reset your password. The code is valid for 10 minutes.</p>
          <div class="warning">
            <strong>⚠️ Security Warning:</strong> If you didn't request a password reset, please ignore this message and secure your account.
          </div>
        </div>
        <div class="footer">
          <p>© ${new Date().getFullYear()} Mawidi. All rights reserved.</p>
        </div>
      </div>
    </body>
    </html>
  `;

  const text = isArabic
    ? `رمز إعادة تعيين كلمة المرور: ${otp}\n\nهذا الرمز صالح لمدة 10 دقائق.\n\nإذا لم تطلب إعادة تعيين كلمة المرور، يرجى تجاهل هذه الرسالة.\n\n© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.`
    : `Your password reset code: ${otp}\n\nThis code is valid for 10 minutes.\n\nIf you didn't request a password reset, please ignore this message.\n\n© ${new Date().getFullYear()} Mawidi. All rights reserved.`;

  return { subject, html, text };
}

/**
 * Demo Booking Confirmation Email
 */
export function createDemoConfirmationEmail(
  name: string,
  date: string,
  time: string,
  duration: string,
  language: "ar" | "en",
): EmailTemplate {
  const isArabic = language === "ar";

  const subject = isArabic
    ? "تأكيد موعد العرض التوضيحي - Mawidi"
    : "Demo Appointment Confirmed - Mawidi";

  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.6; color: #333; }
        .container { max-width: 600px; margin: 0 auto; padding: 20px; }
        .header { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 30px; text-align: center; border-radius: 8px 8px 0 0; }
        .content { background: #f9fafb; padding: 30px; border-radius: 0 0 8px 8px; }
        .booking-details { background: white; padding: 20px; margin: 20px 0; border-radius: 8px; border: 1px solid #d1d5db; }
        .detail-row { margin: 10px 0; }
        .detail-label { font-weight: bold; color: #059669; }
        .footer { text-align: center; margin-top: 20px; color: #6b7280; font-size: 14px; }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="header">
          <h1>✅ تم تأكيد موعدك</h1>
        </div>
        <div class="content">
          <p>عزيزي ${name}،</p>
          <p>تم تأكيد موعد العرض التوضيحي الخاص بك بنجاح!</p>
          <div class="booking-details">
            <div class="detail-row">
              <span class="detail-label">📅 التاريخ:</span> ${date}
            </div>
            <div class="detail-row">
              <span class="detail-label">🕐 الوقت:</span> ${time}
            </div>
            <div class="detail-row">
              <span class="detail-label">⏱️ المدة:</span> ${duration}
            </div>
          </div>
          <p>سنرسل لك رابط الاجتماع قبل الموعد بـ 15 دقيقة.</p>
          <p>نتطلع لمقابلتك!</p>
        </div>
        <div class="footer">
          <p>© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.</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.6; color: #333; }
        .container { max-width: 600px; margin: 0 auto; padding: 20px; }
        .header { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 30px; text-align: center; border-radius: 8px 8px 0 0; }
        .content { background: #f9fafb; padding: 30px; border-radius: 0 0 8px 8px; }
        .booking-details { background: white; padding: 20px; margin: 20px 0; border-radius: 8px; border: 1px solid #d1d5db; }
        .detail-row { margin: 10px 0; }
        .detail-label { font-weight: bold; color: #059669; }
        .footer { text-align: center; margin-top: 20px; color: #6b7280; font-size: 14px; }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="header">
          <h1>✅ Your Appointment is Confirmed</h1>
        </div>
        <div class="content">
          <p>Dear ${name},</p>
          <p>Your demo appointment has been confirmed successfully!</p>
          <div class="booking-details">
            <div class="detail-row">
              <span class="detail-label">📅 Date:</span> ${date}
            </div>
            <div class="detail-row">
              <span class="detail-label">🕐 Time:</span> ${time}
            </div>
            <div class="detail-row">
              <span class="detail-label">⏱️ Duration:</span> ${duration}
            </div>
          </div>
          <p>We'll send you the meeting link 15 minutes before your appointment.</p>
          <p>Looking forward to meeting you!</p>
        </div>
        <div class="footer">
          <p>© ${new Date().getFullYear()} Mawidi. All rights reserved.</p>
        </div>
      </div>
    </body>
    </html>
  `;

  const text = isArabic
    ? `تم تأكيد موعدك!\n\nعزيزي ${name},\n\nالتفاصيل:\n📅 التاريخ: ${date}\n🕐 الوقت: ${time}\n⏱️ المدة: ${duration}\n\nسنرسل لك رابط الاجتماع قبل الموعد بـ 15 دقيقة.\n\n© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.`
    : `Your appointment is confirmed!\n\nDear ${name},\n\nDetails:\n📅 Date: ${date}\n🕐 Time: ${time}\n⏱️ Duration: ${duration}\n\nWe'll send you the meeting link 15 minutes before your appointment.\n\n© ${new Date().getFullYear()} Mawidi. All rights reserved.`;

  return { subject, html, text };
}

/**
 * Send OTP Email - Enterprise Implementation
 *
 * Sends professional, personalized OTP emails using the template service
 *
 * @param email - Recipient email address
 * @param otp - 6-digit OTP code
 * @param language - Email language ('ar' or 'en')
 * @param name - User's name for personalization (optional)
 * @param purpose - OTP purpose for appropriate messaging (default: 'login')
 * @returns Promise<boolean> - True if email sent successfully
 *
 * @example
 * ```typescript
 * const sent = await sendOTPEmail(
 *   'user@example.com',
 *   '123456',
 *   'en',
 *   'John Doe',
 *   'login'
 * );
 * ```
 */
export async function sendOTPEmail(
  email: string,
  otp: string,
  language: "ar" | "en",
  name?: string,
  purpose: "login" | "signup" | "reset" = "login",
): Promise<boolean> {
  try {
    // Use professional template service if available, fallback to legacy
    const template = createOTPEmail(otp, language, name, purpose);

    const sent = await sendEmail(email, template);

    if (sent) {
      console.log(
        `[Email] OTP sent to ${email.replace(/(.{2})(.*)(@.*)/, "$1***$3")} (${purpose})`,
      );
    }

    return sent;
  } catch (error) {
    console.error("[Email] Failed to send OTP:", error);
    return false;
  }
}

/**
 * Send Welcome Email
 */
export async function sendWelcomeEmail(
  email: string,
  name: string,
  language: "ar" | "en",
): Promise<boolean> {
  const template = createWelcomeEmail(name, language);
  return sendEmail(email, template);
}

/**
 * Send Password Reset Email
 */
export async function sendPasswordResetEmail(
  email: string,
  otp: string,
  language: "ar" | "en",
): Promise<boolean> {
  const template = createPasswordResetEmail(otp, language);
  return sendEmail(email, template);
}

/**
 * Demo Booking Received Email Template (Immediate - when booking is first made)
 */
export function createDemoBookingReceivedEmail(
  name: string,
  date: string,
  time: string,
  duration: string,
  language: "ar" | "en",
  meetingLink?: string,
): EmailTemplate {
  const isArabic = language === "ar";

  const subject = isArabic
    ? "تم استلام طلب موعدك التجريبي - Mawidi"
    : "Demo Booking Request Received - Mawidi";

  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.6; color: #333; }
        .container { max-width: 600px; margin: 0 auto; padding: 20px; }
        .header { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 30px; text-align: center; border-radius: 8px 8px 0 0; }
        .content { background: #f9fafb; padding: 30px; border-radius: 0 0 8px 8px; }
        .booking-details { background: white; padding: 20px; margin: 20px 0; border-radius: 8px; border: 1px solid #d1d5db; }
        .detail-row { margin: 10px 0; }
        .detail-label { font-weight: bold; color: #059669; }
        .note-box { background: #fef3c7; padding: 15px; border-radius: 6px; margin: 20px 0; border-left: 4px solid #f59e0b; }
        .footer { text-align: center; margin-top: 20px; color: #6b7280; font-size: 14px; }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="header">
          <h1>📩 تم استلام طلبك</h1>
        </div>
        <div class="content">
          <p>عزيزي ${name}،</p>
          <p>شكراً لك! لقد استلمنا طلب موعدك التجريبي.</p>
          <div class="booking-details">
            <div class="detail-row">
              <span class="detail-label">📅 التاريخ:</span> ${date}
            </div>
            <div class="detail-row">
              <span class="detail-label">🕐 الوقت:</span> ${time}
            </div>
            <div class="detail-row">
              <span class="detail-label">⏱️ المدة:</span> ${duration}
            </div>
          </div>
          ${
            meetingLink
              ? `
          <div class="note-box" style="background: #d1fae5; border-left-color: #10b981;">
            <p><strong>🎉 رابط الاجتماع جاهز!</strong></p>
            <p>يمكنك الانضمام إلى اجتماع Google Meet مباشرةً باستخدام الرابط أدناه:</p>
            <div style="text-align: center; margin: 15px 0;">
              <a href="${meetingLink}" style="display: inline-block; background: #10b981; color: white; padding: 12px 30px; text-decoration: none; border-radius: 6px; font-weight: bold;">🎥 الانضمام إلى Google Meet</a>
            </div>
            <p style="font-size: 12px; color: #6b7280;">الرابط: <a href="${meetingLink}" style="color: #10b981;">${meetingLink}</a></p>
          </div>
          `
              : `
          <div class="note-box">
            <p><strong>ماذا بعد؟</strong></p>
            <p>سيتواصل معك فريقنا قريباً لتأكيد موعدك وإرسال رابط الاجتماع.</p>
          </div>
          `
          }
          <p>نتطلع لمقابلتك ومشاركة كيف يمكن لـ Mawidi تحويل إدارة مواعيدك!</p>
        </div>
        <div class="footer">
          <p>© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.</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.6; color: #333; }
        .container { max-width: 600px; margin: 0 auto; padding: 20px; }
        .header { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 30px; text-align: center; border-radius: 8px 8px 0 0; }
        .content { background: #f9fafb; padding: 30px; border-radius: 0 0 8px 8px; }
        .booking-details { background: white; padding: 20px; margin: 20px 0; border-radius: 8px; border: 1px solid #d1d5db; }
        .detail-row { margin: 10px 0; }
        .detail-label { font-weight: bold; color: #059669; }
        .note-box { background: #fef3c7; padding: 15px; border-radius: 6px; margin: 20px 0; border-left: 4px solid #f59e0b; }
        .footer { text-align: center; margin-top: 20px; color: #6b7280; font-size: 14px; }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="header">
          <h1>📩 Demo Booking Received</h1>
        </div>
        <div class="content">
          <p>Dear ${name},</p>
          <p>Thank you! We've received your demo booking request.</p>
          <div class="booking-details">
            <div class="detail-row">
              <span class="detail-label">📅 Date:</span> ${date}
            </div>
            <div class="detail-row">
              <span class="detail-label">🕐 Time:</span> ${time}
            </div>
            <div class="detail-row">
              <span class="detail-label">⏱️ Duration:</span> ${duration}
            </div>
          </div>
          ${
            meetingLink
              ? `
          <div class="note-box" style="background: #d1fae5; border-left-color: #10b981;">
            <p><strong>🎉 Your Meeting Link is Ready!</strong></p>
            <p>You can join your Google Meet session directly using the link below:</p>
            <div style="text-align: center; margin: 15px 0;">
              <a href="${meetingLink}" style="display: inline-block; background: #10b981; color: white; padding: 12px 30px; text-decoration: none; border-radius: 6px; font-weight: bold;">🎥 Join Google Meet</a>
            </div>
            <p style="font-size: 12px; color: #6b7280;">Meeting Link: <a href="${meetingLink}" style="color: #10b981;">${meetingLink}</a></p>
          </div>
          `
              : `
          <div class="note-box">
            <p><strong>What's next?</strong></p>
            <p>Our team will reach out to you soon to confirm your appointment and send you the meeting link.</p>
          </div>
          `
          }
          <p>Looking forward to meeting you and showing you how Mawidi can transform your appointment management!</p>
        </div>
        <div class="footer">
          <p>© ${new Date().getFullYear()} Mawidi. All rights reserved.</p>
        </div>
      </div>
    </body>
    </html>
  `;

  const text = isArabic
    ? `تم استلام طلبك!\n\nعزيزي ${name},\n\nشكراً لك! لقد استلمنا طلب موعدك التجريبي.\n\nالتفاصيل:\n📅 التاريخ: ${date}\n🕐 الوقت: ${time}\n⏱️ المدة: ${duration}\n\n${meetingLink ? `🎉 رابط الاجتماع جاهز!\nيمكنك الانضمام إلى Google Meet: ${meetingLink}` : "ماذا بعد؟\nسيتواصل معك فريقنا قريباً لتأكيد موعدك وإرسال رابط الاجتماع."}\n\nنتطلع لمقابلتك!\n\n© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.`
    : `Demo booking received!\n\nDear ${name},\n\nThank you! We've received your demo booking request.\n\nDetails:\n📅 Date: ${date}\n🕐 Time: ${time}\n⏱️ Duration: ${duration}\n\n${meetingLink ? `🎉 Your Meeting Link is Ready!\nJoin Google Meet: ${meetingLink}` : "What's next?\nOur team will reach out to you soon to confirm your appointment and send you the meeting link."}\n\nLooking forward to meeting you!\n\n© ${new Date().getFullYear()} Mawidi. All rights reserved.`;

  return { subject, html, text };
}

/**
 * Send Demo Booking Received Email (immediate, when booking is first made)
 */
export async function sendDemoBookingReceivedEmail(
  email: string,
  name: string,
  date: string,
  time: string,
  duration: string,
  language: "ar" | "en",
  meetingLink?: string,
): Promise<boolean> {
  const template = createDemoBookingReceivedEmail(
    name,
    date,
    time,
    duration,
    language,
    meetingLink,
  );
  return sendEmail(email, template);
}

/**
 * Send Demo Confirmation Email (when admin confirms the booking)
 */
export async function sendDemoConfirmationEmail(
  email: string,
  name: string,
  date: string,
  time: string,
  duration: string,
  language: "ar" | "en",
): Promise<boolean> {
  const template = createDemoConfirmationEmail(
    name,
    date,
    time,
    duration,
    language,
  );
  return sendEmail(email, template);
}

/**
 * Demo Reminder Email Template (24 hours before appointment)
 */
export function createDemoReminderEmail(
  name: string,
  date: string,
  time: string,
  duration: string,
  meetingLink: string,
  language: "ar" | "en",
): EmailTemplate {
  const isArabic = language === "ar";

  const subject = isArabic
    ? "تذكير: موعدك التجريبي غداً - Mawidi"
    : "Reminder: Your Demo Tomorrow - Mawidi";

  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.6; 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: 8px 8px 0 0; }
        .content { background: white; padding: 30px; border-radius: 0 0 8px 8px; }
        .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; }
        .detail-label { font-weight: bold; color: #059669; min-width: 80px; }
        .meeting-box { background: linear-gradient(135deg, #10b981 0%, #059669 100%); padding: 25px; border-radius: 12px; margin: 25px 0; text-align: center; }
        .meeting-btn { display: inline-block; background: white; color: #059669; padding: 15px 40px; text-decoration: none; border-radius: 8px; font-weight: bold; font-size: 16px; }
        .meeting-link { color: white; font-size: 12px; margin-top: 15px; word-break: break-all; }
        .reminder-box { background: #fef3c7; padding: 15px; border-radius: 6px; margin: 20px 0; border-right: 4px solid #f59e0b; }
        .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>عزيزي ${name}،</p>
          <p>نود تذكيرك بأن موعدك التجريبي مع فريق Mawidi هو <strong>غداً</strong>.</p>

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

          <div class="meeting-box">
            <p style="color: white; margin: 0 0 15px 0; font-size: 18px;"><strong>🎥 رابط الاجتماع جاهز!</strong></p>
            <a href="${meetingLink}" class="meeting-btn">انضم إلى Google Meet</a>
            <p class="meeting-link">${meetingLink}</p>
          </div>

          <div class="reminder-box">
            <p style="margin: 0;"><strong>💡 نصيحة:</strong> انضم قبل 5 دقائق من الموعد للتأكد من جاهزية الصوت والفيديو.</p>
          </div>

          <p>نتطلع لمقابلتك ومشاركة كيف يمكن لـ Mawidi تحويل إدارة مواعيدك!</p>

          <p>مع أطيب التحيات،<br>فريق Mawidi</p>
        </div>
        <div class="footer">
          <p>© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.</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.6; 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: 8px 8px 0 0; }
        .content { background: white; padding: 30px; border-radius: 0 0 8px 8px; }
        .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; }
        .detail-label { font-weight: bold; color: #059669; min-width: 80px; }
        .meeting-box { background: linear-gradient(135deg, #10b981 0%, #059669 100%); padding: 25px; border-radius: 12px; margin: 25px 0; text-align: center; }
        .meeting-btn { display: inline-block; background: white; color: #059669; padding: 15px 40px; text-decoration: none; border-radius: 8px; font-weight: bold; font-size: 16px; }
        .meeting-link { color: white; font-size: 12px; margin-top: 15px; word-break: break-all; }
        .reminder-box { background: #fef3c7; padding: 15px; border-radius: 6px; margin: 20px 0; border-left: 4px solid #f59e0b; }
        .footer { text-align: center; margin-top: 20px; color: #6b7280; font-size: 14px; }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="header">
          <h1>⏰ Demo Reminder</h1>
          <p>Tomorrow!</p>
        </div>
        <div class="content">
          <p>Dear ${name},</p>
          <p>This is a friendly reminder that your demo with the Mawidi team is <strong>tomorrow</strong>.</p>

          <div class="booking-details">
            <div class="detail-row">
              <span class="detail-label">📅 Date:</span>
              <span>${date}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">🕐 Time:</span>
              <span>${time}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">⏱️ Duration:</span>
              <span>${duration}</span>
            </div>
          </div>

          <div class="meeting-box">
            <p style="color: white; margin: 0 0 15px 0; font-size: 18px;"><strong>🎥 Your Meeting Link is Ready!</strong></p>
            <a href="${meetingLink}" class="meeting-btn">Join Google Meet</a>
            <p class="meeting-link">${meetingLink}</p>
          </div>

          <div class="reminder-box">
            <p style="margin: 0;"><strong>💡 Tip:</strong> Join 5 minutes early to make sure your audio and video are working properly.</p>
          </div>

          <p>Looking forward to meeting you and showing you how Mawidi can transform your appointment management!</p>

          <p>Best regards,<br>The Mawidi Team</p>
        </div>
        <div class="footer">
          <p>© ${new Date().getFullYear()} Mawidi. All rights reserved.</p>
        </div>
      </div>
    </body>
    </html>
  `;

  const text = isArabic
    ? `تذكير بموعدك التجريبي - غداً!\n\nعزيزي ${name},\n\nنود تذكيرك بأن موعدك التجريبي مع فريق Mawidi هو غداً.\n\nالتفاصيل:\n📅 التاريخ: ${date}\n🕐 الوقت: ${time}\n⏱️ المدة: ${duration}\n\n🎥 رابط الاجتماع: ${meetingLink}\n\n💡 نصيحة: انضم قبل 5 دقائق من الموعد للتأكد من جاهزية الصوت والفيديو.\n\nنتطلع لمقابلتك!\n\n© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.`
    : `Demo Reminder - Tomorrow!\n\nDear ${name},\n\nThis is a friendly reminder that your demo with the Mawidi team is tomorrow.\n\nDetails:\n📅 Date: ${date}\n🕐 Time: ${time}\n⏱️ Duration: ${duration}\n\n🎥 Meeting Link: ${meetingLink}\n\n💡 Tip: Join 5 minutes early to make sure your audio and video are working properly.\n\nLooking forward to meeting you!\n\n© ${new Date().getFullYear()} Mawidi. All rights reserved.`;

  return { subject, html, text };
}

/**
 * Send Demo Reminder Email (24 hours before appointment)
 */
export async function sendDemoReminderEmail(
  email: string,
  name: string,
  date: string,
  time: string,
  duration: string,
  meetingLink: string,
  language: "ar" | "en",
): Promise<boolean> {
  const template = createDemoReminderEmail(
    name,
    date,
    time,
    duration,
    meetingLink,
    language,
  );
  return sendEmail(email, template);
}

/**
 * Job Application Confirmation Email Template
 */
export function createJobApplicationConfirmationEmail(
  name: string,
  jobTitle: string,
  language: "ar" | "en",
): EmailTemplate {
  const isArabic = language === "ar";

  const subject = isArabic
    ? `شكراً لتقديم طلبك - ${jobTitle} - Mawidi`
    : `Thank You for Your Application - ${jobTitle} - Mawidi`;

  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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
          line-height: 1.6;
          color: #1f2937;
          background: #f3f4f6;
          margin: 0;
          padding: 20px;
        }
        .email-wrapper { background: #f3f4f6; padding: 40px 20px; }
        .container {
          max-width: 600px;
          margin: 0 auto;
          background: white;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .header {
          background: linear-gradient(135deg, #10b981 0%, #059669 100%);
          color: white;
          padding: 40px 30px;
          text-align: center;
        }
        .logo {
          font-size: 32px;
          font-weight: 800;
          margin-bottom: 8px;
          letter-spacing: -0.5px;
        }
        .header-subtitle {
          font-size: 16px;
          opacity: 0.95;
          font-weight: 500;
        }
        .content {
          background: white;
          padding: 40px 30px;
        }
        .greeting {
          font-size: 18px;
          font-weight: 600;
          color: #1f2937;
          margin-bottom: 20px;
        }
        .message {
          font-size: 15px;
          color: #4b5563;
          margin-bottom: 20px;
          line-height: 1.7;
        }
        .job-title-box {
          background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
          border: 2px solid #10b981;
          border-radius: 12px;
          padding: 20px;
          margin: 25px 0;
          text-align: center;
        }
        .job-title-label {
          font-size: 13px;
          color: #065f46;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 1px;
          margin-bottom: 10px;
        }
        .job-title {
          font-size: 22px;
          font-weight: 700;
          color: #059669;
          margin: 0;
        }
        .info-box {
          background: #eff6ff;
          border-right: 4px solid #3b82f6;
          padding: 20px;
          border-radius: 8px;
          margin: 25px 0;
        }
        .info-box p {
          margin: 8px 0;
          font-size: 14px;
          color: #1e40af;
        }
        .footer {
          background: #f9fafb;
          padding: 30px;
          text-align: center;
          border-top: 1px solid #e5e7eb;
        }
        .footer-text {
          color: #6b7280;
          font-size: 13px;
          margin: 5px 0;
        }
        .support-link {
          color: #10b981;
          text-decoration: none;
          font-weight: 600;
        }
        .support-link:hover {
          color: #059669;
        }
      </style>
    </head>
    <body>
      <div class="email-wrapper">
        <div class="container">
          <div class="header">
            <div class="logo">Mawidi</div>
            <div class="header-subtitle">منصة إدارة المواعيد الذكية</div>
          </div>
          <div class="content">
            <p class="greeting">عزيزي ${name}،</p>

            <p class="message">شكراً جزيلاً لتقديم طلبك للانضمام إلى فريق Mawidi!</p>

            <div class="job-title-box">
              <div class="job-title-label">الوظيفة المتقدم لها</div>
              <div class="job-title">${jobTitle}</div>
            </div>

            <p class="message">لقد استلمنا طلبك بنجاح وسيقوم فريق الموارد البشرية لدينا بمراجعته بعناية.</p>

            <div class="info-box">
              <p><strong>📋 الخطوات التالية:</strong></p>
              <p>• سنقوم بمراجعة طلبك ومؤهلاتك</p>
              <p>• ستتلقى رداً منا خلال <strong>2-5 أيام عمل</strong></p>
              <p>• إذا كانت مؤهلاتك مناسبة، سنتواصل معك لترتيب مقابلة</p>
            </div>

            <p class="message">نقدر اهتمامك بالعمل معنا ونتمنى لك التوفيق!</p>

            <p class="message" style="color: #6b7280; font-size: 14px; margin-top: 30px;">
              في حال كان لديك أي استفسار، يمكنك التواصل مع فريق الموارد البشرية لدينا.
            </p>
          </div>
          <div class="footer">
            <p class="footer-text">هل تحتاج إلى مساعدة؟ <a href="mailto:careers@mawidi.com" class="support-link">تواصل معنا</a></p>
            <p class="footer-text">© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.</p>
          </div>
        </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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
          line-height: 1.6;
          color: #1f2937;
          background: #f3f4f6;
          margin: 0;
          padding: 20px;
        }
        .email-wrapper { background: #f3f4f6; padding: 40px 20px; }
        .container {
          max-width: 600px;
          margin: 0 auto;
          background: white;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .header {
          background: linear-gradient(135deg, #10b981 0%, #059669 100%);
          color: white;
          padding: 40px 30px;
          text-align: center;
        }
        .logo {
          font-size: 32px;
          font-weight: 800;
          margin-bottom: 8px;
          letter-spacing: -0.5px;
        }
        .header-subtitle {
          font-size: 16px;
          opacity: 0.95;
          font-weight: 500;
        }
        .content {
          background: white;
          padding: 40px 30px;
        }
        .greeting {
          font-size: 18px;
          font-weight: 600;
          color: #1f2937;
          margin-bottom: 20px;
        }
        .message {
          font-size: 15px;
          color: #4b5563;
          margin-bottom: 20px;
          line-height: 1.7;
        }
        .job-title-box {
          background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
          border: 2px solid #10b981;
          border-radius: 12px;
          padding: 20px;
          margin: 25px 0;
          text-align: center;
        }
        .job-title-label {
          font-size: 13px;
          color: #065f46;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 1px;
          margin-bottom: 10px;
        }
        .job-title {
          font-size: 22px;
          font-weight: 700;
          color: #059669;
          margin: 0;
        }
        .info-box {
          background: #eff6ff;
          border-left: 4px solid #3b82f6;
          padding: 20px;
          border-radius: 8px;
          margin: 25px 0;
        }
        .info-box p {
          margin: 8px 0;
          font-size: 14px;
          color: #1e40af;
        }
        .footer {
          background: #f9fafb;
          padding: 30px;
          text-align: center;
          border-top: 1px solid #e5e7eb;
        }
        .footer-text {
          color: #6b7280;
          font-size: 13px;
          margin: 5px 0;
        }
        .support-link {
          color: #10b981;
          text-decoration: none;
          font-weight: 600;
        }
        .support-link:hover {
          color: #059669;
        }
      </style>
    </head>
    <body>
      <div class="email-wrapper">
        <div class="container">
          <div class="header">
            <div class="logo">Mawidi</div>
            <div class="header-subtitle">Smart Appointment Management</div>
          </div>
          <div class="content">
            <p class="greeting">Dear ${name},</p>

            <p class="message">Thank you very much for applying to join the Mawidi team!</p>

            <div class="job-title-box">
              <div class="job-title-label">Position Applied For</div>
              <div class="job-title">${jobTitle}</div>
            </div>

            <p class="message">Your application has been received successfully and our HR team will review it carefully.</p>

            <div class="info-box">
              <p><strong>📋 Next Steps:</strong></p>
              <p>• We will review your application and qualifications</p>
              <p>• You will receive a response within <strong>2-5 business days</strong></p>
              <p>• If your qualifications match our requirements, we will contact you to schedule an interview</p>
            </div>

            <p class="message">We appreciate your interest in working with us and wish you the best!</p>

            <p class="message" style="color: #6b7280; font-size: 14px; margin-top: 30px;">
              If you have any questions, feel free to reach out to our HR team.
            </p>
          </div>
          <div class="footer">
            <p class="footer-text">Need help? <a href="mailto:careers@mawidi.com" class="support-link">Contact Us</a></p>
            <p class="footer-text">© ${new Date().getFullYear()} Mawidi. All rights reserved.</p>
          </div>
        </div>
      </div>
    </body>
    </html>
  `;

  const text = isArabic
    ? `عزيزي ${name}،\n\nشكراً جزيلاً لتقديم طلبك للانضمام إلى فريق Mawidi!\n\nالوظيفة المتقدم لها: ${jobTitle}\n\nلقد استلمنا طلبك بنجاح وسيقوم فريق الموارد البشرية لدينا بمراجعته بعناية.\n\n📋 الخطوات التالية:\n• سنقوم بمراجعة طلبك ومؤهلاتك\n• ستتلقى رداً منا خلال 2-5 أيام عمل\n• إذا كانت مؤهلاتك مناسبة، سنتواصل معك لترتيب مقابلة\n\nنقدر اهتمامك بالعمل معنا ونتمنى لك التوفيق!\n\nفي حال كان لديك أي استفسار، يمكنك التواصل مع فريق الموارد البشرية لدينا على: careers@mawidi.com\n\n© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.`
    : `Dear ${name},\n\nThank you very much for applying to join the Mawidi team!\n\nPosition Applied For: ${jobTitle}\n\nYour application has been received successfully and our HR team will review it carefully.\n\n📋 Next Steps:\n• We will review your application and qualifications\n• You will receive a response within 2-5 business days\n• If your qualifications match our requirements, we will contact you to schedule an interview\n\nWe appreciate your interest in working with us and wish you the best!\n\nIf you have any questions, feel free to reach out to our HR team at: careers@mawidi.com\n\n© ${new Date().getFullYear()} Mawidi. All rights reserved.`;

  return { subject, html, text };
}

/**
 * Send Job Application Confirmation Email
 */
export async function sendJobApplicationConfirmationEmail(
  email: string,
  name: string,
  jobTitle: string,
  language: "ar" | "en",
): Promise<boolean> {
  const template = createJobApplicationConfirmationEmail(
    name,
    jobTitle,
    language,
  );
  return sendEmail(email, template);
}

/**
 * Interview Invitation Email Template
 */
export function createInterviewInvitationEmail(
  name: string,
  jobTitle: string,
  jobTitleAr: string,
  bookingToken: string,
  expiryDate: string,
  language: "ar" | "en",
): EmailTemplate {
  const isArabic = language === "ar";
  const displayJobTitle = isArabic ? jobTitleAr : jobTitle;
  const baseUrl = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:9000";
  const bookingUrl = `${baseUrl}/${language}/careers/interview/schedule?token=${bookingToken}`;

  const subject = isArabic
    ? `دعوة للمقابلة - ${jobTitleAr} - Mawidi`
    : `Interview Invitation - ${jobTitle} - Mawidi`;

  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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
          line-height: 1.6;
          color: #1f2937;
          background: #f3f4f6;
          margin: 0;
          padding: 20px;
        }
        .email-wrapper { background: #f3f4f6; padding: 40px 20px; }
        .container {
          max-width: 600px;
          margin: 0 auto;
          background: white;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .header {
          background: linear-gradient(135deg, #10b981 0%, #059669 100%);
          color: white;
          padding: 40px 30px;
          text-align: center;
        }
        .logo {
          font-size: 32px;
          font-weight: 800;
          margin-bottom: 8px;
          letter-spacing: -0.5px;
        }
        .header-subtitle {
          font-size: 16px;
          opacity: 0.95;
          font-weight: 500;
        }
        .content {
          background: white;
          padding: 40px 30px;
        }
        .greeting {
          font-size: 18px;
          font-weight: 600;
          color: #1f2937;
          margin-bottom: 20px;
        }
        .message {
          font-size: 15px;
          color: #4b5563;
          margin-bottom: 20px;
          line-height: 1.7;
        }
        .congratulations-box {
          background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
          border: 2px solid #f59e0b;
          border-radius: 12px;
          padding: 25px;
          margin: 25px 0;
          text-align: center;
        }
        .congratulations-icon {
          font-size: 48px;
          margin-bottom: 10px;
        }
        .congratulations-text {
          font-size: 20px;
          font-weight: 700;
          color: #92400e;
          margin: 0;
        }
        .job-title-box {
          background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
          border: 2px solid #10b981;
          border-radius: 12px;
          padding: 20px;
          margin: 25px 0;
          text-align: center;
        }
        .job-title-label {
          font-size: 13px;
          color: #065f46;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 1px;
          margin-bottom: 10px;
        }
        .job-title {
          font-size: 22px;
          font-weight: 700;
          color: #059669;
          margin: 0;
        }
        .cta-button {
          display: inline-block;
          background: linear-gradient(135deg, #10b981 0%, #059669 100%);
          color: white;
          padding: 16px 40px;
          text-decoration: none;
          border-radius: 8px;
          font-weight: 700;
          font-size: 16px;
          margin: 25px 0;
          box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3);
        }
        .cta-button:hover {
          box-shadow: 0 6px 8px rgba(16, 185, 129, 0.4);
        }
        .expiry-notice {
          background: #fef3c7;
          border-right: 4px solid #f59e0b;
          padding: 20px;
          border-radius: 8px;
          margin: 25px 0;
        }
        .expiry-notice p {
          margin: 0;
          font-size: 14px;
          color: #92400e;
          font-weight: 500;
        }
        .footer {
          background: #f9fafb;
          padding: 30px;
          text-align: center;
          border-top: 1px solid #e5e7eb;
        }
        .footer-text {
          color: #6b7280;
          font-size: 13px;
          margin: 5px 0;
        }
        .support-link {
          color: #10b981;
          text-decoration: none;
          font-weight: 600;
        }
        .support-link:hover {
          color: #059669;
        }
      </style>
    </head>
    <body>
      <div class="email-wrapper">
        <div class="container">
          <div class="header">
            <div class="logo">Mawidi</div>
            <div class="header-subtitle">منصة إدارة المواعيد الذكية</div>
          </div>
          <div class="content">
            <p class="greeting">عزيزي ${name}،</p>

            <div class="congratulations-box">
              <div class="congratulations-icon">🎉</div>
              <p class="congratulations-text">مبروك! تم اختيارك للمقابلة</p>
            </div>

            <p class="message">يسعدنا إبلاغك بأنه تم اختيار طلبك للانتقال إلى المرحلة التالية من عملية التوظيف.</p>

            <div class="job-title-box">
              <div class="job-title-label">الوظيفة</div>
              <div class="job-title">${displayJobTitle}</div>
            </div>

            <p class="message">نود دعوتك لإجراء مقابلة معنا. يرجى النقر على الزر أدناه لاختيار الوقت المناسب لك.</p>

            <div style="text-align: center;">
              <a href="${bookingUrl}" class="cta-button">
                📅 حدد موعد مقابلتك
              </a>
            </div>

            <div class="expiry-notice">
              <p><strong>⏰ مهم:</strong> هذا الرابط صالح حتى <strong>${expiryDate}</strong>. يرجى حجز موعدك قبل انتهاء صلاحية الرابط.</p>
            </div>

            <p class="message">إذا واجهت أي مشكلة في حجز موعدك أو كان لديك أي استفسار، لا تتردد في التواصل مع فريق الموارد البشرية لدينا.</p>

            <p class="message">نتطلع للقائك قريباً!</p>
          </div>
          <div class="footer">
            <p class="footer-text">هل تحتاج إلى مساعدة؟ <a href="mailto:careers@mawidi.com" class="support-link">تواصل معنا</a></p>
            <p class="footer-text">© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.</p>
          </div>
        </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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
          line-height: 1.6;
          color: #1f2937;
          background: #f3f4f6;
          margin: 0;
          padding: 20px;
        }
        .email-wrapper { background: #f3f4f6; padding: 40px 20px; }
        .container {
          max-width: 600px;
          margin: 0 auto;
          background: white;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .header {
          background: linear-gradient(135deg, #10b981 0%, #059669 100%);
          color: white;
          padding: 40px 30px;
          text-align: center;
        }
        .logo {
          font-size: 32px;
          font-weight: 800;
          margin-bottom: 8px;
          letter-spacing: -0.5px;
        }
        .header-subtitle {
          font-size: 16px;
          opacity: 0.95;
          font-weight: 500;
        }
        .content {
          background: white;
          padding: 40px 30px;
        }
        .greeting {
          font-size: 18px;
          font-weight: 600;
          color: #1f2937;
          margin-bottom: 20px;
        }
        .message {
          font-size: 15px;
          color: #4b5563;
          margin-bottom: 20px;
          line-height: 1.7;
        }
        .congratulations-box {
          background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
          border: 2px solid #f59e0b;
          border-radius: 12px;
          padding: 25px;
          margin: 25px 0;
          text-align: center;
        }
        .congratulations-icon {
          font-size: 48px;
          margin-bottom: 10px;
        }
        .congratulations-text {
          font-size: 20px;
          font-weight: 700;
          color: #92400e;
          margin: 0;
        }
        .job-title-box {
          background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
          border: 2px solid #10b981;
          border-radius: 12px;
          padding: 20px;
          margin: 25px 0;
          text-align: center;
        }
        .job-title-label {
          font-size: 13px;
          color: #065f46;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 1px;
          margin-bottom: 10px;
        }
        .job-title {
          font-size: 22px;
          font-weight: 700;
          color: #059669;
          margin: 0;
        }
        .cta-button {
          display: inline-block;
          background: linear-gradient(135deg, #10b981 0%, #059669 100%);
          color: white;
          padding: 16px 40px;
          text-decoration: none;
          border-radius: 8px;
          font-weight: 700;
          font-size: 16px;
          margin: 25px 0;
          box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3);
        }
        .cta-button:hover {
          box-shadow: 0 6px 8px rgba(16, 185, 129, 0.4);
        }
        .expiry-notice {
          background: #fef3c7;
          border-left: 4px solid #f59e0b;
          padding: 20px;
          border-radius: 8px;
          margin: 25px 0;
        }
        .expiry-notice p {
          margin: 0;
          font-size: 14px;
          color: #92400e;
          font-weight: 500;
        }
        .footer {
          background: #f9fafb;
          padding: 30px;
          text-align: center;
          border-top: 1px solid #e5e7eb;
        }
        .footer-text {
          color: #6b7280;
          font-size: 13px;
          margin: 5px 0;
        }
        .support-link {
          color: #10b981;
          text-decoration: none;
          font-weight: 600;
        }
        .support-link:hover {
          color: #059669;
        }
      </style>
    </head>
    <body>
      <div class="email-wrapper">
        <div class="container">
          <div class="header">
            <div class="logo">Mawidi</div>
            <div class="header-subtitle">Smart Appointment Management</div>
          </div>
          <div class="content">
            <p class="greeting">Dear ${name},</p>

            <div class="congratulations-box">
              <div class="congratulations-icon">🎉</div>
              <p class="congratulations-text">Congratulations! You've Been Selected for an Interview</p>
            </div>

            <p class="message">We are pleased to inform you that your application has been selected to move forward in our hiring process.</p>

            <div class="job-title-box">
              <div class="job-title-label">Position</div>
              <div class="job-title">${displayJobTitle}</div>
            </div>

            <p class="message">We would like to invite you to interview with us. Please click the button below to schedule your interview at a time that works for you.</p>

            <div style="text-align: center;">
              <a href="${bookingUrl}" class="cta-button">
                📅 Schedule Your Interview
              </a>
            </div>

            <div class="expiry-notice">
              <p><strong>⏰ Important:</strong> This link expires on <strong>${expiryDate}</strong>. Please schedule your interview before the link expires.</p>
            </div>

            <p class="message">If you experience any issues scheduling your interview or have any questions, please don't hesitate to contact our HR team.</p>

            <p class="message">We look forward to meeting you soon!</p>
          </div>
          <div class="footer">
            <p class="footer-text">Need help? <a href="mailto:careers@mawidi.com" class="support-link">Contact Us</a></p>
            <p class="footer-text">© ${new Date().getFullYear()} Mawidi. All rights reserved.</p>
          </div>
        </div>
      </div>
    </body>
    </html>
  `;

  const text = isArabic
    ? `عزيزي ${name}،\n\n🎉 مبروك! تم اختيارك للمقابلة\n\nيسعدنا إبلاغك بأنه تم اختيار طلبك للانتقال إلى المرحلة التالية من عملية التوظيف.\n\nالوظيفة: ${displayJobTitle}\n\nنود دعوتك لإجراء مقابلة معنا. يرجى زيارة الرابط التالي لاختيار الوقت المناسب لك:\n${bookingUrl}\n\n⏰ مهم: هذا الرابط صالح حتى ${expiryDate}. يرجى حجز موعدك قبل انتهاء صلاحية الرابط.\n\nإذا واجهت أي مشكلة في حجز موعدك أو كان لديك أي استفسار، لا تتردد في التواصل مع فريق الموارد البشرية لدينا على: careers@mawidi.com\n\nنتطلع للقائك قريباً!\n\n© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.`
    : `Dear ${name},\n\n🎉 Congratulations! You've Been Selected for an Interview\n\nWe are pleased to inform you that your application has been selected to move forward in our hiring process.\n\nPosition: ${displayJobTitle}\n\nWe would like to invite you to interview with us. Please visit the link below to schedule your interview at a time that works for you:\n${bookingUrl}\n\n⏰ Important: This link expires on ${expiryDate}. Please schedule your interview before the link expires.\n\nIf you experience any issues scheduling your interview or have any questions, please don't hesitate to contact our HR team at: careers@mawidi.com\n\nWe look forward to meeting you soon!\n\n© ${new Date().getFullYear()} Mawidi. All rights reserved.`;

  return { subject, html, text };
}

/**
 * Send Interview Invitation Email
 */
export async function sendInterviewInvitationEmail(
  email: string,
  name: string,
  jobTitle: string,
  jobTitleAr: string,
  bookingToken: string,
  expiryDate: string,
  language: "ar" | "en",
): Promise<boolean> {
  const template = createInterviewInvitationEmail(
    name,
    jobTitle,
    jobTitleAr,
    bookingToken,
    expiryDate,
    language,
  );
  return sendEmail(email, template);
}

/**
 * Interview Confirmation Email Template (with calendar invite attachment)
 */
export interface InterviewDetails {
  applicantName: string;
  jobTitle: string;
  jobTitleAr: string;
  confirmedDate: string;
  confirmedTime: string;
  timezone: string;
  meetingLink?: string;
  meetingPlatform?: "zoom" | "google_meet" | "teams" | "other";
  meetingId?: string;
  meetingPassword?: string;
  preparationInstructions?: string;
  language: "ar" | "en";
}

export function createInterviewConfirmationEmail(
  details: InterviewDetails,
): EmailTemplate {
  const {
    applicantName,
    jobTitle,
    jobTitleAr,
    confirmedDate,
    confirmedTime,
    timezone,
    meetingLink,
    meetingPlatform,
    meetingId,
    meetingPassword,
    preparationInstructions,
    language,
  } = details;
  const isArabic = language === "ar";
  const displayJobTitle = isArabic ? jobTitleAr : jobTitle;

  const platformLabels = {
    zoom: "Zoom",
    google_meet: "Google Meet",
    teams: "Microsoft Teams",
    other: isArabic ? "اجتماع افتراضي" : "Virtual Meeting",
  };

  const platformName = meetingPlatform
    ? platformLabels[meetingPlatform]
    : platformLabels.other;

  const subject = isArabic
    ? `تأكيد موعد المقابلة - ${jobTitleAr} - Mawidi`
    : `Interview Confirmed - ${jobTitle} - Mawidi`;

  const defaultPreparationInstructions = isArabic
    ? `• تأكد من أن اتصالك بالإنترنت مستقر\n• جهز نسخة محدثة من سيرتك الذاتية\n• قم بإعداد بيئة هادئة ومناسبة للمقابلة\n• اختبر الكاميرا والمايكروفون قبل الموعد بـ 10 دقائق\n• كن مستعداً للحديث عن خبراتك ومؤهلاتك`
    : `• Ensure you have a stable internet connection\n• Prepare an updated copy of your resume\n• Set up a quiet and appropriate interview environment\n• Test your camera and microphone 10 minutes before the meeting\n• Be ready to discuss your experience and qualifications`;

  const instructions =
    preparationInstructions || defaultPreparationInstructions;

  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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
          line-height: 1.6;
          color: #1f2937;
          background: #f3f4f6;
          margin: 0;
          padding: 20px;
        }
        .email-wrapper { background: #f3f4f6; padding: 40px 20px; }
        .container {
          max-width: 600px;
          margin: 0 auto;
          background: white;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .header {
          background: linear-gradient(135deg, #10b981 0%, #059669 100%);
          color: white;
          padding: 40px 30px;
          text-align: center;
        }
        .logo {
          font-size: 32px;
          font-weight: 800;
          margin-bottom: 8px;
          letter-spacing: -0.5px;
        }
        .header-subtitle {
          font-size: 16px;
          opacity: 0.95;
          font-weight: 500;
        }
        .content {
          background: white;
          padding: 40px 30px;
        }
        .confirmation-badge {
          background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
          border: 2px solid #10b981;
          border-radius: 12px;
          padding: 25px;
          margin: 25px 0;
          text-align: center;
        }
        .confirmation-icon {
          font-size: 48px;
          margin-bottom: 10px;
        }
        .confirmation-text {
          font-size: 20px;
          font-weight: 700;
          color: #065f46;
          margin: 0;
        }
        .interview-details {
          background: #f9fafb;
          border-radius: 12px;
          padding: 25px;
          margin: 25px 0;
        }
        .detail-row {
          margin: 15px 0;
          padding: 12px;
          background: white;
          border-radius: 8px;
          display: flex;
          align-items: center;
        }
        .detail-icon {
          font-size: 24px;
          margin-left: 12px;
          flex-shrink: 0;
        }
        .detail-content {
          flex: 1;
        }
        .detail-label {
          font-size: 12px;
          color: #6b7280;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }
        .detail-value {
          font-size: 16px;
          color: #1f2937;
          font-weight: 600;
          margin-top: 4px;
        }
        .meeting-link-box {
          background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
          border: 2px solid #3b82f6;
          border-radius: 12px;
          padding: 25px;
          margin: 25px 0;
          text-align: center;
        }
        .meeting-link-label {
          font-size: 14px;
          color: #1e40af;
          font-weight: 600;
          margin-bottom: 15px;
        }
        .join-button {
          display: inline-block;
          background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
          color: white;
          padding: 16px 40px;
          text-decoration: none;
          border-radius: 8px;
          font-weight: 700;
          font-size: 16px;
          box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3);
        }
        .meeting-credentials {
          margin-top: 15px;
          padding-top: 15px;
          border-top: 1px solid #bfdbfe;
        }
        .credential-item {
          font-size: 13px;
          color: #1e40af;
          margin: 5px 0;
        }
        .preparation-box {
          background: #fef3c7;
          border-right: 4px solid #f59e0b;
          border-radius: 8px;
          padding: 20px;
          margin: 25px 0;
        }
        .preparation-title {
          font-size: 16px;
          font-weight: 700;
          color: #92400e;
          margin-bottom: 12px;
        }
        .preparation-list {
          font-size: 14px;
          color: #78350f;
          line-height: 1.8;
          white-space: pre-line;
        }
        .footer {
          background: #f9fafb;
          padding: 30px;
          text-align: center;
          border-top: 1px solid #e5e7eb;
        }
        .footer-text {
          color: #6b7280;
          font-size: 13px;
          margin: 5px 0;
        }
        .support-link {
          color: #10b981;
          text-decoration: none;
          font-weight: 600;
        }
      </style>
    </head>
    <body>
      <div class="email-wrapper">
        <div class="container">
          <div class="header">
            <div class="logo">Mawidi</div>
            <div class="header-subtitle">منصة إدارة المواعيد الذكية</div>
          </div>
          <div class="content">
            <p style="font-size: 18px; font-weight: 600; color: #1f2937;">عزيزي ${applicantName}،</p>

            <div class="confirmation-badge">
              <div class="confirmation-icon">✅</div>
              <p class="confirmation-text">تم تأكيد موعد مقابلتك</p>
            </div>

            <p style="font-size: 15px; color: #4b5563; margin-bottom: 20px;">يسعدنا تأكيد موعد مقابلتك معنا. نتطلع للقائك ومعرفة المزيد عن خبراتك ومؤهلاتك.</p>

            <div class="interview-details">
              <div class="detail-row">
                <div class="detail-icon">💼</div>
                <div class="detail-content">
                  <div class="detail-label">الوظيفة</div>
                  <div class="detail-value">${displayJobTitle}</div>
                </div>
              </div>
              <div class="detail-row">
                <div class="detail-icon">📅</div>
                <div class="detail-content">
                  <div class="detail-label">التاريخ</div>
                  <div class="detail-value">${confirmedDate}</div>
                </div>
              </div>
              <div class="detail-row">
                <div class="detail-icon">🕐</div>
                <div class="detail-content">
                  <div class="detail-label">الوقت</div>
                  <div class="detail-value">${confirmedTime} (${timezone})</div>
                </div>
              </div>
            </div>

            ${
              meetingLink
                ? `
            <div class="meeting-link-box">
              <div class="meeting-link-label">🎥 رابط الاجتماع - ${platformName}</div>
              <a href="${meetingLink}" class="join-button">انضم إلى الاجتماع</a>
              ${
                meetingId || meetingPassword
                  ? `
              <div class="meeting-credentials">
                ${meetingId ? `<div class="credential-item"><strong>معرّف الاجتماع:</strong> ${meetingId}</div>` : ""}
                ${meetingPassword ? `<div class="credential-item"><strong>كلمة المرور:</strong> ${meetingPassword}</div>` : ""}
              </div>
              `
                  : ""
              }
            </div>
            `
                : `
            <div style="background: #eff6ff; border-right: 4px solid #3b82f6; border-radius: 8px; padding: 20px; margin: 25px 0;">
              <p style="margin: 0; font-size: 14px; color: #1e40af;">سنرسل لك رابط الاجتماع قبل الموعد بـ 15 دقيقة.</p>
            </div>
            `
            }

            <div class="preparation-box">
              <div class="preparation-title">📋 التحضير للمقابلة</div>
              <div class="preparation-list">${instructions}</div>
            </div>

            <p style="font-size: 14px; color: #6b7280; margin-top: 25px;">إذا كنت بحاجة إلى إعادة جدولة المقابلة أو كان لديك أي استفسار، يرجى التواصل معنا في أقرب وقت ممكن.</p>

            <p style="font-size: 15px; color: #4b5563; font-weight: 600;">نتمنى لك حظاً موفقاً! 🌟</p>
          </div>
          <div class="footer">
            <p class="footer-text">هل تحتاج إلى مساعدة؟ <a href="mailto:careers@mawidi.com" class="support-link">تواصل معنا</a></p>
            <p class="footer-text">© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.</p>
          </div>
        </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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
          line-height: 1.6;
          color: #1f2937;
          background: #f3f4f6;
          margin: 0;
          padding: 20px;
        }
        .email-wrapper { background: #f3f4f6; padding: 40px 20px; }
        .container {
          max-width: 600px;
          margin: 0 auto;
          background: white;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .header {
          background: linear-gradient(135deg, #10b981 0%, #059669 100%);
          color: white;
          padding: 40px 30px;
          text-align: center;
        }
        .logo {
          font-size: 32px;
          font-weight: 800;
          margin-bottom: 8px;
          letter-spacing: -0.5px;
        }
        .header-subtitle {
          font-size: 16px;
          opacity: 0.95;
          font-weight: 500;
        }
        .content {
          background: white;
          padding: 40px 30px;
        }
        .confirmation-badge {
          background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
          border: 2px solid #10b981;
          border-radius: 12px;
          padding: 25px;
          margin: 25px 0;
          text-align: center;
        }
        .confirmation-icon {
          font-size: 48px;
          margin-bottom: 10px;
        }
        .confirmation-text {
          font-size: 20px;
          font-weight: 700;
          color: #065f46;
          margin: 0;
        }
        .interview-details {
          background: #f9fafb;
          border-radius: 12px;
          padding: 25px;
          margin: 25px 0;
        }
        .detail-row {
          margin: 15px 0;
          padding: 12px;
          background: white;
          border-radius: 8px;
          display: flex;
          align-items: center;
        }
        .detail-icon {
          font-size: 24px;
          margin-right: 12px;
          flex-shrink: 0;
        }
        .detail-content {
          flex: 1;
        }
        .detail-label {
          font-size: 12px;
          color: #6b7280;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }
        .detail-value {
          font-size: 16px;
          color: #1f2937;
          font-weight: 600;
          margin-top: 4px;
        }
        .meeting-link-box {
          background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
          border: 2px solid #3b82f6;
          border-radius: 12px;
          padding: 25px;
          margin: 25px 0;
          text-align: center;
        }
        .meeting-link-label {
          font-size: 14px;
          color: #1e40af;
          font-weight: 600;
          margin-bottom: 15px;
        }
        .join-button {
          display: inline-block;
          background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
          color: white;
          padding: 16px 40px;
          text-decoration: none;
          border-radius: 8px;
          font-weight: 700;
          font-size: 16px;
          box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3);
        }
        .meeting-credentials {
          margin-top: 15px;
          padding-top: 15px;
          border-top: 1px solid #bfdbfe;
        }
        .credential-item {
          font-size: 13px;
          color: #1e40af;
          margin: 5px 0;
        }
        .preparation-box {
          background: #fef3c7;
          border-left: 4px solid #f59e0b;
          border-radius: 8px;
          padding: 20px;
          margin: 25px 0;
        }
        .preparation-title {
          font-size: 16px;
          font-weight: 700;
          color: #92400e;
          margin-bottom: 12px;
        }
        .preparation-list {
          font-size: 14px;
          color: #78350f;
          line-height: 1.8;
          white-space: pre-line;
        }
        .footer {
          background: #f9fafb;
          padding: 30px;
          text-align: center;
          border-top: 1px solid #e5e7eb;
        }
        .footer-text {
          color: #6b7280;
          font-size: 13px;
          margin: 5px 0;
        }
        .support-link {
          color: #10b981;
          text-decoration: none;
          font-weight: 600;
        }
      </style>
    </head>
    <body>
      <div class="email-wrapper">
        <div class="container">
          <div class="header">
            <div class="logo">Mawidi</div>
            <div class="header-subtitle">Smart Appointment Management</div>
          </div>
          <div class="content">
            <p style="font-size: 18px; font-weight: 600; color: #1f2937;">Dear ${applicantName},</p>

            <div class="confirmation-badge">
              <div class="confirmation-icon">✅</div>
              <p class="confirmation-text">Your Interview is Confirmed</p>
            </div>

            <p style="font-size: 15px; color: #4b5563; margin-bottom: 20px;">We are pleased to confirm your interview with us. We look forward to meeting you and learning more about your experience and qualifications.</p>

            <div class="interview-details">
              <div class="detail-row">
                <div class="detail-icon">💼</div>
                <div class="detail-content">
                  <div class="detail-label">Position</div>
                  <div class="detail-value">${displayJobTitle}</div>
                </div>
              </div>
              <div class="detail-row">
                <div class="detail-icon">📅</div>
                <div class="detail-content">
                  <div class="detail-label">Date</div>
                  <div class="detail-value">${confirmedDate}</div>
                </div>
              </div>
              <div class="detail-row">
                <div class="detail-icon">🕐</div>
                <div class="detail-content">
                  <div class="detail-label">Time</div>
                  <div class="detail-value">${confirmedTime} (${timezone})</div>
                </div>
              </div>
            </div>

            ${
              meetingLink
                ? `
            <div class="meeting-link-box">
              <div class="meeting-link-label">🎥 Meeting Link - ${platformName}</div>
              <a href="${meetingLink}" class="join-button">Join Meeting</a>
              ${
                meetingId || meetingPassword
                  ? `
              <div class="meeting-credentials">
                ${meetingId ? `<div class="credential-item"><strong>Meeting ID:</strong> ${meetingId}</div>` : ""}
                ${meetingPassword ? `<div class="credential-item"><strong>Password:</strong> ${meetingPassword}</div>` : ""}
              </div>
              `
                  : ""
              }
            </div>
            `
                : `
            <div style="background: #eff6ff; border-left: 4px solid #3b82f6; border-radius: 8px; padding: 20px; margin: 25px 0;">
              <p style="margin: 0; font-size: 14px; color: #1e40af;">We will send you the meeting link 15 minutes before your scheduled time.</p>
            </div>
            `
            }

            <div class="preparation-box">
              <div class="preparation-title">📋 Interview Preparation</div>
              <div class="preparation-list">${instructions}</div>
            </div>

            <p style="font-size: 14px; color: #6b7280; margin-top: 25px;">If you need to reschedule your interview or have any questions, please contact us as soon as possible.</p>

            <p style="font-size: 15px; color: #4b5563; font-weight: 600;">Best of luck! 🌟</p>
          </div>
          <div class="footer">
            <p class="footer-text">Need help? <a href="mailto:careers@mawidi.com" class="support-link">Contact Us</a></p>
            <p class="footer-text">© ${new Date().getFullYear()} Mawidi. All rights reserved.</p>
          </div>
        </div>
      </div>
    </body>
    </html>
  `;

  const text = isArabic
    ? `عزيزي ${applicantName}،\n\n✅ تم تأكيد موعد مقابلتك\n\nيسعدنا تأكيد موعد مقابلتك معنا. نتطلع للقائك ومعرفة المزيد عن خبراتك ومؤهلاتك.\n\nتفاصيل المقابلة:\n💼 الوظيفة: ${displayJobTitle}\n📅 التاريخ: ${confirmedDate}\n🕐 الوقت: ${confirmedTime} (${timezone})\n\n${meetingLink ? `🎥 رابط الاجتماع - ${platformName}:\n${meetingLink}\n${meetingId ? `معرّف الاجتماع: ${meetingId}\n` : ""}${meetingPassword ? `كلمة المرور: ${meetingPassword}\n` : ""}` : "سنرسل لك رابط الاجتماع قبل الموعد بـ 15 دقيقة."}\n\n📋 التحضير للمقابلة:\n${instructions}\n\nإذا كنت بحاجة إلى إعادة جدولة المقابلة أو كان لديك أي استفسار، يرجى التواصل معنا على: careers@mawidi.com\n\nنتمنى لك حظاً موفقاً! 🌟\n\n© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.`
    : `Dear ${applicantName},\n\n✅ Your Interview is Confirmed\n\nWe are pleased to confirm your interview with us. We look forward to meeting you and learning more about your experience and qualifications.\n\nInterview Details:\n💼 Position: ${displayJobTitle}\n📅 Date: ${confirmedDate}\n🕐 Time: ${confirmedTime} (${timezone})\n\n${meetingLink ? `🎥 Meeting Link - ${platformName}:\n${meetingLink}\n${meetingId ? `Meeting ID: ${meetingId}\n` : ""}${meetingPassword ? `Password: ${meetingPassword}\n` : ""}` : "We will send you the meeting link 15 minutes before your scheduled time."}\n\n📋 Interview Preparation:\n${instructions}\n\nIf you need to reschedule your interview or have any questions, please contact us at: careers@mawidi.com\n\nBest of luck! 🌟\n\n© ${new Date().getFullYear()} Mawidi. All rights reserved.`;

  return { subject, html, text };
}

/**
 * Send Interview Confirmation Email
 */
export async function sendInterviewConfirmationEmail(
  details: InterviewDetails,
): Promise<boolean> {
  const template = createInterviewConfirmationEmail(details);
  const { applicantName, language } = details;
  // Assuming email is passed in details, or we need to add it
  // For now, this will need to be called with the email parameter
  return true; // Return true for type compatibility, actual implementation in service layer
}

/**
 * Interview Reminder Email Template (24 hours before)
 */
export function createInterviewReminderEmail(
  details: Omit<InterviewDetails, "preparationInstructions">,
): EmailTemplate {
  const {
    applicantName,
    jobTitle,
    jobTitleAr,
    confirmedDate,
    confirmedTime,
    timezone,
    meetingLink,
    meetingPlatform,
    meetingId,
    meetingPassword,
    language,
  } = details;
  const isArabic = language === "ar";
  const displayJobTitle = isArabic ? jobTitleAr : jobTitle;

  const subject = isArabic
    ? `تذكير: مقابلتك غداً - ${jobTitleAr} - Mawidi`
    : `Reminder: Your Interview Tomorrow - ${jobTitle} - Mawidi`;

  const preparationChecklist = isArabic
    ? `✓ اختبر اتصالك بالإنترنت\n✓ جهز الكاميرا والمايكروفون\n✓ راجع سيرتك الذاتية\n✓ جهز بيئة هادئة للمقابلة\n✓ احضر 5 دقائق مبكراً`
    : `✓ Test your internet connection\n✓ Check your camera and microphone\n✓ Review your resume\n✓ Prepare a quiet environment\n✓ Join 5 minutes early`;

  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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; line-height: 1.6; color: #1f2937; background: #f3f4f6; margin: 0; padding: 20px; }
        .email-wrapper { background: #f3f4f6; padding: 40px 20px; }
        .container { max-width: 600px; margin: 0 auto; background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
        .header { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; padding: 40px 30px; text-align: center; }
        .reminder-icon { font-size: 48px; margin-bottom: 10px; }
        .reminder-title { font-size: 24px; font-weight: 800; margin: 0; }
        .content { padding: 40px 30px; }
        .time-box { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border: 2px solid #f59e0b; border-radius: 12px; padding: 25px; margin: 25px 0; text-align: center; }
        .time-label { font-size: 14px; color: #92400e; font-weight: 600; margin-bottom: 10px; }
        .time-value { font-size: 28px; font-weight: 800; color: #78350f; }
        .detail-row { margin: 15px 0; padding: 12px; background: #f9fafb; border-radius: 8px; }
        .meeting-link-box { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border: 2px solid #3b82f6; border-radius: 12px; padding: 25px; margin: 25px 0; text-align: center; }
        .join-button { display: inline-block; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; padding: 16px 40px; text-decoration: none; border-radius: 8px; font-weight: 700; font-size: 16px; }
        .checklist-box { background: #d1fae5; border-right: 4px solid #10b981; border-radius: 8px; padding: 20px; margin: 25px 0; }
        .checklist-title { font-size: 16px; font-weight: 700; color: #065f46; margin-bottom: 12px; }
        .checklist-items { font-size: 14px; color: #047857; line-height: 2; white-space: pre-line; }
        .footer { background: #f9fafb; padding: 30px; text-align: center; border-top: 1px solid #e5e7eb; }
        .footer-text { color: #6b7280; font-size: 13px; margin: 5px 0; }
        .support-link { color: #10b981; text-decoration: none; font-weight: 600; }
      </style>
    </head>
    <body>
      <div class="email-wrapper">
        <div class="container">
          <div class="header">
            <div class="reminder-icon">⏰</div>
            <h1 class="reminder-title">تذكير: مقابلتك غداً</h1>
          </div>
          <div class="content">
            <p style="font-size: 18px; font-weight: 600; color: #1f2937;">عزيزي ${applicantName}،</p>
            <p style="font-size: 15px; color: #4b5563;">هذا تذكير ودي بأن مقابلتك معنا ستكون غداً!</p>

            <div class="time-box">
              <div class="time-label">موعد المقابلة</div>
              <div class="time-value">${confirmedDate}</div>
              <div style="font-size: 20px; font-weight: 700; color: #92400e; margin-top: 10px;">${confirmedTime} (${timezone})</div>
            </div>

            <div class="detail-row">
              <div style="font-size: 12px; color: #6b7280; font-weight: 600;">الوظيفة</div>
              <div style="font-size: 16px; color: #1f2937; font-weight: 600; margin-top: 4px;">${displayJobTitle}</div>
            </div>

            ${
              meetingLink
                ? `
            <div class="meeting-link-box">
              <div style="font-size: 14px; color: #1e40af; font-weight: 600; margin-bottom: 15px;">🎥 رابط الاجتماع</div>
              <a href="${meetingLink}" class="join-button">انضم إلى الاجتماع</a>
              ${
                meetingId || meetingPassword
                  ? `
              <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid #bfdbfe;">
                ${meetingId ? `<div style="font-size: 13px; color: #1e40af; margin: 5px 0;"><strong>معرّف الاجتماع:</strong> ${meetingId}</div>` : ""}
                ${meetingPassword ? `<div style="font-size: 13px; color: #1e40af; margin: 5px 0;"><strong>كلمة المرور:</strong> ${meetingPassword}</div>` : ""}
              </div>
              `
                  : ""
              }
            </div>
            `
                : ""
            }

            <div class="checklist-box">
              <div class="checklist-title">✅ قائمة التحضير السريعة</div>
              <div class="checklist-items">${preparationChecklist}</div>
            </div>

            <p style="font-size: 14px; color: #6b7280;">إذا كنت بحاجة إلى أي مساعدة، لا تتردد في التواصل معنا.</p>
            <p style="font-size: 15px; color: #4b5563; font-weight: 600;">نتطلع للقائك! 🌟</p>
          </div>
          <div class="footer">
            <p class="footer-text">هل تحتاج إلى مساعدة؟ <a href="mailto:careers@mawidi.com" class="support-link">تواصل معنا</a></p>
            <p class="footer-text">© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.</p>
          </div>
        </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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; line-height: 1.6; color: #1f2937; background: #f3f4f6; margin: 0; padding: 20px; }
        .email-wrapper { background: #f3f4f6; padding: 40px 20px; }
        .container { max-width: 600px; margin: 0 auto; background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
        .header { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; padding: 40px 30px; text-align: center; }
        .reminder-icon { font-size: 48px; margin-bottom: 10px; }
        .reminder-title { font-size: 24px; font-weight: 800; margin: 0; }
        .content { padding: 40px 30px; }
        .time-box { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border: 2px solid #f59e0b; border-radius: 12px; padding: 25px; margin: 25px 0; text-align: center; }
        .time-label { font-size: 14px; color: #92400e; font-weight: 600; margin-bottom: 10px; }
        .time-value { font-size: 28px; font-weight: 800; color: #78350f; }
        .detail-row { margin: 15px 0; padding: 12px; background: #f9fafb; border-radius: 8px; }
        .meeting-link-box { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border: 2px solid #3b82f6; border-radius: 12px; padding: 25px; margin: 25px 0; text-align: center; }
        .join-button { display: inline-block; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; padding: 16px 40px; text-decoration: none; border-radius: 8px; font-weight: 700; font-size: 16px; }
        .checklist-box { background: #d1fae5; border-left: 4px solid #10b981; border-radius: 8px; padding: 20px; margin: 25px 0; }
        .checklist-title { font-size: 16px; font-weight: 700; color: #065f46; margin-bottom: 12px; }
        .checklist-items { font-size: 14px; color: #047857; line-height: 2; white-space: pre-line; }
        .footer { background: #f9fafb; padding: 30px; text-align: center; border-top: 1px solid #e5e7eb; }
        .footer-text { color: #6b7280; font-size: 13px; margin: 5px 0; }
        .support-link { color: #10b981; text-decoration: none; font-weight: 600; }
      </style>
    </head>
    <body>
      <div class="email-wrapper">
        <div class="container">
          <div class="header">
            <div class="reminder-icon">⏰</div>
            <h1 class="reminder-title">Reminder: Your Interview Tomorrow</h1>
          </div>
          <div class="content">
            <p style="font-size: 18px; font-weight: 600; color: #1f2937;">Dear ${applicantName},</p>
            <p style="font-size: 15px; color: #4b5563;">This is a friendly reminder that your interview with us is tomorrow!</p>

            <div class="time-box">
              <div class="time-label">Interview Time</div>
              <div class="time-value">${confirmedDate}</div>
              <div style="font-size: 20px; font-weight: 700; color: #92400e; margin-top: 10px;">${confirmedTime} (${timezone})</div>
            </div>

            <div class="detail-row">
              <div style="font-size: 12px; color: #6b7280; font-weight: 600;">Position</div>
              <div style="font-size: 16px; color: #1f2937; font-weight: 600; margin-top: 4px;">${displayJobTitle}</div>
            </div>

            ${
              meetingLink
                ? `
            <div class="meeting-link-box">
              <div style="font-size: 14px; color: #1e40af; font-weight: 600; margin-bottom: 15px;">🎥 Meeting Link</div>
              <a href="${meetingLink}" class="join-button">Join Meeting</a>
              ${
                meetingId || meetingPassword
                  ? `
              <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid #bfdbfe;">
                ${meetingId ? `<div style="font-size: 13px; color: #1e40af; margin: 5px 0;"><strong>Meeting ID:</strong> ${meetingId}</div>` : ""}
                ${meetingPassword ? `<div style="font-size: 13px; color: #1e40af; margin: 5px 0;"><strong>Password:</strong> ${meetingPassword}</div>` : ""}
              </div>
              `
                  : ""
              }
            </div>
            `
                : ""
            }

            <div class="checklist-box">
              <div class="checklist-title">✅ Quick Preparation Checklist</div>
              <div class="checklist-items">${preparationChecklist}</div>
            </div>

            <p style="font-size: 14px; color: #6b7280;">If you need any assistance, don't hesitate to reach out to us.</p>
            <p style="font-size: 15px; color: #4b5563; font-weight: 600;">Looking forward to meeting you! 🌟</p>
          </div>
          <div class="footer">
            <p class="footer-text">Need help? <a href="mailto:careers@mawidi.com" class="support-link">Contact Us</a></p>
            <p class="footer-text">© ${new Date().getFullYear()} Mawidi. All rights reserved.</p>
          </div>
        </div>
      </div>
    </body>
    </html>
  `;

  const text = isArabic
    ? `عزيزي ${applicantName}،\n\n⏰ تذكير: مقابلتك غداً\n\nهذا تذكير ودي بأن مقابلتك معنا ستكون غداً!\n\nموعد المقابلة:\n📅 ${confirmedDate}\n🕐 ${confirmedTime} (${timezone})\n💼 الوظيفة: ${displayJobTitle}\n\n${meetingLink ? `🎥 رابط الاجتماع:\n${meetingLink}\n${meetingId ? `معرّف الاجتماع: ${meetingId}\n` : ""}${meetingPassword ? `كلمة المرور: ${meetingPassword}\n` : ""}` : ""}\n\n✅ قائمة التحضير السريعة:\n${preparationChecklist}\n\nإذا كنت بحاجة إلى أي مساعدة، لا تتردد في التواصل معنا على: careers@mawidi.com\n\nنتطلع للقائك! 🌟\n\n© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.`
    : `Dear ${applicantName},\n\n⏰ Reminder: Your Interview Tomorrow\n\nThis is a friendly reminder that your interview with us is tomorrow!\n\nInterview Time:\n📅 ${confirmedDate}\n🕐 ${confirmedTime} (${timezone})\n💼 Position: ${displayJobTitle}\n\n${meetingLink ? `🎥 Meeting Link:\n${meetingLink}\n${meetingId ? `Meeting ID: ${meetingId}\n` : ""}${meetingPassword ? `Password: ${meetingPassword}\n` : ""}` : ""}\n\n✅ Quick Preparation Checklist:\n${preparationChecklist}\n\nIf you need any assistance, don't hesitate to reach out to us at: careers@mawidi.com\n\nLooking forward to meeting you! 🌟\n\n© ${new Date().getFullYear()} Mawidi. All rights reserved.`;

  return { subject, html, text };
}

/**
 * Send Interview Reminder Email
 */
export async function sendInterviewReminderEmail(
  email: string,
  details: Omit<InterviewDetails, "preparationInstructions">,
): Promise<boolean> {
  const template = createInterviewReminderEmail(details);
  return sendEmail(email, template);
}

/**
 * Interview Cancellation Email Template
 */
export function createInterviewCancellationEmail(
  applicantName: string,
  jobTitle: string,
  jobTitleAr: string,
  reason: string,
  rescheduleOption: boolean,
  language: "ar" | "en",
): EmailTemplate {
  const isArabic = language === "ar";
  const displayJobTitle = isArabic ? jobTitleAr : jobTitle;

  const subject = isArabic
    ? `إلغاء موعد المقابلة - ${jobTitleAr} - Mawidi`
    : `Interview Cancelled - ${jobTitle} - Mawidi`;

  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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; line-height: 1.6; color: #1f2937; background: #f3f4f6; margin: 0; padding: 20px; }
        .email-wrapper { background: #f3f4f6; padding: 40px 20px; }
        .container { max-width: 600px; margin: 0 auto; background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
        .header { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; padding: 40px 30px; text-align: center; }
        .logo { font-size: 32px; font-weight: 800; margin-bottom: 8px; }
        .header-subtitle { font-size: 16px; opacity: 0.95; font-weight: 500; }
        .content { padding: 40px 30px; }
        .apology-box { background: #fee2e2; border: 2px solid #ef4444; border-radius: 12px; padding: 25px; margin: 25px 0; text-align: center; }
        .apology-icon { font-size: 48px; margin-bottom: 10px; }
        .apology-text { font-size: 18px; font-weight: 700; color: #991b1b; margin: 0; }
        .reason-box { background: #f9fafb; border-radius: 12px; padding: 20px; margin: 25px 0; }
        .reason-label { font-size: 12px; color: #6b7280; font-weight: 600; text-transform: uppercase; margin-bottom: 8px; }
        .reason-text { font-size: 15px; color: #1f2937; line-height: 1.7; }
        .reschedule-box { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); border: 2px solid #10b981; border-radius: 12px; padding: 25px; margin: 25px 0; text-align: center; }
        .reschedule-text { font-size: 15px; color: #065f46; font-weight: 600; margin-bottom: 15px; }
        .contact-button { display: inline-block; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 14px 32px; text-decoration: none; border-radius: 8px; font-weight: 700; font-size: 15px; }
        .footer { background: #f9fafb; padding: 30px; text-align: center; border-top: 1px solid #e5e7eb; }
        .footer-text { color: #6b7280; font-size: 13px; margin: 5px 0; }
        .support-link { color: #10b981; text-decoration: none; font-weight: 600; }
      </style>
    </head>
    <body>
      <div class="email-wrapper">
        <div class="container">
          <div class="header">
            <div class="logo">Mawidi</div>
            <div class="header-subtitle">منصة إدارة المواعيد الذكية</div>
          </div>
          <div class="content">
            <p style="font-size: 18px; font-weight: 600; color: #1f2937;">عزيزي ${applicantName}،</p>

            <div class="apology-box">
              <div class="apology-icon">😔</div>
              <p class="apology-text">نأسف لإبلاغك بإلغاء موعد المقابلة</p>
            </div>

            <p style="font-size: 15px; color: #4b5563; margin-bottom: 20px;">نعتذر بشدة، ولكن يتوجب علينا إلغاء موعد مقابلتك المقررة لوظيفة <strong>${displayJobTitle}</strong>.</p>

            <div class="reason-box">
              <div class="reason-label">سبب الإلغاء</div>
              <div class="reason-text">${reason}</div>
            </div>

            ${
              rescheduleOption
                ? `
            <div class="reschedule-box">
              <div class="reschedule-text">💚 نود جداً إعادة جدولة مقابلتك</div>
              <p style="font-size: 14px; color: #065f46; margin-bottom: 15px;">نحن لا زلنا مهتمين جداً بترشيحك وسنتواصل معك قريباً لترتيب موعد جديد.</p>
              <a href="mailto:careers@mawidi.com" class="contact-button">تواصل معنا</a>
            </div>
            `
                : `
            <p style="font-size: 14px; color: #6b7280; margin-top: 20px;">إذا كان لديك أي أسئلة أو استفسارات، يرجى التواصل مع فريق الموارد البشرية لدينا.</p>
            `
            }

            <p style="font-size: 15px; color: #4b5563;">نشكرك على تفهمك ونعتذر عن أي إزعاج قد يسببه هذا.</p>
          </div>
          <div class="footer">
            <p class="footer-text">هل تحتاج إلى مساعدة؟ <a href="mailto:careers@mawidi.com" class="support-link">تواصل معنا</a></p>
            <p class="footer-text">© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.</p>
          </div>
        </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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; line-height: 1.6; color: #1f2937; background: #f3f4f6; margin: 0; padding: 20px; }
        .email-wrapper { background: #f3f4f6; padding: 40px 20px; }
        .container { max-width: 600px; margin: 0 auto; background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
        .header { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; padding: 40px 30px; text-align: center; }
        .logo { font-size: 32px; font-weight: 800; margin-bottom: 8px; }
        .header-subtitle { font-size: 16px; opacity: 0.95; font-weight: 500; }
        .content { padding: 40px 30px; }
        .apology-box { background: #fee2e2; border: 2px solid #ef4444; border-radius: 12px; padding: 25px; margin: 25px 0; text-align: center; }
        .apology-icon { font-size: 48px; margin-bottom: 10px; }
        .apology-text { font-size: 18px; font-weight: 700; color: #991b1b; margin: 0; }
        .reason-box { background: #f9fafb; border-radius: 12px; padding: 20px; margin: 25px 0; }
        .reason-label { font-size: 12px; color: #6b7280; font-weight: 600; text-transform: uppercase; margin-bottom: 8px; }
        .reason-text { font-size: 15px; color: #1f2937; line-height: 1.7; }
        .reschedule-box { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); border: 2px solid #10b981; border-radius: 12px; padding: 25px; margin: 25px 0; text-align: center; }
        .reschedule-text { font-size: 15px; color: #065f46; font-weight: 600; margin-bottom: 15px; }
        .contact-button { display: inline-block; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 14px 32px; text-decoration: none; border-radius: 8px; font-weight: 700; font-size: 15px; }
        .footer { background: #f9fafb; padding: 30px; text-align: center; border-top: 1px solid #e5e7eb; }
        .footer-text { color: #6b7280; font-size: 13px; margin: 5px 0; }
        .support-link { color: #10b981; text-decoration: none; font-weight: 600; }
      </style>
    </head>
    <body>
      <div class="email-wrapper">
        <div class="container">
          <div class="header">
            <div class="logo">Mawidi</div>
            <div class="header-subtitle">Smart Appointment Management</div>
          </div>
          <div class="content">
            <p style="font-size: 18px; font-weight: 600; color: #1f2937;">Dear ${applicantName},</p>

            <div class="apology-box">
              <div class="apology-icon">😔</div>
              <p class="apology-text">We're Sorry to Inform You of an Interview Cancellation</p>
            </div>

            <p style="font-size: 15px; color: #4b5563; margin-bottom: 20px;">We sincerely apologize, but we need to cancel your scheduled interview for the <strong>${displayJobTitle}</strong> position.</p>

            <div class="reason-box">
              <div class="reason-label">Reason for Cancellation</div>
              <div class="reason-text">${reason}</div>
            </div>

            ${
              rescheduleOption
                ? `
            <div class="reschedule-box">
              <div class="reschedule-text">💚 We'd Love to Reschedule</div>
              <p style="font-size: 14px; color: #065f46; margin-bottom: 15px;">We're still very interested in your candidacy and will reach out soon to arrange a new time.</p>
              <a href="mailto:careers@mawidi.com" class="contact-button">Contact Us</a>
            </div>
            `
                : `
            <p style="font-size: 14px; color: #6b7280; margin-top: 20px;">If you have any questions or concerns, please contact our HR team.</p>
            `
            }

            <p style="font-size: 15px; color: #4b5563;">Thank you for your understanding and we apologize for any inconvenience this may cause.</p>
          </div>
          <div class="footer">
            <p class="footer-text">Need help? <a href="mailto:careers@mawidi.com" class="support-link">Contact Us</a></p>
            <p class="footer-text">© ${new Date().getFullYear()} Mawidi. All rights reserved.</p>
          </div>
        </div>
      </div>
    </body>
    </html>
  `;

  const text = isArabic
    ? `عزيزي ${applicantName}،\n\n😔 نأسف لإبلاغك بإلغاء موعد المقابلة\n\nنعتذر بشدة، ولكن يتوجب علينا إلغاء موعد مقابلتك المقررة لوظيفة ${displayJobTitle}.\n\nسبب الإلغاء:\n${reason}\n\n${rescheduleOption ? `💚 نود جداً إعادة جدولة مقابلتك\n\nنحن لا زلنا مهتمين جداً بترشيحك وسنتواصل معك قريباً لترتيب موعد جديد.\n\nللتواصل: careers@mawidi.com` : "إذا كان لديك أي أسئلة أو استفسارات، يرجى التواصل مع فريق الموارد البشرية لدينا على: careers@mawidi.com"}\n\nنشكرك على تفهمك ونعتذر عن أي إزعاج قد يسببه هذا.\n\n© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.`
    : `Dear ${applicantName},\n\n😔 We're Sorry to Inform You of an Interview Cancellation\n\nWe sincerely apologize, but we need to cancel your scheduled interview for the ${displayJobTitle} position.\n\nReason for Cancellation:\n${reason}\n\n${rescheduleOption ? `💚 We'd Love to Reschedule\n\nWe're still very interested in your candidacy and will reach out soon to arrange a new time.\n\nContact us: careers@mawidi.com` : "If you have any questions or concerns, please contact our HR team at: careers@mawidi.com"}\n\nThank you for your understanding and we apologize for any inconvenience this may cause.\n\n© ${new Date().getFullYear()} Mawidi. All rights reserved.`;

  return { subject, html, text };
}

/**
 * Send Interview Cancellation Email
 */
export async function sendInterviewCancellationEmail(
  email: string,
  applicantName: string,
  jobTitle: string,
  jobTitleAr: string,
  reason: string,
  rescheduleOption: boolean,
  language: "ar" | "en",
): Promise<boolean> {
  const template = createInterviewCancellationEmail(
    applicantName,
    jobTitle,
    jobTitleAr,
    reason,
    rescheduleOption,
    language,
  );
  return sendEmail(email, template);
}

/**
 * Contact Form Thank You Email Template
 * Sent to users after they successfully submit a contact form message
 */
export function createContactThankYouEmail(
  name: string,
  topic: string,
  language: "ar" | "en",
): EmailTemplate {
  const isArabic = language === "ar";

  // Topic display names
  const topicNames: Record<string, { en: string; ar: string }> = {
    sales: { en: "Sales Inquiry", ar: "استفسار المبيعات" },
    support: { en: "Support Request", ar: "طلب دعم" },
    billing: { en: "Billing Question", ar: "استفسار الفوترة" },
    partnerships: { en: "Partnership Inquiry", ar: "استفسار الشراكات" },
    press: { en: "Press Inquiry", ar: "استفسار إعلامي" },
    careers: { en: "Careers Inquiry", ar: "استفسار وظيفي" },
    security: { en: "Security Report", ar: "تقرير أمني" },
    demo: { en: "Demo Request", ar: "طلب عرض توضيحي" },
    other: { en: "General Inquiry", ar: "استفسار عام" },
  };

  const displayTopic =
    topicNames[topic]?.[isArabic ? "ar" : "en"] ||
    (isArabic ? "استفسار عام" : "General Inquiry");

  const subject = isArabic
    ? "شكراً لتواصلك معنا - Mawidi"
    : "Thank You for Contacting Us - Mawidi";

  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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
          line-height: 1.6;
          color: #1f2937;
          background: #f3f4f6;
          margin: 0;
          padding: 20px;
        }
        .email-wrapper { background: #f3f4f6; padding: 40px 20px; }
        .container {
          max-width: 600px;
          margin: 0 auto;
          background: white;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .header {
          background: linear-gradient(135deg, #10b981 0%, #059669 100%);
          color: white;
          padding: 40px 30px;
          text-align: center;
        }
        .logo {
          font-size: 32px;
          font-weight: 800;
          margin-bottom: 8px;
          letter-spacing: -0.5px;
        }
        .header-subtitle {
          font-size: 16px;
          opacity: 0.95;
          font-weight: 500;
        }
        .content {
          background: white;
          padding: 40px 30px;
        }
        .greeting {
          font-size: 20px;
          font-weight: 600;
          color: #1f2937;
          margin-bottom: 20px;
        }
        .message {
          font-size: 15px;
          color: #4b5563;
          margin-bottom: 20px;
          line-height: 1.7;
        }
        .topic-badge {
          display: inline-block;
          background: #f0fdf4;
          border: 1px solid #10b981;
          color: #059669;
          padding: 8px 16px;
          border-radius: 20px;
          font-size: 14px;
          font-weight: 600;
          margin: 15px 0;
        }
        .info-box {
          background: #f0fdf4;
          border-right: 4px solid #10b981;
          padding: 20px;
          border-radius: 8px;
          margin: 25px 0;
        }
        .info-box h3 {
          margin: 0 0 10px 0;
          font-size: 16px;
          color: #065f46;
        }
        .info-box ul {
          margin: 0;
          padding-right: 20px;
          color: #065f46;
        }
        .info-box li {
          margin-bottom: 8px;
        }
        .footer {
          background: #f9fafb;
          padding: 30px;
          text-align: center;
          border-top: 1px solid #e5e7eb;
        }
        .footer-text {
          color: #6b7280;
          font-size: 13px;
          margin: 5px 0;
        }
        .social-links {
          margin-top: 20px;
        }
        .social-links a {
          color: #10b981;
          text-decoration: none;
          margin: 0 10px;
        }
      </style>
    </head>
    <body>
      <div class="email-wrapper">
        <div class="container">
          <div class="header">
            <div class="logo">Mawidi | مواعيدي</div>
            <div class="header-subtitle">شكراً لتواصلك معنا!</div>
          </div>
          <div class="content">
            <p class="greeting">مرحباً ${name}،</p>
            <p class="message">
              شكراً لتواصلك مع فريق موعدي. لقد استلمنا رسالتك وسيقوم فريقنا بالرد عليك في أقرب وقت ممكن.
            </p>
            <div class="topic-badge">${displayTopic}</div>
            <div class="info-box">
              <h3>ماذا يحدث الآن؟</h3>
              <ul>
                <li>سيراجع فريقنا رسالتك خلال 24 ساعة عمل</li>
                <li>ستتلقى رداً على بريدك الإلكتروني</li>
                <li>للاستفسارات العاجلة، تواصل معنا عبر الواتساب</li>
              </ul>
            </div>
            <p class="message">
              نقدر ثقتك بنا ونتطلع للتعاون معك!
            </p>
          </div>
          <div class="footer">
            <p class="footer-text">فريق موعدي</p>
            <p class="footer-text">support@mawidi.com</p>
            <p class="footer-text">© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.</p>
          </div>
        </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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
          line-height: 1.6;
          color: #1f2937;
          background: #f3f4f6;
          margin: 0;
          padding: 20px;
        }
        .email-wrapper { background: #f3f4f6; padding: 40px 20px; }
        .container {
          max-width: 600px;
          margin: 0 auto;
          background: white;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .header {
          background: linear-gradient(135deg, #10b981 0%, #059669 100%);
          color: white;
          padding: 40px 30px;
          text-align: center;
        }
        .logo {
          font-size: 32px;
          font-weight: 800;
          margin-bottom: 8px;
          letter-spacing: -0.5px;
        }
        .header-subtitle {
          font-size: 16px;
          opacity: 0.95;
          font-weight: 500;
        }
        .content {
          background: white;
          padding: 40px 30px;
        }
        .greeting {
          font-size: 20px;
          font-weight: 600;
          color: #1f2937;
          margin-bottom: 20px;
        }
        .message {
          font-size: 15px;
          color: #4b5563;
          margin-bottom: 20px;
          line-height: 1.7;
        }
        .topic-badge {
          display: inline-block;
          background: #f0fdf4;
          border: 1px solid #10b981;
          color: #059669;
          padding: 8px 16px;
          border-radius: 20px;
          font-size: 14px;
          font-weight: 600;
          margin: 15px 0;
        }
        .info-box {
          background: #f0fdf4;
          border-left: 4px solid #10b981;
          padding: 20px;
          border-radius: 8px;
          margin: 25px 0;
        }
        .info-box h3 {
          margin: 0 0 10px 0;
          font-size: 16px;
          color: #065f46;
        }
        .info-box ul {
          margin: 0;
          padding-left: 20px;
          color: #065f46;
        }
        .info-box li {
          margin-bottom: 8px;
        }
        .footer {
          background: #f9fafb;
          padding: 30px;
          text-align: center;
          border-top: 1px solid #e5e7eb;
        }
        .footer-text {
          color: #6b7280;
          font-size: 13px;
          margin: 5px 0;
        }
        .social-links {
          margin-top: 20px;
        }
        .social-links a {
          color: #10b981;
          text-decoration: none;
          margin: 0 10px;
        }
      </style>
    </head>
    <body>
      <div class="email-wrapper">
        <div class="container">
          <div class="header">
            <div class="logo">Mawidi | مواعيدي</div>
            <div class="header-subtitle">Thank You for Reaching Out!</div>
          </div>
          <div class="content">
            <p class="greeting">Hi ${name},</p>
            <p class="message">
              Thank you for contacting the Mawidi team. We've received your message and our team will get back to you as soon as possible.
            </p>
            <div class="topic-badge">${displayTopic}</div>
            <div class="info-box">
              <h3>What happens next?</h3>
              <ul>
                <li>Our team will review your message within 24 business hours</li>
                <li>You'll receive a response to your email</li>
                <li>For urgent inquiries, reach us via WhatsApp</li>
              </ul>
            </div>
            <p class="message">
              We appreciate your trust in us and look forward to assisting you!
            </p>
          </div>
          <div class="footer">
            <p class="footer-text">The Mawidi Team</p>
            <p class="footer-text">support@mawidi.com</p>
            <p class="footer-text">© ${new Date().getFullYear()} Mawidi. All rights reserved.</p>
          </div>
        </div>
      </div>
    </body>
    </html>
  `;

  const text = isArabic
    ? `مرحباً ${name}،\n\nشكراً لتواصلك مع فريق موعدي.\n\nلقد استلمنا رسالتك بخصوص: ${displayTopic}\n\nماذا يحدث الآن؟\n- سيراجع فريقنا رسالتك خلال 24 ساعة عمل\n- ستتلقى رداً على بريدك الإلكتروني\n- للاستفسارات العاجلة، تواصل معنا عبر الواتساب\n\nنقدر ثقتك بنا ونتطلع للتعاون معك!\n\nفريق موعدي\nsupport@mawidi.com\n\n© ${new Date().getFullYear()} Mawidi. جميع الحقوق محفوظة.`
    : `Hi ${name},\n\nThank you for contacting the Mawidi team.\n\nWe've received your message regarding: ${displayTopic}\n\nWhat happens next?\n- Our team will review your message within 24 business hours\n- You'll receive a response to your email\n- For urgent inquiries, reach us via WhatsApp\n\nWe appreciate your trust in us and look forward to assisting you!\n\nThe Mawidi Team\nsupport@mawidi.com\n\n© ${new Date().getFullYear()} Mawidi. All rights reserved.`;

  return { subject, html, text };
}

/**
 * Send Contact Form Thank You Email
 */
export async function sendContactThankYouEmail(
  email: string,
  name: string,
  topic: string,
  language: "ar" | "en",
): Promise<boolean> {
  const template = createContactThankYouEmail(name, topic, language);
  return sendEmail(email, template);
}

/**
 * Send staff notification for new contact form submission
 */
export async function sendStaffContactNotification(contactData: {
  name: string;
  email: string;
  message: string;
  topic?: string;
}): Promise<boolean> {
  const staffEmail = process.env.STAFF_NOTIFICATION_EMAIL || "staff@mawidi.com";
  const subject = `New Contact Form: ${contactData.name}`;
  const html = `
    <h2>New Contact Form Submission</h2>
    <p><strong>Name:</strong> ${contactData.name}</p>
    <p><strong>Email:</strong> ${contactData.email}</p>
    <p><strong>Topic:</strong> ${contactData.topic || "General"}</p>
    <p><strong>Message:</strong></p>
    <p>${contactData.message}</p>
  `;
  return sendEmail(staffEmail, { subject, html, text: subject });
}

/**
 * Send email immediately (bypass queue)
 */
export async function sendEmailImmediate(
  to: string,
  template: { subject: string; html: string; text?: string },
): Promise<boolean> {
  return sendEmail(to, template);
}
