/**
 * Base HTML Email Layout
 * @ai-summary Main email wrapper with MotoVaultPro branding
 * @ai-context Uses table-based layout for email client compatibility
 */

import { EMAIL_STYLES } from './email-styles';

// External logo URL - hosted on GitHub for reliability
const LOGO_URL = 'https://raw.githubusercontent.com/ericgullickson/images/c58b0e4773e8395b532f97f6ab529e38ea4dc8be/motovaultpro-auth0-small.png';

/**
 * Renders the complete HTML email layout with branding
 * @param content - The rendered email body content (HTML)
 * @returns Complete HTML email string with DOCTYPE and layout
 */
export function renderEmailLayout(content: string): string {
  return `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="x-apple-disable-message-reformatting" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>MotoVaultPro</title>
  <!--[if mso]>
  <style type="text/css">
    table { border-collapse: collapse; }
    .outlook-fix { font-family: Arial, sans-serif; }
  </style>
  <![endif]-->
</head>
<body style="margin: 0; padding: 0; background-color: #f8f9fa;">
  <!-- Wrapper table for full width background -->
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="${EMAIL_STYLES.wrapper}">
    <tr>
      <td align="center" style="${EMAIL_STYLES.cell}">
        <!-- Main container table (max-width 600px) -->
        <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="${EMAIL_STYLES.container}" class="outlook-fix">

          <!-- Header with logo -->
          <tr>
            <td style="${EMAIL_STYLES.header}">
              <img src="${LOGO_URL}" alt="MotoVaultPro" style="${EMAIL_STYLES.logo}" width="280" />
            </td>
          </tr>

          <!-- Content area -->
          <tr>
            <td style="${EMAIL_STYLES.content}">
              ${content}
            </td>
          </tr>

          <!-- Footer -->
          <tr>
            <td style="${EMAIL_STYLES.footer}">
              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                <tr>
                  <td align="center">
                    <p style="${EMAIL_STYLES.footerText}">
                      <strong>Professional Vehicle Management &amp; Maintenance Tracking</strong>
                    </p>
                    <p style="${EMAIL_STYLES.footerText}">
                      <a href="https://motovaultpro.com" style="${EMAIL_STYLES.footerLink}" target="_blank">Login to MotoVaultPro</a>
                    </p>
                    <p style="${EMAIL_STYLES.footerText}">
                      <a href="{{unsubscribeUrl}}" style="${EMAIL_STYLES.footerLink}" target="_blank">Manage Email Preferences</a>
                    </p>
                    <p style="${EMAIL_STYLES.copyright}">
                      &copy; {new Date().getFullYear()} MotoVaultPro. All rights reserved.
                    </p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>

        </table>
      </td>
    </tr>
  </table>
</body>
</html>`;
}
