/**
 * Email templates for transactional emails
 * All templates include both HTML and plain text versions for maximum compatibility
 */

export interface VerificationEmailProps {
  email: string;
  url: string;
  expires: Date;
}

export interface PasswordResetEmailProps {
  email: string;
  url: string;
  expires: Date;
}

export interface WelcomeEmailProps {
  name: string;
  dashboardUrl: string;
}

export interface TeamInviteEmailProps {
  inviterName: string;
  teamName: string;
  role: string;
  inviteUrl: string;
}

export interface PaymentFailedEmailProps {
  name: string;
  billingUrl: string;
}

export interface SubscriptionConfirmedEmailProps {
  name: string;
  planName: string;
  features: string[];
  dashboardUrl: string;
}

export interface SpendingAlertEmailProps {
  teamName: string;
  currentSpend: number;
  budget: number;
  percentage: number;
  usageUrl: string;
}

export interface DeviceOfflineEmailProps {
  name: string;
  deviceName: string;
  lastSeen: Date;
  dashboardUrl: string;
}

export interface BudgetAlertEmailProps {
  name: string;
  currentSpend: number;
  budgetLimit: number;
  percentUsed: number;
  dashboardUrl: string;
}

export interface MonthlySummaryEmailProps {
  name: string;
  month: string;
  totalMessages: number;
  totalCost: number;
  topModel: string;
  topModelCost: number;
  savingsUsd: number;
  savingsPct: number;
  dashboardUrl: string;
}

/**
 * Email verification template
 * Used when users register a new account
 */
export function verificationEmailTemplate({ url, expires }: VerificationEmailProps) {
  const expiresIn = Math.round((expires.getTime() - Date.now()) / (1000 * 60 * 60)); // hours

  const html = `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Verify Your Email - LLMHosts</title>
      </head>
      <body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f9fafb;">
        <table role="presentation" style="width: 100%; border-collapse: collapse;">
          <tr>
            <td align="center" style="padding: 40px 0;">
              <table role="presentation" style="width: 600px; border-collapse: collapse; background-color: #ffffff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                <!-- Header -->
                <tr>
                  <td style="padding: 40px 40px 20px; text-align: center; background: linear-gradient(to right, #6366f1, #8b5cf6); border-radius: 8px 8px 0 0;">
                    <h1 style="margin: 0; color: #ffffff; font-size: 28px; font-weight: 700;">LLMHosts</h1>
                    <p style="margin: 8px 0 0; color: #e0e7ff; font-size: 14px;">Your hardware. Real AI infrastructure.</p>
                  </td>
                </tr>

                <!-- Content -->
                <tr>
                  <td style="padding: 40px;">
                    <h2 style="margin: 0 0 16px; color: #111827; font-size: 24px; font-weight: 600;">Verify Your Email Address</h2>
                    <p style="margin: 0 0 24px; color: #6b7280; font-size: 16px; line-height: 24px;">
                      Thanks for signing up for LLMHosts! Please click the button below to verify your email address and activate your account.
                    </p>

                    <!-- Button -->
                    <table role="presentation" style="margin: 32px 0;">
                      <tr>
                        <td style="border-radius: 6px; background: linear-gradient(to right, #6366f1, #8b5cf6);">
                          <a href="${url}" style="display: inline-block; padding: 16px 32px; color: #ffffff; text-decoration: none; font-weight: 600; font-size: 16px;">
                            Verify Email Address
                          </a>
                        </td>
                      </tr>
                    </table>

                    <p style="margin: 24px 0 0; color: #6b7280; font-size: 14px; line-height: 20px;">
                      Or copy and paste this link into your browser:
                    </p>
                    <p style="margin: 8px 0 0; color: #6366f1; font-size: 14px; word-break: break-all;">
                      ${url}
                    </p>

                    <p style="margin: 32px 0 0; padding-top: 32px; border-top: 1px solid #e5e7eb; color: #9ca3af; font-size: 14px; line-height: 20px;">
                      This verification link will expire in ${expiresIn} hours. If you didn't create an account with LLMHosts, you can safely ignore this email.
                    </p>
                  </td>
                </tr>

                <!-- Footer -->
                <tr>
                  <td style="padding: 32px 40px; background-color: #f9fafb; border-radius: 0 0 8px 8px; text-align: center;">
                    <p style="margin: 0; color: #9ca3af; font-size: 12px;">
                      © ${new Date().getFullYear()} LLMHosts. All rights reserved.
                    </p>
                    <p style="margin: 8px 0 0; color: #9ca3af; font-size: 12px;">
                      Turn your home GPU into production AI infrastructure
                    </p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </body>
    </html>
  `;

  const text = `
LLMHosts - Verify Your Email Address

Thanks for signing up for LLMHosts!

Please verify your email address by clicking the link below:
${url}

This verification link will expire in ${expiresIn} hours.

If you didn't create an account with LLMHosts, you can safely ignore this email.

---
© ${new Date().getFullYear()} LLMHosts
Turn your home GPU into production AI infrastructure
`;

  return { html, text, subject: 'Verify your email address - LLMHosts' };
}

/**
 * Password reset template
 * Used when users request a password reset
 */
