/**
 * Email template functions for Wasiyat.
 * Each function returns an HTML string with inline CSS for email client compatibility.
 */

const BRAND_GREEN = "#16a34a";
const BRAND_GREEN_LIGHT = "#dcfce7";
const TEXT_DARK = "#1a1a1a";
const TEXT_MUTED = "#6b7280";
const BG_LIGHT = "#f9fafb";

function emailLayout(content: string): string {
  return `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Wasiyat</title>
</head>
<body style="margin: 0; padding: 0; background-color: ${BG_LIGHT}; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color: ${BG_LIGHT};">
    <tr>
      <td align="center" style="padding: 40px 20px;">
        <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="max-width: 600px; width: 100%; background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
          <!-- Header -->
          <tr>
            <td style="background-color: ${BRAND_GREEN}; padding: 24px 32px; text-align: center;">
              <table role="presentation" cellpadding="0" cellspacing="0" style="margin: 0 auto;">
                <tr>
                  <td style="background-color: rgba(255,255,255,0.2); width: 36px; height: 36px; border-radius: 8px; text-align: center; vertical-align: middle; font-weight: bold; color: #ffffff; font-size: 18px;">
                    W
                  </td>
                  <td style="padding-left: 12px; color: #ffffff; font-size: 22px; font-weight: 600; letter-spacing: -0.3px;">
                    Wasiyat
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <!-- Body -->
          <tr>
            <td style="padding: 32px;">
              ${content}
            </td>
          </tr>
          <!-- Footer -->
          <tr>
            <td style="background-color: ${BG_LIGHT}; padding: 24px 32px; border-top: 1px solid #e5e7eb;">
              <p style="margin: 0 0 8px 0; font-size: 12px; color: ${TEXT_MUTED}; text-align: center;">
                Wasiyat &mdash; Shariah-Compliant Estate Planning for India
              </p>
              <p style="margin: 0 0 8px 0; font-size: 11px; color: ${TEXT_MUTED}; text-align: center;">
                This email was sent by Wasiyat. If you did not expect this email, please ignore it.
              </p>
              <p style="margin: 0; font-size: 11px; color: ${TEXT_MUTED}; text-align: center;">
                <a href="{{unsubscribe_url}}" style="color: ${TEXT_MUTED}; text-decoration: underline;">Unsubscribe</a>
                &nbsp;&middot;&nbsp;
                <a href="{{privacy_url}}" style="color: ${TEXT_MUTED}; text-decoration: underline;">Privacy Policy</a>
              </p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>`;
}

function primaryButton(text: string, href: string): string {
  return `<table role="presentation" cellpadding="0" cellspacing="0" style="margin: 24px 0;">
  <tr>
    <td style="background-color: ${BRAND_GREEN}; border-radius: 6px; padding: 12px 28px;">
      <a href="${href}" style="color: #ffffff; text-decoration: none; font-size: 14px; font-weight: 600; display: inline-block;">
        ${text}
      </a>
    </td>
  </tr>
</table>`;
}

export function welcomeEmail(name: string): string {
  return emailLayout(`
    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 700; color: ${TEXT_DARK};">
      Welcome to Wasiyat
    </h1>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Assalamu Alaikum, ${name}!
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Your account has been created successfully. Wasiyat helps you plan your estate in accordance
      with Islamic inheritance principles, supporting Hanafi, Shafi'i, Maliki, Hanbali, and Ja'fari doctrines.
    </p>
    <p style="margin: 0 0 8px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Here is how to get started:
    </p>
    <table role="presentation" cellpadding="0" cellspacing="0" style="margin: 0 0 16px 0;">
      <tr>
        <td style="padding: 8px 0; font-size: 14px; color: ${TEXT_DARK}; line-height: 1.5;">
          <span style="color: ${BRAND_GREEN}; font-weight: 600;">1.</span> Select your preferred doctrine
        </td>
      </tr>
      <tr>
        <td style="padding: 8px 0; font-size: 14px; color: ${TEXT_DARK}; line-height: 1.5;">
          <span style="color: ${BRAND_GREEN}; font-weight: 600;">2.</span> Add your family members and assets
        </td>
      </tr>
      <tr>
        <td style="padding: 8px 0; font-size: 14px; color: ${TEXT_DARK}; line-height: 1.5;">
          <span style="color: ${BRAND_GREEN}; font-weight: 600;">3.</span> Run an inheritance calculation
        </td>
      </tr>
      <tr>
        <td style="padding: 8px 0; font-size: 14px; color: ${TEXT_DARK}; line-height: 1.5;">
          <span style="color: ${BRAND_GREEN}; font-weight: 600;">4.</span> Generate your document pack
        </td>
      </tr>
    </table>
    ${primaryButton("Go to Dashboard", "{{app_url}}/dashboard")}
    <p style="margin: 0; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
      If you have any questions, our support team is here to help.
    </p>
  `);
}

