import { formatNaira } from "@/lib/utils";

const APP_URL = process.env.NEXT_PUBLIC_APP_URL || "https://nigerialisting.vercel.app";
const LOGO_URL = `${APP_URL}/asset/logo.png`;

/**
 * Base Responsive HTML Email Container
 */
function baseEmailWrapper({
  title,
  preheader,
  contentHtml,
  actionButton,
}: {
  title: string;
  preheader?: string;
  contentHtml: string;
  actionButton?: { text: string; url: string; color?: string };
}): string {
  const buttonColor = actionButton?.color || "#0096f7";

  return `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>${title}</title>
  <style>
    body { margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #0f172a; -webkit-font-smoothing: antialiased; }
    table { border-collapse: separate; }
    a { color: #0284c7; text-decoration: none; }
    .btn { display: inline-block; padding: 14px 32px; font-size: 14px; font-weight: 700; color: #ffffff !important; background-color: ${buttonColor}; border-radius: 12px; text-decoration: none; text-align: center; box-shadow: 0 4px 14px rgba(0, 150, 247, 0.25); letter-spacing: 0.2px; }
    .card { background-color: #ffffff; border-radius: 20px; border: 1px solid #e2e8f0; padding: 36px 32px; box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04); }
    .badge { display: inline-block; padding: 5px 14px; font-size: 11px; font-weight: 800; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.6px; line-height: 1.2; }
    .badge-green { background-color: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
    .badge-blue { background-color: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
    .badge-orange { background-color: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
    .badge-purple { background-color: #faf5ff; color: #6b21a8; border: 1px solid #e9d5ff; }
    .highlight-box { background-color: #f8fafc; border-radius: 14px; border: 1px solid #e2e8f0; padding: 20px 22px; margin: 22px 0; }
    .ref-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; background-color: #f1f5f9; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; color: #0284c7; border: 1px solid #e2e8f0; }
    .footer { text-align: center; font-size: 12px; color: #64748b; padding: 32px 16px 20px 16px; line-height: 1.6; }
  </style>
</head>
<body style="margin: 0; padding: 28px 12px; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;">
  ${
    preheader
      ? `<div style="display:none;font-size:1px;color:#f8fafc;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">${preheader}</div>`
      : ""
  }
  <table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="center">
        <!-- Main Card Container (Max Width 600px) -->
        <table role="presentation" width="100%" style="max-width: 600px;" border="0" cellspacing="0" cellpadding="0">
          
          <!-- Header Branding with Official Logo -->
          <tr>
            <td style="padding: 16px 8px 26px 8px;" align="center">
              <table role="presentation" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td style="vertical-align: middle; padding-right: 14px;">
                    <a href="${APP_URL}" target="_blank" style="display: inline-block; text-decoration: none;">
                      <img
                        src="${LOGO_URL}"
                        alt="Nigeria Listing"
                        width="48"
                        height="48"
                        style="display: block; width: 48px; height: 48px; object-fit: contain; border-radius: 12px; border: 0;"
                      />
                    </a>
                  </td>
                  <td style="vertical-align: middle; text-align: left;">
                    <a href="${APP_URL}" target="_blank" style="text-decoration: none;">
                      <span style="font-size: 21px; font-weight: 800; color: #0f172a; letter-spacing: -0.5px; display: block; line-height: 1.2; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;">
                        Nigeria Listing
                      </span>
                      <span style="display: block; font-size: 10px; font-weight: 700; color: #15803d; text-transform: uppercase; letter-spacing: 1.2px; margin-top: 3px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;">
                        Verified Real Estate Marketplace
                      </span>
                    </a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>

          <!-- Content Card -->
          <tr>
            <td>
              <div class="card">
                ${contentHtml}

                ${
                  actionButton
                    ? `
                  <div style="margin-top: 32px; text-align: center;">
                    <table role="presentation" border="0" cellspacing="0" cellpadding="0" style="margin: 0 auto;">
                      <tr>
                        <td align="center" style="border-radius: 12px; background-color: ${buttonColor};">
                          <a href="${actionButton.url}" target="_blank" style="display: inline-block; padding: 14px 32px; font-size: 14px; font-weight: 700; color: #ffffff !important; text-decoration: none; text-align: center; border-radius: 12px; letter-spacing: 0.2px; box-shadow: 0 4px 14px rgba(0, 150, 247, 0.25);">
                            ${actionButton.text} &rarr;
                          </a>
                        </td>
                      </tr>
                    </table>
                  </div>
                `
                    : ""
                }
              </div>
            </td>
          </tr>

          <!-- Footer -->
          <tr>
            <td class="footer">
              <p style="margin: 0 0 6px 0; font-weight: 600; color: #475569;">
                &copy; ${new Date().getFullYear()} Nigeria Listing Ltd. All rights reserved.
              </p>
              <p style="margin: 0 0 12px 0; font-size: 11px; color: #94a3b8;">
                Victoria Island, Lagos &bull; Central Business District, Abuja, Nigeria
              </p>
              <p style="margin: 0; font-size: 12px;">
                <a href="${APP_URL}" style="color: #0284c7; text-decoration: none; font-weight: 600;">Home</a>
                <span style="color: #cbd5e1; margin: 0 8px;">&bull;</span>
                <a href="${APP_URL}/properties" style="color: #0284c7; text-decoration: none; font-weight: 600;">Explore Properties</a>
                <span style="color: #cbd5e1; margin: 0 8px;">&bull;</span>
                <a href="${APP_URL}/dashboard" style="color: #0284c7; text-decoration: none; font-weight: 600;">Dashboard</a>
                <span style="color: #cbd5e1; margin: 0 8px;">&bull;</span>
                <a href="${APP_URL}/dashboard/profile" style="color: #64748b; text-decoration: none;">Notification Settings</a>
              </p>
            </td>
          </tr>

        </table>
      </td>
    </tr>
  </table>
</body>
</html>
`;
}

