import { 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 ContactFormSalesAlertData {
  fullName: string;
  email: string;
  interestType?: string | null;
  comments?: string | null;
  crmDeepLink?: string;
  portName?: string;
}

// Mirrors the interest-registration alert (inquiry-sales-notification.tsx):
// friendly intro, `**Label:** value` detail lines, inline CRM follow-up link,
// and a plain-text part — so contact-form alerts read identically to interest ones.
function SalesAlertBody({
  portName,
  data,
  accent,
}: {
  portName: string;
  data: ContactFormSalesAlertData;
  accent: string;
}) {
  const detailStyle = { margin: '0 0 0', fontSize: '16px' } as const;
  const comments = data.comments?.trim() ? data.comments : '(none provided)';
  return (
    <>
      <Text style={{ marginBottom: '10px', fontSize: '16px' }}>Hello,</Text>
      <Text style={{ marginBottom: '10px', fontSize: '16px' }}>
        A new contact-form enquiry has come in for <strong>{portName}</strong>. {data.fullName} got
        in touch via the website contact page - full details below:
      </Text>
      <Text style={detailStyle}>
        <strong>Name:</strong> {data.fullName}
      </Text>
      <Text style={detailStyle}>
        <strong>Email:</strong> {data.email}
      </Text>
      {data.interestType ? (
        <Text style={detailStyle}>
          <strong>Interest:</strong> {data.interestType}
        </Text>
      ) : null}
      <Text style={{ margin: '0 0 16px 0', fontSize: '16px' }}>
        <strong>Comments:</strong> {comments}
      </Text>
      {data.crmDeepLink ? (
        <Text style={{ marginBottom: '10px', fontSize: '16px' }}>
          Open the{' '}
          <Link
            href={safeUrl(data.crmDeepLink)}
            style={{ color: accent, textDecoration: 'underline' }}
          >
            {portName} CRM
          </Link>{' '}
          to follow up.
        </Text>
      ) : null}
      <Text style={{ fontSize: '16px' }}>- {portName} CRM</Text>
    </>
  );
}

export async function contactFormSalesAlert(
  data: ContactFormSalesAlertData,
  overrides?: RenderOpts,
) {
  const portName = data.portName ?? 'Port Nimara';
  const subject = overrides?.subject?.trim()
    ? overrides.subject
    : `New contact form submission - ${data.fullName}`;
  const accent = brandingPrimaryColor(overrides?.branding);
  const body = await render(<SalesAlertBody portName={portName} data={data} accent={accent} />, {
    pretty: false,
  });

  const comments = data.comments?.trim() ? data.comments : '(none provided)';
  const text = [
    'Hello,',
    '',
    `A new contact-form enquiry has come in for ${portName}. ${data.fullName} got in touch via the website contact page - full details below:`,
    '',
    `Name: ${data.fullName}`,
    `Email: ${data.email}`,
    ...(data.interestType ? [`Interest: ${data.interestType}`] : []),
    `Comments: ${comments}`,
    '',
    ...(data.crmDeepLink
      ? [`Open the ${portName} CRM (${data.crmDeepLink}) to follow up.`, '']
      : []),
    `- ${portName} CRM`,
  ].join('\n');

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