export function passwordResetEmailTemplate({ email, url, expires }: PasswordResetEmailProps) {
  const expiresIn = Math.round((expires.getTime() - Date.now()) / (1000 * 60)); // minutes

  const html = `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Reset Your Password - LLMHosts</title>
      </head>
      <body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f9fafb;">
        <table role="presentation" style="width: 100%; border-collapse: collapse;">
          <tr>
            <td align="center" style="padding: 40px 0;">
              <table role="presentation" style="width: 600px; border-collapse: collapse; background-color: #ffffff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                <!-- Header -->
                <tr>
                  <td style="padding: 40px 40px 20px; text-align: center; background: linear-gradient(to right, #6366f1, #8b5cf6); border-radius: 8px 8px 0 0;">
                    <h1 style="margin: 0; color: #ffffff; font-size: 28px; font-weight: 700;">LLMHosts</h1>
                    <p style="margin: 8px 0 0; color: #e0e7ff; font-size: 14px;">Your hardware. Real AI infrastructure.</p>
                  </td>
                </tr>

                <!-- Content -->
                <tr>
                  <td style="padding: 40px;">
                    <h2 style="margin: 0 0 16px; color: #111827; font-size: 24px; font-weight: 600;">Reset Your Password</h2>
                    <p style="margin: 0 0 24px; color: #6b7280; font-size: 16px; line-height: 24px;">
                      We received a request to reset the password for your LLMHosts account (${email}). Click the button below to create a new password.
                    </p>

                    <!-- Button -->
                    <table role="presentation" style="margin: 32px 0;">
                      <tr>
                        <td style="border-radius: 6px; background: linear-gradient(to right, #6366f1, #8b5cf6);">
                          <a href="${url}" style="display: inline-block; padding: 16px 32px; color: #ffffff; text-decoration: none; font-weight: 600; font-size: 16px;">
                            Reset Password
                          </a>
                        </td>
                      </tr>
                    </table>

                    <p style="margin: 24px 0 0; color: #6b7280; font-size: 14px; line-height: 20px;">
                      Or copy and paste this link into your browser:
                    </p>
                    <p style="margin: 8px 0 0; color: #6366f1; font-size: 14px; word-break: break-all;">
                      ${url}
                    </p>

                    <p style="margin: 32px 0 0; padding-top: 32px; border-top: 1px solid #e5e7eb; color: #9ca3af; font-size: 14px; line-height: 20px;">
                      This reset link will expire in ${expiresIn} minutes. If you didn't request a password reset, you can safely ignore this email. Your password will not be changed.
                    </p>
                  </td>
                </tr>

                <!-- Footer -->
                <tr>
                  <td style="padding: 32px 40px; background-color: #f9fafb; border-radius: 0 0 8px 8px; text-align: center;">
                    <p style="margin: 0; color: #9ca3af; font-size: 12px;">
                      © ${new Date().getFullYear()} LLMHosts. All rights reserved.
                    </p>
                    <p style="margin: 8px 0 0; color: #9ca3af; font-size: 12px;">
                      Turn your home GPU into production AI infrastructure
                    </p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </body>
    </html>
  `;

  const text = `
LLMHosts - Reset Your Password

We received a request to reset the password for your LLMHosts account (${email}).

Click the link below to create a new password:
${url}

This reset link will expire in ${expiresIn} minutes.

If you didn't request a password reset, you can safely ignore this email. Your password will not be changed.

---
© ${new Date().getFullYear()} LLMHosts
Turn your home GPU into production AI infrastructure
`;

  return { html, text, subject: 'Reset your password - LLMHosts' };
}

/**
 * Welcome email template
 * Sent after email verification completes
 */
export function welcomeEmailTemplate({ name, dashboardUrl }: WelcomeEmailProps) {
  const html = `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Welcome to LLMHosts!</title>
      </head>
      <body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f9fafb;">
        <table role="presentation" style="width: 100%; border-collapse: collapse;">
          <tr>
            <td align="center" style="padding: 40px 0;">
              <table role="presentation" style="width: 600px; border-collapse: collapse; background-color: #ffffff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                <!-- Header -->
                <tr>
                  <td style="padding: 40px 40px 20px; text-align: center; background: linear-gradient(to right, #6366f1, #8b5cf6); border-radius: 8px 8px 0 0;">
                    <h1 style="margin: 0; color: #ffffff; font-size: 28px; font-weight: 700;">LLMHosts</h1>
                    <p style="margin: 8px 0 0; color: #e0e7ff; font-size: 14px;">Your hardware. Real AI infrastructure.</p>
                  </td>
                </tr>

                <!-- Content -->
                <tr>
                  <td style="padding: 40px;">
                    <h2 style="margin: 0 0 16px; color: #111827; font-size: 24px; font-weight: 600;">Welcome to LLMHosts, ${name}!</h2>
                    <p style="margin: 0 0 24px; color: #6b7280; font-size: 16px; line-height: 24px;">
                      Your email has been verified and your account is ready to go. Here's what you can do next:
                    </p>

                    <table role="presentation" style="width: 100%; margin: 0 0 24px;">
                      <tr>
                        <td style="padding: 12px 0; border-bottom: 1px solid #f3f4f6;">
                          <p style="margin: 0; color: #111827; font-size: 15px; font-weight: 600;">Connect your GPU</p>
                          <p style="margin: 4px 0 0; color: #6b7280; font-size: 14px;">Install the CLI and register your local hardware as a backend.</p>
                        </td>
                      </tr>
                      <tr>
                        <td style="padding: 12px 0; border-bottom: 1px solid #f3f4f6;">
                          <p style="margin: 0; color: #111827; font-size: 15px; font-weight: 600;">Route AI requests</p>
                          <p style="margin: 4px 0 0; color: #6b7280; font-size: 14px;">Use the OpenAI-compatible API to send prompts to your own models.</p>
                        </td>
                      </tr>
                      <tr>
                        <td style="padding: 12px 0;">
                          <p style="margin: 0; color: #111827; font-size: 15px; font-weight: 600;">Monitor &amp; save</p>
                          <p style="margin: 4px 0 0; color: #6b7280; font-size: 14px;">Track usage, costs, and cache hit rates from your dashboard.</p>
                        </td>
                      </tr>
                    </table>

                    <!-- Button -->
                    <table role="presentation" style="margin: 32px 0;">
                      <tr>
                        <td style="border-radius: 6px; background: linear-gradient(to right, #6366f1, #8b5cf6);">
                          <a href="${dashboardUrl}" style="display: inline-block; padding: 16px 32px; color: #ffffff; text-decoration: none; font-weight: 600; font-size: 16px;">
                            Get Started
                          </a>
                        </td>
                      </tr>
                    </table>

                    <p style="margin: 32px 0 0; padding-top: 32px; border-top: 1px solid #e5e7eb; color: #9ca3af; font-size: 14px; line-height: 20px;">
                      Need help getting started? Check out our <a href="${dashboardUrl}/docs" style="color: #6366f1; text-decoration: none;">quick-start guide</a> or reply to this email.
                    </p>
                  </td>
                </tr>

                <!-- Footer -->
                <tr>
                  <td style="padding: 32px 40px; background-color: #f9fafb; border-radius: 0 0 8px 8px; text-align: center;">
                    <p style="margin: 0; color: #9ca3af; font-size: 12px;">
                      &copy; ${new Date().getFullYear()} LLMHosts. All rights reserved.
                    </p>
                    <p style="margin: 8px 0 0; color: #9ca3af; font-size: 12px;">
                      Turn your home GPU into production AI infrastructure
                    </p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </body>
    </html>
  `;

  const text = `
LLMHosts - Welcome to LLMHosts, ${name}!

Your email has been verified and your account is ready to go.

Here's what you can do next:

1. Connect your GPU — Install the CLI and register your local hardware as a backend.
2. Route AI requests — Use the OpenAI-compatible API to send prompts to your own models.
3. Monitor & save — Track usage, costs, and cache hit rates from your dashboard.

Get started: ${dashboardUrl}

Need help? Check out our quick-start guide: ${dashboardUrl}/docs

---
© ${new Date().getFullYear()} LLMHosts
Turn your home GPU into production AI infrastructure
`;

  return { html, text, subject: 'Welcome to LLMHosts!' };
}

