import { GenericEmailOption } from "../mailer";

export const RESET_PASSWORD_EMAIL_TEMPLATE = (verifyCode: string): string => {
  return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recover your password</title>
</head>
<body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 600px; margin: 0 auto; padding: 20px;">
<div style="background: linear-gradient(to right, #4CAF50, #45a049); padding: 20px; text-align: center;">
  <h1 style="color: white; margin: 0;">Recover your password Code</h1>
</div>
<div style="background-color: #f9f9f9; padding: 20px; border-radius: 0 0 5px 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
  <p>Hello,</p>
  <p>Please enter the 6 digit code for recovering the password.</p>
  <div style="text-align: center; margin: 30px 0;">
    <span style="font-size: 32px; font-weight: bold; letter-spacing: 5px; color: #4CAF50;">${verifyCode}</span>
  </div>
  <p>This code will expire in 10 Minutes for security reasons.</p>
  <p>Best regards,<br>${process.env.NEXT_PUBLIC_API_WEBSITE_NAME}</p>
</div>
<div style="text-align: center; margin-top: 20px; color: #888; font-size: 0.8em;">
  <p>This is an automated message, please do not reply to this email.</p>
</div>
</body>
</html>
`;
}

/*export const generateEmailTemplate = (
  options: GenericEmailOption,
  content: { subject: string; title: string; message: string; headerColor: string }
): string => {
  const websiteName = process.env.NEXT_PUBLIC_API_WEBSITE_NAME || "Universities Page";
  
  return `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${content.subject}</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f7fa;
            margin: 0;
            padding: 20px;
        }
        
        .email-container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        
        .email-header {
            background: linear-gradient(135deg, ${content.headerColor}, ${content.headerColor}dd);
            padding: 40px 30px;
            text-align: center;
            color: white;
        }
        
        .email-header h1 {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        
        .email-body {
            padding: 40px 30px;
        }
        
        .greeting {
            color: #2c3e50;
            font-size: 18px;
            margin-bottom: 20px;
            font-weight: 600;
        }
        
        .content {
            color: #5a6c7d;
            font-size: 15px;
            line-height: 1.6;
            margin-bottom: 20px;
        }
        
        .next-steps {
            background: #e8f4fd;
            border-left: 4px solid #3498db;
            padding: 20px;
            border-radius: 8px;
            margin: 25px 0;
        }
        
        .contact-info {
            text-align: center;
            padding: 25px;
            background: #f8f9fa;
            border-radius: 12px;
            margin-top: 30px;
        }
        
        .email-footer {
            text-align: center;
            padding: 25px;
            background: #2c3e50;
            color: white;
            font-size: 12px;
        }
        
        @media (max-width: 600px) {
            .email-body {
                padding: 25px 20px;
            }
            
            .email-header {
                padding: 30px 20px;
            }
        }
    </style>
</head>
<body>
    <div class="email-container">
        <div class="email-header">
            <h1>${content.title}</h1>
        </div>
        
        <div class="email-body">
            <div class="greeting">
                Hello${options.userName ? `, ${options.userName}` : ''}!
            </div>
            
            <div class="content">
                ${content.message}
            </div>
            
            <div class="next-steps">
                <strong>What happens next?</strong><br>
                Our team will process your request and contact you if needed. You'll typically hear back from us within 24-48 hours.
            </div>
            
            <div class="contact-info">
                <strong>Need immediate assistance?</strong><br>
                📞 +1 (555) 123-4567 | ✉️ support@universitiespage.com
            </div>
        </div>
        
        <div class="email-footer">
            <p>&copy; 2024 ${websiteName}. All rights reserved.</p>
        </div>
    </div>
</body>
</html>`;
};
*/
export const generateEmailTemplate = (
  isFallback = false,
  content: { subject: string; title: string; message: string; headerColor: string }
): string => {
  
  return `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${content.title}</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        :root {
            --primary: #0B6D76;
            --secondary: #0f766e;
            --accent: #f59e0b;
            --dark: #1e293b;
            --light: #f8fafc;
        }
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            margin: 0;
            padding: 20px;
            line-height: 1.6;
        }
        .email-container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .email-header {
            padding: 30px 0;
            text-align: center;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
        }
        .logo-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }
        .logo-image {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            object-fit: contain;
        }
        .logo-text {
            font-size: 20px;
            font-weight: 700;
            background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
        }
        .email-body {
            padding: 30px;
            color: var(--dark);
        }
        h1 {
            color: var(--primary);
            font-size: 24px;
            margin-bottom: 16px;
            font-weight: 700;
            line-height: 1.2;
        }
        p {
            font-size: 14px;
            line-height: 1.6;
            color: #475569;
            margin-bottom: 16px;
        }
        .request-details {
            background: #f0fdf4;
            border-left: 4px solid var(--primary);
            padding: 16px;
            margin: 16px 0;
            border-radius: 8px;
        }
        .fallback-warning {
            background: #fef3c7;
            border-left: 4px solid #f59e0b;
            padding: 16px;
            margin: 16px 0;
            border-radius: 8px;
        }
        .student-info {
            background: #eff6ff;
            border-left: 4px solid var(--secondary);
            padding: 16px;
            margin: 16px 0;
            border-radius: 8px;
        }
        .info-grid {
            display: grid;
            gap: 8px;
        }
        .info-item {
            display: flex;
            justify-content: space-between;
            padding: 4px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }
        .info-label {
            font-weight: 600;
            color: #374151;
        }
        .info-value {
            color: #6b7280;
        }
        .email-footer {
            background: var(--dark);
            padding: 16px;
            text-align: center;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.8);
        }
        @media (max-width: 640px) {
            .email-body { padding: 20px; }
            h1 { font-size: 20px; }
        }
    </style>
</head>
<body>
    <div class="email-container">
        <div class="email-header">
            <div class="logo-container">
                <!-- Logo Image -->
                <img src="https://universitiespage.com/assets/logo.png" class="logo-image" alt="UniversitiesPage Logo">
                
                <!-- Site Name -->
                <div class="logo-text">
                    Universities Page
                </div>
            </div>
        </div>
        <div class="email-body">
            
            <p>Thank you for reaching out to Universities Page. We have received your submission and a dedicated representative will review it shortly.</p>

            <p>Our team will get in touch with you soon to provide guidance or support regarding your request.</p>
           
            
            <p style="margin-top: 24px; font-size: 13px;">Best Regards,<br>
                <strong>Universities Page Team</strong><br>
                <a href="mailto:support@universitiespage.com" style="color: var(--primary); text-decoration: none;">support@universitiespage.com</a><br>
                <a href="https://www.universitiespage.com" style="color: var(--primary); text-decoration: none;">www.universitiespage.com</a>
            </p>
        </div>
        <div class="email-footer">
            <p style="margin: 0;">© ${new Date().getFullYear()} Universities Page. All rights reserved.</p>
        </div>
    </div>