export function passwordResetEmail(name: string, resetLink: string): string {
  return emailLayout(`
    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 700; color: ${TEXT_DARK};">
      Reset Your Password
    </h1>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Hi ${name},
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      We received a request to reset your Wasiyat password. Click the button below to create a new password.
    </p>
    ${primaryButton("Reset Password", resetLink)}
    <p style="margin: 0 0 12px 0; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
      This link will expire in 1 hour. If you did not request a password reset, you can safely ignore this email.
      Your password will remain unchanged.
    </p>
    <p style="margin: 0; font-size: 12px; color: ${TEXT_MUTED}; line-height: 1.5;">
      If the button does not work, copy and paste this link into your browser:<br />
      <a href="${resetLink}" style="color: ${BRAND_GREEN}; word-break: break-all;">${resetLink}</a>
    </p>
  `);
}

export function calculationCompleteEmail(name: string, doctrine: string, shareCount: number): string {
  return emailLayout(`
    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 700; color: ${TEXT_DARK};">
      Calculation Complete
    </h1>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Hi ${name},
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Your inheritance calculation has been completed successfully.
    </p>
    <table role="presentation" cellpadding="0" cellspacing="0" style="width: 100%; margin: 0 0 24px 0; background-color: ${BRAND_GREEN_LIGHT}; border-radius: 8px;">
      <tr>
        <td style="padding: 20px;">
          <table role="presentation" cellpadding="0" cellspacing="0" style="width: 100%;">
            <tr>
              <td style="padding: 4px 0; font-size: 14px; color: ${TEXT_MUTED};">Doctrine</td>
              <td style="padding: 4px 0; font-size: 14px; color: ${TEXT_DARK}; font-weight: 600; text-align: right;">${doctrine}</td>
            </tr>
            <tr>
              <td style="padding: 4px 0; font-size: 14px; color: ${TEXT_MUTED};">Heirs Identified</td>
              <td style="padding: 4px 0; font-size: 14px; color: ${TEXT_DARK}; font-weight: 600; text-align: right;">${shareCount}</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      You can view the full calculation breakdown, including each heir's share with Quranic citations and legal references, in your dashboard.
    </p>
    ${primaryButton("View Calculation", "{{app_url}}/dashboard/calculation")}
    <p style="margin: 0; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
      You can also generate a document pack from this calculation for legal use.
    </p>
  `);
}

export function documentPackReadyEmail(name: string, packId: string): string {
  return emailLayout(`
    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 700; color: ${TEXT_DARK};">
      Document Pack Ready
    </h1>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Hi ${name},
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Your document pack has been generated and is ready for download. The pack includes:
    </p>
    <table role="presentation" cellpadding="0" cellspacing="0" style="margin: 0 0 20px 0;">
      <tr>
        <td style="padding: 6px 0 6px 16px; font-size: 14px; color: ${TEXT_DARK}; line-height: 1.5;">
          &#8226;&nbsp; Inheritance calculation certificate
        </td>
      </tr>
      <tr>
        <td style="padding: 6px 0 6px 16px; font-size: 14px; color: ${TEXT_DARK}; line-height: 1.5;">
          &#8226;&nbsp; Last will and testament (Wasiyyah)
        </td>
      </tr>
      <tr>
        <td style="padding: 6px 0 6px 16px; font-size: 14px; color: ${TEXT_DARK}; line-height: 1.5;">
          &#8226;&nbsp; Asset distribution schedule
        </td>
      </tr>
      <tr>
        <td style="padding: 6px 0 6px 16px; font-size: 14px; color: ${TEXT_DARK}; line-height: 1.5;">
          &#8226;&nbsp; Executor instructions
        </td>
      </tr>
    </table>
    ${primaryButton("Download Documents", `{{app_url}}/dashboard/documents/${packId}`)}
    <p style="margin: 0; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
      Your documents are stored securely in your vault and can be accessed at any time.
    </p>
  `);
}

