// email-modal.js — ES Module
// Modal to review and send invoice emails via AWS SES
// With Stripe Payment Link integration

import { showSpinner, hideSpinner, formatDate  } from '../utils/helpers.js';

let currentInvoice = null;
let quillInstance = null;

// ============================================================
// DOM & Render
// ============================================================

function ensureModalElement() {
    let modal = document.getElementById('email-modal');
    if (!modal) {
        modal = document.createElement('div');
        modal.id = 'email-modal';
        modal.className = 'modal fixed inset-0 bg-black bg-opacity-50 z-50 justify-center items-start pt-10 overflow-y-auto hidden';
        document.body.appendChild(modal);
    }
}
function getEmailModalTitle(invoice, isOverdue) {
    if (isOverdue) return `⏰ Send Reminder for Invoice #${invoice.invoice_number || invoice.id}`;
    if (invoice.email_status === 'sent') return `🔁 Resend Invoice #${invoice.invoice_number || invoice.id}`;
    return `📤 Send Invoice #${invoice.invoice_number || invoice.id}`;
}
function parseLocalDate(dateValue) {
    if (!dateValue) return null;

    if (dateValue instanceof Date) {
        return new Date(dateValue.getFullYear(), dateValue.getMonth(), dateValue.getDate());
    }

    const dateStr = String(dateValue).split('T')[0];
    const parts = dateStr.split('-').map(Number);

    if (parts.length === 3 && parts.every(Number.isFinite)) {
        return new Date(parts[0], parts[1] - 1, parts[2]);
    }

    const d = new Date(dateValue);
    return Number.isNaN(d.getTime()) ? null : d;
}

function getFirstSentDate(invoice) {
    const sentDates = Array.isArray(invoice.sent_dates)
        ? invoice.sent_dates.filter(Boolean)
        : [];

    if (sentDates.length === 0) {
        return null;
    }

    const sortedDates = sentDates
        .map(d => String(d).split('T')[0])
        .sort();

    return sortedDates[0];
}

function getTermDays(invoice) {
    const terms = String(invoice.terms || '').toLowerCase();

    if (terms.includes('due on receipt') || terms.includes('upon receipt')) {
        return 0;
    }

    const match = terms.match(/net\s*(\d+)/i);
    if (match) {
        return parseInt(match[1], 10);
    }

    return 30;
}

function addDays(dateValue, days) {
    const d = parseLocalDate(dateValue);
    if (!d) return null;

    d.setDate(d.getDate() + days);
    return d;
}

function getEffectiveDueDate(invoice) {
    const firstSentDate = getFirstSentDate(invoice);

    if (!firstSentDate) {
        return null;
    }

    return addDays(firstSentDate, getTermDays(invoice));
}

function getOverdueDays(invoice) {
    const dueDate = getEffectiveDueDate(invoice);
    if (!dueDate) return 0;

    const today = new Date();
    today.setHours(0, 0, 0, 0);

    dueDate.setHours(0, 0, 0, 0);

    return Math.max(0, Math.floor((today - dueDate) / 86400000));
}

function isInvoiceOverdue(invoice) {
    const dueDate = getEffectiveDueDate(invoice);
    if (!dueDate) return false;

    const today = new Date();
    today.setHours(0, 0, 0, 0);

    dueDate.setHours(0, 0, 0, 0);

    return !invoice.paid_date && dueDate < today;
}

