interface InvoiceEmailTemplateProps {
  invoice: {
    invoiceNumber: string;
    issueDate: Date;
    dueDate: Date;
    status: string;
    totalAmount: number;
    taxRate: number;
    notes?: string | null;
    client: {
      name: string;
      email: string | null;
    };
    business?: {
      name: string;
      email?: string | null;
      phone?: string | null;
      addressLine1?: string | null;
      addressLine2?: string | null;
      city?: string | null;
      state?: string | null;
      postalCode?: string | null;
      country?: string | null;
    } | null;
    items: Array<{
      date: Date;
      description: string;
      hours: number;
      rate: number;
      amount: number;
    }>;
  };
  customContent?: string;
  customMessage?: string;
  userName?: string;
  userEmail?: string;
  baseUrl?: string;
}

export function generateInvoiceEmailTemplate({
  invoice,
  customContent,
  customMessage,
  userName,
  userEmail,
  baseUrl = "https://beenvoice.app",
}: InvoiceEmailTemplateProps): { html: string; text: string } {
  const formatDate = (date: Date) => {
    return new Intl.DateTimeFormat("en-US", {
      year: "numeric",
      month: "long",
      day: "numeric",
    }).format(new Date(date));
  };

  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(amount);
  };

  const getTimeOfDayGreeting = () => {
    const hour = new Date().getHours();
    if (hour < 12) return "Good morning";
    if (hour < 17) return "Good afternoon";
    return "Good evening";
  };

  const subtotal = invoice.items.reduce((sum, item) => sum + item.amount, 0);
  const taxAmount = subtotal * (invoice.taxRate / 100);
  const total = subtotal + taxAmount;

  const businessAddress = invoice.business
    ? [
        invoice.business.addressLine1,
        invoice.business.addressLine2,
        invoice.business.city && invoice.business.state
          ? `${invoice.business.city}, ${invoice.business.state} ${invoice.business.postalCode ?? ""}`.trim()
          : (invoice.business.city ?? invoice.business.state),
        invoice.business.country !== "United States"
          ? invoice.business.country
          : null,
      ]
        .filter(Boolean)
        .join("<br>")
    : "";

  const html = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="date=no">
    <meta name="format-detection" content="address=no">
    <meta name="format-detection" content="email=no">
    <title>Invoice ${invoice.invoiceNumber}</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
            line-height: 1.6;
            color: #1f2937;
            background-color: #f9fafb;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }

        .email-container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #ffffff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
        }

        .header {
            background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
            padding: 32px 24px;
            text-align: center;
            color: white;
        }

        .header-content {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 8px;
            letter-spacing: -0.5px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
        }

        .header-subtitle {
            font-size: 16px;
            opacity: 0.9;
            font-weight: normal;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
        }

        .content {
            padding: 32px 24px;
        }

        .greeting {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 24px;
            color: #374151;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
        }

        .message {
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 32px;
            color: #4b5563;
        }

        .invoice-card {
            background-color: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 16px;
            margin: 24px 0;
        }

        .invoice-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 16px;
        }

        .invoice-number {
            font-size: 24px;
            font-weight: bold;
            color: #16a34a;
            margin-bottom: 4px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
        }

        .invoice-date {
            font-size: 14px;
            color: #6b7280;
        }

        .invoice-amount {
            text-align: right;
        }

        .amount-label {
            font-size: 14px;
            color: #6b7280;
            margin-bottom: 4px;
        }

        .amount-value {
            font-size: 28px;
            font-weight: bold;
            color: #1f2937;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
        }

        .invoice-details {
            border-top: 1px solid #e5e7eb;
            padding-top: 20px;
            margin-top: 20px;
        }

        .detail-row {
            display: table;
            width: 100%;
            padding: 8px 0;
            border-bottom: 1px solid #f3f4f6;
        }

        .detail-row:last-child {
            border-bottom: none;
            font-weight: 600;
            padding-top: 12px;
            border-top: 2px solid #e5e7eb;
            margin-top: 8px;
        }

        .detail-label {
            display: table-cell;
            font-size: 14px;
            color: #6b7280;
            text-align: left;
            width: 50%;
        }

        .detail-value {
            display: table-cell;
            font-size: 14px;
            color: #1f2937;
            font-weight: bold;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
            text-align: right;
            width: 50%;
        }

        .business-info {
            background-color: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
        }

        .business-name {
            font-size: 16px;
            font-weight: bold;
            color: #1f2937;
            margin-bottom: 8px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
        }

        .business-details {
            font-size: 14px;
            color: #6b7280;
            line-height: 1.5;
        }

        .custom-content ul {
            margin: 16px 0;
            padding-left: 24px;
        }

        .custom-content li {
            margin: 8px 0;
            padding-left: 4px;
        }

        .cta-section {
            text-align: center;
            margin: 32px 0;
            padding: 24px;
            background-color: #f8fafc;
            border-radius: 8px;
        }

        .cta-text {
            font-size: 14px;
            color: #6b7280;
            margin-bottom: 16px;
        }

        .attachment-notice {
            background-color: #f0fdf4;
            border: 1px solid #bbf7d0;
            border-radius: 8px;
            padding: 16px;
            margin: 20px 0;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .attachment-icon {
            width: 20px;
            height: 20px;
            background-color: #16a34a;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .attachment-text {
            font-size: 14px;
            color: #166534;
            font-weight: bold;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
        }

        .signature {
            margin-top: 32px;
            padding-top: 24px;
            border-top: 1px solid #e5e7eb;
        }

        .signature-name {
            font-size: 16px;
            font-weight: bold;
            color: #1f2937;
            margin-bottom: 4px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
        }

        .signature-email {
            font-size: 14px;
            color: #6b7280;
        }

        .footer {
            background-color: #f9fafb;
            padding: 24px;
            text-align: center;
            border-top: 1px solid #e5e7eb;
        }

        .footer-logo {
            max-width: 80px;
            height: auto;
            margin: 0 auto 8px;
            display: block;
        }

        .footer-text {
            font-size: 12px;
            color: #9ca3af;
            line-height: 1.5;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
        }

        /* Email client specific fixes */
        @media screen and (max-width: 600px) {
            .email-container {
                width: 100% !important;
                max-width: 600px !important;
            }
        }

        /* Outlook specific fixes */
        table {
            border-collapse: collapse;
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
        }

        /* Apple Mail attachment preview fix */
        .attachment-notice {
            border: 2px dashed #bbf7d0 !important;
            background-color: #f0fdf4 !important;
        }

        @media (max-width: 600px) {
            .email-container {
                margin: 0;
                border-radius: 0;
            }

            .header, .content, .footer {
                padding-left: 16px;
                padding-right: 16px;
            }

            .invoice-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .invoice-amount {
                text-align: left;
            }

            .detail-row {
                display: block;
            }

            .detail-label,
            .detail-value {
                display: block;
                width: 100%;
                text-align: left;
            }
        }
    </style>
</head>
<body>
    <div class="email-container">
        <div class="header">
            <div class="header-content">Invoice ${invoice.invoiceNumber}</div>
            <div class="header-subtitle">From ${invoice.business?.name ?? "Your Business"}</div>
        </div>

        <div class="content">
            <div class="message">
                <div class="greeting">${getTimeOfDayGreeting()},</div>
                <p>I hope this email finds you well. Please find attached invoice <strong>#${invoice.invoiceNumber}</strong>
                for the services provided. The invoice details are summarized below for your reference.</p>
                ${customMessage ? `<div style="margin: 16px 0; padding: 16px; background-color: #f0fdf4; border-left: 4px solid #16a34a; border-radius: 4px;">${customMessage}</div>` : ""}
            </div>
            ${customContent ? `<div class="message custom-content">${customContent}</div>` : ""}

            <div class="invoice-card">
                <div class="invoice-header">
                    <div>
                        <div class="invoice-number">#${invoice.invoiceNumber}</div>
                        <div class="invoice-date">Issue Date: ${formatDate(invoice.issueDate)}</div>
                        <div class="invoice-date">Due Date: ${formatDate(invoice.dueDate)}</div>
                    </div>
                    <div class="invoice-amount">
                        <div class="amount-label">Total Amount</div>
                        <div class="amount-value">${formatCurrency(total)}</div>
                    </div>
                </div>

                <div class="invoice-details">
                    <div class="detail-row">
                        <span class="detail-label">Client</span>
                        <span class="detail-value">${invoice.client.name}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Subtotal</span>
                        <span class="detail-value">${formatCurrency(subtotal)}</span>
                    </div>
                    ${
                      invoice.taxRate > 0
                        ? `<div class="detail-row">
                            <span class="detail-label">Tax (${invoice.taxRate}%)</span>
                            <span class="detail-value">${formatCurrency(taxAmount)}</span>
                           </div>`
                        : ""
                    }
                    <div class="detail-row">
                        <span class="detail-label">Total</span>
                        <span class="detail-value">${formatCurrency(total)}</span>
                    </div>
                </div>
            </div>



            <div class="attachment-notice">
                <div class="attachment-icon"></div>
                <div class="attachment-text">
                    PDF invoice attached: invoice-${invoice.invoiceNumber}.pdf
                </div>
            </div>

            <div class="cta-section">
                <div class="cta-text">
                    If you have any questions about this invoice, please don't hesitate to reach out.
                    Thank you for your business!
                </div>
            </div>

            ${
              !customContent
                ? `<div class="signature">
                <div class="signature-name">${userName ?? invoice.business?.name ?? "Best regards"}</div>
                ${userEmail ? `<div class="signature-email">${userEmail}</div>` : ""}
            </div>`
                : ""
            }
        </div>

        <div class="footer">
            <img src="${baseUrl}/beenvoice-logo.svg" alt="beenvoice" class="footer-logo" />
            ${
              invoice.business
                ? `<div class="footer-text">
                    <strong>${invoice.business.name}</strong><br>
                    ${invoice.business.email ? `${invoice.business.email}<br>` : ""}
                    ${invoice.business.phone ? `${invoice.business.phone}<br>` : ""}
                    ${businessAddress ? `${businessAddress}` : ""}
                   </div>`
                : `<div class="footer-text">
                    Professional invoicing for modern businesses
                   </div>`
            }
        </div>
    </div>
</body>
</html>`;

  // Generate plain text version
  const text = `
${getTimeOfDayGreeting()},

I hope this email finds you well. Please find attached invoice #${invoice.invoiceNumber} for the services provided.${
    customMessage
      ? `\n\n${customMessage
          .replace(/<[^>]*>/g, "")
          .replace(/\s+/g, " ")
          .trim()}`
      : ""
  }${
    customContent
      ? `\n\n${customContent
          .replace(/<[^>]*>/g, "")
          .replace(/\s+/g, " ")
          .trim()}`
      : ""
  }

INVOICE DETAILS
═══════════════
Invoice Number: #${invoice.invoiceNumber}
Issue Date: ${formatDate(invoice.issueDate)}
Due Date: ${formatDate(invoice.dueDate)}
Client: ${invoice.client.name}

AMOUNT BREAKDOWN
═══════════════
Subtotal: ${formatCurrency(subtotal)}${
    invoice.taxRate > 0
      ? `\nTax (${invoice.taxRate}%): ${formatCurrency(taxAmount)}`
      : ""
  }
Total: ${formatCurrency(total)}



ATTACHMENT
═══════════════
PDF invoice attached: invoice-${invoice.invoiceNumber}.pdf

If you have any questions about this invoice, please don't hesitate to reach out.
Thank you for your business!

${userName ?? invoice.business?.name ?? "Best regards"}${
    userEmail ? `\n${userEmail}` : ""
  }

---
${
  invoice.business
    ? `${invoice.business.name}${invoice.business.email ? `\n${invoice.business.email}` : ""}${
        invoice.business.phone ? `\n${invoice.business.phone}` : ""
      }${businessAddress ? `\n${businessAddress.replace(/<br>/g, "\n")}` : ""}`
    : "Professional invoicing for modern businesses"
}
`.trim();

  return { html, text };
}