export function subscriptionConfirmEmail(name: string, plan: string, amount: number): string {
  return emailLayout(`
    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 700; color: ${TEXT_DARK};">
      Subscription Confirmed
    </h1>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Hi ${name},
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Thank you for subscribing to Wasiyat. Your subscription is now active.
    </p>
    <table role="presentation" cellpadding="0" cellspacing="0" style="width: 100%; margin: 0 0 24px 0; background-color: ${BRAND_GREEN_LIGHT}; border-radius: 8px;">
      <tr>
        <td style="padding: 20px;">
          <table role="presentation" cellpadding="0" cellspacing="0" style="width: 100%;">
            <tr>
              <td style="padding: 4px 0; font-size: 14px; color: ${TEXT_MUTED};">Plan</td>
              <td style="padding: 4px 0; font-size: 14px; color: ${TEXT_DARK}; font-weight: 600; text-align: right;">${plan}</td>
            </tr>
            <tr>
              <td style="padding: 4px 0; font-size: 14px; color: ${TEXT_MUTED};">Amount</td>
              <td style="padding: 4px 0; font-size: 14px; color: ${TEXT_DARK}; font-weight: 600; text-align: right;">${amount.toLocaleString("en-IN", { style: "currency", currency: "INR" })}</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      You now have access to all features included in the ${plan} plan. Manage your subscription from your dashboard.
    </p>
    ${primaryButton("View Subscription", "{{app_url}}/dashboard/subscription")}
  `);
}

export function subscriptionExpiringEmail(name: string, daysLeft: number): string {
  return emailLayout(`
    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 700; color: ${TEXT_DARK};">
      Subscription Expiring Soon
    </h1>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Hi ${name},
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Your Wasiyat subscription will expire in <strong>${daysLeft} day${daysLeft !== 1 ? "s" : ""}</strong>.
      To maintain uninterrupted access to your estate planning tools and documents, please renew your subscription.
    </p>
    <table role="presentation" cellpadding="0" cellspacing="0" style="width: 100%; margin: 0 0 24px 0; background-color: #fef3c7; border-radius: 8px;">
      <tr>
        <td style="padding: 16px 20px;">
          <p style="margin: 0; font-size: 14px; color: #92400e; line-height: 1.5;">
            <strong>What happens after expiry:</strong> You will retain read-only access to existing
            calculations and documents, but will not be able to create new calculations or generate document packs.
          </p>
        </td>
      </tr>
    </table>
    ${primaryButton("Renew Subscription", "{{app_url}}/dashboard/subscription")}
    <p style="margin: 0; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
      If you have already renewed, please disregard this email.
    </p>
  `);
}

export function beneficiaryNotificationEmail(
  beneficiaryName: string,
  estateOwnerName: string,
  accessLink: string
): string {
  return emailLayout(`
    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 700; color: ${TEXT_DARK};">
      You Have Been Named as a Beneficiary
    </h1>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Assalamu Alaikum, ${beneficiaryName},
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      <strong>${estateOwnerName}</strong> has named you as a beneficiary in their estate plan on Wasiyat.
      You can view your inheritance share details through the secure portal link below.
    </p>
    <table role="presentation" cellpadding="0" cellspacing="0" style="width: 100%; margin: 0 0 24px 0; background-color: ${BRAND_GREEN_LIGHT}; border-radius: 8px;">
      <tr>
        <td style="padding: 16px 20px;">
          <p style="margin: 0; font-size: 14px; color: #166534; line-height: 1.5;">
            This is a secure, private link intended only for you. Please do not share it with others.
          </p>
        </td>
      </tr>
    </table>
    ${primaryButton("View Your Inheritance Details", accessLink)}
    <p style="margin: 0 0 12px 0; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
      Through the portal you will be able to see:
    </p>
    <table role="presentation" cellpadding="0" cellspacing="0" style="margin: 0 0 16px 0;">
      <tr>
        <td style="padding: 4px 0 4px 16px; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
          &#8226;&nbsp; Your calculated inheritance share
        </td>
      </tr>
      <tr>
        <td style="padding: 4px 0 4px 16px; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
          &#8226;&nbsp; Relevant documents and certificates
        </td>
      </tr>
      <tr>
        <td style="padding: 4px 0 4px 16px; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
          &#8226;&nbsp; Contact information for the estate planner
        </td>
      </tr>
    </table>
    <p style="margin: 0; font-size: 12px; color: ${TEXT_MUTED}; line-height: 1.5;">
      If the button does not work, copy and paste this link into your browser:<br />
      <a href="${accessLink}" style="color: ${BRAND_GREEN}; word-break: break-all;">${accessLink}</a>
    </p>
  `);
}