function renderModalContent() {
    const modal = document.getElementById('email-modal');
    if (!modal) return;

    const defaultEmail = currentInvoice.email || '';
    const existingStripeUrl = currentInvoice.stripe_payment_link_url || '';
    const stripeStatus = currentInvoice.stripe_payment_status || '';
    
    // Detect overdue: unpaid + older than 30 days
    const isOverdue = isInvoiceOverdue(currentInvoice);
    const daysOverdue = getOverdueDays(currentInvoice);

    const modalTitle = getEmailModalTitle(currentInvoice, isOverdue);
    
    // Status indicator for existing link
    let stripeBadgeHtml = '';
    if (existingStripeUrl && stripeStatus === 'paid') {
        stripeBadgeHtml = '<span class="ml-2 inline-block px-2 py-0.5 text-xs font-semibold rounded-full bg-green-100 text-green-800">Paid</span>';
    } else if (existingStripeUrl && stripeStatus === 'processing') {
        stripeBadgeHtml = '<span class="ml-2 inline-block px-2 py-0.5 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">Processing</span>';
    } else if (existingStripeUrl) {
        stripeBadgeHtml = '<span class="ml-2 inline-block px-2 py-0.5 text-xs font-semibold rounded-full bg-purple-100 text-purple-800">Active</span>';
    }

    modal.innerHTML = `
        <div class="bg-white rounded-lg shadow-2xl w-full max-w-3xl mx-auto p-8">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold text-gray-800">${modalTitle}</h2>
                <button onclick="window.emailModal.close()" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>

            <form id="email-send-form" class="space-y-5">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Send to</label>
                        ${renderRecipientSelector(currentInvoice)}
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Stripe Payment Link${stripeBadgeHtml}
                        </label>
                        <div class="flex gap-2">
                            <input type="url" id="email-stripe-link" value="${existingStripeUrl}" readonly
                                   placeholder="Click Generate to create link..."
                                   class="flex-1 px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-sm text-gray-600 focus:ring-purple-500 focus:border-purple-500">
                            <button type="button" id="stripe-generate-btn" onclick="window.emailModal.generateStripeLink()"
                                    class="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 text-sm font-semibold whitespace-nowrap">
                                ${existingStripeUrl ? '♻️ Regenerate' : '💳 Generate'}
                            </button>
                        </div>
                        <p class="text-xs text-gray-400 mt-1" id="stripe-link-info">
                            ${existingStripeUrl 
                                ? 'Link exists. Regenerate will create a new link for the current balance.' 
                                : 'Generates a Stripe Payment Link for Card and ACH payments.'}
                        </p>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Message Body</label>
                    <div id="email-message-editor" class="border border-gray-300 rounded-md bg-white h-48 overflow-y-auto"></div>
                </div>

                <div class="bg-blue-50 border border-blue-200 p-4 rounded-md flex items-center gap-3">
                    <span class="text-2xl">📎</span>
                    <div class="text-sm text-blue-800">
                        <strong>Invoice_${currentInvoice.invoice_number || currentInvoice.id}.pdf</strong> will be generated and attached automatically.
                    </div>
                </div>

                <div class="flex justify-end space-x-3 pt-4">
                    <button type="button" onclick="window.emailModal.close()"
                            class="px-6 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300">Cancel</button>
                    <button type="submit" id="email-submit-btn"
                            class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-semibold">
                        Send via AWS SES
                    </button>
                </div>
            </form>
        </div>`;

    // Initialize Quill
    const editorDiv = document.getElementById('email-message-editor');
    quillInstance = new Quill(editorDiv, {
        theme: 'snow',
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline'], 
                [{ 'list': 'ordered'}, { 'list': 'bullet' }], 
                ['clean']
            ]
        }
    });

    // Variablen für den Text aufbereiten
    const invoiceNum = currentInvoice.invoice_number || currentInvoice.id;
    const totalDue = parseFloat(currentInvoice.balance ?? currentInvoice.total).toFixed(2);
    const customerName = currentInvoice.customer_name || 'Valued Customer';

    // Datum formatieren
    let dueDateStr = 'Upon Receipt';
    if (currentInvoice.due_date) {
        const d = new Date(currentInvoice.due_date);
        dueDateStr = d.toLocaleDateString('en-US', { timeZone: 'UTC' }); 
    }
    
    // Dynamischer Text für die Fälligkeit
    let paymentText = '';
    if (currentInvoice.terms && currentInvoice.terms.toLowerCase().includes('receipt')) {
        paymentText = 'Our terms are Net 14.';
    } else if (dueDateStr !== 'Upon Receipt') {
        paymentText = `payable by <strong>${dueDateStr}</strong>.`;
    } else {
        paymentText = 'Our terms are Net 14.';
    }
    
    let defaultHtml = '';

    if (isOverdue) {
        // Reminder / Overdue template
        defaultHtml = `
            <p>Dear ${customerName},</p>
            <p>We hope this message finds you well. Our records indicate that invoice <strong>#${invoiceNum}</strong> in the amount of <strong>$${totalDue}</strong>, dated ${formatDate(currentInvoice.invoice_date)}, remains unpaid.</p>
            <p>This invoice is now <strong>${daysOverdue} days overdue</strong>. We kindly request prompt payment at your earliest convenience.</p>
            <p>For your convenience, you can pay securely online using the payment link included below. We accept both Credit Card and ACH bank transfer.</p>
            <p>If payment has already been sent, please disregard this notice. Should you have any questions or need to discuss payment arrangements, please do not hesitate to reply to this email.</p>
            <p>Thank you for your attention to this matter. We value your business and look forward to continuing our partnership.</p>
            <p>Best regards,</p>
            <p><strong>Claudia Knuth</strong></p>
            <p>Bay Area Affiliates, Inc.</p>
            <p>accounting@bayarea-cc.com</p>
        `;
    } else {
        // Standard template
        defaultHtml = `
            <p>Dear ${customerName},</p>
            <p>Attached is invoice <strong>#${invoiceNum}</strong> for service performed at your location. The total amount due is <strong>$${totalDue}</strong>. ${paymentText}</p>
            <p>Please pay at your earliest convenience. We appreciate your continued business.</p>
            <p>If you have any questions about the invoice, feel free to reply to this email.</p>
            <p>Best regards,</p>
            <p><strong>Claudia Knuth</strong></p>
            <p>Bay Area Affiliates, Inc.</p>
            <p>accounting@bayarea-cc.com</p>
        `;
    }

    quillInstance.root.innerHTML = defaultHtml;

    // Initiale Recipient-Summary
    updateRecipientSummary();

    // Listener für das Custom-Field
    const customEl = document.getElementById('email-recipient-custom');
    if (customEl) {
        customEl.addEventListener('input', updateRecipientSummary);
    }

    // Bind Submit Handler
    document.getElementById('email-send-form').addEventListener('submit', submitEmail);
}