/**
 * Team invite email template
 * Sent when a team admin invites a member
 */
export function teamInviteEmailTemplate({ inviterName, teamName, role, inviteUrl }: TeamInviteEmailProps) {
  const html = `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>You're Invited to Join ${teamName} on LLMHosts</title>
      </head>
      <body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f9fafb;">
        <table role="presentation" style="width: 100%; border-collapse: collapse;">
          <tr>
            <td align="center" style="padding: 40px 0;">
              <table role="presentation" style="width: 600px; border-collapse: collapse; background-color: #ffffff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                <!-- Header -->
                <tr>
                  <td style="padding: 40px 40px 20px; text-align: center; background: linear-gradient(to right, #6366f1, #8b5cf6); border-radius: 8px 8px 0 0;">
                    <h1 style="margin: 0; color: #ffffff; font-size: 28px; font-weight: 700;">LLMHosts</h1>
                    <p style="margin: 8px 0 0; color: #e0e7ff; font-size: 14px;">Your hardware. Real AI infrastructure.</p>
                  </td>
                </tr>

                <!-- Content -->
                <tr>
                  <td style="padding: 40px;">
                    <h2 style="margin: 0 0 16px; color: #111827; font-size: 24px; font-weight: 600;">You've Been Invited!</h2>
                    <p style="margin: 0 0 24px; color: #6b7280; font-size: 16px; line-height: 24px;">
                      <strong style="color: #111827;">${inviterName}</strong> has invited you to join <strong style="color: #111827;">${teamName}</strong> on LLMHosts.
                    </p>

                    <table role="presentation" style="width: 100%; margin: 0 0 24px; background-color: #f9fafb; border-radius: 8px;">
                      <tr>
                        <td style="padding: 20px;">
                          <p style="margin: 0 0 8px; color: #6b7280; font-size: 14px;">Team</p>
                          <p style="margin: 0 0 16px; color: #111827; font-size: 16px; font-weight: 600;">${teamName}</p>
                          <p style="margin: 0 0 8px; color: #6b7280; font-size: 14px;">Your role</p>
                          <p style="margin: 0; color: #111827; font-size: 16px; font-weight: 600;">${role}</p>
                        </td>
                      </tr>
                    </table>

                    <!-- Button -->
                    <table role="presentation" style="margin: 32px 0;">
                      <tr>
                        <td style="border-radius: 6px; background: linear-gradient(to right, #6366f1, #8b5cf6);">
                          <a href="${inviteUrl}" style="display: inline-block; padding: 16px 32px; color: #ffffff; text-decoration: none; font-weight: 600; font-size: 16px;">
                            Accept Invitation
                          </a>
                        </td>
                      </tr>
                    </table>

                    <p style="margin: 24px 0 0; color: #6b7280; font-size: 14px; line-height: 20px;">
                      Or copy and paste this link into your browser:
                    </p>
                    <p style="margin: 8px 0 0; color: #6366f1; font-size: 14px; word-break: break-all;">
                      ${inviteUrl}
                    </p>

                    <p style="margin: 32px 0 0; padding-top: 32px; border-top: 1px solid #e5e7eb; color: #9ca3af; font-size: 14px; line-height: 20px;">
                      If you don't recognize this invitation, you can safely ignore this email.
                    </p>
                  </td>
                </tr>

                <!-- Footer -->
                <tr>
                  <td style="padding: 32px 40px; background-color: #f9fafb; border-radius: 0 0 8px 8px; text-align: center;">
                    <p style="margin: 0; color: #9ca3af; font-size: 12px;">
                      &copy; ${new Date().getFullYear()} LLMHosts. All rights reserved.
                    </p>
                    <p style="margin: 8px 0 0; color: #9ca3af; font-size: 12px;">
                      Turn your home GPU into production AI infrastructure
                    </p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </body>
    </html>
  `;

  const text = `
LLMHosts - You've Been Invited!

${inviterName} has invited you to join ${teamName} on LLMHosts.

Team: ${teamName}
Your role: ${role}

Accept the invitation by clicking the link below:
${inviteUrl}

If you don't recognize this invitation, you can safely ignore this email.

---
© ${new Date().getFullYear()} LLMHosts
Turn your home GPU into production AI infrastructure
`;

  return {
    html,
    text,
    subject: `${inviterName} invited you to join ${teamName} on LLMHosts`,
  };
}