export function executorNotificationEmail(
  executorName: string,
  estateOwnerName: string,
  accessLink: string
): string {
  return emailLayout(`
    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 700; color: ${TEXT_DARK};">
      You Have Been Named as an Executor
    </h1>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Assalamu Alaikum, ${executorName},
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      <strong>${estateOwnerName}</strong> has designated you as an executor of their estate plan on Wasiyat.
      As an executor, you will be responsible for ensuring that the estate is distributed according to
      the calculated shares.
    </p>
    <table role="presentation" cellpadding="0" cellspacing="0" style="width: 100%; margin: 0 0 24px 0; background-color: ${BRAND_GREEN_LIGHT}; border-radius: 8px;">
      <tr>
        <td style="padding: 16px 20px;">
          <p style="margin: 0; font-size: 14px; color: #166534; line-height: 1.5;">
            This is a secure, private link intended only for you. Please do not share it with others.
          </p>
        </td>
      </tr>
    </table>
    ${primaryButton("Access Executor Dashboard", accessLink)}
    <p style="margin: 0 0 12px 0; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
      Through the executor portal you will be able to:
    </p>
    <table role="presentation" cellpadding="0" cellspacing="0" style="margin: 0 0 16px 0;">
      <tr>
        <td style="padding: 4px 0 4px 16px; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
          &#8226;&nbsp; View the complete inheritance calculation
        </td>
      </tr>
      <tr>
        <td style="padding: 4px 0 4px 16px; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
          &#8226;&nbsp; Download legal documents and certificates
        </td>
      </tr>
      <tr>
        <td style="padding: 4px 0 4px 16px; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
          &#8226;&nbsp; Follow the 8-step executor playbook
        </td>
      </tr>
      <tr>
        <td style="padding: 4px 0 4px 16px; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
          &#8226;&nbsp; Track estate distribution progress
        </td>
      </tr>
    </table>
    <p style="margin: 0; font-size: 12px; color: ${TEXT_MUTED}; line-height: 1.5;">
      If the button does not work, copy and paste this link into your browser:<br />
      <a href="${accessLink}" style="color: ${BRAND_GREEN}; word-break: break-all;">${accessLink}</a>
    </p>
  `);
}

// ────────────────────────────────────────────────────────────
// Partner Email Templates
// ────────────────────────────────────────────────────────────

export function partnerRegistrationConfirmEmail(name: string): string {
  return emailLayout(`
    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 700; color: ${TEXT_DARK};">
      Welcome to Wasiyat Partner Program
    </h1>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Dear ${name},
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Thank you for registering as a partner on Wasiyat. Your application is under review.
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Our team will verify your credentials and you will be notified once your profile is approved.
    </p>
    <table role="presentation" cellpadding="0" cellspacing="0" style="width: 100%; margin: 0 0 24px 0; background-color: ${BRAND_GREEN_LIGHT}; border-radius: 8px;">
      <tr>
        <td style="padding: 16px 20px;">
          <p style="margin: 0; font-size: 14px; color: #166534; line-height: 1.5;">
            This typically takes 2&ndash;3 business days. You will receive an email notification once the review is complete.
          </p>
        </td>
      </tr>
    </table>
    <p style="margin: 0; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
      If you have any questions about the review process, please contact our support team.
    </p>
  `);
}