// ============================================================
// Stripe Payment Link Generation
// ============================================================

async function generateStripeLink() {
    const btn = document.getElementById('stripe-generate-btn');
    const input = document.getElementById('email-stripe-link');
    const info = document.getElementById('stripe-link-info');

    const originalBtnText = btn.innerHTML;
    btn.innerHTML = '⏳ Creating...';
    btn.disabled = true;

    try {
        const response = await fetch(`/api/invoices/${currentInvoice.id}/create-payment-link`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' }
        });

        const result = await response.json();

        if (response.ok) {
            input.value = result.paymentLinkUrl;
            currentInvoice.stripe_payment_link_url = result.paymentLinkUrl;
            currentInvoice.stripe_payment_link_id = result.paymentLinkId;
            currentInvoice.stripe_payment_status = 'pending';

            btn.innerHTML = '♻️ Regenerate';
            info.innerHTML = `✅ Payment link created for <strong>$${result.amount.toFixed(2)}</strong>. Will be included in the email.`;
            info.classList.remove('text-gray-400');
            info.classList.add('text-green-600');
        } else {
            info.textContent = `❌ ${result.error}`;
            info.classList.remove('text-gray-400');
            info.classList.add('text-red-500');
        }
    } catch (e) {
        console.error('Stripe link generation error:', e);
        info.textContent = '❌ Network error creating payment link.';
        info.classList.remove('text-gray-400');
        info.classList.add('text-red-500');
    } finally {
        btn.disabled = false;
        if (btn.innerHTML === '⏳ Creating...') {
            btn.innerHTML = originalBtnText;
        }
    }
}

// ============================================================
// Logic & API
// ============================================================

export async function openEmailModal(invoiceId) {
    ensureModalElement();
    
    if (typeof showSpinner === 'function') showSpinner('Loading invoice data...');

    try {
        const res = await fetch(`/api/invoices/${invoiceId}`);
        const data = await res.json();
        
        if (!data.invoice) throw new Error('Invoice not found');
        currentInvoice = data.invoice;

        renderModalContent();
        
        document.getElementById('email-modal').classList.remove('hidden');
        document.getElementById('email-modal').classList.add('flex');

    } catch (e) {
        console.error('Error loading invoice for email:', e);
        alert('Could not load invoice details.');
    } finally {
        if (typeof hideSpinner === 'function') hideSpinner();
    }
}

export function closeEmailModal() {
    const modal = document.getElementById('email-modal');
    if (modal) {
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }
    currentInvoice = null;
    quillInstance = null;
}

async function submitEmail(e) {
    e.preventDefault();

    const recipients = getSelectedRecipients();
    const customText = quillInstance.root.innerHTML;

    if (recipients.length === 0) {
        alert('Please select or enter at least one recipient email.');
        return;
    }

    // Confirm bei Mehrfach-Empfängern, damit der User sieht, an wen es geht
    if (recipients.length > 1) {
        const ok = confirm(`Send invoice to ${recipients.length} recipients?\n\n${recipients.join('\n')}`);
        if (!ok) return;
    }

    const submitBtn = document.getElementById('email-submit-btn');
    submitBtn.innerHTML = '⏳ Sending...';
    submitBtn.disabled = true;

    if (typeof showSpinner === 'function') showSpinner('Generating PDF and sending email...');

    try {
        const response = await fetch(`/api/invoices/${currentInvoice.id}/send-email`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                recipientEmails: recipients,
                customText
            })
        });

        const result = await response.json();

        if (response.ok) {
            const sentTo = (result.recipients || recipients).join(', ');
            alert(`✅ Invoice sent to: ${sentTo}`);
            closeEmailModal();
            if (window.invoiceView) window.invoiceView.loadInvoices();
        } else {
            alert(`❌ Error: ${result.error}`);
        }
    } catch (e) {
        console.error('Send email error:', e);
        alert('Network error while sending email.');
    } finally {
        submitBtn.innerHTML = 'Send via AWS SES';
        submitBtn.disabled = false;
        if (typeof hideSpinner === 'function') hideSpinner();
    }
}