/**
 * Payment failed email template
 * Sent when a Stripe payment fails
 */
export function paymentFailedEmailTemplate({ name, billingUrl }: PaymentFailedEmailProps) {
  const html = `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Payment Failed - LLMHosts</title>
      </head>
      <body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f9fafb;">
        <table role="presentation" style="width: 100%; border-collapse: collapse;">
          <tr>
            <td align="center" style="padding: 40px 0;">
              <table role="presentation" style="width: 600px; border-collapse: collapse; background-color: #ffffff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                <!-- Header -->
                <tr>
                  <td style="padding: 40px 40px 20px; text-align: center; background: linear-gradient(to right, #6366f1, #8b5cf6); border-radius: 8px 8px 0 0;">
                    <h1 style="margin: 0; color: #ffffff; font-size: 28px; font-weight: 700;">LLMHosts</h1>
                    <p style="margin: 8px 0 0; color: #e0e7ff; font-size: 14px;">Your hardware. Real AI infrastructure.</p>
                  </td>
                </tr>

                <!-- Content -->
                <tr>
                  <td style="padding: 40px;">
                    <h2 style="margin: 0 0 16px; color: #111827; font-size: 24px; font-weight: 600;">Payment Failed</h2>
                    <p style="margin: 0 0 24px; color: #6b7280; font-size: 16px; line-height: 24px;">
                      Hi ${name}, we were unable to process the latest payment for your LLMHosts subscription. Please update your payment method to avoid any interruption to your service.
                    </p>

                    <table role="presentation" style="width: 100%; margin: 0 0 24px; background-color: #fef2f2; border-radius: 8px; border: 1px solid #fecaca;">
                      <tr>
                        <td style="padding: 16px 20px;">
                          <p style="margin: 0; color: #991b1b; font-size: 14px; line-height: 20px;">
                            If your payment method is not updated, your subscription may be canceled and access to premium features will be restricted.
                          </p>
                        </td>
                      </tr>
                    </table>

                    <!-- Button -->
                    <table role="presentation" style="margin: 32px 0;">
                      <tr>
                        <td style="border-radius: 6px; background: linear-gradient(to right, #6366f1, #8b5cf6);">
                          <a href="${billingUrl}" style="display: inline-block; padding: 16px 32px; color: #ffffff; text-decoration: none; font-weight: 600; font-size: 16px;">
                            Update Payment Method
                          </a>
                        </td>
                      </tr>
                    </table>

                    <p style="margin: 32px 0 0; padding-top: 32px; border-top: 1px solid #e5e7eb; color: #9ca3af; font-size: 14px; line-height: 20px;">
                      If you believe this is an error or need assistance, reply to this email and we'll help you sort it out.
                    </p>
                  </td>
                </tr>

                <!-- Footer -->
                <tr>
                  <td style="padding: 32px 40px; background-color: #f9fafb; border-radius: 0 0 8px 8px; text-align: center;">
                    <p style="margin: 0; color: #9ca3af; font-size: 12px;">
                      &copy; ${new Date().getFullYear()} LLMHosts. All rights reserved.
                    </p>
                    <p style="margin: 8px 0 0; color: #9ca3af; font-size: 12px;">
                      Turn your home GPU into production AI infrastructure
                    </p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </body>
    </html>
  `;

  const text = `
LLMHosts - Payment Failed

Hi ${name}, we were unable to process the latest payment for your LLMHosts subscription.

Please update your payment method to avoid any interruption to your service:
${billingUrl}

If your payment method is not updated, your subscription may be canceled and access to premium features will be restricted.

If you believe this is an error or need assistance, reply to this email.

---
© ${new Date().getFullYear()} LLMHosts
Turn your home GPU into production AI infrastructure
`;

  return {
    html,
    text,
    subject: 'Action required: Payment failed for your LLMHosts subscription',
  };
}

/**
 * Subscription confirmed email template
 * Sent after successful Stripe checkout
 */