export function partnerApprovedEmail(name: string): string {
  return emailLayout(`
    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 700; color: ${TEXT_DARK};">
      Your Partner Profile is Approved!
    </h1>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Dear ${name},
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Congratulations! Your partner profile on Wasiyat has been verified and approved.
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      You are now visible to subscribed users in the partner marketplace. You will receive email
      notifications when users request your services.
    </p>
    ${primaryButton("View Your Dashboard", "{{app_url}}/dashboard/partners/dashboard")}
    <p style="margin: 0; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
      Thank you for joining the Wasiyat partner network.
    </p>
  `);
}

export function partnerRejectedEmail(name: string, reason: string): string {
  return emailLayout(`
    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 700; color: ${TEXT_DARK};">
      Partner Application Update
    </h1>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Dear ${name},
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      After reviewing your partner application, we were unable to approve it at this time.
    </p>
    <table role="presentation" cellpadding="0" cellspacing="0" style="width: 100%; margin: 0 0 24px 0; background-color: #fef3c7; border-radius: 8px;">
      <tr>
        <td style="padding: 16px 20px;">
          <p style="margin: 0; font-size: 14px; color: #92400e; line-height: 1.5;">
            <strong>Reason:</strong> ${reason}
          </p>
        </td>
      </tr>
    </table>
    <p style="margin: 0; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
      You may update your profile and resubmit for review. If you have questions, please contact our support team.
    </p>
  `);
}

export function newServiceRequestEmail(
  partnerName: string,
  serviceType: string,
  userName: string
): string {
  return emailLayout(`
    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 700; color: ${TEXT_DARK};">
      New Service Request
    </h1>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Dear ${partnerName},
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      You have received a new service request from <strong>${userName}</strong> for
      <strong>${serviceType}</strong>.
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Please log in to your dashboard to review and accept or decline the request.
    </p>
    ${primaryButton("View Request", "{{app_url}}/dashboard/partners/dashboard")}
    <p style="margin: 0; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
      You will be notified of any updates to this request.
    </p>
  `);
}

export function serviceRequestAcceptedEmail(
  userName: string,
  partnerName: string,
  serviceType: string
): string {
  return emailLayout(`
    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 700; color: ${TEXT_DARK};">
      Service Request Accepted
    </h1>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Dear ${userName},
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Your service request for <strong>${serviceType}</strong> has been accepted by
      <strong>${partnerName}</strong>.
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Please proceed with payment to begin the service.
    </p>
    ${primaryButton("Make Payment", "{{app_url}}/dashboard/partners/requests")}
    <p style="margin: 0; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
      Once payment is confirmed, the partner will begin working on your request.
    </p>
  `);
}

export function serviceRequestRejectedEmail(
  userName: string,
  partnerName: string,
  reason: string
): string {
  return emailLayout(`
    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 700; color: ${TEXT_DARK};">
      Service Request Update
    </h1>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Dear ${userName},
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Unfortunately, your service request was declined by <strong>${partnerName}</strong>.
    </p>
    <table role="presentation" cellpadding="0" cellspacing="0" style="width: 100%; margin: 0 0 24px 0; background-color: #fef3c7; border-radius: 8px;">
      <tr>
        <td style="padding: 16px 20px;">
          <p style="margin: 0; font-size: 14px; color: #92400e; line-height: 1.5;">
            <strong>Reason:</strong> ${reason}
          </p>
        </td>
      </tr>
    </table>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      You may browse other partners in the marketplace and submit a new request.
    </p>
    ${primaryButton("Browse Partners", "{{app_url}}/dashboard/partners")}
  `);
}

export function servicePaymentReceivedEmail(
  partnerName: string,
  amount: number,
  serviceType: string
): string {
  return emailLayout(`
    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 700; color: ${TEXT_DARK};">
      Payment Received
    </h1>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Dear ${partnerName},
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Payment of <strong>${amount.toLocaleString("en-IN", { style: "currency", currency: "INR" })}</strong>
      has been received for <strong>${serviceType}</strong>.
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Please begin the service and mark it as complete when done.
    </p>
    ${primaryButton("View Dashboard", "{{app_url}}/dashboard/partners/dashboard")}
    <p style="margin: 0; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
      The service request status has been updated to &ldquo;In Progress.&rdquo;
    </p>
  `);
}

