/**
 * Contact Form Email Templates
 *
 * Templates for contact form submissions (customer thank you and staff notifications).
 */

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

/**
 * Contact Form Thank You Email (sent to customer)
 */
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
 */

/**
 * Staff Contact Notification Email (sent to staff)
 */
export function createStaffContactNotificationEmail(
  data: StaffContactNotificationData
): EmailTemplate {
  const { submissionId, name, email, phone, company, topic, message, preferredLanguage } = data;

  // Topic display names for staff (always show in English)
  const topicNames: Record<string, string> = {
    sales: 'Sales Inquiry',
    support: 'Support Request',
    billing: 'Billing Question',
    partnerships: 'Partnership Inquiry',
    press: 'Press Inquiry',
    careers: 'Careers Inquiry',
    security: 'Security Report',
    demo: 'Demo Request',
    other: 'General Inquiry',
  };

  const displayTopic = topicNames[topic] || 'General Inquiry';
  const dashboardUrl = `${process.env.NEXT_PUBLIC_APP_URL || 'https://mawidi.com'}/staff/dashboard/contacts`;

  // Truncate message preview to 500 characters
  const messagePreview = message.length > 500 ? message.substring(0, 500) + '...' : message;

  const subject = `New Contact Submission: ${displayTopic} from ${name}`;

  const 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, #059669 0%, #10b981 100%);
          padding: 32px;
          text-align: center;
        }
        .header h1 {
          color: white;
          margin: 0;
          font-size: 24px;
          font-weight: 600;
        }
        .content { padding: 32px; }
        .alert-box {
          background: #fef3c7;
          border: 1px solid #f59e0b;
          border-radius: 8px;
          padding: 16px;
          margin-bottom: 24px;
        }
        .alert-box strong { color: #b45309; }
        .info-grid {
          display: grid;
          gap: 16px;
          margin-bottom: 24px;
        }
        .info-row {
          display: flex;
          border-bottom: 1px solid #e5e7eb;
          padding-bottom: 12px;
        }
        .info-label {
          font-weight: 600;
          color: #6b7280;
          width: 140px;
          flex-shrink: 0;
        }
        .info-value {
          color: #1f2937;
        }
        .message-section {
          background: #f9fafb;
          border-radius: 8px;
          padding: 20px;
          margin-top: 24px;
        }
        .message-section h3 {
          margin: 0 0 12px 0;
          color: #374151;
          font-size: 16px;
        }
        .message-text {
          color: #4b5563;
          white-space: pre-wrap;
          font-size: 14px;
        }
        .cta-button {
          display: inline-block;
          background: #059669;
          color: white;
          padding: 14px 28px;
          border-radius: 8px;
          text-decoration: none;
          font-weight: 600;
          margin-top: 24px;
        }
        .cta-button:hover { background: #047857; }
        .footer {
          background: #f9fafb;
          padding: 24px 32px;
          text-align: center;
          font-size: 13px;
          color: #6b7280;
        }
        .submission-id {
          font-family: monospace;
          background: #e5e7eb;
          padding: 2px 6px;
          border-radius: 4px;
          font-size: 12px;
        }
      </style>
    </head>
    <body>
      <div class="email-wrapper">
        <div class="container">
          <div class="header">
            <h1>New Contact Submission</h1>
          </div>
          <div class="content">
            <div class="alert-box">
              <strong>New inquiry received!</strong> A visitor has submitted a contact form.
            </div>

            <div class="info-grid">
              <div class="info-row">
                <span class="info-label">Type:</span>
                <span class="info-value"><strong>${displayTopic}</strong></span>
              </div>
              <div class="info-row">
                <span class="info-label">Name:</span>
                <span class="info-value">${name}</span>
              </div>
              <div class="info-row">
                <span class="info-label">Email:</span>
                <span class="info-value"><a href="mailto:${email}">${email}</a></span>
              </div>
              ${phone ? `
              <div class="info-row">
                <span class="info-label">Phone:</span>
                <span class="info-value">${phone}</span>
              </div>
              ` : ''}
              ${company ? `
              <div class="info-row">
                <span class="info-label">Company:</span>
                <span class="info-value">${company}</span>
              </div>
              ` : ''}
              <div class="info-row">
                <span class="info-label">Language:</span>
                <span class="info-value">${preferredLanguage === 'ar' ? 'Arabic' : 'English'}</span>
              </div>
            </div>

            <div class="message-section">
              <h3>Message Preview</h3>
              <p class="message-text">${messagePreview}</p>
            </div>

            <div style="text-align: center;">
              <a href="${dashboardUrl}" class="cta-button">View in Dashboard</a>
            </div>
          </div>
          <div class="footer">
            <p>Submission ID: <span class="submission-id">${submissionId}</span></p>
            <p>This is an automated notification from Mawidi Contact System</p>
          </div>
        </div>
      </div>
    </body>
    </html>
  `;

  const text = `
New Contact Submission - Mawidi

Type: ${displayTopic}
Name: ${name}
Email: ${email}
${phone ? `Phone: ${phone}` : ''}
${company ? `Company: ${company}` : ''}
Language: ${preferredLanguage === 'ar' ? 'Arabic' : 'English'}

Message:
${messagePreview}

---
View in Dashboard: ${dashboardUrl}
Submission ID: ${submissionId}
  `.trim();

  return { subject, html, text };
}

/**
 * Send Staff Contact Notification Email
 * Sends notification to configured staff email addresses when a new contact form is submitted
 */