// --------------------------------------------------------------------------
// 1. ADMIN & MODERATION TEMPLATES
// --------------------------------------------------------------------------

export function adminNewPropertyModerationTemplate(data: {
  propertyTitle: string;
  referenceCode: string;
  price: number;
  propertyType: string;
  titleType: string;
  creatorName: string;
  creatorEmail: string;
  location: string;
  propertyId: string;
}) {
  const content = `
    <span class="badge badge-orange">Action Required &bull; Trust & Safety</span>
    <h2 style="font-size: 22px; font-weight: 800; margin: 14px 0 8px 0; color: #0f172a; letter-spacing: -0.5px;">New Listing Submitted for Verification</h2>
    <p style="font-size: 14px; color: #475569; line-height: 1.6; margin: 0 0 16px 0;">
      A new property listing with legal title documents has been submitted and is awaiting verification by the compliance team before publishing to the marketplace.
    </p>

    <div class="highlight-box">
      <table width="100%" border="0" cellspacing="0" cellpadding="8" style="font-size: 13px;">
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; width: 130px; padding: 10px 4px;">Property:</td>
          <td style="font-weight: 800; color: #0f172a; padding: 10px 4px;">${data.propertyTitle}</td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Reference:</td>
          <td style="padding: 10px 4px;"><span class="ref-code">${data.referenceCode}</span></td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Price:</td>
          <td style="font-weight: 800; color: #15803d; font-size: 16px; padding: 10px 4px;">${formatNaira(data.price)}</td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Title Doc:</td>
          <td style="font-weight: 700; color: #c2410c; padding: 10px 4px;">${data.titleType.replace(/_/g, " ")}</td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Location:</td>
          <td style="font-weight: 600; color: #0f172a; padding: 10px 4px;">${data.location}</td>
        </tr>
        <tr>
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Submitted By:</td>
          <td style="padding: 10px 4px;">${data.creatorName} (<a href="mailto:${data.creatorEmail}" style="color: #0284c7;">${data.creatorEmail}</a>)</td>
        </tr>
      </table>
    </div>
  `;

  return baseEmailWrapper({
    title: "New Property Awaiting Verification - Nigeria Listing",
    preheader: `Review listing ${data.referenceCode}: ${data.propertyTitle}`,
    contentHtml: content,
    actionButton: {
      text: "Review in Staff Desk",
      url: `${APP_URL}/admin/properties`,
      color: "#0096f7",
    },
  });
}