export function serviceCompletedEmail(
  userName: string,
  partnerName: string,
  serviceType: string
): string {
  return emailLayout(`
    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 700; color: ${TEXT_DARK};">
      Service Completed
    </h1>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Dear ${userName},
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Your service request for <strong>${serviceType}</strong> has been marked as completed by
      <strong>${partnerName}</strong>.
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Please take a moment to rate the service to help other users.
    </p>
    ${primaryButton("Rate Service", "{{app_url}}/dashboard/partners/requests")}
    <p style="margin: 0; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
      Your feedback helps maintain the quality of our partner network.
    </p>
  `);
}

// ────────────────────────────────────────────────────────────
// Signing & Identity Verification Email Templates
// ────────────────────────────────────────────────────────────

export function signingOTPEmail(
  signerName: string,
  otp: string,
  documentDescription: string,
  expiresMinutes: number
): string {
  return emailLayout(`
    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 700; color: ${TEXT_DARK};">
      Signing Verification Code
    </h1>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Assalamu Alaikum, ${signerName},
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      You are about to sign: <strong>${documentDescription}</strong>
    </p>
    <p style="margin: 0 0 8px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Your one-time verification code is:
    </p>
    <table role="presentation" cellpadding="0" cellspacing="0" style="width: 100%; margin: 0 0 24px 0;">
      <tr>
        <td style="text-align: center; padding: 24px;">
          <span style="font-size: 36px; font-weight: 700; letter-spacing: 8px; color: ${BRAND_GREEN}; font-family: 'Courier New', monospace;">
            ${otp}
          </span>
        </td>
      </tr>
    </table>
    <table role="presentation" cellpadding="0" cellspacing="0" style="width: 100%; margin: 0 0 24px 0; background-color: #fef3c7; border-radius: 8px;">
      <tr>
        <td style="padding: 16px 20px;">
          <p style="margin: 0; font-size: 14px; color: #92400e; line-height: 1.5;">
            This code expires in <strong>${expiresMinutes} minutes</strong>. Do not share this code with anyone.
          </p>
        </td>
      </tr>
    </table>
    <p style="margin: 0; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
      If you did not initiate this signing request, please ignore this email. Your documents remain secure.
    </p>
  `);
}

export function witnessInvitationEmail(
  witnessName: string,
  testatorName: string,
  portalUrl: string,
  expiresAt: string
): string {
  return emailLayout(`
    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 700; color: ${TEXT_DARK};">
      Witness Invitation
    </h1>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Assalamu Alaikum, ${witnessName},
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      <strong>${testatorName}</strong> has invited you to serve as a witness for their Wasiyyah (Last Will and Testament)
      on Wasiyat.
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      As a witness, you will review the document summary and provide your digital attestation and signature.
    </p>
    <table role="presentation" cellpadding="0" cellspacing="0" style="width: 100%; margin: 0 0 24px 0; background-color: ${BRAND_GREEN_LIGHT}; border-radius: 8px;">
      <tr>
        <td style="padding: 16px 20px;">
          <p style="margin: 0; font-size: 14px; color: #166534; line-height: 1.5;">
            This invitation is valid until <strong>${expiresAt}</strong>. Please complete your attestation before this date.
          </p>
        </td>
      </tr>
    </table>
    ${primaryButton("Open Witness Portal", portalUrl)}
    <p style="margin: 0 0 12px 0; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
      You will be asked to:
    </p>
    <table role="presentation" cellpadding="0" cellspacing="0" style="margin: 0 0 16px 0;">
      <tr>
        <td style="padding: 4px 0 4px 16px; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
          &#8226;&nbsp; Review the document summary
        </td>
      </tr>
      <tr>
        <td style="padding: 4px 0 4px 16px; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
          &#8226;&nbsp; Confirm your declaration of witnessing
        </td>
      </tr>
      <tr>
        <td style="padding: 4px 0 4px 16px; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
          &#8226;&nbsp; Provide your digital signature
        </td>
      </tr>
    </table>
    <p style="margin: 0; font-size: 12px; color: ${TEXT_MUTED}; line-height: 1.5;">
      If the button does not work, copy and paste this link into your browser:<br />
      <a href="${portalUrl}" style="color: ${BRAND_GREEN}; word-break: break-all;">${portalUrl}</a>
    </p>
  `);
}