export function subscriptionConfirmedEmailTemplate({
  name,
  planName,
  features,
  dashboardUrl,
}: SubscriptionConfirmedEmailProps) {
  const featuresHtml = features
    .map(
      (f) =>
        `<tr><td style="padding: 8px 0 8px 20px; color: #111827; font-size: 15px; line-height: 22px;">&#10003; ${f}</td></tr>`
    )
    .join('');

  const featuresText = features.map((f) => `  - ${f}`).join('\n');

  const html = `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Subscription Confirmed - LLMHosts</title>
      </head>
      <body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f9fafb;">
        <table role="presentation" style="width: 100%; border-collapse: collapse;">
          <tr>
            <td align="center" style="padding: 40px 0;">
              <table role="presentation" style="width: 600px; border-collapse: collapse; background-color: #ffffff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                <!-- Header -->
                <tr>
                  <td style="padding: 40px 40px 20px; text-align: center; background: linear-gradient(to right, #6366f1, #8b5cf6); border-radius: 8px 8px 0 0;">
                    <h1 style="margin: 0; color: #ffffff; font-size: 28px; font-weight: 700;">LLMHosts</h1>
                    <p style="margin: 8px 0 0; color: #e0e7ff; font-size: 14px;">Your hardware. Real AI infrastructure.</p>
                  </td>
                </tr>

                <!-- Content -->
                <tr>
                  <td style="padding: 40px;">
                    <h2 style="margin: 0 0 16px; color: #111827; font-size: 24px; font-weight: 600;">You're on the ${planName} Plan!</h2>
                    <p style="margin: 0 0 24px; color: #6b7280; font-size: 16px; line-height: 24px;">
                      Hi ${name}, thanks for subscribing! Your ${planName} plan is now active and you have access to all of the following:
                    </p>

                    <table role="presentation" style="width: 100%; margin: 0 0 24px; background-color: #f0fdf4; border-radius: 8px; border: 1px solid #bbf7d0;">
                      <tr>
                        <td style="padding: 20px;">
                          <p style="margin: 0 0 12px; color: #166534; font-size: 14px; font-weight: 600;">Features unlocked</p>
                          <table role="presentation" style="width: 100%;">
                            ${featuresHtml}
                          </table>
                        </td>
                      </tr>
                    </table>

                    <!-- Button -->
                    <table role="presentation" style="margin: 32px 0;">
                      <tr>
                        <td style="border-radius: 6px; background: linear-gradient(to right, #6366f1, #8b5cf6);">
                          <a href="${dashboardUrl}" style="display: inline-block; padding: 16px 32px; color: #ffffff; text-decoration: none; font-weight: 600; font-size: 16px;">
                            Go to Dashboard
                          </a>
                        </td>
                      </tr>
                    </table>

                    <p style="margin: 32px 0 0; padding-top: 32px; border-top: 1px solid #e5e7eb; color: #9ca3af; font-size: 14px; line-height: 20px;">
                      You can manage your subscription and billing details from your <a href="${dashboardUrl}/settings/billing" style="color: #6366f1; text-decoration: none;">billing settings</a>.
                    </p>
                  </td>
                </tr>

                <!-- Footer -->
                <tr>
                  <td style="padding: 32px 40px; background-color: #f9fafb; border-radius: 0 0 8px 8px; text-align: center;">
                    <p style="margin: 0; color: #9ca3af; font-size: 12px;">
                      &copy; ${new Date().getFullYear()} LLMHosts. All rights reserved.
                    </p>
                    <p style="margin: 8px 0 0; color: #9ca3af; font-size: 12px;">
                      Turn your home GPU into production AI infrastructure
                    </p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </body>
    </html>
  `;

  const text = `
LLMHosts - Your ${planName} Plan is Active!

Hi ${name}, thanks for subscribing! Your ${planName} plan is now active.

Features unlocked:
${featuresText}

Go to your dashboard: ${dashboardUrl}

You can manage your subscription from your billing settings: ${dashboardUrl}/settings/billing

---
© ${new Date().getFullYear()} LLMHosts
Turn your home GPU into production AI infrastructure
`;

  return {
    html,
    text,
    subject: `Your LLMHosts ${planName} plan is active!`,
  };
}

/**
 * Spending alert email template
 * Sent when team spending exceeds a threshold
 */
export function spendingAlertEmailTemplate({
  teamName,
  currentSpend,
  budget,
  percentage,
  usageUrl,
}: SpendingAlertEmailProps) {
  const formattedSpend = `$${currentSpend.toFixed(2)}`;
  const formattedBudget = `$${budget.toFixed(2)}`;

  const html = `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Spending Alert - LLMHosts</title>
      </head>
      <body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f9fafb;">
        <table role="presentation" style="width: 100%; border-collapse: collapse;">
          <tr>
            <td align="center" style="padding: 40px 0;">
              <table role="presentation" style="width: 600px; border-collapse: collapse; background-color: #ffffff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                <!-- Header -->
                <tr>
                  <td style="padding: 40px 40px 20px; text-align: center; background: linear-gradient(to right, #6366f1, #8b5cf6); border-radius: 8px 8px 0 0;">
                    <h1 style="margin: 0; color: #ffffff; font-size: 28px; font-weight: 700;">LLMHosts</h1>
                    <p style="margin: 8px 0 0; color: #e0e7ff; font-size: 14px;">Your hardware. Real AI infrastructure.</p>
                  </td>
                </tr>

                <!-- Content -->
                <tr>
                  <td style="padding: 40px;">
                    <h2 style="margin: 0 0 16px; color: #111827; font-size: 24px; font-weight: 600;">Spending Alert</h2>
                    <p style="margin: 0 0 24px; color: #6b7280; font-size: 16px; line-height: 24px;">
                      <strong style="color: #111827;">${teamName}</strong> has reached <strong style="color: #111827;">${percentage}%</strong> of its spending budget for the current billing period.
                    </p>

                    <table role="presentation" style="width: 100%; margin: 0 0 24px; background-color: #fffbeb; border-radius: 8px; border: 1px solid #fde68a;">
                      <tr>
                        <td style="padding: 20px;">
                          <table role="presentation" style="width: 100%;">
                            <tr>
                              <td style="padding: 8px 0;">
                                <p style="margin: 0; color: #92400e; font-size: 14px;">Current spend</p>
                                <p style="margin: 4px 0 0; color: #111827; font-size: 20px; font-weight: 700;">${formattedSpend}</p>
                              </td>
                              <td style="padding: 8px 0;">
                                <p style="margin: 0; color: #92400e; font-size: 14px;">Budget</p>
                                <p style="margin: 4px 0 0; color: #111827; font-size: 20px; font-weight: 700;">${formattedBudget}</p>
                              </td>
                              <td style="padding: 8px 0;">
                                <p style="margin: 0; color: #92400e; font-size: 14px;">Used</p>
                                <p style="margin: 4px 0 0; color: #111827; font-size: 20px; font-weight: 700;">${percentage}%</p>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>

                    <!-- Button -->
                    <table role="presentation" style="margin: 32px 0;">
                      <tr>
                        <td style="border-radius: 6px; background: linear-gradient(to right, #6366f1, #8b5cf6);">
                          <a href="${usageUrl}" style="display: inline-block; padding: 16px 32px; color: #ffffff; text-decoration: none; font-weight: 600; font-size: 16px;">
                            View Usage
                          </a>
                        </td>
                      </tr>
                    </table>

                    <p style="margin: 32px 0 0; padding-top: 32px; border-top: 1px solid #e5e7eb; color: #9ca3af; font-size: 14px; line-height: 20px;">
                      You can adjust your spending alerts and budget from your team settings.
                    </p>
                  </td>
                </tr>

                <!-- Footer -->
                <tr>
                  <td style="padding: 32px 40px; background-color: #f9fafb; border-radius: 0 0 8px 8px; text-align: center;">
                    <p style="margin: 0; color: #9ca3af; font-size: 12px;">
                      &copy; ${new Date().getFullYear()} LLMHosts. All rights reserved.
                    </p>
                    <p style="margin: 8px 0 0; color: #9ca3af; font-size: 12px;">
                      Turn your home GPU into production AI infrastructure
                    </p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </body>
    </html>
  `;

  const text = `
LLMHosts - Spending Alert

${teamName} has reached ${percentage}% of its spending budget for the current billing period.

Current spend: ${formattedSpend}
Budget: ${formattedBudget}
Used: ${percentage}%

View usage details: ${usageUrl}

You can adjust your spending alerts and budget from your team settings.

---
© ${new Date().getFullYear()} LLMHosts
Turn your home GPU into production AI infrastructure
`;

  return {
    html,
    text,
    subject: `Spending alert: ${teamName} has reached ${percentage}% of budget`,
  };
}