export function adminAgencyVerificationTemplate(data: {
  agencyName: string;
  cacRcNumber?: string | null;
  taxIdNumber?: string | null;
  ownerName: string;
  ownerEmail: string;
  phone?: string | null;
  officeAddress?: string | null;
  agencyId: string;
}) {
  const content = `
    <span class="badge badge-blue">CAC Accreditation Review</span>
    <h2 style="font-size: 22px; font-weight: 800; margin: 14px 0 8px 0; color: #0f172a; letter-spacing: -0.5px;">Agency CAC Verification Submitted</h2>
    <p style="font-size: 14px; color: #475569; line-height: 1.6; margin: 0 0 16px 0;">
      <strong>${data.agencyName}</strong> has applied for official verified real estate agency accreditation on the Nigeria Listing platform.
    </p>

    <div class="highlight-box">
      <table width="100%" border="0" cellspacing="0" cellpadding="8" style="font-size: 13px;">
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; width: 130px; padding: 10px 4px;">Agency Name:</td>
          <td style="font-weight: 800; color: #0f172a; padding: 10px 4px;">${data.agencyName}</td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">CAC RC Number:</td>
          <td style="padding: 10px 4px;"><span class="ref-code">${data.cacRcNumber || "Pending Upload"}</span></td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Managing Director:</td>
          <td style="padding: 10px 4px;">${data.ownerName} (<a href="mailto:${data.ownerEmail}" style="color: #0284c7;">${data.ownerEmail}</a>)</td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Phone:</td>
          <td style="padding: 10px 4px;">${data.phone ? `<a href="tel:${data.phone}" style="color: #0284c7;">${data.phone}</a>` : "—"}</td>
        </tr>
        <tr>
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Office Address:</td>
          <td style="padding: 10px 4px;">${data.officeAddress || "—"}</td>
        </tr>
      </table>
    </div>
  `;

  return baseEmailWrapper({
    title: "Agency Verification Request - Nigeria Listing",
    preheader: `CAC verification requested for ${data.agencyName}`,
    contentHtml: content,
    actionButton: {
      text: "Inspect CAC Certificate",
      url: `${APP_URL}/admin/agency-verifications`,
      color: "#0096f7",
    },
  });
}

export function adminHighValuePaymentTemplate(data: {
  amount: number;
  reference: string;
  purpose: string;
  payerName: string;
  payerEmail: string;
  paymentMethod?: string;
}) {
  const content = `
    <span class="badge badge-green">Payment Settled &bull; Paystack</span>
    <h2 style="font-size: 22px; font-weight: 800; margin: 14px 0 8px 0; color: #0f172a; letter-spacing: -0.5px;">Platform Transaction Confirmed</h2>
    <p style="font-size: 14px; color: #475569; line-height: 1.6; margin: 0 0 16px 0;">
      A transaction of <strong>${formatNaira(data.amount)}</strong> has been processed and verified through Paystack.
    </p>

    <div class="highlight-box">
      <table width="100%" border="0" cellspacing="0" cellpadding="8" style="font-size: 13px;">
        <tr style="border-bottom: 2px solid #e2e8f0;">
          <td style="color: #64748b; font-weight: 600; width: 130px; padding: 10px 4px;">Amount:</td>
          <td style="font-weight: 800; color: #15803d; font-size: 18px; padding: 10px 4px;">${formatNaira(data.amount)}</td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Paystack Ref:</td>
          <td style="padding: 10px 4px;"><span class="ref-code">${data.reference}</span></td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Purpose:</td>
          <td style="font-weight: 700; color: #0f172a; padding: 10px 4px;">${data.purpose}</td>
        </tr>
        <tr>
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Payer:</td>
          <td style="padding: 10px 4px;">${data.payerName} (<a href="mailto:${data.payerEmail}" style="color: #0284c7;">${data.payerEmail}</a>)</td>
        </tr>
      </table>
    </div>
  `;

  return baseEmailWrapper({
    title: `Payment Received: ${formatNaira(data.amount)} - Nigeria Listing`,
    preheader: `Paystack transaction ${data.reference} successful`,
    contentHtml: content,
    actionButton: {
      text: "View Payment Ledger",
      url: `${APP_URL}/dashboard/payments`,
      color: "#166534",
    },
  });
}

// --------------------------------------------------------------------------
// 2. AGENCY & AGENT NOTIFICATIONS
// --------------------------------------------------------------------------