export function executorInvitationEmail(
  executorName: string,
  testatorName: string,
  portalUrl: string,
  isPrimary: boolean
): string {
  return emailLayout(`
    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 700; color: ${TEXT_DARK};">
      Executor Appointment
    </h1>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Assalamu Alaikum, ${executorName},
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      <strong>${testatorName}</strong> has appointed you as ${isPrimary ? "the <strong>primary</strong>" : "an"} executor
      of their estate plan on Wasiyat.
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Please review the appointment details and accept or decline through the secure executor portal.
    </p>
    ${primaryButton("Open Executor Portal", portalUrl)}
    <p style="margin: 0 0 12px 0; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
      As an executor, you will be responsible for:
    </p>
    <table role="presentation" cellpadding="0" cellspacing="0" style="margin: 0 0 16px 0;">
      <tr>
        <td style="padding: 4px 0 4px 16px; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
          &#8226;&nbsp; Ensuring the estate is distributed per the calculated shares
        </td>
      </tr>
      <tr>
        <td style="padding: 4px 0 4px 16px; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
          &#8226;&nbsp; Following the step-by-step executor playbook
        </td>
      </tr>
      <tr>
        <td style="padding: 4px 0 4px 16px; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
          &#8226;&nbsp; Managing legal documentation and government filings
        </td>
      </tr>
    </table>
    <p style="margin: 0; font-size: 12px; color: ${TEXT_MUTED}; line-height: 1.5;">
      If the button does not work, copy and paste this link into your browser:<br />
      <a href="${portalUrl}" style="color: ${BRAND_GREEN}; word-break: break-all;">${portalUrl}</a>
    </p>
  `);
}

export function executorAcceptedNotificationEmail(
  testatorName: string,
  executorName: string
): string {
  return emailLayout(`
    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 700; color: ${TEXT_DARK};">
      Executor Accepted
    </h1>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Hi ${testatorName},
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      <strong>${executorName}</strong> has accepted your executor appointment on Wasiyat.
    </p>
    <table role="presentation" cellpadding="0" cellspacing="0" style="width: 100%; margin: 0 0 24px 0; background-color: ${BRAND_GREEN_LIGHT}; border-radius: 8px;">
      <tr>
        <td style="padding: 16px 20px;">
          <p style="margin: 0; font-size: 14px; color: #166534; line-height: 1.5;">
            Your executor can now access the executor portal, view your estate plan documents, and provide their signature.
          </p>
        </td>
      </tr>
    </table>
    ${primaryButton("View Executor Status", "{{app_url}}/dashboard/estate/executors")}
  `);
}

export function executorDeclinedNotificationEmail(
  testatorName: string,
  executorName: string,
  reason?: string
): string {
  return emailLayout(`
    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 700; color: ${TEXT_DARK};">
      Executor Declined
    </h1>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Hi ${testatorName},
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      <strong>${executorName}</strong> has declined your executor appointment on Wasiyat.
    </p>
    ${reason ? `
    <table role="presentation" cellpadding="0" cellspacing="0" style="width: 100%; margin: 0 0 24px 0; background-color: #fef3c7; border-radius: 8px;">
      <tr>
        <td style="padding: 16px 20px;">
          <p style="margin: 0; font-size: 14px; color: #92400e; line-height: 1.5;">
            <strong>Reason:</strong> ${reason}
          </p>
        </td>
      </tr>
    </table>
    ` : ""}
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      You may appoint a different executor through your dashboard.
    </p>
    ${primaryButton("Manage Executors", "{{app_url}}/dashboard/estate/executors")}
  `);
}

