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

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

interface ActivationData {
  portName: string;
  link: string;
  ttlHours: number;
  recipientName?: string;
}

interface ResetData {
  portName: string;
  link: string;
  ttlMinutes: number;
  recipientName?: string;
}

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

// ─── React-email body components ──────────────────────────────────────────────

// react-email's `render()` auto-escapes string interpolation, so we don't
// need our hand-rolled escapeHtml() on these bodies. Inline styles use
// camelCase per CSSProperties - react-email serialises them to
// email-client-safe inline `style="..."` attributes on output.

function ActivationBody({
  portName,
  link,
  ttlHours,
  recipientName,
  accent,
}: ActivationData & { accent: string }) {
  const greeting = recipientName ? `Dear ${recipientName},` : 'Welcome aboard,';

  return (
    <>
      <Text style={emailStyle.title(accent)}>Welcome to {portName}</Text>
      <Text style={emailStyle.paragraph}>{greeting}</Text>
      <Text style={emailStyle.paragraph}>
        It&apos;s our pleasure to invite you to the {portName} client portal - your private space to
        review your berth, manage signed documents, and stay in touch with your sales liaison. The
        button below will let you set a password and activate your account at your convenience.
        Please use it within {ttlHours} hours.
      </Text>
      <Text style={emailStyle.signoff}>
        With warm regards,
        <br />
        <strong>The {portName} Team</strong>
      </Text>
      <div style={emailStyle.buttonRow}>
        <Button href={safeUrl(link)} style={emailStyle.button(accent)}>
          Activate account
        </Button>
      </div>
      <Hr style={emailStyle.divider} />
      <Text style={emailStyle.finePrint}>
        If the button doesn&apos;t work, paste this link into your browser:
        <br />
        <Link
          href={safeUrl(link)}
          style={{ color: accent, textDecoration: 'underline', wordBreak: 'break-all' }}
        >
          {link}
        </Link>
      </Text>
    </>
  );
}

function ResetBody({
  portName,
  link,
  ttlMinutes,
  recipientName,
  accent,
}: ResetData & { accent: string }) {
  const greeting = recipientName ? `Dear ${recipientName},` : 'Hello,';

  return (
    <>
      <Text style={emailStyle.title(accent)}>Reset your password</Text>
      <Text style={emailStyle.paragraph}>{greeting}</Text>
      <Text style={emailStyle.paragraph}>
        We received a request to reset the password on your {portName} client portal account. Use
        the button below to choose a new one - the link will remain valid for {ttlMinutes} minutes.
      </Text>
      <Text style={emailStyle.signoff}>
        With warm regards,
        <br />
        <strong>The {portName} Team</strong>
      </Text>
      <div style={emailStyle.buttonRow}>
        <Button href={safeUrl(link)} style={emailStyle.button(accent)}>
          Reset password
        </Button>
      </div>
      <Hr style={emailStyle.divider} />
      <Text style={emailStyle.finePrint}>
        If you didn&apos;t request this, you may safely ignore this message - your existing password
        will continue to work.
      </Text>
    </>
  );
}

// ─── Public surface ───────────────────────────────────────────────────────────

export async function activationEmail(
  data: ActivationData,
  overrides?: RenderOpts,
): Promise<{ subject: string; html: string; text: string }> {
  const subject = overrides?.subject
    ? overrides.subject
        .replace(/\{\{portName\}\}/g, data.portName)
        .replace(/\{\{recipientName\}\}/g, data.recipientName ?? '')
        .replace(/\{\{ttlHours\}\}/g, String(data.ttlHours))
    : `Welcome to ${data.portName} - activate your client portal`;
  const accent = brandingPrimaryColor(overrides?.branding);

  const body = await render(<ActivationBody {...data} accent={accent} />, {
    pretty: false,
  });

  const text = [
    `Welcome to ${data.portName}`,
    '',
    `It's our pleasure to invite you to the ${data.portName} client portal - your private space to review your berth, manage signed documents, and stay in touch with your sales liaison.`,
    `Activate your account by visiting: ${data.link}`,
    '',
    `Please use the link within ${data.ttlHours} hours.`,
    '',
    `With warm regards,`,
    `The ${data.portName} Team`,
  ].join('\n');

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

export async function resetEmail(
  data: ResetData,
  overrides?: RenderOpts,
): Promise<{ subject: string; html: string; text: string }> {
  const subject = overrides?.subject
    ? overrides.subject
        .replace(/\{\{portName\}\}/g, data.portName)
        .replace(/\{\{recipientName\}\}/g, data.recipientName ?? '')
        .replace(/\{\{ttlMinutes\}\}/g, String(data.ttlMinutes))
    : `Reset your ${data.portName} portal password`;
  const accent = brandingPrimaryColor(overrides?.branding);

  const body = await render(<ResetBody {...data} accent={accent} />, {
    pretty: false,
  });

  const text = [
    `Reset your ${data.portName} portal password`,
    '',
    `Use the following link to choose a new password - it will remain valid for ${data.ttlMinutes} minutes:`,
    data.link,
    '',
    `If you didn't request this, you may safely ignore this message - your existing password will continue to work.`,
    '',
    `With warm regards,`,
    `The ${data.portName} Team`,
  ].join('\n');

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