export function agentNewInquiryTemplate(data: {
  agentName: string;
  propertyTitle: string;
  referenceCode: string;
  clientName: string;
  clientEmail: string;
  clientPhone?: string | null;
  inquiryType: string;
  message: string;
  leadId: string;
}) {
  const cleanPhone = (data.clientPhone || "").replace(/[^0-9]/g, "");
  const whatsappUrl = cleanPhone
    ? `https://wa.me/${cleanPhone.startsWith("0") ? "234" + cleanPhone.substring(1) : cleanPhone}`
    : null;

  const content = `
    <span class="badge badge-green">New Buyer Lead &bull; Action Required</span>
    <h2 style="font-size: 22px; font-weight: 800; margin: 14px 0 8px 0; color: #0f172a; letter-spacing: -0.5px;">New Inquiry on Your Listing</h2>
    <p style="font-size: 14px; color: #475569; line-height: 1.6; margin: 0 0 16px 0;">
      Hello ${data.agentName}, a prospective client just submitted an inquiry for <strong>${data.propertyTitle}</strong>.
    </p>

    <div class="highlight-box">
      <table width="100%" border="0" cellspacing="0" cellpadding="8" style="font-size: 13px;">
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; width: 130px; padding: 10px 4px;">Listing Reference:</td>
          <td style="padding: 10px 4px;"><span class="ref-code">${data.referenceCode}</span></td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Client Name:</td>
          <td style="font-weight: 800; color: #0f172a; padding: 10px 4px;">${data.clientName}</td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Client Email:</td>
          <td style="padding: 10px 4px;"><a href="mailto:${data.clientEmail}" style="font-weight: 600; color: #0284c7;">${data.clientEmail}</a></td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Client Phone:</td>
          <td style="padding: 10px 4px;">
            ${data.clientPhone ? `<a href="tel:${data.clientPhone}" style="font-weight: 600; color: #0284c7;">${data.clientPhone}</a>` : "Not provided"}
            ${whatsappUrl ? ` &bull; <a href="${whatsappUrl}" target="_blank" style="color: #16a34a; font-weight: 700; text-decoration: none;">WhatsApp Chat &rarr;</a>` : ""}
          </td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Inquiry Type:</td>
          <td style="font-weight: 700; color: #334155; padding: 10px 4px;">${data.inquiryType.replace(/_/g, " ")}</td>
        </tr>
        <tr>
          <td style="color: #64748b; font-weight: 600; vertical-align: top; padding: 10px 4px;">Message:</td>
          <td style="font-style: italic; color: #0f172a; line-height: 1.5; padding: 10px 4px; background-color: #ffffff; border-radius: 8px; border: 1px solid #e2e8f0;">
            "${data.message}"
          </td>
        </tr>
      </table>
    </div>

    <p style="font-size: 12px; color: #64748b; margin: 12px 0 0 0; line-height: 1.5;">
      💡 <strong>Pro Tip:</strong> Responding to buyer inquiries within 15 minutes increases closing conversion by over 70% in the Nigerian property market.
    </p>
  `;

  return baseEmailWrapper({
    title: `New Lead: ${data.clientName} for ${data.referenceCode}`,
    preheader: `${data.clientName} sent an inquiry for ${data.propertyTitle}`,
    contentHtml: content,
    actionButton: {
      text: "Open Lead in CRM",
      url: `${APP_URL}/dashboard/leads/${data.leadId}`,
      color: "#0096f7",
    },
  });
}

export function agentViewingScheduledTemplate(data: {
  agentName: string;
  propertyTitle: string;
  scheduledAt: string;
  clientName: string;
  clientPhone?: string | null;
  meetingType: string;
  meetingLocation?: string | null;
  notes?: string | null;
}) {
  const content = `
    <span class="badge badge-blue">Inspection Confirmed</span>
    <h2 style="font-size: 22px; font-weight: 800; margin: 14px 0 8px 0; color: #0f172a; letter-spacing: -0.5px;">Inspection Appointment Booked</h2>
    <p style="font-size: 14px; color: #475569; line-height: 1.6; margin: 0 0 16px 0;">
      Hello ${data.agentName}, an inspection visit has been confirmed for <strong>${data.propertyTitle}</strong>.
    </p>

    <div class="highlight-box">
      <table width="100%" border="0" cellspacing="0" cellpadding="8" style="font-size: 13px;">
        <tr style="border-bottom: 2px solid #e2e8f0;">
          <td style="color: #64748b; font-weight: 600; width: 140px; padding: 10px 4px;">Inspection Date:</td>
          <td style="font-weight: 800; color: #0284c7; font-size: 16px; padding: 10px 4px;">${data.scheduledAt}</td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Client Name:</td>
          <td style="font-weight: 800; color: #0f172a; padding: 10px 4px;">${data.clientName}</td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Client Phone:</td>
          <td style="padding: 10px 4px;">${data.clientPhone ? `<a href="tel:${data.clientPhone}" style="font-weight: 600; color: #0284c7;">${data.clientPhone}</a>` : "Not provided"}</td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Inspection Format:</td>
          <td style="font-weight: 700; color: #334155; padding: 10px 4px;">${data.meetingType.replace(/_/g, " ")}</td>
        </tr>
        ${data.meetingLocation ? `<tr style="border-bottom: 1px solid #f1f5f9;"><td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Meeting Location:</td><td style="padding: 10px 4px;">${data.meetingLocation}</td></tr>` : ""}
        ${data.notes ? `<tr><td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Notes:</td><td style="font-style: italic; padding: 10px 4px;">${data.notes}</td></tr>` : ""}
      </table>
    </div>
  `;

  return baseEmailWrapper({
    title: `Inspection Scheduled: ${data.propertyTitle}`,
    preheader: `Inspection appointment on ${data.scheduledAt} with ${data.clientName}`,
    contentHtml: content,
    actionButton: {
      text: "View Schedule in Dashboard",
      url: `${APP_URL}/dashboard/visits`,
      color: "#0096f7",
    },
  });
}