export function signingCompletedEmail(
  signerName: string,
  documentDescription: string,
  din: string | null,
  signedAt: string
): string {
  return emailLayout(`
    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 700; color: ${TEXT_DARK};">
      Signing Complete
    </h1>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Assalamu Alaikum, ${signerName},
    </p>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6;">
      Your digital signature for <strong>${documentDescription}</strong> has been securely recorded.
    </p>
    <table role="presentation" cellpadding="0" cellspacing="0" style="width: 100%; margin: 0 0 24px 0; background-color: ${BRAND_GREEN_LIGHT}; border-radius: 8px;">
      <tr>
        <td style="padding: 20px;">
          <table role="presentation" cellpadding="0" cellspacing="0" style="width: 100%;">
            <tr>
              <td style="padding: 4px 0; font-size: 14px; color: ${TEXT_MUTED};">Signed At</td>
              <td style="padding: 4px 0; font-size: 14px; color: ${TEXT_DARK}; font-weight: 600; text-align: right;">${signedAt}</td>
            </tr>
            ${din ? `
            <tr>
              <td style="padding: 4px 0; font-size: 14px; color: ${TEXT_MUTED};">Document ID (DIN)</td>
              <td style="padding: 4px 0; font-size: 14px; color: ${TEXT_DARK}; font-weight: 600; text-align: right;">${din}</td>
            </tr>
            ` : ""}
            <tr>
              <td style="padding: 4px 0; font-size: 14px; color: ${TEXT_MUTED};">Encryption</td>
              <td style="padding: 4px 0; font-size: 14px; color: ${TEXT_DARK}; font-weight: 600; text-align: right;">AES-256-GCM</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <p style="margin: 0; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5;">
      Your signature is encrypted and stored securely. A signing certificate will be included in the document pack
      showing all signers, verification methods, and timestamps.
    </p>
  `);
}

// ── Video Wasiyat Templates ────────────────────────────────

/**
 * Email sent to video message recipients when the message is delivered.
 */
export function videoWasiyatDeliveryEmail(
  recipientName: string,
  senderName: string,
  portalUrl: string,
  personalNote?: string
): { subject: string; html: string } {
  const subject = `${senderName} has left a personal message for you`;

  const noteSection = personalNote
    ? `
    <table role="presentation" cellpadding="0" cellspacing="0" style="width: 100%; margin: 0 0 24px 0; background-color: ${BG_LIGHT}; border-radius: 8px; border-left: 3px solid ${BRAND_GREEN};">
      <tr>
        <td style="padding: 16px 20px;">
          <p style="margin: 0 0 8px 0; font-size: 13px; color: ${TEXT_MUTED}; text-transform: uppercase; letter-spacing: 0.5px;">Personal Note</p>
          <p style="margin: 0; font-size: 14px; color: ${TEXT_DARK}; line-height: 1.6; font-style: italic;">&ldquo;${personalNote}&rdquo;</p>
          <p style="margin: 8px 0 0; font-size: 13px; color: ${TEXT_MUTED}; text-align: right;">&mdash; ${senderName}</p>
        </td>
      </tr>
    </table>`
    : "";

  const html = emailLayout(`
    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 700; color: ${TEXT_DARK}; text-align: center;">
      A Message For You
    </h1>
    <p style="margin: 0 0 16px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6; text-align: center;">
      Dear ${recipientName},
    </p>
    <p style="margin: 0 0 24px 0; font-size: 15px; color: ${TEXT_DARK}; line-height: 1.6; text-align: center;">
      <strong>${senderName}</strong> has left a personal video message for you through Wasiyat.
      This message was recorded with care and intended specifically for you.
    </p>
    ${noteSection}
    ${primaryButton("Watch Message", portalUrl)}
    <p style="margin: 0; font-size: 13px; color: ${TEXT_MUTED}; line-height: 1.5; text-align: center;">
      This message is private and encrypted. Only you can access it through the link above.
    </p>
    <p style="margin: 12px 0 0; font-size: 12px; color: ${TEXT_MUTED}; line-height: 1.5;">
      If the button does not work, copy and paste this link into your browser:<br />
      <a href="${portalUrl}" style="color: ${BRAND_GREEN}; word-break: break-all;">${portalUrl}</a>
    </p>
  `);

  return { subject, html };
}