</body>
</html>`;
};

export const COMPARISON_EMAIL_TEMPLATE = (comparisonType, selectedItems, aiResults, userData) => {
    const formatDate = (dateString) => {
        const date = new Date(dateString);
        return date.toLocaleDateString('en-US', {
            weekday: 'long',
            year: 'numeric',
            month: 'long',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });
    };

    const getConfidenceColor = (confidence) => {
        switch (confidence) {
            case 'high': return '#10b981';
            case 'medium': return '#f59e0b';
            case 'low': return '#ef4444';
            default: return '#0B6F78';
        }
    };

    // Field definitions matching the comparison.jsx
    const UNIVERSITY_FIELDS = [
        { 
            key: 'founded', 
            label: 'Founded In',
            icon: '📅'
        },
        { 
            key: 'type', 
            label: 'Institution Type',
            icon: '🏛️'
        },
        { 
            key: 'course_count', 
            label: 'Programs Offered',
            icon: '📚'
        },
        { 
            key: 'intake', 
            label: 'Intake',
            icon: '📆'
        },
        { 
            key: 'language', 
            label: 'Languages',
            icon: '🌐'
        },
        { 
            key: 'accommodation', 
            label: 'Accommodation',
            icon: '🏠'
        },
        { 
            key: 'address', 
            label: 'Address',
            icon: '📍'
        },
        { 
            key: 'total_students', 
            label: 'Student Body', 
            icon: '👥'
        },
        { 
            key: 'international_student', 
            label: 'International Students', 
            icon: '🌍'
        },
        { 
            key: 'ranking', 
            label: 'Global Ranking', 
            icon: '🏆'
        },
        { 
            key: 'scholarship', 
            label: 'Scholarship',
            icon: '💰'
        },
        { 
            key: 'website', 
            label: 'Official Website', 
            icon: '🔗'
        }
    ];

    const COURSE_FIELDS = [
        { 
            key: 'university', 
            label: 'Institution',
            icon: '🎓'
        },
        { 
            key: 'qualification', 
            label: 'Degree Level',
            icon: '🎖️'
        },
        { 
            key: 'duration', 
            label: 'Course Duration', 
            icon: '⏰'
        },
        { 
            key: 'fee_with_symbol', 
            label: 'Annual Fee', 
            icon: '💵'
        },
        { 
            key: 'application_fee_with_symbol', 
            label: 'Application Fee', 
            icon: '💰'
        },
        { 
            key: 'language', 
            label: 'Language of Instruction',
            icon: '🗣️'
        },
        { 
            key: 'scholarship', 
            label: 'Scholarship',
            icon: '🏅'
        }
    ];

    const fields = comparisonType === 'university' ? UNIVERSITY_FIELDS : COURSE_FIELDS;

    // Helper function to format field values
    const formatFieldValue = (field, item) => {
        if (!item || !item[field.key]) {
            return '-';
        }
        
        const value = item[field.key];
        
        // Apply specific formatting based on field type
        switch (field.key) {
            case 'scholarship':
                return Number(value) === 1 ? 'Available ✅' : 'Not Available';
            
            case 'duration':
                if (!value) return '-';
                const num = parseInt(value);
                if (isNaN(num)) return value;
                if (num >= 1 && num <= 9) {
                    return `${num} year${num > 1 ? 's' : ''}`;
                }
                return `${num} month${num > 1 ? 's' : ''}`;
            
            case 'total_students':
                return value ? `${parseInt(value).toLocaleString()}+` : '-';
            
            case 'international_student':
                return value ? `${value}+` : '-';
            
            case 'course_count':
                return value ? `${value} Programs` : 'No Programs';
            
            case 'accommodation':
                if (!value) return 'Not Available';
                if (value.toLowerCase() === 'yes') return 'Available';
                if (value.toLowerCase() === 'no') return 'Not Available';
                return value;
            
            case 'type':
                if (!value) return '-';
                return value.split(' ').map(word => 
                    word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
                ).join(' ');
            
            default:
                return value || '-';
        }
    };

    // Helper to render sections for detailed comparison
    const renderDetailedComparisonSections = () => {
        const sections = aiResults?.ai_analysis?.detailed_comparison?.sections;
        if (!sections || sections.length === 0) return '';
        
        return sections.map(section => `
            <div style="margin-bottom: 20px; padding: 15px; background: #f8fafc; border-radius: 8px; border-left: 4px solid #0B6F78;">
                <h3 style="margin: 0 0 10px 0; color: #1e293b; font-size: 16px; font-weight: 600;">
                    ${section.title}
                </h3>
                <p style="margin: 0 0 10px 0; color: #475569; line-height: 1.6;">
                    ${section.content}
                </p>
                ${section.key_points && section.key_points.length > 0 ? `
                    <div style="margin-top: 10px;">
                        <h4 style="margin: 0 0 8px 0; color: #64748b; font-size: 14px; font-weight: 500;">Key Points:</h4>
                        <ul style="margin: 0; padding-left: 20px; color: #475569;">
                            ${section.key_points.map(point => `
                                <li style="margin-bottom: 4px;">${point}</li>
                            `).join('')}
                        </ul>
                    </div>
                ` : ''}
            </div>
        `).join('');
    };

    // Helper to render comparative analysis
    const renderComparativeAnalysis = () => {
        const comparative = aiResults?.ai_analysis?.comparative_analysis;
        if (!comparative) return '';
        
        let html = '';
        
        // Ranking Order
        if (comparative.ranking_order && comparative.ranking_order.length > 0) {
            html += `
                <div style="margin-bottom: 20px;">
                    <h3 style="margin: 0 0 10px 0; color: #1e293b; font-size: 16px; font-weight: 600;">📊 Ranking Order</h3>
                    <div style="display: flex; flex-direction: column; gap: 10px;">
                        ${comparative.ranking_order.map((rank, index) => `
                            <div style="display: flex; align-items: center; gap: 10px; padding: 10px; background: white; border-radius: 6px; border: 1px solid #e2e8f0;">
                                <span style="display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: linear-gradient(135deg, #0B6F78 0%, #0a306b 100%); color: white; border-radius: 50%; font-weight: bold; font-size: 14px;">
                                    ${index + 1}
                                </span>
                                <span style="color: #475569; font-size: 14px; flex: 1;">${rank}</span>
                            </div>
                        `).join('')}
                    </div>
                </div>
            `;
        }
        
        // Key Differences
        if (comparative.key_differences && comparative.key_differences.length > 0) {
            html += `
                <div style="margin-bottom: 20px;">
                    <h3 style="margin: 0 0 10px 0; color: #1e293b; font-size: 16px; font-weight: 600;">🔍 Key Differences</h3>
                    <ul style="margin: 0; padding-left: 20px; color: #475569;">
                        ${comparative.key_differences.map(difference => `
                            <li style="margin-bottom: 6px;">${difference}</li>
                        `).join('')}
                    </ul>
                </div>
            `;
        }
        
        // Value Analysis
        if (comparative.value_analysis) {
            html += `
                <div style="margin-bottom: 20px;">
                    <h3 style="margin: 0 0 10px 0; color: #1e293b; font-size: 16px; font-weight: 600;">💰 Value Analysis</h3>
                    <p style="margin: 0; color: #475569; line-height: 1.6; padding: 12px; background: #f0f9ff; border-radius: 6px; border: 1px solid #bae6fd;">
                        ${comparative.value_analysis}
                    </p>
                </div>
            `;
        }
        
        return html ? `
            <div class="section" style="margin-bottom: 40px;">
                <h2 class="section-title" style="font-size: 20px; font-weight: 600; color: #0a306b; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #e2e8f0;">📈 Comparative Analysis</h2>
                ${html}
            </div>
        ` : '';
    };

    return `
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="x-apple-disable-message-reformatting">
    <title>Your AI Comparison Report</title>
    <!--[if mso]>
    <style type="text/css">
        table {border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;}
        td, th, div, p {font-family: Arial, sans-serif;}
        .header-gradient {background: #0B6F78 !important;}
        .gradient-bg {background: #0B6F78 !important;}
        .comparison-table {width: 100% !important; border-collapse: collapse !important;}
        .comparison-table td, .comparison-table th {padding: 12px 8px !important; text-align: left !important;}
    </style>
    <![endif]-->
    <style type="text/css">
        /* Reset styles */
        * {
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            margin: 0 !important;
            padding: 20px 0 !important;
            width: 100% !important;
            font-family: Arial, Helvetica, sans-serif;
            line-height: 1.6;
            color: #333333;
            background-color: #f8fafc;
            -webkit-font-smoothing: antialiased;
        }
        
        table {
            border-spacing: 0;
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
        }
        
        img {
            border: 0;
            height: auto;
            line-height: 100%;
            outline: none;
            text-decoration: none;
            -ms-interpolation-mode: bicubic;
        }
        
        a {
            color: #0B6F78;
            text-decoration: none;
        }
        
        a:hover {
            text-decoration: underline;
        }
        
        /* Main container */
        .email-container {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            background-color: #ffffff;
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid #e2e8f0;
        }
        
        /* Header */
        .header {
            background: linear-gradient(135deg, #0B6F78 0%, #0a306b 100%);
            background-color: #0B6F78; /* Fallback */
            padding: 40px 30px;
            text-align: center;
            color: #ffffff;
        }
        
        .logo {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 15px;
        }
        
        .title {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 10px;
            color: #ffffff;
        }
        
        .subtitle {
            font-size: 16px;
            opacity: 0.9;
            max-width: 500px;
            margin: 0 auto;
            color: #ffffff;
            line-height: 1.5;
        }
        
        /* Content sections */
        .content {
            padding: 40px 30px;
        }
        
        .section {
            margin-bottom: 40px;
        }
        
        .section-title {
            font-size: 20px;
            font-weight: 600;
            color: #0a306b;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e2e8f0;
        }
        
        /* Info card */
        .info-card {
            background-color: #f8fafc;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            border-left: 4px solid #0B6F78;
        }
        
        .info-row {
            display: block;
            margin-bottom: 12px;
        }
        
        .info-label {
            font-weight: 600;
            color: #64748b;
            display: inline-block;
            width: 180px;
        }
        
        .info-value {
            color: #1e293b;
            display: inline-block;
        }
        
        /* AI Summary */
        .ai-summary {
            background-color: #f0f9ff;
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            border-radius: 12px;
            padding: 25px;
            border: 1px solid #bae6fd;
        }
        
        .summary-title {
            font-size: 18px;
            font-weight: 600;
            color: #0369a1;
            margin-bottom: 15px;
        }
        
        .summary-content {
            font-size: 16px;
            line-height: 1.7;
            color: #0c4a6e;
        }
        
        /* Comparison Table */
        .comparison-table-container {
            background-color: #ffffff;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            margin-bottom: 30px;
        }
        
        .comparison-header {
            background: linear-gradient(135deg, #0B6F78 0%, #0a306b 100%);
            background-color: #0B6F78;
            padding: 20px;
            color: #ffffff;
        }
        
        .comparison-header h3 {
            font-size: 20px;
            font-weight: 700;
            margin: 0;
            color: #ffffff;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .comparison-table th {
            background-color: #f8fafc;
            padding: 16px 12px;
            text-align: left;
            font-weight: 600;
            color: #1e293b;
            border-bottom: 2px solid #e2e8f0;
            border-right: 1px solid #e2e8f0;
        }
        
        .comparison-table td {
            padding: 16px 12px;
            border-bottom: 1px solid #f1f5f9;
            border-right: 1px solid #f1f5f9;
            vertical-align: top;
        }
        
        .comparison-table tr:last-child td {
            border-bottom: none;
        }
        
        .comparison-table td:last-child,
        .comparison-table th:last-child {
            border-right: none;
        }
        
        .criteria-cell {
            background-color: #f8fafc;
            min-width: 200px;
        }
        
        .criteria-content {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .criteria-icon {
            font-size: 18px;
            min-width: 24px;
        }
        
        .criteria-label {
            font-weight: 500;
            color: #1e293b;
        }
        
        .item-cell {
            text-align: center;
            min-width: 180px;
        }
        
        .item-name {
            font-weight: 600;
            color: #0a306b;
            margin-bottom: 8px;
            font-size: 14px;
        }
        
        .empty-slot {
            color: #94a3b8;
            font-style: italic;
            text-align: center;
        }
        
        .field-value {
            color: #1e293b;
            line-height: 1.5;
            font-size: 14px;
        }
        
        .highlight-value {
            color: #0B6F78;
            font-weight: 600;
        }
        
        .available-badge {
            display: inline-block;
            padding: 4px 8px;
            background-color: #10b981;
            color: white;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
        }
        
        /* Ranking items */
        .ranking-item {
            display: block;
            margin-bottom: 15px;
            padding: 15px;
            background-color: #f8fafc;
            border-radius: 10px;
            border: 1px solid #e2e8f0;
        }
        
        .rank-number {
            display: inline-block;
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #0B6F78 0%, #0a306b 100%);
            background-color: #0B6F78; /* Fallback */
            color: #ffffff;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            font-weight: bold;
            font-size: 18px;
            margin-right: 15px;
            vertical-align: middle;
        }
        
        .rank-name {
            display: inline-block;
            font-weight: 500;
            vertical-align: middle;
            width: calc(100% - 120px);
        }
        
        .rank-score {
            display: inline-block;
            font-weight: bold;
            color: #0B6F78;
            vertical-align: middle;
            text-align: right;
            width: 60px;
        }
        
        /* Top Recommendation Styles */
        .recommendation-card {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            border-radius: 12px;
            padding: 25px;
            border: 2px solid #bae6fd;
            margin-bottom: 20px;
        }
        
        .recommendation-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
        }
        
        .recommendation-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #0B6F78 0%, #0a306b 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
        }
        
        .recommendation-title {
            font-size: 22px;
            font-weight: 700;
            color: #0a306b;
            margin: 0;
        }
        
        .recommendation-subtitle {
            font-size: 16px;
            color: #475569;
            margin: 5px 0 0 0;
        }
        
        .reason-box {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
            border: 1px solid #e2e8f0;
        }
        
        .reason-title {
            font-size: 16px;
            font-weight: 600;
            color: #1e293b;
            margin: 0 0 10px 0;
        }
        
        .reason-text {
            color: #475569;
            line-height: 1.6;
            margin: 0;
        }
        
        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 15px 0;
        }
        
        .tag {
            display: inline-block;
            padding: 6px 12px;
            background: #f1f5f9;
            color: #475569;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
        }
        
        .tag-highlight {
            background: #dbeafe;
            color: #1d4ed8;
        }
        
        .list-container {
            margin: 15px 0;
        }
        
        .list-title {
            font-size: 15px;
            font-weight: 600;
            color: #1e293b;
            margin: 0 0 8px 0;
        }
        
        .list {
            margin: 0;
            padding-left: 20px;
            color: #475569;
        }
        
        .list li {
            margin-bottom: 6px;
        }
        
        /* Buttons */
        .btn-container {
            text-align: center;
            margin-top: 40px;
        }
        
        .btn {
            display: inline-block;
            background: linear-gradient(135deg, #0B6F78 0%, #0a306b 100%);
            background-color: #0B6F78; /* Fallback */
            color: #ffffff !important;
            padding: 12px 30px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            margin: 0 5px 10px;
            text-align: center;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }
        
        .btn-secondary {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            background-color: #4f46e5; /* Fallback */
        }
        
        /* Footer */
        .footer {
            background-color: #f1f5f9;
            padding: 30px;
            text-align: center;
            border-top: 1px solid #e2e8f0;
        }
        
        .footer-text {
            color: #64748b;
            font-size: 14px;
            margin-bottom: 15px;
            line-height: 1.5;
        }
        
        .contact-info {
            margin-top: 20px;
            font-size: 14px;
            color: #475569;
        }
        
        .contact-info span {
            display: inline-block;
            margin: 0 10px;
        }
        
        .footer-copyright {
            color: #64748b;
            font-size: 12px;
            margin-top: 20px;
            line-height: 1.5;
        }
        
        /* Mobile responsiveness for tables */
        @media only screen and (max-width: 620px) {
            .email-container {
                border-radius: 0;
                border: none;
            }
            
            .header, .content {
                padding: 30px 20px !important;
            }
            
            .title {
                font-size: 24px !important;
            }
            
            .comparison-table {
                display: block;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            
            .comparison-table th,
            .comparison-table td {
                min-width: 150px;
            }
            
            .criteria-cell {
                min-width: 180px;
            }
            
            .item-cell {
                min-width: 160px;
            }
            
            .btn {
                display: block !important;
                width: 100% !important;
                margin: 0 0 10px 0 !important;
            }
            
            .recommendation-header {
                flex-direction: column;
                text-align: center;
                gap: 10px;
            }
            
            .recommendation-icon {
                width: 50px;
                height: 50px;
                font-size: 24px;
            }
        }
        
        @media only screen and (max-width: 480px) {
            .content {
                padding: 20px 15px !important;
            }
            
            .header {
                padding: 30px 15px !important;
            }
            
            .section-title {
                font-size: 18px !important;
            }
            
            .comparison-table th,
            .comparison-table td {
                padding: 12px 8px !important;
                font-size: 13px;
            }
            
            .criteria-content {
                gap: 8px;
            }
            
            .criteria-icon {
                font-size: 16px;
                min-width: 20px;
            }
            
            .recommendation-card {
                padding: 20px 15px;
            }
            
            .tags-container {
                gap: 6px;
            }
            
            .tag {
                padding: 4px 10px;
                font-size: 12px;
            }
        }
        
        /* Print styles */
        @media print {
            body {
                background-color: #ffffff !important;
            }
            
            .email-container {
                box-shadow: none !important;
                border: 1px solid #cccccc !important;
            }
            
            .btn {
                display: none !important;
            }
            
            .comparison-table {
                width: 100% !important;
                border-collapse: collapse !important;
            }
        }
    </style>
</head>
<body style="margin: 0; padding: 20px 0; background-color: #f8fafc; font-family: Arial, Helvetica, sans-serif;">
    <!--[if mso]>
    <center>
    <table width="800" align="center" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border-radius: 20px;">
        <tr>
            <td width="800">
    <![endif]-->
    
    <div class="email-container" style="width: 100%; max-width: 800px; margin: 0 auto; background-color: #ffffff; border-radius: 20px; overflow: hidden; border: 1px solid #e2e8f0;">
        <!-- Header -->
        <div class="header" style="background: linear-gradient(135deg, #0B6F78 0%, #0a306b 100%); background-color: #0B6F78; padding: 40px 30px; text-align: center; color: #ffffff;">
            <div class="logo" style="font-size: 32px; font-weight: bold; margin-bottom: 15px; color: #ffffff;">🎓 UniversitiesPage AI</div>
            <h1 class="title" style="font-size: 28px; font-weight: 700; margin-bottom: 10px; color: #ffffff;">Your AI Comparison Report</h1>
            <p class="subtitle" style="font-size: 16px; opacity: 0.9; max-width: 500px; margin: 0 auto; color: #ffffff; line-height: 1.5;">
                Detailed analysis of ${comparisonType === 'university' ? 'universities' : 'courses'} 
                compared on ${formatDate(aiResults?.timestamp || new Date().toISOString())}
            </p>
        </div>
        
        <!-- Content -->
        <div class="content" style="padding: 40px 30px;">
            <!-- Comparison Details -->
            <div class="section" style="margin-bottom: 40px;">
                <h2 class="section-title" style="font-size: 20px; font-weight: 600; color: #0a306b; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #e2e8f0;">📋 Comparison Details</h2>
                <div class="info-card" style="background-color: #f8fafc; border-radius: 12px; padding: 20px; margin-bottom: 20px; border-left: 4px solid #0B6F78;">
                    <div class="info-row" style="display: block; margin-bottom: 12px;">
                        <span class="info-label" style="font-weight: 600; color: #64748b; display: inline-block; width: 180px;">Comparison Type:</span>
                        <span class="info-value" style="color: #1e293b; display: inline-block;">
                            ${comparisonType === 'university' ? '🏛️ University Comparison' : '📚 Course Comparison'}
                        </span>
                    </div>
                    <div class="info-row" style="display: block; margin-bottom: 12px;">
                        <span class="info-label" style="font-weight: 600; color: #64748b; display: inline-block; width: 180px;">Items Compared:</span>
                        <span class="info-value" style="color: #1e293b; display: inline-block;">${selectedItems?.length || 0}</span>
                    </div>
                    <div class="info-row" style="display: block; margin-bottom: 12px;">
                        <span class="info-label" style="font-weight: 600; color: #64748b; display: inline-block; width: 180px;">Report Generated:</span>
                        <span class="info-value" style="color: #1e293b; display: inline-block;">${formatDate(aiResults?.timestamp || new Date().toISOString())}</span>
                    </div>
                    <div class="info-row" style="display: block; margin-bottom: 12px;">
                        <span class="info-label" style="font-weight: 600; color: #64748b; display: inline-block; width: 180px;">AI Model:</span>
                        <span class="info-value" style="color: #1e293b; font-weight: 600; display: inline-block;">
                            ${aiResults?.metadata?.ai_model === 'fallback' ? 'Basic Analysis' : 'DeepSeek AI'}
                        </span>
                    </div>
                </div>
            </div>

            <!-- AI Overview -->
            ${aiResults?.ai_analysis?.overview ? `
                <div class="section" style="margin-bottom: 40px;">
                    <h2 class="section-title" style="font-size: 20px; font-weight: 600; color: #0a306b; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #e2e8f0;">🤖 AI Executive Overview</h2>
                    <div class="ai-summary" style="background-color: #f0f9ff; border-radius: 12px; padding: 25px; border: 1px solid #bae6fd;">
                        <div class="summary-title" style="font-size: 18px; font-weight: 600; color: #0369a1; margin-bottom: 15px;">Key Analysis</div>
                        <div class="summary-content" style="font-size: 16px; line-height: 1.7; color: #0c4a6e;">
                            ${aiResults.ai_analysis.overview}
                        </div>
                    </div>
                </div>
            ` : ''}
            
            <!-- Top Recommendation -->
            ${aiResults?.ai_analysis?.top_recommendation ? `
                <div class="section" style="margin-bottom: 40px;">
                    <h2 class="section-title" style="font-size: 20px; font-weight: 600; color: #0a306b; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #e2e8f0;">🏆 Top Recommendation</h2>
                    <div class="recommendation-card">
                        <div class="recommendation-header">
                            <div class="recommendation-icon" style="width: 60px; height: 60px; background: linear-gradient(135deg, #0B6F78 0%, #0a306b 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 28px;">
                                🏅
                            </div>
                            <div>
                                <h3 class="recommendation-title" style="font-size: 22px; font-weight: 700; color: #0a306b; margin: 0;">
                                    ${aiResults.ai_analysis.top_recommendation.name}
                                </h3>
                                <p class="recommendation-subtitle" style="font-size: 16px; color: #475569; margin: 5px 0 0 0;">
                                    Our expert recommendation
                                </p>
                            </div>
                        </div>
                        
                        <div class="reason-box">
                            <h4 class="reason-title" style="font-size: 16px; font-weight: 600; color: #1e293b; margin: 0 0 10px 0;">Why This is Recommended:</h4>
                            <p class="reason-text" style="color: #475569; line-height: 1.6; margin: 0;">
                                ${aiResults.ai_analysis.top_recommendation.reason}
                            </p>
                        </div>
                        
                        ${aiResults.ai_analysis.top_recommendation.best_for && aiResults.ai_analysis.top_recommendation.best_for.length > 0 ? `
                            <div class="list-container">
                                <h4 class="list-title" style="font-size: 15px; font-weight: 600; color: #1e293b; margin: 0 0 8px 0;">👥 Best For:</h4>
                                <div class="tags-container">
                                    ${aiResults.ai_analysis.top_recommendation.best_for.map(type => `
                                        <span class="tag" style="display: inline-block; padding: 6px 12px; background: #f1f5f9; color: #475569; border-radius: 20px; font-size: 13px; font-weight: 500;">${type}</span>
                                    `).join('')}
                                </div>
                            </div>
                        ` : ''}
                        
                        ${aiResults.ai_analysis.top_recommendation.strengths && aiResults.ai_analysis.top_recommendation.strengths.length > 0 ? `
                            <div class="list-container">
                                <h4 class="list-title" style="font-size: 15px; font-weight: 600; color: #1e293b; margin: 0 0 8px 0;">✨ Key Strengths:</h4>
                                <ul class="list" style="margin: 0; padding-left: 20px; color: #475569;">
                                    ${aiResults.ai_analysis.top_recommendation.strengths.map(strength => `
                                        <li style="margin-bottom: 6px;">${strength}</li>
                                    `).join('')}
                                </ul>
                            </div>
                        ` : ''}
                        
                        ${aiResults.ai_analysis.top_recommendation.considerations && aiResults.ai_analysis.top_recommendation.considerations.length > 0 ? `
                            <div class="list-container">
                                <h4 class="list-title" style="font-size: 15px; font-weight: 600; color: #1e293b; margin: 0 0 8px 0;">⚠️ Important Considerations:</h4>
                                <ul class="list" style="margin: 0; padding-left: 20px; color: #475569;">
                                    ${aiResults.ai_analysis.top_recommendation.considerations.map(consideration => `
                                        <li style="margin-bottom: 6px;">${consideration}</li>
                                    `).join('')}
                                </ul>
                            </div>
                        ` : ''}
                    </div>
                </div>
            ` : ''}
            
            <!-- Detailed Comparison Sections -->
            ${aiResults?.ai_analysis?.detailed_comparison?.sections && aiResults.ai_analysis.detailed_comparison.sections.length > 0 ? `
                <div class="section" style="margin-bottom: 40px;">
                    <h2 class="section-title" style="font-size: 20px; font-weight: 600; color: #0a306b; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #e2e8f0;">📋 Detailed Comparison Analysis</h2>
                    ${renderDetailedComparisonSections()}
                </div>
            ` : ''}
            
            <!-- Comparative Analysis -->
            ${renderComparativeAnalysis()}
            
            <!-- Final Advice -->
            ${aiResults?.ai_analysis?.final_advice ? `
                <div class="section" style="margin-bottom: 40px;">
                    <h2 class="section-title" style="font-size: 20px; font-weight: 600; color: #0a306b; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #e2e8f0;">💡 Final Advice & Next Steps</h2>
                    <div class="ai-summary" style="background-color: #f0f9ff; border-radius: 12px; padding: 25px; border: 1px solid #bae6fd;">
                        <div class="summary-content" style="font-size: 16px; line-height: 1.7; color: #0c4a6e;">
                            ${aiResults.ai_analysis.final_advice}
                        </div>
                    </div>
                </div>
            ` : ''}
            
            <!-- Detailed Comparison Table -->
            <div class="section" style="margin-bottom: 40px;">
                <div class="comparison-table-container">
                    <div class="comparison-header">
                        <h3 style="font-size: 20px; font-weight: 700; margin: 0; color: #ffffff; display: flex; align-items: center; gap: 10px;">
                            📊 Detailed Comparison Table
                        </h3>
                        <p style="color: #e2e8f0; margin-top: 8px; font-size: 14px;">
                            Side-by-side comparison of ${selectedItems?.length || 0} ${comparisonType === 'university' ? 'universities' : 'courses'}
                        </p>
                    </div>
                    
                    <table class="comparison-table" width="100%" cellpadding="0" cellspacing="0" border="0" style="width: 100%; border-collapse: collapse;">
                        <thead>
                            <tr>
                                <th class="criteria-cell" style="background-color: #f8fafc; padding: 16px 12px; text-align: left; font-weight: 600; color: #1e293b; border-bottom: 2px solid #e2e8f0; border-right: 1px solid #e2e8f0; min-width: 200px;">
                                    Criteria
                                </th>
                                ${selectedItems?.map((item, index) => `
                                    <th class="item-cell" style="background-color: #f8fafc; padding: 16px 12px; text-align: center; font-weight: 600; color: #1e293b; border-bottom: 2px solid #e2e8f0; border-right: 1px solid #e2e8f0; min-width: 180px;">
                                        ${item.name || item.title ? `
                                            <div class="item-name" style="font-weight: 600; color: #0a306b; margin-bottom: 8px; font-size: 14px;">
                                                ${item.name || item.title}
                                            </div>
                                            ${(item.city || item.country) ? `
                                                <div style="color: #64748b; font-size: 12px;">
                                                    ${item.city ? `${item.city}, ` : ''}${item.country || ''}
                                                </div>
                                            ` : ''}
                                        ` : `
                                            <div class="empty-slot" style="color: #94a3b8; font-style: italic; text-align: center;">
                                                Empty Slot ${index + 1}
                                            </div>
                                        `}
                                    </th>
                                `).join('') || `
                                    <th class="item-cell" style="background-color: #f8fafc; padding: 16px 12px; text-align: center; font-weight: 600; color: #1e293b; border-bottom: 2px solid #e2e8f0; border-right: 1px solid #e2e8f0; min-width: 180px;">
                                        No items selected
                                    </th>
                                `}
                            </tr>
                        </thead>
                        <tbody>
                            ${fields.map((field, index) => `
                                <tr style="${index % 2 === 0 ? 'background-color: #ffffff;' : 'background-color: #f8fafc;'}">
                                    <td class="criteria-cell" style="padding: 16px 12px; border-bottom: 1px solid #f1f5f9; border-right: 1px solid #f1f5f9; vertical-align: top; background-color: #f8fafc;">
                                        <div class="criteria-content" style="display: flex; align-items: center; gap: 12px;">
                                            <span class="criteria-icon" style="font-size: 18px; min-width: 24px;">${field.icon}</span>
                                            <span class="criteria-label" style="font-weight: 500; color: #1e293b;">${field.label}</span>
                                        </div>
                                    </td>
                                    ${selectedItems?.map(item => `
                                        <td class="item-cell" style="padding: 16px 12px; text-align: center; border-bottom: 1px solid #f1f5f9; border-right: 1px solid #f1f5f9; vertical-align: top;">
                                            <div class="field-value" style="color: #1e293b; line-height: 1.5; font-size: 14px;">
                                                ${formatFieldValue(field, item)}
                                            </div>
                                        </td>
                                    `).join('') || `
                                        <td class="item-cell" style="padding: 16px 12px; text-align: center; border-bottom: 1px solid #f1f5f9; border-right: 1px solid #f1f5f9; vertical-align: top;">
                                            <div class="field-value" style="color: #94a3b8; line-height: 1.5; font-size: 14px;">-</div>
                                        </td>
                                    `}
                                </tr>
                            `).join('')}
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- Action Buttons -->
            <div class="btn-container" style="text-align: center; margin-top: 40px;">
                <a href="https://universitiespage.com/comparison" class="btn" style="display: inline-block; background: linear-gradient(135deg, #0B6F78 0%, #0a306b 100%); background-color: #0B6F78; color: #ffffff !important; padding: 12px 30px; border-radius: 8px; text-decoration: none; font-weight: 600; margin: 0 5px 10px; text-align: center; font-size: 16px; border: none;">Run New Comparison</a>
                <a href="https://universitiespage.com/apply-online" class="btn btn-secondary" style="display: inline-block; background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); background-color: #4f46e5; color: #ffffff !important; padding: 12px 30px; border-radius: 8px; text-decoration: none; font-weight: 600; margin: 0 5px 10px; text-align: center; font-size: 16px; border: none;">Get Expert Consultation</a>
            </div>
        </div>
        
        <!-- Footer -->
        <div class="footer" style="background-color: #f1f5f9; padding: 30px; text-align: center; border-top: 1px solid #e2e8f0;">
            <p class="footer-text" style="color: #64748b; font-size: 14px; margin-bottom: 15px; line-height: 1.5;">
                This report was generated by UniversitiesPage AI's intelligent comparison system.<br>
                For any questions or corrections, please contact our support team.
            </p>
            <div class="contact-info" style="margin-top: 20px; font-size: 14px; color: #475569;">
                <span style="display: inline-block; margin: 0 10px;">📧 info@universitiespage.com</span>
                <span style="display: inline-block; margin: 0 10px;">📞 +923114998280</span>
                <span style="display: inline-block; margin: 0 10px;">🌐 www.universitiespage.com</span>
            </div>
            <p class="footer-copyright" style="color: #64748b; font-size: 12px; margin-top: 20px; line-height: 1.5;">
                © ${new Date().getFullYear()} UniversitiesPage AI. All rights reserved.<br />
                This email was sent to ${userData?.email || 'you'}
            </p>
        </div>
    </div>
    
    <!--[if mso]>
            </td>
        </tr>
    </table>
    </center>
    <![endif]-->
</body>
</html>
    `;
};

export const Eligibility_EMAIL_TEMPLATE = (eligibilityResults, userData, calculationInputs, symbol) => {
  const formatDate = (dateString) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('en-US', {
      weekday: 'long',
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  };

  const getEligibilityColor = (percentage) => {
    if (percentage >= 80) return '#10b981';
    if (percentage >= 60) return '#f59e0b';
    if (percentage >= 40) return '#f97316';
    return '#ef4444';
  };

  const getEligibilityLabel = (percentage) => {
    if (percentage >= 80) return 'Highly Eligible';
    if (percentage >= 60) return 'Moderately Eligible';
    if (percentage >= 40) return 'Partially Eligible';
    return 'Limited Eligibility';
  };

  // Calculate average score
  const calculateAverageScore = () => {
    if (!eligibilityResults.courses || eligibilityResults.courses.length === 0) return 0;
    
    const validScores = eligibilityResults.courses
      .filter(course => course.ai_analysis?.eligibility_score)
      .map(course => course.ai_analysis.eligibility_score);
    
    if (validScores.length === 0) return 50;
    
    return Math.round(validScores.reduce((a, b) => a + b, 0) / validScores.length);
  };

  const averageScore = calculateAverageScore();
  const scoreColor = getEligibilityColor(averageScore);
  const eligibilityLabel = getEligibilityLabel(averageScore);

  return `
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Eligibility Analysis Report</title>
    <!--[if mso]>
    <xml>
        <o:OfficeDocumentSettings>
            <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
</head>
<body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: Arial, Helvetica, sans-serif;">
    <!--[if mso]>
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td bgcolor="#f8fafc" style="padding: 20px 0;">
    <![endif]-->
    
    <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f8fafc">
        <tr>
            <td align="center" style="padding: 20px 0;">
                <!-- Main Container -->
                <table width="800" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" style="max-width: 800px; width: 100%; border-radius: 20px; border: 1px solid #e2e8f0; overflow: hidden;">
                    <!-- Header -->
                    <tr>
                        <td bgcolor="#0d9488" style="background: linear-gradient(135deg, #0d9488 0%, #0ea5e9 100%); padding: 40px 30px; text-align: center; color: #ffffff;">
                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td style="text-align: center;">
                                        <div style="font-size: 32px; font-weight: bold; margin-bottom: 15px; color: #ffffff;">🎓 UniversitiesPage AI</div>
                                        <h1 style="font-size: 28px; font-weight: 700; margin: 0 0 10px 0; color: #ffffff;">AI Eligibility Analysis Report</h1>
                                        <p style="font-size: 16px; opacity: 0.9; max-width: 500px; margin: 0 auto; color: #ffffff; line-height: 1.5;">
                                            Personalized program recommendations based on your profile analysis
                                        </p>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    
                    <!-- Content -->
                    <tr>
                        <td style="padding: 40px 30px;">
                            <!-- Score Section -->
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 40px;">
                                <tr>
                                    <td align="center">
                                        <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f8fafc" style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-radius: 16px; padding: 30px; border: 2px solid #e2e8f0;">
                                            <tr>
                                                <td align="center">
                                                    <!-- Score Circle -->
                                                    <div style="width: 150px; height: 150px; margin: 0 auto 20px; border-radius: 50%; background: conic-gradient(${scoreColor} 0% ${averageScore}%, #e2e8f0 ${averageScore}% 100%); position: relative;">
                                                        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; background: white; border-radius: 50%; display: table; text-align: center;">
                                                            <div style="display: table-cell; vertical-align: middle;">
                                                                <div style="font-size: 36px; font-weight: 800; color: ${scoreColor}; line-height: 1;">${averageScore}%</div>
                                                                <div style="font-size: 14px; color: #64748b; margin-top: 5px; line-height: 1.2;">Average AI Score</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    
                                                    <div style="font-size: 24px; font-weight: 700; color: ${scoreColor}; margin-bottom: 10px;">${eligibilityLabel}</div>
                                                    <p style="color: #64748b; max-width: 500px; margin: 0 auto; line-height: 1.5;">
                                                        Based on analysis of ${eligibilityResults.total_results || 0} programs matching your criteria
                                                    </p>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                            
                            <!-- Student Profile -->
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 40px;">
                                <tr>
                                    <td>
                                        <h2 style="font-size: 20px; font-weight: 600; color: #1e293b; margin: 0 0 20px 0; padding-bottom: 10px; border-bottom: 2px solid #e2e8f0;">🎯 Your Profile Summary</h2>
                                        
                                        <!-- Profile Grid -->
                                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                            <tr>
                                                <td>
                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
                                                        <tr>
                                                            <td width="33%" style="padding: 10px;">
                                                                <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f8fafc" style="border-radius: 12px; padding: 20px; border: 1px solid #e2e8f0;">
                                                                    <tr>
                                                                        <td style="font-size: 16px; font-weight: 600; color: #475569; margin-bottom: 10px;">Country Preference</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td style="font-size: 18px; font-weight: 700; color: #1e293b;">${eligibilityResults.user_profile?.country || 'All Countries'}</td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                            <td width="33%" style="padding: 10px;">
                                                                <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f8fafc" style="border-radius: 12px; padding: 20px; border: 1px solid #e2e8f0;">
                                                                    <tr>
                                                                        <td style="font-size: 16px; font-weight: 600; color: #475569; margin-bottom: 10px;">Study Level</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td style="font-size: 18px; font-weight: 700; color: #1e293b;">${eligibilityResults.user_profile?.qualification || 'Not specified'}</td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                            <td width="33%" style="padding: 10px;">
                                                                <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f8fafc" style="border-radius: 12px; padding: 20px; border: 1px solid #e2e8f0;">
                                                                    <tr>
                                                                        <td style="font-size: 16px; font-weight: 600; color: #475569; margin-bottom: 10px;">Field of Interest</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td style="font-size: 18px; font-weight: 700; color: #1e293b;">${eligibilityResults.user_profile?.major || 'General'}</td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td width="33%" style="padding: 10px;">
                                                                <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f8fafc" style="border-radius: 12px; padding: 20px; border: 1px solid #e2e8f0;">
                                                                    <tr>
                                                                        <td style="font-size: 16px; font-weight: 600; color: #475569; margin-bottom: 10px;">Academic Profile</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td style="font-size: 18px; font-weight: 700; color: #1e293b;">${eligibilityResults.user_profile?.gpa || 'Not specified'} GPA</td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                            <td width="33%" style="padding: 10px;">
                                                                <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f8fafc" style="border-radius: 12px; padding: 20px; border: 1px solid #e2e8f0;">
                                                                    <tr>
                                                                        <td style="font-size: 16px; font-weight: 600; color: #475569; margin-bottom: 10px;">English Proficiency</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td style="font-size: 18px; font-weight: 700; color: #1e293b;">
                                                                            ${eligibilityResults.user_profile?.english_test_type ? 
                                                                              `${eligibilityResults.user_profile.english_test_type.toUpperCase()}: ${eligibilityResults.user_profile.english_test_score}` : 
                                                                              'Not specified'}
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                            <td width="33%" style="padding: 10px;">
                                                                <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f8fafc" style="border-radius: 12px; padding: 20px; border: 1px solid #e2e8f0;">
                                                                    <tr>
                                                                        <td style="font-size: 16px; font-weight: 600; color: #475569; margin-bottom: 10px;">Budget Range</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td style="font-size: 18px; font-weight: 700; color: #1e293b;">
                                                                            ${eligibilityResults.user_profile?.budget ? 
                                                                              `${symbol}${parseFloat(eligibilityResults.user_profile.budget).toLocaleString()}` : 
                                                                              'Flexible'}
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                            
                            <!-- AI Insights -->
                            ${eligibilityResults.ai_insights?.overall_summary ? `
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 40px;">
                                <tr>
                                    <td bgcolor="#ecfdf5" style="background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-radius: 12px; padding: 25px; border: 2px solid #a7f3d0;">
                                        <div style="font-size: 18px; font-weight: 600; color: #065f46; margin-bottom: 15px;">🤖 AI Analysis Summary</div>
                                        <div style="font-size: 16px; line-height: 1.7; color: #047857;">
                                            ${eligibilityResults.ai_insights.overall_summary}
                                        </div>
                                    </td>
                                </tr>
                            </table>
                            ` : ''}
                            
                            <!-- Top Course Recommendations -->
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 40px;">
                                <tr>
                                    <td>
                                        <h2 style="font-size: 20px; font-weight: 600; color: #1e293b; margin: 0 0 20px 0; padding-bottom: 10px; border-bottom: 2px solid #e2e8f0;">🏆 Top Program Recommendations</h2>
                                        
                                        ${eligibilityResults.courses ? eligibilityResults.courses.slice(0, 8).map((course, index) => {
                                            const aiAnalysis = course.ai_analysis;
                                            const score = aiAnalysis?.eligibility_score || course.similarity_score * 100 || 50;
                                            const scoreColor = getEligibilityColor(score);
                                            const recommendation = aiAnalysis?.recommendation === 'strong_recommend' ? 'Strong Match' :
                                                                   aiAnalysis?.recommendation === 'recommend_with_conditions' ? 'Good Match' : 'Consider';
                                            
                                            return `
                                            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px; border: 2px solid #e2e8f0; border-radius: 12px; padding: 20px; background: white;">
                                                <tr>
                                                    <td>
                                                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                                            <tr>
                                                                <td width="70%" style="font-size: 18px; font-weight: 700; color: #1e293b; padding-bottom: 10px;">
                                                                    ${course.name}
                                                                </td>
                                                                <td width="30%" align="right">
                                                                    <span style="display: inline-block; padding: 6px 12px; border-radius: 20px; font-weight: 700; font-size: 14px; background-color: ${scoreColor}20; color: ${scoreColor};">
                                                                        ${Math.round(score)}% Match
                                                                    </span>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td colspan="2" style="color: #64748b; padding-bottom: 15px;">
                                                                    ${course.university_name} • ${course.country_name}
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td colspan="2">
                                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                                                        <tr>
                                                                            <td width="33%" align="center" style="padding: 10px 0;">
                                                                                <div style="font-size: 12px; color: #64748b; margin-bottom: 4px;">Annual Fee</div>
                                                                                <div style="font-size: 14px; font-weight: 600; color: #1e293b;">${course.currency_symbol || '$'}${parseInt(course.yearly_fee || 0).toLocaleString()}</div>
                                                                            </td>
                                                                            <td width="33%" align="center" style="padding: 10px 0;">
                                                                                <div style="font-size: 12px; color: #64748b; margin-bottom: 4px;">Duration</div>
                                                                                <div style="font-size: 14px; font-weight: 600; color: #1e293b;">${course.duration} months</div>
                                                                            </td>
                                                                            <td width="33%" align="center" style="padding: 10px 0;">
                                                                                <div style="font-size: 12px; color: #64748b; margin-bottom: 4px;">AI Recommendation</div>
                                                                                <div style="font-size: 14px; font-weight: 600; color: #1e293b;">${recommendation}</div>
                                                                            </td>
                                                                        </tr>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                            ${aiAnalysis?.analysis_summary ? `
                                                            <tr>
                                                                <td colspan="2">
                                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f8fafc" style="border-radius: 8px; padding: 15px; margin-top: 15px; border-left: 4px solid #0d9488;">
                                                                        <tr>
                                                                            <td style="font-size: 14px; font-weight: 600; color: #475569; margin-bottom: 8px;">AI Analysis</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td style="font-size: 14px; color: #64748b; line-height: 1.5;">${aiAnalysis.analysis_summary}</td>
                                                                        </tr>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                            ` : ''}
                                                        </table>
                                                    </td>
                                                </tr>
                                            </table>
                                            `;
                                        }).join('') : `
                                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                            <tr>
                                                <td align="center" style="padding: 40px 0;">
                                                    <p style="color: #64748b; font-size: 16px;">No course recommendations available</p>
                                                </td>
                                            </tr>
                                        </table>
                                        `}
                                    </td>
                                </tr>
                            </table>
                            
                            <!-- Analysis Overview -->
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 40px;">
                                <tr>
                                    <td>
                                        <h2 style="font-size: 20px; font-weight: 600; color: #1e293b; margin: 0 0 20px 0; padding-bottom: 10px; border-bottom: 2px solid #e2e8f0;">📊 Analysis Overview</h2>
                                        
                                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                            <tr>
                                                <td width="25%" style="padding: 10px;">
                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f8fafc" style="border-radius: 12px; padding: 20px; border: 1px solid #e2e8f0;">
                                                        <tr>
                                                            <td style="font-size: 16px; font-weight: 600; color: #475569; margin-bottom: 10px;">Programs Analyzed</td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 18px; font-weight: 700; color: #1e293b;">${eligibilityResults.total_results || 0}</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td width="25%" style="padding: 10px;">
                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f8fafc" style="border-radius: 12px; padding: 20px; border: 1px solid #e2e8f0;">
                                                        <tr>
                                                            <td style="font-size: 16px; font-weight: 600; color: #475569; margin-bottom: 10px;">Highly Recommended</td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 18px; font-weight: 700; color: #1e293b;">${eligibilityResults.ai_insights?.highly_recommended_count || 0}</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td width="25%" style="padding: 10px;">
                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f8fafc" style="border-radius: 12px; padding: 20px; border: 1px solid #e2e8f0;">
                                                        <tr>
                                                            <td style="font-size: 16px; font-weight: 600; color: #475569; margin-bottom: 10px;">Average AI Score</td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 18px; font-weight: 700; color: #1e293b;">${averageScore}%</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td width="25%" style="padding: 10px;">
                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f8fafc" style="border-radius: 12px; padding: 20px; border: 1px solid #e2e8f0;">
                                                        <tr>
                                                            <td style="font-size: 16px; font-weight: 600; color: #475569; margin-bottom: 10px;">Report Generated</td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 18px; font-weight: 700; color: #1e293b;">${formatDate(new Date().toISOString())}</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                            
                            <!-- Next Steps -->
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 40px;">
                                <tr>
                                    <td>
                                        <h2 style="font-size: 20px; font-weight: 600; color: #1e293b; margin: 0 0 20px 0; padding-bottom: 10px; border-bottom: 2px solid #e2e8f0;">🚀 Next Steps & Recommendations</h2>
                                        
                                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                            <tr>
                                                <td width="25%" style="padding: 10px;">
                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f8fafc" style="border-radius: 12px; padding: 20px; border: 1px solid #e2e8f0; height: 100%;">
                                                        <tr>
                                                            <td style="font-size: 16px; font-weight: 600; color: #475569; margin-bottom: 10px;">Shortlist Programs</td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 14px; color: #64748b; line-height: 1.5;">
                                                                Select 3-5 programs from the recommendations above that best match your goals
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td width="25%" style="padding: 10px;">
                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f8fafc" style="border-radius: 12px; padding: 20px; border: 1px solid #e2e8f0; height: 100%;">
                                                        <tr>
                                                            <td style="font-size: 16px; font-weight: 600; color: #475569; margin-bottom: 10px;">Verify Requirements</td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 14px; color: #64748b; line-height: 1.5;">
                                                                Check official university websites for the most current admission requirements
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td width="25%" style="padding: 10px;">
                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f8fafc" style="border-radius: 12px; padding: 20px; border: 1px solid #e2e8f0; height: 100%;">
                                                        <tr>
                                                            <td style="font-size: 16px; font-weight: 600; color: #475569; margin-bottom: 10px;">Prepare Documents</td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 14px; color: #64748b; line-height: 1.5;">
                                                                Start gathering academic transcripts, test scores, and recommendation letters
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td width="25%" style="padding: 10px;">
                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f8fafc" style="border-radius: 12px; padding: 20px; border: 1px solid #e2e8f0; height: 100%;">
                                                        <tr>
                                                            <td style="font-size: 16px; font-weight: 600; color: #475569; margin-bottom: 10px;">Financial Planning</td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 14px; color: #64748b; line-height: 1.5;">
                                                                Explore scholarship opportunities and financial aid options
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                            
                            <!-- Action Buttons -->
                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td align="center">
                                        <table cellpadding="0" cellspacing="0" border="0">
                                            <tr>
                                                <td align="center" style="padding: 0 10px 20px;">
                                                    <a href="https://universitiespage.com/eligibility-calculator" style="display: inline-block; background: linear-gradient(135deg, #0d9488 0%, #0ea5e9 100%); color: #ffffff; padding: 12px 30px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 16px;">Run New Analysis</a>
                                                </td>
                                                <td align="center" style="padding: 0 10px 20px;">
                                                    <a href="https://universitiespage.com/apply-online" style="display: inline-block; background: linear-gradient(135deg, #0d9488 0%, #0ea5e9 100%); color: #ffffff; padding: 12px 30px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 16px;">Get Expert Consultation</a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    
                    <!-- Footer -->
                    <tr>
                        <td bgcolor="#f1f5f9" style="padding: 30px; text-align: center; border-top: 1px solid #e2e8f0;">
                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td style="color: #64748b; font-size: 14px; margin-bottom: 15px; line-height: 1.5;">
                                        This AI analysis report was generated by UniversitiesPage's advanced machine learning system.<br>
                                        For personalized guidance and application support, contact our admission experts.
                                    </td>
                                </tr>
                                <tr>
                                    <td style="margin-top: 20px; font-size: 14px; color: #475569;">
                                        <span style="display: inline-block; margin: 0 10px;">📧 info@universitiespage.com</span>
                                        <span style="display: inline-block; margin: 0 10px;">📞 +923114998280</span>
                                        <span style="display: inline-block; margin: 0 10px;">🌐 www.universitiespage.com</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="color: #64748b; font-size: 12px; margin-top: 20px; line-height: 1.5;">
                                        © ${new Date().getFullYear()} UniversitiesPage AI. All rights reserved.<br />
                                        This email was sent to ${userData?.email || 'you'} • Report ID: ${Date.now().toString(36).toUpperCase()}
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    
    <!--[if mso]>
            </td>
        </tr>
    </table>
    <![endif]-->
</body>
</html>
  `;
};