/**
 * Review Request Email Template
 * Bilingual (EN/AR) responsive HTML email for review request links
 */

interface ReviewRequestEmailOptions {
  customerName: string;
  businessName: string;
  reviewUrl: string;
  language: "en" | "ar";
  isReminder: boolean;
}

interface ReviewRequestEmailResult {
  html: string;
  text: string;
  subject: string;
}

const SUBJECTS = {
  en: {
    initial: (biz: string) => `${biz} — We'd love your feedback!`,
    reminder: (biz: string) =>
      `${biz} — Quick reminder to share your experience`,
  },
  ar: {
    initial: (biz: string) => `${biz} — نود سماع رأيك!`,
    reminder: (biz: string) => `${biz} — تذكير بسيط لمشاركة تجربتك`,
  },
} as const;

const COPY = {
  en: {
    greeting: (name: string) => `Hi ${name},`,
    bodyInitial: (biz: string) =>
      `Thank you for choosing ${biz}. Your feedback helps us improve our services and helps others make informed decisions.`,
    bodyReminder: (biz: string) =>
      `We noticed you haven't had a chance to share your experience with ${biz} yet. We'd really appreciate your feedback — it only takes a minute!`,
    cta: "Leave a Review",
    footer: "If you have any questions, simply reply to this email.",
    expires: "This link expires in 14 days.",
  },
  ar: {
    greeting: (name: string) => `مرحباً ${name}،`,
    bodyInitial: (biz: string) =>
      `شكراً لاختيارك ${biz}. ملاحظاتك تساعدنا في تحسين خدماتنا وتساعد الآخرين في اتخاذ قرارات مستنيرة.`,
    bodyReminder: (biz: string) =>
      `لاحظنا أنك لم تتمكن بعد من مشاركة تجربتك مع ${biz}. سنقدر ملاحظاتك كثيراً — لن تأخذ سوى دقيقة واحدة!`,
    cta: "اترك تقييمك",
    footer: "إذا كان لديك أي أسئلة، يمكنك الرد على هذا البريد الإلكتروني.",
    expires: "ينتهي صلاحية هذا الرابط خلال 14 يوماً.",
  },
} as const;

export function buildReviewRequestEmailHtml(
  options: ReviewRequestEmailOptions,
): ReviewRequestEmailResult {
  const { customerName, businessName, reviewUrl, language, isReminder } =
    options;
  const dir = language === "ar" ? "rtl" : "ltr";
  const align = language === "ar" ? "right" : "left";
  const copy = COPY[language];
  const subject = isReminder
    ? SUBJECTS[language].reminder(businessName)
    : SUBJECTS[language].initial(businessName);

  const bodyText = isReminder
    ? copy.bodyReminder(businessName)
    : copy.bodyInitial(businessName);

  const html = `<!DOCTYPE html>
<html lang="${language}" dir="${dir}">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>${subject}</title>
  <!--[if mso]>
  <noscript><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript>
  <![endif]-->
</head>
<body style="margin:0;padding:0;background-color:#f4f4f5;font-family:Arial,Helvetica,sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f4f5;">
    <tr>
      <td align="center" style="padding:32px 16px;">
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="max-width:560px;background-color:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.1);">
          <!-- Header -->
          <tr>
            <td style="background-color:#10b981;padding:24px 32px;text-align:center;">
              <h1 style="margin:0;color:#ffffff;font-size:22px;font-weight:700;line-height:1.3;">${businessName}</h1>
            </td>
          </tr>
          <!-- Body -->
          <tr>
            <td style="padding:32px;text-align:${align};" dir="${dir}">
              <p style="margin:0 0 16px;color:#1e293b;font-size:16px;line-height:1.6;">
                ${copy.greeting(customerName)}
              </p>
              <p style="margin:0 0 24px;color:#475569;font-size:15px;line-height:1.6;">
                ${bodyText}
              </p>
              <!-- CTA Button -->
              <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
                <tr>
                  <td align="center" style="padding:8px 0 24px;">
                    <a href="${reviewUrl}" target="_blank" style="display:inline-block;background-color:#10b981;color:#ffffff;font-size:16px;font-weight:600;text-decoration:none;padding:14px 40px;border-radius:8px;line-height:1;mso-padding-alt:0;">
                      <!--[if mso]><i style="letter-spacing:40px;mso-font-width:-100%;mso-text-raise:21pt;">&nbsp;</i><![endif]-->
                      <span style="mso-text-raise:10pt;">${copy.cta}</span>
                      <!--[if mso]><i style="letter-spacing:40px;mso-font-width:-100%;">&nbsp;</i><![endif]-->
                    </a>
                  </td>
                </tr>
              </table>
              <p style="margin:0 0 8px;color:#94a3b8;font-size:13px;line-height:1.5;">
                ${copy.expires}
              </p>
              <p style="margin:0;color:#94a3b8;font-size:13px;line-height:1.5;">
                ${copy.footer}
              </p>
            </td>
          </tr>
          <!-- Footer -->
          <tr>
            <td style="padding:16px 32px;background-color:#f8fafc;text-align:center;border-top:1px solid #e2e8f0;">
              <p style="margin:0;color:#94a3b8;font-size:12px;line-height:1.5;">
                &copy; ${new Date().getFullYear()} Mawidi
              </p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>`;

  const text = [
    copy.greeting(customerName),
    "",
    bodyText,
    "",
    `${copy.cta}: ${reviewUrl}`,
    "",
    copy.expires,
    copy.footer,
  ].join("\n");

  return { html, text, subject };
}