export function agentPropertyApprovedTemplate(data: {
  agentName: string;
  propertyTitle: string;
  referenceCode: string;
  slug: string;
}) {
  const content = `
    <span class="badge badge-green">Listing Published &bull; Verified</span>
    <h2 style="font-size: 22px; font-weight: 800; margin: 14px 0 8px 0; color: #0f172a; letter-spacing: -0.5px;">Your Listing is Published!</h2>
    <p style="font-size: 14px; color: #475569; line-height: 1.6; margin: 0 0 16px 0;">
      Congratulations ${data.agentName}! Your property <strong>${data.propertyTitle}</strong> (Ref: <span class="ref-code">${data.referenceCode}</span>) has been verified by the Trust & Safety team and is now live on the public directory.
    </p>

    <div class="highlight-box" style="text-align: center; padding: 24px;">
      <p style="margin: 0 0 8px 0; font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.8px;">
        Public Marketplace URL:
      </p>
      <a href="${APP_URL}/properties/${data.slug}" target="_blank" style="font-weight: 700; font-size: 14px; color: #0284c7; word-break: break-all;">
        ${APP_URL}/properties/${data.slug}
      </a>
    </div>
  `;

  return baseEmailWrapper({
    title: `Listing Approved: ${data.propertyTitle} is now LIVE!`,
    preheader: `Your property listing ${data.referenceCode} has been verified and published`,
    contentHtml: content,
    actionButton: {
      text: "View Public Listing",
      url: `${APP_URL}/properties/${data.slug}`,
      color: "#166534",
    },
  });
}

export function agentPropertyRejectedTemplate(data: {
  agentName: string;
  propertyTitle: string;
  referenceCode: string;
  propertyId: string;
  notes?: string | null;
}) {
  const content = `
    <span class="badge badge-orange">Action Required &bull; Update Listing</span>
    <h2 style="font-size: 22px; font-weight: 800; margin: 14px 0 8px 0; color: #0f172a; letter-spacing: -0.5px;">Listing Review Feedback</h2>
    <p style="font-size: 14px; color: #475569; line-height: 1.6; margin: 0 0 16px 0;">
      Hello ${data.agentName}, your listing <strong>${data.propertyTitle}</strong> (Ref: <span class="ref-code">${data.referenceCode}</span>) requires adjustments before it can be approved and published.
    </p>

    <div class="highlight-box" style="border-left: 4px solid #ea580c; background-color: #fffaf5;">
      <p style="margin: 0 0 8px 0; font-size: 12px; font-weight: 800; color: #c2410c; text-transform: uppercase; letter-spacing: 0.5px;">
        Moderator Review Feedback:
      </p>
      <p style="margin: 0; font-size: 14px; color: #0f172a; line-height: 1.5; font-weight: 500;">
        ${data.notes || "Please check title document clarity or update property photos to meet platform standards."}
      </p>
    </div>

    <p style="font-size: 13px; color: #64748b; line-height: 1.5;">
      You can update your property title details and re-submit for review anytime from your agent portfolio.
    </p>
  `;

  return baseEmailWrapper({
    title: `Action Needed: Review feedback for ${data.referenceCode}`,
    preheader: `Moderator feedback on listing ${data.propertyTitle}`,
    contentHtml: content,
    actionButton: {
      text: "Edit & Re-Submit Property",
      url: `${APP_URL}/dashboard/properties/${data.propertyId}/edit`,
      color: "#ea580c",
    },
  });
}

export function agencyVerificationStatusTemplate(data: {
  ownerName: string;
  agencyName: string;
  status: "VERIFIED" | "REJECTED";
  notes?: string | null;
}) {
  const isVerified = data.status === "VERIFIED";

  const content = `
    <span class="badge ${isVerified ? "badge-green" : "badge-orange"}">
      ${isVerified ? "Accredited Agency" : "Verification Update"}
    </span>
    <h2 style="font-size: 22px; font-weight: 800; margin: 14px 0 8px 0; color: #0f172a; letter-spacing: -0.5px;">
      ${isVerified ? "Agency CAC Verification Approved!" : "Agency Verification Update"}
    </h2>
    <p style="font-size: 14px; color: #475569; line-height: 1.6; margin: 0 0 16px 0;">
      Hello ${data.ownerName}, ${
    isVerified
      ? `<strong>${data.agencyName}</strong> has been officially verified with our corporate registrar check. The verified real estate badge is now active on all your agency listings.`
      : `Your verification request for <strong>${data.agencyName}</strong> could not be approved at this time: ${data.notes || "Please verify your CAC RC document and tax ID."}`
  }
    </p>
  `;

  return baseEmailWrapper({
    title: `Agency Verification: ${data.agencyName} - Nigeria Listing`,
    preheader: `CAC accreditation update for ${data.agencyName}`,
    contentHtml: content,
    actionButton: {
      text: "Open Agency Dashboard",
      url: `${APP_URL}/dashboard/agency`,
      color: isVerified ? "#166534" : "#0096f7",
    },
  });
}

