import { Button, Link, Text, render } from '@react-email/components';
import * as React from 'react';

import { brandingPrimaryColor, renderShell, safeUrl, type BrandingShell } from '@/lib/email/shell';

interface RenderOpts {
  branding?: BrandingShell | null;
  subject?: string | null;
}

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

function ClientConfirmationBody({
  portName,
  firstName,
  contactEmail,
  accent,
}: {
  portName: string;
  firstName: string;
  contactEmail: string;
  accent: string;
}) {
  return (
    <>
      <Text style={{ marginBottom: '10px', fontSize: '18px', fontWeight: 'bold', color: accent }}>
        Welcome to {portName}
      </Text>
      <Text style={{ marginBottom: '10px', fontSize: '16px', lineHeight: '1.5' }}>
        Dear {firstName},
      </Text>
      <Text style={{ marginBottom: '20px', fontSize: '16px', lineHeight: '1.5' }}>
        Thank you for expressing interest in {portName} residences. Our residential sales team has
        received your inquiry and will reach out to you shortly with more information.
      </Text>
      <Text style={{ marginBottom: '10px', fontSize: '16px', lineHeight: '1.5' }}>
        If you have any questions in the meantime, please reach us at{' '}
        <Link
          href={safeUrl(`mailto:${contactEmail}`)}
          style={{ color: accent, textDecoration: 'underline' }}
        >
          {contactEmail}
        </Link>
        .
      </Text>
      <Text style={{ fontSize: '16px', marginTop: '30px' }}>
        Best regards,
        <br />
        <strong>The {portName} Residential Team</strong>
      </Text>
    </>
  );
}

export async function residentialClientConfirmation(
  data: ResidentialClientConfirmationData,
  overrides?: RenderOpts,
) {
  const portName = data.portName ?? 'Port Nimara';
  const subject = overrides?.subject?.trim()
    ? overrides.subject
    : `Thank You for Your Interest - ${portName} Residences`;
  const accent = brandingPrimaryColor(overrides?.branding);
  const body = await render(
    <ClientConfirmationBody
      portName={portName}
      firstName={data.firstName}
      contactEmail={data.contactEmail}
      accent={accent}
    />,
    { pretty: false },
  );
  return {
    subject,
    html: renderShell({ title: subject, body, branding: overrides?.branding }),
  };
}

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

function SalesAlertBody({
  portName,
  data,
  accent,
}: {
  portName: string;
  data: ResidentialSalesAlertData;
  accent: string;
}) {
  const labelCell = { color: '#666', width: '140px' } as const;
  return (
    <>
      <Text style={{ marginBottom: '10px', fontSize: '18px', fontWeight: 'bold', color: accent }}>
        New residential inquiry
      </Text>
      <table
        role="presentation"
        width="100%"
        cellPadding={6}
        cellSpacing={0}
        style={{ fontSize: '14px', lineHeight: '1.4', marginBottom: '20px' }}
      >
        <tbody>
          <tr>
            <td style={labelCell}>Name</td>
            <td>{data.fullName}</td>
          </tr>
          <tr>
            <td style={labelCell}>Email</td>
            <td>{data.email}</td>
          </tr>
          <tr>
            <td style={labelCell}>Phone</td>
            <td>{data.phone}</td>
          </tr>
          {data.placeOfResidence ? (
            <tr>
              <td style={labelCell}>Residence</td>
              <td>{data.placeOfResidence}</td>
            </tr>
          ) : null}
          {data.preferredContactMethod ? (
            <tr>
              <td style={labelCell}>Prefers</td>
              <td>{data.preferredContactMethod}</td>
            </tr>
          ) : null}
          {data.preferences ? (
            <tr>
              <td style={labelCell}>Preferences</td>
              <td>{data.preferences}</td>
            </tr>
          ) : null}
          {data.notes ? (
            <tr>
              <td style={labelCell}>Notes</td>
              <td>{data.notes}</td>
            </tr>
          ) : null}
        </tbody>
      </table>
      {data.crmDeepLink ? (
        <div style={{ textAlign: 'center', margin: '24px 0' }}>
          <Button
            href={safeUrl(data.crmDeepLink)}
            style={{
              display: 'inline-block',
              backgroundColor: accent,
              color: '#ffffff',
              textDecoration: 'none',
              padding: '12px 28px',
              borderRadius: '5px',
              fontWeight: 'bold',
            }}
          >
            Open in CRM
          </Button>
        </div>
      ) : null}
      <Text style={{ fontSize: '14px', color: '#666' }}>- {portName} CRM</Text>
    </>
  );
}

export async function residentialSalesAlert(
  data: ResidentialSalesAlertData,
  overrides?: RenderOpts,
) {
  const portName = data.portName ?? 'Port Nimara';
  const subject = overrides?.subject?.trim()
    ? overrides.subject
    : `New Residential Inquiry - ${data.fullName}`;
  const accent = brandingPrimaryColor(overrides?.branding);
  const body = await render(<SalesAlertBody portName={portName} data={data} accent={accent} />, {
    pretty: false,
  });
  return {
    subject,
    html: renderShell({ title: subject, body, branding: overrides?.branding }),
  };
}