function renderRecipientSelector(invoice) {
    const primary = (invoice.email || '').trim();
    const secondary = (invoice.secondary_email || '').trim();
    const hasPrimary = !!primary;
    const hasSecondary = !!secondary;

    // Default-Auswahl:
    //   - "Both" wenn beide vorhanden
    //   - "Primary" wenn nur primary
    //   - "Secondary" wenn nur secondary
    //   - "Custom" wenn keine
    let defaultMode;
    if (hasPrimary && hasSecondary)      defaultMode = 'both';
    else if (hasPrimary)                  defaultMode = 'primary';
    else if (hasSecondary)                defaultMode = 'secondary';
    else                                  defaultMode = 'custom';

    // Falls weder primary noch secondary — direkt eine Warnung
    let warningHtml = '';
    if (!hasPrimary && !hasSecondary) {
        warningHtml = `
            <p class="text-xs text-amber-600 mt-1">
                ⚠️ This customer has no email address on file. Please enter one below.
            </p>`;
    }

    return `
        <div class="space-y-2">
            <select id="email-recipient-mode"
                    onchange="window.emailModal.onRecipientModeChange()"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 text-sm">
                ${hasPrimary ? `<option value="primary" ${defaultMode==='primary'?'selected':''}>Primary: ${escapeAttr(primary)}</option>` : ''}
                ${hasSecondary ? `<option value="secondary" ${defaultMode==='secondary'?'selected':''}>Secondary: ${escapeAttr(secondary)}</option>` : ''}
                ${hasPrimary && hasSecondary ? `<option value="both" ${defaultMode==='both'?'selected':''}>Both (Primary + Secondary)</option>` : ''}
                <option value="custom" ${defaultMode==='custom'?'selected':''}>Custom / Test address…</option>
            </select>

            <input type="email" id="email-recipient-custom"
                   value="${escapeAttr(primary || secondary || '')}"
                   placeholder="Enter custom recipient email(s), comma-separated"
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 ${defaultMode==='custom' ? '' : 'hidden'}">

            <p id="email-recipient-summary" class="text-xs text-gray-500"></p>
            ${warningHtml}
        </div>
    `;
}

function escapeAttr(s) {
    return String(s || '')
        .replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
}

/**
 * Liefert die aktuell ausgewählten Empfänger als Array.
 * Wird beim Submit aufgerufen.
 */
function getSelectedRecipients() {
    const modeEl = document.getElementById('email-recipient-mode');
    const customEl = document.getElementById('email-recipient-custom');
    if (!modeEl) return [];

    const mode = modeEl.value;
    const primary = (currentInvoice.email || '').trim();
    const secondary = (currentInvoice.secondary_email || '').trim();

    if (mode === 'primary')   return primary   ? [primary]   : [];
    if (mode === 'secondary') return secondary ? [secondary] : [];
    if (mode === 'both') {
        return [primary, secondary].filter(Boolean);
    }
    if (mode === 'custom') {
        return (customEl?.value || '')
            .split(',')
            .map(s => s.trim())
            .filter(Boolean);
    }
    return [];
}

/**
 * Wird vom <select onchange> aufgerufen.
 * Zeigt/versteckt das Custom-Eingabefeld und aktualisiert die Zusammenfassung.
 */
function onRecipientModeChange() {
    const modeEl = document.getElementById('email-recipient-mode');
    const customEl = document.getElementById('email-recipient-custom');
    if (!modeEl) return;

    const mode = modeEl.value;

    // Custom-Field nur bei mode==='custom' anzeigen
    if (mode === 'custom') {
        customEl.classList.remove('hidden');
        customEl.focus();
    } else {
        customEl.classList.add('hidden');
    }

    updateRecipientSummary();
}

function updateRecipientSummary() {
    const summary = document.getElementById('email-recipient-summary');
    if (!summary) return;

    const recipients = getSelectedRecipients();
    if (recipients.length === 0) {
        summary.textContent = '⚠️ No recipients selected.';
        summary.className = 'text-xs text-amber-600';
    } else if (recipients.length === 1) {
        summary.textContent = `Will send to: ${recipients[0]}`;
        summary.className = 'text-xs text-gray-600';
    } else {
        summary.textContent = `Will send to ${recipients.length} recipients: ${recipients.join(', ')}`;
        summary.className = 'text-xs text-gray-600';
    }
}

// ============================================================
// Expose
// ============================================================
window.emailModal = {
    open: openEmailModal,
    close: closeEmailModal,
    generateStripeLink,
    onRecipientModeChange 
};