// --------------------------------------------------------------------------
// 3. LANDLORD & PROPERTY OWNER TEMPLATES
// --------------------------------------------------------------------------

export function landlordRentReceivedTemplate(data: {
  landlordName: string;
  propertyName: string;
  unit: string;
  tenantName: string;
  amount: number;
  reference: string;
  paymentDate: string;
}) {
  const content = `
    <span class="badge badge-green">Rent Income Collected</span>
    <h2 style="font-size: 22px; font-weight: 800; margin: 14px 0 8px 0; color: #0f172a; letter-spacing: -0.5px;">Rent Payment Received</h2>
    <p style="font-size: 14px; color: #475569; line-height: 1.6; margin: 0 0 16px 0;">
      Hello ${data.landlordName}, rent payment has been successfully collected for <strong>${data.propertyName} (${data.unit})</strong>.
    </p>

    <div class="highlight-box">
      <table width="100%" border="0" cellspacing="0" cellpadding="8" style="font-size: 13px;">
        <tr style="border-bottom: 2px solid #e2e8f0;">
          <td style="color: #64748b; font-weight: 600; width: 130px; padding: 10px 4px;">Amount Paid:</td>
          <td style="font-weight: 800; color: #15803d; font-size: 18px; padding: 10px 4px;">${formatNaira(data.amount)}</td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Tenant:</td>
          <td style="font-weight: 800; color: #0f172a; padding: 10px 4px;">${data.tenantName}</td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Reference:</td>
          <td style="padding: 10px 4px;"><span class="ref-code">${data.reference}</span></td>
        </tr>
        <tr>
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Date:</td>
          <td style="color: #334155; padding: 10px 4px;">${data.paymentDate}</td>
        </tr>
      </table>
    </div>
  `;

  return baseEmailWrapper({
    title: `Rent Collected: ${formatNaira(data.amount)} - ${data.propertyName}`,
    preheader: `Rent payment received from ${data.tenantName}`,
    contentHtml: content,
    actionButton: {
      text: "View Financial Ledger",
      url: `${APP_URL}/dashboard/payments`,
      color: "#166534",
    },
  });
}

export function landlordMaintenanceAlertTemplate(data: {
  landlordName: string;
  propertyName: string;
  unit: string;
  title: string;
  category: string;
  priority: string;
  reportedBy: string;
  ticketId: string;
}) {
  const isHigh = data.priority === "Critical" || data.priority === "High";

  const content = `
    <span class="badge ${isHigh ? "badge-orange" : "badge-blue"}">${data.priority} Priority Maintenance</span>
    <h2 style="font-size: 22px; font-weight: 800; margin: 14px 0 8px 0; color: #0f172a; letter-spacing: -0.5px;">New Maintenance Ticket Logged</h2>
    <p style="font-size: 14px; color: #475569; line-height: 1.6; margin: 0 0 16px 0;">
      Hello ${data.landlordName}, a maintenance request has been logged for <strong>${data.propertyName} (${data.unit})</strong>.
    </p>

    <div class="highlight-box">
      <table width="100%" border="0" cellspacing="0" cellpadding="8" style="font-size: 13px;">
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; width: 130px; padding: 10px 4px;">Issue:</td>
          <td style="font-weight: 800; color: #0f172a; padding: 10px 4px;">${data.title}</td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Category:</td>
          <td style="font-weight: 600; color: #334155; padding: 10px 4px;">${data.category}</td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Priority:</td>
          <td style="font-weight: 800; color: ${isHigh ? "#c2410c" : "#0284c7"}; padding: 10px 4px;">${data.priority}</td>
        </tr>
        <tr>
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Reported By:</td>
          <td style="padding: 10px 4px;">${data.reportedBy}</td>
        </tr>
      </table>
    </div>
  `;

  return baseEmailWrapper({
    title: `[${data.priority}] Maintenance Alert: ${data.title}`,
    preheader: `New repair ticket logged for ${data.propertyName}`,
    contentHtml: content,
    actionButton: {
      text: "View Maintenance Ticket",
      url: `${APP_URL}/dashboard/maintenance`,
      color: isHigh ? "#ea580c" : "#0096f7",
    },
  });
}