/**
 * Device offline alert email template
 * Sent when a fleet device hasn't been seen within the offline threshold
 */
export function deviceOfflineEmailTemplate({
  name,
  deviceName,
  lastSeen,
  dashboardUrl,
}: DeviceOfflineEmailProps) {
  const formattedTime = lastSeen.toLocaleString('en-US', {
    weekday: 'short',
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    timeZoneName: 'short',
  });

  const html = `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Alert: ${deviceName} appears offline - LLMHosts</title>
      </head>
      <body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f9fafb;">
        <table role="presentation" style="width: 100%; border-collapse: collapse;">
          <tr>
            <td align="center" style="padding: 40px 0;">
              <table role="presentation" style="width: 600px; border-collapse: collapse; background-color: #ffffff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                <!-- Header -->
                <tr>
                  <td style="padding: 40px 40px 20px; text-align: center; background: linear-gradient(to right, #6366f1, #8b5cf6); border-radius: 8px 8px 0 0;">
                    <h1 style="margin: 0; color: #ffffff; font-size: 28px; font-weight: 700;">LLMHosts</h1>
                    <p style="margin: 8px 0 0; color: #e0e7ff; font-size: 14px;">Your hardware. Real AI infrastructure.</p>
                  </td>
                </tr>

                <!-- Content -->
                <tr>
                  <td style="padding: 40px;">
                    <h2 style="margin: 0 0 16px; color: #111827; font-size: 24px; font-weight: 600;">Device Offline Alert</h2>
                    <p style="margin: 0 0 24px; color: #6b7280; font-size: 16px; line-height: 24px;">
                      Hi ${name}, your device <strong style="color: #111827;">${deviceName}</strong> hasn't been seen since <strong style="color: #111827;">${formattedTime}</strong>. This may affect your fleet's availability.
                    </p>

                    <table role="presentation" style="width: 100%; margin: 0 0 24px; background-color: #fef2f2; border-radius: 8px; border: 1px solid #fecaca;">
                      <tr>
                        <td style="padding: 16px 20px;">
                          <p style="margin: 0; color: #991b1b; font-size: 14px; line-height: 20px;">
                            Check connectivity on the machine or run <code style="background-color: #fee2e2; padding: 2px 6px; border-radius: 4px; font-size: 13px;">llmhosts doctor</code> to diagnose the issue. If this device is intentionally powered off, you can safely ignore this alert.
                          </p>
                        </td>
                      </tr>
                    </table>

                    <!-- Button -->
                    <table role="presentation" style="margin: 32px 0;">
                      <tr>
                        <td style="border-radius: 6px; background: linear-gradient(to right, #6366f1, #8b5cf6);">
                          <a href="${dashboardUrl}" style="display: inline-block; padding: 16px 32px; color: #ffffff; text-decoration: none; font-weight: 600; font-size: 16px;">
                            View Fleet Status
                          </a>
                        </td>
                      </tr>
                    </table>

                    <p style="margin: 32px 0 0; padding-top: 32px; border-top: 1px solid #e5e7eb; color: #9ca3af; font-size: 14px; line-height: 20px;">
                      You're receiving this because a device in your fleet became unreachable. You can manage notification preferences from your dashboard.
                    </p>
                  </td>
                </tr>

                <!-- Footer -->
                <tr>
                  <td style="padding: 32px 40px; background-color: #f9fafb; border-radius: 0 0 8px 8px; text-align: center;">
                    <p style="margin: 0; color: #9ca3af; font-size: 12px;">
                      &copy; ${new Date().getFullYear()} LLMHosts. All rights reserved.
                    </p>
                    <p style="margin: 8px 0 0; color: #9ca3af; font-size: 12px;">
                      Turn your home GPU into production AI infrastructure
                    </p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </body>
    </html>
  `;

  const text = `
LLMHosts - Device Offline Alert

Hi ${name}, your device ${deviceName} hasn't been seen since ${formattedTime}. This may affect your fleet's availability.

Check connectivity on the machine or run \`llmhosts doctor\` to diagnose the issue. If this device is intentionally powered off, you can safely ignore this alert.

View fleet status: ${dashboardUrl}

---
© ${new Date().getFullYear()} LLMHosts
Turn your home GPU into production AI infrastructure
`;

  return {
    html,
    text,
    subject: `Alert: ${deviceName} appears offline - LLMHosts`,
  };
}

