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

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

export interface InquirySalesNotificationData {
  fullName: string;
  email: string;
  phone: string;
  mooringNumber: string | null;
  crmUrl: string;
  portName?: string;
}

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

function SalesNotificationBody({
  fullName,
  email,
  phone,
  mooringDisplay,
  crmUrl,
  portName,
  accent,
}: {
  fullName: string;
  email: string;
  phone: string;
  mooringDisplay: string;
  crmUrl: string;
  portName: string;
  accent: string;
}) {
  const detailStyle = { margin: '0 0 0', fontSize: '16px' } as const;
  return (
    <>
      <Text style={{ marginBottom: '10px', fontSize: '16px' }}>Hello,</Text>
      <Text style={{ marginBottom: '10px', fontSize: '16px' }}>
        A new enquiry has come in for <strong>{portName}</strong>. {fullName} has asked us to be in
        touch - full details below:
      </Text>
      <Text style={detailStyle}>
        <strong>Name:</strong> {fullName}
      </Text>
      <Text style={detailStyle}>
        <strong>Email:</strong> {email}
      </Text>
      <Text style={detailStyle}>
        <strong>Telephone:</strong> {phone}
      </Text>
      <Text style={{ margin: '0 0 16px 0', fontSize: '16px' }}>
        <strong>Berths Selected:</strong> {mooringDisplay}
      </Text>
      <Text style={{ marginBottom: '10px', fontSize: '16px' }}>
        Open the{' '}
        <Link href={safeUrl(crmUrl)} style={{ color: accent, textDecoration: 'underline' }}>
          {portName} CRM
        </Link>{' '}
        to follow up.
      </Text>
      <Text style={{ fontSize: '16px' }}>- {portName} CRM</Text>
    </>
  );
}

export async function inquirySalesNotification(
  data: InquirySalesNotificationData,
  overrides?: RenderOpts,
) {
  const portName = data.portName ?? 'Port Nimara';
  const mooringDisplay = data.mooringNumber || 'None';
  const subject = overrides?.subject?.trim()
    ? overrides.subject
    : `New enquiry - ${portName}${data.mooringNumber ? ` (Berth ${data.mooringNumber})` : ''}`;
  const accent = brandingPrimaryColor(overrides?.branding);

  const body = await render(
    <SalesNotificationBody
      fullName={data.fullName}
      email={data.email}
      phone={data.phone}
      mooringDisplay={mooringDisplay}
      crmUrl={data.crmUrl}
      portName={portName}
      accent={accent}
    />,
    { pretty: false },
  );

  const text = [
    'Hello,',
    '',
    `A new enquiry has come in for ${portName}. ${data.fullName} has asked us to be in touch - full details below:`,
    '',
    `Name: ${data.fullName}`,
    `Email: ${data.email}`,
    `Telephone: ${data.phone}`,
    `Berths Selected: ${mooringDisplay}`,
    '',
    `Open the ${portName} CRM (${data.crmUrl}) to follow up.`,
    '',
    `- ${portName} CRM`,
  ].join('\n');

  return {
    subject,
    html: renderShell({ title: subject, body, branding: overrides?.branding }),
    text,
  };
}
