/**
 * Demo Booking Email Templates
 *
 * Templates for demo booking confirmation, received notification, and reminders.
 */

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

/**
 * Demo Booking Received Email (for staff/internal notification)
 */
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)
 */

/**
 * Demo Reminder Email
 */
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)
 */