/**
 * Budget threshold alert email template
 * Sent when Token spending exceeds a budget threshold (80% or 95%)
 */
export function budgetAlertEmailTemplate({
  name,
  currentSpend,
  budgetLimit,
  percentUsed,
  dashboardUrl,
}: BudgetAlertEmailProps) {
  const formattedSpend = `$${currentSpend.toFixed(2)}`;
  const formattedBudget = `$${budgetLimit.toFixed(2)}`;

  const html = `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Token budget alert: ${percentUsed}% used - LLMHosts</title>
      </head>
      <body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f9fafb;">
        <table role="presentation" style="width: 100%; border-collapse: collapse;">
          <tr>
            <td align="center" style="padding: 40px 0;">
              <table role="presentation" style="width: 600px; border-collapse: collapse; background-color: #ffffff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                <!-- Header -->
                <tr>
                  <td style="padding: 40px 40px 20px; text-align: center; background: linear-gradient(to right, #6366f1, #8b5cf6); border-radius: 8px 8px 0 0;">
                    <h1 style="margin: 0; color: #ffffff; font-size: 28px; font-weight: 700;">LLMHosts</h1>
                    <p style="margin: 8px 0 0; color: #e0e7ff; font-size: 14px;">Your hardware. Real AI infrastructure.</p>
                  </td>
                </tr>

                <!-- Content -->
                <tr>
                  <td style="padding: 40px;">
                    <h2 style="margin: 0 0 16px; color: #111827; font-size: 24px; font-weight: 600;">Token Budget Alert</h2>
                    <p style="margin: 0 0 24px; color: #6b7280; font-size: 16px; line-height: 24px;">
                      Hi ${name}, your Token assistant has used <strong style="color: #111827;">${formattedSpend}</strong> of your <strong style="color: #111827;">${formattedBudget}/month</strong> budget (<strong style="color: #111827;">${percentUsed}%</strong>). Consider adjusting your budget or switching to lighter models.
                    </p>

                    <table role="presentation" style="width: 100%; margin: 0 0 24px; background-color: #fffbeb; border-radius: 8px; border: 1px solid #fde68a;">
                      <tr>
                        <td style="padding: 20px;">
                          <table role="presentation" style="width: 100%;">
                            <tr>
                              <td style="padding: 8px 0;">
                                <p style="margin: 0; color: #92400e; font-size: 14px;">Current spend</p>
                                <p style="margin: 4px 0 0; color: #111827; font-size: 20px; font-weight: 700;">${formattedSpend}</p>
                              </td>
                              <td style="padding: 8px 0;">
                                <p style="margin: 0; color: #92400e; font-size: 14px;">Budget</p>
                                <p style="margin: 4px 0 0; color: #111827; font-size: 20px; font-weight: 700;">${formattedBudget}</p>
                              </td>
                              <td style="padding: 8px 0;">
                                <p style="margin: 0; color: #92400e; font-size: 14px;">Used</p>
                                <p style="margin: 4px 0 0; color: #111827; font-size: 20px; font-weight: 700;">${percentUsed}%</p>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>

                    <!-- Button -->
                    <table role="presentation" style="margin: 32px 0;">
                      <tr>
                        <td style="border-radius: 6px; background: linear-gradient(to right, #6366f1, #8b5cf6);">
                          <a href="${dashboardUrl}" style="display: inline-block; padding: 16px 32px; color: #ffffff; text-decoration: none; font-weight: 600; font-size: 16px;">
                            Manage Token Settings
                          </a>
                        </td>
                      </tr>
                    </table>

                    <p style="margin: 32px 0 0; padding-top: 32px; border-top: 1px solid #e5e7eb; color: #9ca3af; font-size: 14px; line-height: 20px;">
                      You can increase your budget or switch to lighter models from your Token settings to avoid service interruptions.
                    </p>
                  </td>
                </tr>

                <!-- Footer -->
                <tr>
                  <td style="padding: 32px 40px; background-color: #f9fafb; border-radius: 0 0 8px 8px; text-align: center;">
                    <p style="margin: 0; color: #9ca3af; font-size: 12px;">
                      &copy; ${new Date().getFullYear()} LLMHosts. All rights reserved.
                    </p>
                    <p style="margin: 8px 0 0; color: #9ca3af; font-size: 12px;">
                      Turn your home GPU into production AI infrastructure
                    </p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </body>
    </html>
  `;

  const text = `
LLMHosts - Token Budget Alert

Hi ${name}, your Token assistant has used ${formattedSpend} of your ${formattedBudget}/month budget (${percentUsed}%).

Current spend: ${formattedSpend}
Budget: ${formattedBudget}
Used: ${percentUsed}%

Consider adjusting your budget or switching to lighter models.

Manage Token settings: ${dashboardUrl}

---
© ${new Date().getFullYear()} LLMHosts
Turn your home GPU into production AI infrastructure
`;

  return {
    html,
    text,
    subject: `Token budget alert: ${percentUsed}% used - LLMHosts`,
  };
}

/**
 * Monthly summary email template
 * Sent at the end of each month with Token usage and savings statistics
 */
