const LOGO_URL =
  'https://s3.portnimara.com/images/Port%20Nimara%20New%20Logo-Circular%20Frame_250px.png';
const BACKGROUND_URL = 'https://s3.portnimara.com/images/Overhead_1_blur.png';

function shell(opts: { title: string; body: string }): string {
  return `<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>${opts.title}</title>
  <style type="text/css">
    table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
    img { border: 0; display: block; }
    p { margin: 0; padding: 0; }
  </style>
</head>
<body style="margin:0; padding:0; background-color:#f2f2f2;">
  <table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" style="background-image: url('${BACKGROUND_URL}'); background-size: cover; background-position: center; background-color:#f2f2f2;">
    <tr>
      <td align="center" style="padding:30px 16px;">
        <table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" style="width:100%; max-width:600px; background-color:#ffffff; border-radius:8px; overflow:hidden; box-shadow:0 2px 4px rgba(0,0,0,0.1);">
          <tr>
            <td style="padding:20px; font-family: Arial, sans-serif; color:#333333; word-break:break-word;">
              <center>
                <img src="${LOGO_URL}" alt="Port Nimara Logo" width="100" style="margin-bottom:20px;" />
              </center>
              ${opts.body}
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>`;
}

export interface ResidentialClientConfirmationData {
  firstName: string;
  contactEmail: string;
}

export function residentialClientConfirmation(data: ResidentialClientConfirmationData) {
  const subject = 'Thank You for Your Interest — Port Nimara Residences';
  const body = `
              <p style="margin-bottom:10px; font-size:18px; font-weight:bold; color:#007bff;">
                Welcome to Port Nimara
              </p>
              <p style="margin-bottom:10px; font-size:16px; line-height:1.5;">
                Dear ${escapeHtml(data.firstName)},
              </p>
              <p style="margin-bottom:20px; font-size:16px; line-height:1.5;">
                Thank you for expressing interest in Port Nimara residences. Our residential
                sales team has received your inquiry and will reach out to you shortly with
                more information.
              </p>
              <p style="margin-bottom:10px; font-size:16px; line-height:1.5;">
                If you have any questions in the meantime, please reach us at
                <a href="mailto:${escapeHtml(data.contactEmail)}" style="color:#007bff; text-decoration:underline;">${escapeHtml(data.contactEmail)}</a>.
              </p>
              <p style="font-size:16px; margin-top:30px;">
                Best regards,<br />
                <strong>The Port Nimara Residential Team</strong>
              </p>`;
  return { subject, html: shell({ title: subject, body }) };
}

export interface ResidentialSalesAlertData {
  fullName: string;
  email: string;
  phone: string;
  placeOfResidence?: string;
  preferredContactMethod?: 'email' | 'phone';
  notes?: string;
  preferences?: string;
  crmDeepLink?: string;
}

export function residentialSalesAlert(data: ResidentialSalesAlertData) {
  const subject = `New Residential Inquiry — ${data.fullName}`;
  const body = `
              <p style="margin-bottom:10px; font-size:18px; font-weight:bold; color:#007bff;">
                New residential inquiry
              </p>
              <table role="presentation" width="100%" cellpadding="6" cellspacing="0" style="font-size:14px; line-height:1.4; margin-bottom:20px;">
                <tr><td style="color:#666; width:140px;">Name</td><td>${escapeHtml(data.fullName)}</td></tr>
                <tr><td style="color:#666;">Email</td><td>${escapeHtml(data.email)}</td></tr>
                <tr><td style="color:#666;">Phone</td><td>${escapeHtml(data.phone)}</td></tr>
                ${data.placeOfResidence ? `<tr><td style="color:#666;">Residence</td><td>${escapeHtml(data.placeOfResidence)}</td></tr>` : ''}
                ${data.preferredContactMethod ? `<tr><td style="color:#666;">Prefers</td><td>${escapeHtml(data.preferredContactMethod)}</td></tr>` : ''}
                ${data.preferences ? `<tr><td style="color:#666;">Preferences</td><td>${escapeHtml(data.preferences)}</td></tr>` : ''}
                ${data.notes ? `<tr><td style="color:#666;">Notes</td><td>${escapeHtml(data.notes)}</td></tr>` : ''}
              </table>
              ${data.crmDeepLink ? `<p style="text-align:center; margin:24px 0;"><a href="${data.crmDeepLink}" style="display:inline-block; background-color:#007bff; color:#ffffff; text-decoration:none; padding:12px 28px; border-radius:5px; font-weight:bold;">Open in CRM</a></p>` : ''}
              <p style="font-size:14px; color:#666;">— Port Nimara CRM</p>`;
  return { subject, html: shell({ title: subject, body }) };
}

function escapeHtml(str: string): string {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}