// --------------------------------------------------------------------------
// 4. BUYER & TENANT CUSTOMER TEMPLATES
// --------------------------------------------------------------------------

export function userWelcomeTemplate(data: {
  userName: string;
}) {
  const content = `
    <span class="badge badge-green">Welcome to Nigeria Listing</span>
    <h2 style="font-size: 24px; font-weight: 800; margin: 14px 0 8px 0; color: #0f172a; letter-spacing: -0.5px;">Welcome, ${data.userName}!</h2>
    <p style="font-size: 14px; color: #475569; line-height: 1.6; margin: 0 0 16px 0;">
      Thank you for joining <strong>Nigeria Listing</strong> — Nigeria's premier marketplace for verified real estate with authenticated land titles, luxury duplexes, serviced shortlets, and commercial properties.
    </p>

    <div class="highlight-box">
      <h3 style="font-size: 14px; font-weight: 800; margin: 0 0 10px 0; color: #0f172a;">What you can do next:</h3>
      <ul style="margin: 0; padding-left: 20px; font-size: 13px; color: #475569; line-height: 1.7;">
        <li>Explore verified properties across Lagos, Abuja, Port Harcourt, and Ibadan.</li>
        <li>Inspect interactive Mapbox neighborhood maps and get direct driving directions.</li>
        <li>Connect directly with licensed verified agents via WhatsApp and phone call.</li>
      </ul>
    </div>
  `;

  return baseEmailWrapper({
    title: "Welcome to Nigeria Listing",
    preheader: "Explore authenticated real estate with verified land titles",
    contentHtml: content,
    actionButton: {
      text: "Explore Properties",
      url: `${APP_URL}/properties`,
      color: "#0096f7",
    },
  });
}

export function userInquiryConfirmationTemplate(data: {
  userName: string;
  propertyTitle: string;
  referenceCode: string;
  agentName: string;
  agentPhone?: string | null;
  agentEmail?: string | null;
  slug: string;
}) {
  const content = `
    <span class="badge badge-blue">Inquiry Received</span>
    <h2 style="font-size: 22px; font-weight: 800; margin: 14px 0 8px 0; color: #0f172a; letter-spacing: -0.5px;">We received your inquiry!</h2>
    <p style="font-size: 14px; color: #475569; line-height: 1.6; margin: 0 0 16px 0;">
      Hello ${data.userName}, your message for <strong>${data.propertyTitle}</strong> (Ref: <span class="ref-code">${data.referenceCode}</span>) has been routed directly to the verified listing agent.
    </p>

    <div class="highlight-box">
      <h3 style="font-size: 12px; font-weight: 800; margin: 0 0 8px 0; color: #64748b; text-transform: uppercase; letter-spacing: 0.8px;">
        Assigned Listing Agent:
      </h3>
      <p style="margin: 0 0 6px 0; font-size: 16px; font-weight: 800; color: #0f172a;">
        ${data.agentName}
      </p>
      ${data.agentPhone ? `<p style="margin: 0 0 4px 0; font-size: 13px; color: #475569;">Phone: <a href="tel:${data.agentPhone}" style="color: #0284c7; font-weight: 600;">${data.agentPhone}</a></p>` : ""}
      ${data.agentEmail ? `<p style="margin: 0; font-size: 13px; color: #475569;">Email: <a href="mailto:${data.agentEmail}" style="color: #0284c7; font-weight: 600;">${data.agentEmail}</a></p>` : ""}
    </div>
  `;

  return baseEmailWrapper({
    title: `Inquiry Received: ${data.propertyTitle}`,
    preheader: `Your inquiry for ${data.propertyTitle} has been received by ${data.agentName}`,
    contentHtml: content,
    actionButton: {
      text: "View Listing Details",
      url: `${APP_URL}/properties/${data.slug}`,
      color: "#0096f7",
    },
  });
}