export function monthlySummaryEmailTemplate({
  name,
  month,
  totalMessages,
  totalCost,
  topModel,
  topModelCost,
  savingsUsd,
  savingsPct,
  dashboardUrl,
}: MonthlySummaryEmailProps) {
  const formattedCost = `$${totalCost.toFixed(2)}`;
  const formattedTopModelCost = `$${topModelCost.toFixed(2)}`;
  const formattedSavings = `$${savingsUsd.toFixed(2)}`;

  const html = `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Your Token monthly summary for ${month} - LLMHosts</title>
      </head>
      <body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f9fafb;">
        <table role="presentation" style="width: 100%; border-collapse: collapse;">
          <tr>
            <td align="center" style="padding: 40px 0;">
              <table role="presentation" style="width: 600px; border-collapse: collapse; background-color: #ffffff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                <!-- Header -->
                <tr>
                  <td style="padding: 40px 40px 20px; text-align: center; background: linear-gradient(to right, #6366f1, #8b5cf6); border-radius: 8px 8px 0 0;">
                    <h1 style="margin: 0; color: #ffffff; font-size: 28px; font-weight: 700;">LLMHosts</h1>
                    <p style="margin: 8px 0 0; color: #e0e7ff; font-size: 14px;">Your hardware. Real AI infrastructure.</p>
                  </td>
                </tr>

                <!-- Content -->
                <tr>
                  <td style="padding: 40px;">
                    <h2 style="margin: 0 0 16px; color: #111827; font-size: 24px; font-weight: 600;">Your Token Summary for ${month}</h2>
                    <p style="margin: 0 0 24px; color: #6b7280; font-size: 16px; line-height: 24px;">
                      Hi ${name}, here's how your Token assistant performed this month.
                    </p>

                    <!-- Stats Card -->
                    <table role="presentation" style="width: 100%; margin: 0 0 24px; background-color: #f9fafb; border-radius: 8px; border: 1px solid #e5e7eb;">
                      <tr>
                        <td style="padding: 20px;">
                          <table role="presentation" style="width: 100%;">
                            <tr>
                              <td style="padding: 8px 0; width: 50%;">
                                <p style="margin: 0; color: #6b7280; font-size: 14px;">Messages</p>
                                <p style="margin: 4px 0 0; color: #111827; font-size: 20px; font-weight: 700;">${totalMessages.toLocaleString()}</p>
                              </td>
                              <td style="padding: 8px 0; width: 50%;">
                                <p style="margin: 0; color: #6b7280; font-size: 14px;">Total cost</p>
                                <p style="margin: 4px 0 0; color: #111827; font-size: 20px; font-weight: 700;">${formattedCost}</p>
                              </td>
                            </tr>
                            <tr>
                              <td style="padding: 8px 0; width: 50%;">
                                <p style="margin: 0; color: #6b7280; font-size: 14px;">Top model</p>
                                <p style="margin: 4px 0 0; color: #111827; font-size: 16px; font-weight: 600;">${topModel}</p>
                              </td>
                              <td style="padding: 8px 0; width: 50%;">
                                <p style="margin: 0; color: #6b7280; font-size: 14px;">Top model cost</p>
                                <p style="margin: 4px 0 0; color: #111827; font-size: 16px; font-weight: 600;">${formattedTopModelCost}</p>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>

                    <!-- Savings Card -->
                    <table role="presentation" style="width: 100%; margin: 0 0 24px; background-color: #f0fdf4; border-radius: 8px; border: 1px solid #bbf7d0;">
                      <tr>
                        <td style="padding: 20px;">
                          <p style="margin: 0 0 8px; color: #166534; font-size: 14px; font-weight: 600;">Savings vs cloud APIs</p>
                          <table role="presentation" style="width: 100%;">
                            <tr>
                              <td style="padding: 4px 0;">
                                <p style="margin: 0; color: #166534; font-size: 20px; font-weight: 700;">${formattedSavings} saved (${savingsPct.toFixed(1)}%)</p>
                              </td>
                            </tr>
                          </table>
                          <p style="margin: 8px 0 0; color: #15803d; font-size: 13px;">Compared to equivalent cloud API pricing for the same token volume.</p>
                        </td>
                      </tr>
                    </table>

                    <!-- Button -->
                    <table role="presentation" style="margin: 32px 0;">
                      <tr>
                        <td style="border-radius: 6px; background: linear-gradient(to right, #6366f1, #8b5cf6);">
                          <a href="${dashboardUrl}" style="display: inline-block; padding: 16px 32px; color: #ffffff; text-decoration: none; font-weight: 600; font-size: 16px;">
                            View Full Analytics
                          </a>
                        </td>
                      </tr>
                    </table>

                    <p style="margin: 32px 0 0; padding-top: 32px; border-top: 1px solid #e5e7eb; color: #9ca3af; font-size: 14px; line-height: 20px;">
                      This is your monthly Token usage summary. You can view detailed analytics and manage your budget from your <a href="${dashboardUrl}" style="color: #6366f1; text-decoration: none;">dashboard</a>.
                    </p>
                  </td>
                </tr>

                <!-- Footer -->
                <tr>
                  <td style="padding: 32px 40px; background-color: #f9fafb; border-radius: 0 0 8px 8px; text-align: center;">
                    <p style="margin: 0; color: #9ca3af; font-size: 12px;">
                      &copy; ${new Date().getFullYear()} LLMHosts. All rights reserved.
                    </p>
                    <p style="margin: 8px 0 0; color: #9ca3af; font-size: 12px;">
                      Turn your home GPU into production AI infrastructure
                    </p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </body>
    </html>
  `;

  const text = `
LLMHosts - Your Token Summary for ${month}

Hi ${name}, here's how your Token assistant performed this month.

Messages: ${totalMessages.toLocaleString()}
Total cost: ${formattedCost}
Top model: ${topModel} (${formattedTopModelCost})

Savings vs cloud APIs: ${formattedSavings} saved (${savingsPct.toFixed(1)}%)
Compared to equivalent cloud API pricing for the same token volume.

View full analytics: ${dashboardUrl}

---
© ${new Date().getFullYear()} LLMHosts
Turn your home GPU into production AI infrastructure
`;

  return {
    html,
    text,
    subject: `Your Token monthly summary for ${month} - LLMHosts`,
  };
}
