/**
 * Form 16 Email Template (generic wrapper for Form 16 notification types)
 *
 * Used by notification.service.ts when payload.type starts with `form16_`.
 * Payload body comes from Form 16 admin-config templates (plain text with placeholders already substituted).
 */

import { Form16EmailData } from './types';
import { getEmailFooter, getEmailHeader, getEmailContainerStyles, getResponsiveStyles, HeaderStyles } from './helpers';
import { getBrandedHeader } from './branding.config';

export function getForm16Email(data: Form16EmailData): string {
  const headerStyle =
    data.variant === 'success'
      ? HeaderStyles.success
      : data.variant === 'warning'
        ? HeaderStyles.warning
        : data.variant === 'error'
          ? HeaderStyles.error
          : HeaderStyles.info;

  const requestBlock = data.requestId
    ? `
      <table role="presentation" style="width: 100%; border-collapse: collapse; background-color: #f8f9fa; border-radius: 6px; margin-bottom: 26px;" cellpadding="0" cellspacing="0">
        <tr>
          <td style="padding: 18px 20px;">
            <table role="presentation" style="width: 100%; border-collapse: collapse;" cellpadding="0" cellspacing="0">
              <tr>
                <td style="padding: 4px 0; color: #666666; font-size: 13px; width: 110px;"><strong>Request ID:</strong></td>
                <td style="padding: 4px 0; color: #333333; font-size: 13px;">${data.requestId}</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    `
    : '';

  const ctaBlock = data.viewDetailsLink
    ? `
      <table role="presentation" style="width: 100%; border-collapse: collapse; margin: 10px 0 6px;" cellpadding="0" cellspacing="0">
        <tr>
          <td style="text-align: center;">
            <a href="${data.viewDetailsLink}" class="cta-button" style="display: inline-block; padding: 14px 34px; background-color: #1a1a1a; color: #ffffff; text-decoration: none; text-align: center; border-radius: 6px; font-size: 15px; font-weight: 600; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); min-width: 200px;">
              View Request Details
            </a>
          </td>
        </tr>
      </table>
    `
    : '';

  return `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="format-detection" content="telephone=no">
  <title>${data.title}</title>
  ${getResponsiveStyles()}
</head>
<body style="margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; background-color: #f4f4f4;">
  <table role="presentation" style="width: 100%; border-collapse: collapse; background-color: #f4f4f4;" cellpadding="0" cellspacing="0">
    <tr>
      <td style="padding: 40px 0;">
        <table role="presentation" class="email-container" style="${getEmailContainerStyles()}" cellpadding="0" cellspacing="0">
          ${getEmailHeader(getBrandedHeader({ title: data.title, ...headerStyle }))}

          <tr>
            <td class="email-content" style="padding: 40px 30px;">
              <p style="margin: 0 0 18px; color: #333333; font-size: 16px; line-height: 1.6;">
                Dear <strong style="color: #667eea;">${data.recipientName}</strong>,
              </p>

              ${requestBlock}

              <div style="padding: 18px 18px; background-color: #ffffff; border: 1px solid #e9ecef; border-radius: 6px; margin-bottom: 24px;">
                <div style="margin: 0; color: #333333; font-size: 14px; line-height: 1.8;">
                  ${data.messageHtml}
                </div>
              </div>

              ${ctaBlock}

              <p style="margin: 18px 0 0; color: #666666; font-size: 13px; line-height: 1.6; text-align: center;">
                Thank you for using the ${data.companyName} Workflow System.
              </p>
            </td>
          </tr>

          ${getEmailFooter(data.companyName)}
        </table>
      </td>
    </tr>
  </table>
</body>
</html>
  `;
}