export function userPaymentReceiptTemplate(data: {
  userName: string;
  amount: number;
  reference: string;
  purpose: string;
  paymentDate: string;
  propertyName?: string | null;
}) {
  const content = `
    <span class="badge badge-green">Official Payment Receipt &bull; Nigeria Listing</span>
    <h2 style="font-size: 22px; font-weight: 800; margin: 14px 0 8px 0; color: #0f172a; letter-spacing: -0.5px;">Payment Confirmation & Receipt</h2>
    <p style="font-size: 14px; color: #475569; line-height: 1.6; margin: 0 0 16px 0;">
      Hello ${data.userName}, thank you for your payment. Your transaction has been verified and settled via Paystack on the Nigeria Listing platform.
    </p>

    <div class="highlight-box">
      <table width="100%" border="0" cellspacing="0" cellpadding="8" style="font-size: 13px;">
        <tr style="border-bottom: 2px solid #e2e8f0;">
          <td style="color: #64748b; font-weight: 600; width: 140px; padding: 10px 4px;">Total Paid:</td>
          <td style="font-weight: 800; color: #15803d; font-size: 20px; padding: 10px 4px;">${formatNaira(data.amount)}</td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Payment Status:</td>
          <td style="font-weight: 700; color: #166534; padding: 10px 4px;">
            <span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: #22c55e; margin-right: 6px;"></span>
            Successful & Verified
          </td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Paystack Ref:</td>
          <td style="padding: 10px 4px;"><span class="ref-code">${data.reference}</span></td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Transaction Purpose:</td>
          <td style="font-weight: 700; color: #0f172a; padding: 10px 4px;">${data.purpose}</td>
        </tr>
        ${data.propertyName ? `<tr style="border-bottom: 1px solid #f1f5f9;"><td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Property:</td><td style="font-weight: 600; color: #0f172a; padding: 10px 4px;">${data.propertyName}</td></tr>` : ""}
        <tr>
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Date & Time:</td>
          <td style="color: #334155; padding: 10px 4px;">${data.paymentDate}</td>
        </tr>
      </table>
    </div>

    <p style="font-size: 12px; color: #94a3b8; line-height: 1.5; margin: 12px 0 0 0;">
      Note: This is your official Nigeria Listing platform transaction receipt. Please keep this email for your financial and accounting records.
    </p>
  `;

  return baseEmailWrapper({
    title: `Payment Receipt: ${formatNaira(data.amount)} (Ref: ${data.reference})`,
    preheader: `Official receipt for payment of ${formatNaira(data.amount)}`,
    contentHtml: content,
    actionButton: {
      text: "View Payment in Dashboard",
      url: `${APP_URL}/dashboard/billing`,
      color: "#166534",
    },
  });
}

export function agencyInvitationTemplate(data: {
  agencyName: string;
  inviterName: string;
  roleTitle: string;
  recipientEmail: string;
  inviteUrl?: string;
}) {
  const content = `
    <span class="badge badge-blue">Agency Team Invitation</span>
    <h2 style="font-size: 22px; font-weight: 800; margin: 14px 0 8px 0; color: #0f172a; letter-spacing: -0.5px;">You've Been Invited to Join ${data.agencyName}</h2>
    <p style="font-size: 14px; color: #475569; line-height: 1.6; margin: 0 0 16px 0;">
      Hello! <strong>${data.inviterName}</strong> has invited you (<span style="color: #0f172a; font-weight: 600;">${data.recipientEmail}</span>) to join <strong>${data.agencyName}</strong> on Nigeria Listing as a <strong>${data.roleTitle}</strong>.
    </p>

    <div class="highlight-box">
      <table width="100%" border="0" cellspacing="0" cellpadding="8" style="font-size: 13px;">
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; width: 140px; padding: 10px 4px;">Agency Name:</td>
          <td style="font-weight: 800; color: #0f172a; padding: 10px 4px;">${data.agencyName}</td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Invited By:</td>
          <td style="font-weight: 600; color: #334155; padding: 10px 4px;">${data.inviterName}</td>
        </tr>
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Assigned Role:</td>
          <td style="font-weight: 800; color: #0284c7; padding: 10px 4px;">${data.roleTitle}</td>
        </tr>
        <tr>
          <td style="color: #64748b; font-weight: 600; padding: 10px 4px;">Platform Access:</td>
          <td style="font-weight: 600; color: #166534; padding: 10px 4px;">Corporate Agency Workspace & Co-listing Hub</td>
        </tr>
      </table>
    </div>

    <p style="font-size: 13px; color: #64748b; line-height: 1.6; margin: 12px 0 0 0;">
      Click the button below to accept your invitation, sign into your corporate agency workspace, and start listing verified properties with shared agency branding.
    </p>
  `;

  return baseEmailWrapper({
    title: `Invitation: Join ${data.agencyName} on Nigeria Listing`,
    preheader: `${data.inviterName} invited you to join ${data.agencyName}`,
    contentHtml: content,
    actionButton: {
      text: "Accept Invitation & Access Workspace",
      url: data.inviteUrl || `${APP_URL}/dashboard/agency`,
      color: "#0096f7",
    },
  });
}
