// Recurring expenses page JavaScript

let currentRecurring = [];
let detectedSuggestions = [];

// Load user profile to get currency
async function loadUserCurrency() {
    try {
        const profile = await apiCall('/api/settings/profile');
        window.userCurrency = profile.profile.currency || 'GBP';
    } catch (error) {
        console.error('Failed to load user currency:', error);
        window.userCurrency = 'GBP';
    }
}

// Load recurring expenses
async function loadRecurringExpenses() {
    try {
        const data = await apiCall('/api/recurring/');
        currentRecurring = data.recurring_expenses || [];
        displayRecurringExpenses(currentRecurring);
    } catch (error) {
        console.error('Failed to load recurring expenses:', error);
        showToast(window.getTranslation('recurring.errorLoading', 'Failed to load recurring expenses'), 'error');
    }
}

// Display recurring expenses
function displayRecurringExpenses(recurring) {
    const container = document.getElementById('recurring-list');
    
    if (!recurring || recurring.length === 0) {
        const noRecurringText = window.getTranslation('recurring.noRecurring', 'No recurring expenses yet');
        const addFirstText = window.getTranslation('recurring.addFirst', 'Add your first recurring expense or detect patterns from existing expenses');
        container.innerHTML = `
            <div class="p-12 text-center">
                <span class="material-symbols-outlined text-6xl text-[#92adc9] mb-4 block">repeat</span>
                <p class="text-[#92adc9] text-lg mb-2">${noRecurringText}</p>
                <p class="text-[#92adc9] text-sm">${addFirstText}</p>
            </div>
        `;
        return;
    }
    
    // Group by active status
    const active = recurring.filter(r => r.is_active);
    const inactive = recurring.filter(r => !r.is_active);
    
    let html = '';
    
    if (active.length > 0) {
        html += '<div class="mb-6"><h3 class="text-lg font-semibold text-text-main dark:text-white mb-4">' + 
                window.getTranslation('recurring.active', 'Active Recurring Expenses') + '</h3>';
        html += '<div class="space-y-3">' + active.map(r => renderRecurringCard(r)).join('') + '</div></div>';
    }
    
    if (inactive.length > 0) {
        html += '<div><h3 class="text-lg font-semibold text-text-muted dark:text-[#92adc9] mb-4">' + 
                window.getTranslation('recurring.inactive', 'Inactive') + '</h3>';
        html += '<div class="space-y-3 opacity-60">' + inactive.map(r => renderRecurringCard(r)).join('') + '</div></div>';
    }
    
    container.innerHTML = html;
}

// Render individual recurring expense card
function renderRecurringCard(recurring) {
    const nextDue = new Date(recurring.next_due_date);
    const today = new Date();
    const daysUntil = Math.ceil((nextDue - today) / (1000 * 60 * 60 * 24));
    
    let dueDateClass = 'text-text-muted dark:text-[#92adc9]';
    let dueDateText = '';
    
    if (daysUntil < 0) {
        dueDateClass = 'text-red-400';
        dueDateText = window.getTranslation('recurring.overdue', 'Overdue');
    } else if (daysUntil === 0) {
        dueDateClass = 'text-orange-400';
        dueDateText = window.getTranslation('recurring.dueToday', 'Due today');
    } else if (daysUntil <= 7) {
        dueDateClass = 'text-yellow-400';
        dueDateText = window.getTranslation('recurring.dueIn', 'Due in') + ` ${daysUntil} ` + 
                     (daysUntil === 1 ? window.getTranslation('recurring.day', 'day') : window.getTranslation('recurring.days', 'days'));
    } else {
        dueDateText = nextDue.toLocaleDateString();
    }
    
    const frequencyText = window.getTranslation(`recurring.frequency.${recurring.frequency}`, recurring.frequency);
    const autoCreateBadge = recurring.auto_create ? 
        `<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-green-500/10 text-green-400 border border-green-500/20">
            <span class="material-symbols-outlined text-[14px]">check_circle</span>
            ${window.getTranslation('recurring.autoCreate', 'Auto-create')}
        </span>` : '';
    
    const detectedBadge = recurring.detected ? 
        `<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-blue-500/10 text-blue-400 border border-blue-500/20">
            <span class="material-symbols-outlined text-[14px]">auto_awesome</span>
            ${window.getTranslation('recurring.detected', 'Auto-detected')} ${Math.round(recurring.confidence_score)}%
        </span>` : '';
    
    return `
        <div class="bg-white dark:bg-[#0f1419] border border-gray-200 dark:border-white/10 rounded-xl p-5 hover:shadow-lg transition-shadow">
            <div class="flex items-start justify-between gap-4">
                <div class="flex items-start gap-4 flex-1">
                    <div class="size-12 rounded-full flex items-center justify-center shrink-0" style="background: ${recurring.category_color}20;">
                        <span class="material-symbols-outlined text-[24px]" style="color: ${recurring.category_color};">repeat</span>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2 mb-1">
                            <h4 class="text-text-main dark:text-white font-semibold truncate">${recurring.name}</h4>
                            ${autoCreateBadge}
                            ${detectedBadge}
                        </div>
                        <div class="flex flex-wrap items-center gap-2 text-sm text-text-muted dark:text-[#92adc9] mb-2">
                            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs" style="background: ${recurring.category_color}20; color: ${recurring.category_color};">
                                ${recurring.category_name}
                            </span>
                            <span>•</span>
                            <span>${frequencyText}</span>
                            ${recurring.notes ? `<span>•</span><span class="truncate">${recurring.notes}</span>` : ''}
                        </div>
                        <div class="flex items-center gap-3 text-sm flex-wrap">
                            <div class="${dueDateClass} font-medium">
                                <span class="material-symbols-outlined text-[16px] align-middle mr-1">schedule</span>
                                ${dueDateText}
                            </div>
                            <div class="text-text-main dark:text-white font-semibold">
                                ${formatCurrency(recurring.amount, window.userCurrency || recurring.currency)}
                            </div>
                            ${recurring.last_created_date ? `
                            <div class="text-text-muted dark:text-[#92adc9] text-xs">
                                <span class="material-symbols-outlined text-[14px] align-middle mr-1">check_circle</span>
                                ${window.getTranslation('recurring.lastCreated', 'Last created')}: ${new Date(recurring.last_created_date).toLocaleDateString()}
                            </div>
                            ` : ''}
                        </div>
                    </div>
                </div>
                <div class="flex items-center gap-1 shrink-0">
                    ${daysUntil <= 7 && recurring.is_active ? `
                    <button onclick="createExpenseFromRecurring(${recurring.id})" 
                            class="p-2 rounded-lg hover:bg-green-500/10 text-green-400 transition-colors"
                            title="${window.getTranslation('recurring.createExpense', 'Create expense now')}">
                        <span class="material-symbols-outlined text-[20px]">add_circle</span>
                    </button>
                    ` : ''}
                    <button onclick="editRecurring(${recurring.id})" 
                            class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-white/10 text-text-muted dark:text-[#92adc9] transition-colors"
                            title="${window.getTranslation('common.edit', 'Edit')}">
                        <span class="material-symbols-outlined text-[20px]">edit</span>
                    </button>
                    <button onclick="toggleRecurringActive(${recurring.id}, ${!recurring.is_active})" 
                            class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-white/10 text-text-muted dark:text-[#92adc9] transition-colors"
                            title="${recurring.is_active ? window.getTranslation('recurring.deactivate', 'Deactivate') : window.getTranslation('recurring.activate', 'Activate')}">
                        <span class="material-symbols-outlined text-[20px]">${recurring.is_active ? 'pause_circle' : 'play_circle'}</span>
                    </button>
                    <button onclick="deleteRecurring(${recurring.id})" 
                            class="p-2 rounded-lg hover:bg-red-100 dark:hover:bg-red-500/10 text-red-400 transition-colors"
                            title="${window.getTranslation('common.delete', 'Delete')}">
                        <span class="material-symbols-outlined text-[20px]">delete</span>
                    </button>
                </div>
            </div>
        </div>
    `;
}

// Create expense from recurring
async function createExpenseFromRecurring(recurringId) {
    try {
        const data = await apiCall(`/api/recurring/${recurringId}/create-expense`, {
            method: 'POST'
        });
        
        showToast(window.getTranslation('recurring.expenseCreated', 'Expense created successfully!'), 'success');
        loadRecurringExpenses();
    } catch (error) {
        console.error('Failed to create expense:', error);
        showToast(window.getTranslation('recurring.errorCreating', 'Failed to create expense'), 'error');
    }
}

// Toggle recurring active status
async function toggleRecurringActive(recurringId, isActive) {
    try {
        await apiCall(`/api/recurring/${recurringId}`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ is_active: isActive })
        });
        
        const statusText = isActive ? 
            window.getTranslation('recurring.activated', 'Recurring expense activated') : 
            window.getTranslation('recurring.deactivated', 'Recurring expense deactivated');
        showToast(statusText, 'success');
        loadRecurringExpenses();
    } catch (error) {
        console.error('Failed to toggle recurring status:', error);
        showToast(window.getTranslation('common.error', 'An error occurred'), 'error');
    }
}

// Delete recurring expense
async function deleteRecurring(recurringId) {
    const confirmText = window.getTranslation('recurring.deleteConfirm', 'Are you sure you want to delete this recurring expense?');
    if (!confirm(confirmText)) return;
    
    try {
        await apiCall(`/api/recurring/${recurringId}`, {
            method: 'DELETE'
        });
        
        showToast(window.getTranslation('recurring.deleted', 'Recurring expense deleted'), 'success');
        loadRecurringExpenses();
    } catch (error) {
        console.error('Failed to delete recurring expense:', error);
        showToast(window.getTranslation('common.error', 'An error occurred'), 'error');
    }
}

// Edit recurring expense
function editRecurring(recurringId) {
    const recurring = currentRecurring.find(r => r.id === recurringId);
    if (!recurring) return;
    
    // Populate form
    document.getElementById('recurring-id').value = recurring.id;
    document.getElementById('recurring-name').value = recurring.name;
    document.getElementById('recurring-amount').value = recurring.amount;
    document.getElementById('recurring-category').value = recurring.category_id;
    document.getElementById('recurring-frequency').value = recurring.frequency;
    document.getElementById('recurring-day').value = recurring.day_of_period || '';
    document.getElementById('recurring-next-due').value = recurring.next_due_date.split('T')[0];
    document.getElementById('recurring-auto-create').checked = recurring.auto_create;
    document.getElementById('recurring-notes').value = recurring.notes || '';
    
    // Update modal title
    document.getElementById('modal-title').textContent = window.getTranslation('recurring.edit', 'Edit Recurring Expense');
    document.getElementById('recurring-submit-btn').textContent = window.getTranslation('actions.update', 'Update');
    
    // Show modal
    document.getElementById('add-recurring-modal').classList.remove('hidden');
}

// Show add recurring modal
function showAddRecurringModal() {
    document.getElementById('recurring-form').reset();
    document.getElementById('recurring-id').value = '';
    document.getElementById('modal-title').textContent = window.getTranslation('recurring.add', 'Add Recurring Expense');
    document.getElementById('recurring-submit-btn').textContent = window.getTranslation('actions.save', 'Save');
    document.getElementById('add-recurring-modal').classList.remove('hidden');
}

// Close modal
function closeRecurringModal() {
    document.getElementById('add-recurring-modal').classList.add('hidden');
}

// Save recurring expense
async function saveRecurringExpense(event) {
    event.preventDefault();
    
    const recurringId = document.getElementById('recurring-id').value;
    const formData = {
        name: document.getElementById('recurring-name').value,
        amount: parseFloat(document.getElementById('recurring-amount').value),
        // Don't send currency - let backend use current_user.currency from settings
        category_id: parseInt(document.getElementById('recurring-category').value),
        frequency: document.getElementById('recurring-frequency').value,
        day_of_period: parseInt(document.getElementById('recurring-day').value) || null,
        next_due_date: document.getElementById('recurring-next-due').value,
        auto_create: document.getElementById('recurring-auto-create').checked,
        notes: document.getElementById('recurring-notes').value
    };
    
    try {
        if (recurringId) {
            // Update
            await apiCall(`/api/recurring/${recurringId}`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(formData)
            });
            showToast(window.getTranslation('recurring.updated', 'Recurring expense updated'), 'success');
        } else {
            // Create
            await apiCall('/api/recurring/', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(formData)
            });
            showToast(window.getTranslation('recurring.created', 'Recurring expense created'), 'success');
        }
        
        closeRecurringModal();
        loadRecurringExpenses();
    } catch (error) {
        console.error('Failed to save recurring expense:', error);
        showToast(window.getTranslation('common.error', 'An error occurred'), 'error');
    }
}

// Detect recurring patterns
async function detectRecurringPatterns() {
    const detectBtn = document.getElementById('detect-btn');
    const originalText = detectBtn.innerHTML;
    detectBtn.innerHTML = '<span class="material-symbols-outlined animate-spin">refresh</span> ' + 
                         window.getTranslation('recurring.detecting', 'Detecting...');
    detectBtn.disabled = true;
    
    try {
        const data = await apiCall('/api/recurring/detect', {
            method: 'POST'
        });
        
        detectedSuggestions = data.suggestions || [];
        
        if (detectedSuggestions.length === 0) {
            showToast(window.getTranslation('recurring.noPatterns', 'No recurring patterns detected'), 'info');
        } else {
            displaySuggestions(detectedSuggestions);
            document.getElementById('suggestions-section').classList.remove('hidden');
            showToast(window.getTranslation('recurring.patternsFound', `Found ${detectedSuggestions.length} potential recurring expenses`), 'success');
        }
    } catch (error) {
        console.error('Failed to detect patterns:', error);
        showToast(window.getTranslation('recurring.errorDetecting', 'Failed to detect patterns'), 'error');
    } finally {
        detectBtn.innerHTML = originalText;
        detectBtn.disabled = false;
    }
}

// Display suggestions
function displaySuggestions(suggestions) {
    const container = document.getElementById('suggestions-list');
    
    container.innerHTML = suggestions.map((s, index) => `
        <div class="bg-white dark:bg-[#0f1419] border border-blue-500/30 dark:border-blue-500/30 rounded-xl p-5">
            <div class="flex items-start justify-between gap-4">
                <div class="flex items-start gap-4 flex-1">
                    <div class="size-12 rounded-full flex items-center justify-center shrink-0 bg-blue-500/10">
                        <span class="material-symbols-outlined text-[24px] text-blue-400">auto_awesome</span>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h4 class="text-text-main dark:text-white font-semibold mb-1">${s.name}</h4>
                        <div class="flex flex-wrap items-center gap-2 text-sm text-text-muted dark:text-[#92adc9] mb-2">
                            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs" style="background: ${s.category_color}20; color: ${s.category_color};">
                                ${s.category_name}
                            </span>
                            <span>•</span>
                            <span>${window.getTranslation(`recurring.frequency.${s.frequency}`, s.frequency)}</span>
                            <span>•</span>
                            <span>${s.occurrences} ${window.getTranslation('recurring.occurrences', 'occurrences')}</span>
                        </div>
                        <div class="flex items-center gap-3 text-sm">
                            <div class="text-text-main dark:text-white font-semibold">
                                ${formatCurrency(s.amount, window.userCurrency || s.currency)}
                            </div>
                            <div class="text-blue-400">
                                <span class="material-symbols-outlined text-[16px] align-middle mr-1">verified</span>
                                ${Math.round(s.confidence_score)}% ${window.getTranslation('recurring.confidence', 'confidence')}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex items-center gap-2 shrink-0">
                    <button onclick="acceptSuggestion(${index})" 
                            class="px-4 py-2 bg-primary hover:bg-primary-dark text-white rounded-lg transition-colors flex items-center gap-2">
                        <span class="material-symbols-outlined text-[18px]">add</span>
                        ${window.getTranslation('recurring.accept', 'Accept')}
                    </button>
                    <button onclick="dismissSuggestion(${index})" 
                            class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-white/10 text-text-muted dark:text-[#92adc9] transition-colors"
                            title="${window.getTranslation('recurring.dismiss', 'Dismiss')}">
                        <span class="material-symbols-outlined text-[20px]">close</span>
                    </button>
                </div>
            </div>
        </div>
    `).join('');
}

// Accept suggestion
async function acceptSuggestion(index) {
    const suggestion = detectedSuggestions[index];
    
    try {
        await apiCall('/api/recurring/accept-suggestion', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(suggestion)
        });
        
        showToast(window.getTranslation('recurring.suggestionAccepted', 'Recurring expense added'), 'success');
        
        // Remove suggestion
        detectedSuggestions.splice(index, 1);
        if (detectedSuggestions.length === 0) {
            document.getElementById('suggestions-section').classList.add('hidden');
        } else {
            displaySuggestions(detectedSuggestions);
        }
        
        loadRecurringExpenses();
    } catch (error) {
        console.error('Failed to accept suggestion:', error);
        showToast(window.getTranslation('common.error', 'An error occurred'), 'error');
    }
}

// Dismiss suggestion
function dismissSuggestion(index) {
    detectedSuggestions.splice(index, 1);
    if (detectedSuggestions.length === 0) {
        document.getElementById('suggestions-section').classList.add('hidden');
    } else {
        displaySuggestions(detectedSuggestions);
    }
}

// Load categories for dropdown
async function loadCategories() {
    try {
        const data = await apiCall('/api/expenses/categories');
        const select = document.getElementById('recurring-category');
        select.innerHTML = data.categories.map(cat => 
            `<option value="${cat.id}">${cat.name}</option>`
        ).join('');
    } catch (error) {
        console.error('Failed to load categories:', error);
    }
}

// Update day field based on frequency
function updateDayField() {
    const frequency = document.getElementById('recurring-frequency').value;
    const dayContainer = document.getElementById('day-container');
    const dayInput = document.getElementById('recurring-day');
    const dayLabel = document.getElementById('day-label');
    
    if (frequency === 'weekly') {
        dayContainer.classList.remove('hidden');
        dayLabel.textContent = window.getTranslation('recurring.dayOfWeek', 'Day of week');
        dayInput.type = 'select';
        dayInput.innerHTML = `
            <option value="0">${window.getTranslation('days.monday', 'Monday')}</option>
            <option value="1">${window.getTranslation('days.tuesday', 'Tuesday')}</option>
            <option value="2">${window.getTranslation('days.wednesday', 'Wednesday')}</option>
            <option value="3">${window.getTranslation('days.thursday', 'Thursday')}</option>
            <option value="4">${window.getTranslation('days.friday', 'Friday')}</option>
            <option value="5">${window.getTranslation('days.saturday', 'Saturday')}</option>
            <option value="6">${window.getTranslation('days.sunday', 'Sunday')}</option>
        `;
    } else if (frequency === 'monthly') {
        dayContainer.classList.remove('hidden');
        dayLabel.textContent = window.getTranslation('recurring.dayOfMonth', 'Day of month');
        dayInput.type = 'number';
        dayInput.min = '1';
        dayInput.max = '28';
    } else {
        dayContainer.classList.add('hidden');
    }
}

// Initialize
document.addEventListener('DOMContentLoaded', async () => {
    if (document.getElementById('recurring-list')) {
        await loadUserCurrency();
        
        // Sync all recurring expenses to user's current currency
        await syncRecurringCurrency();
        
        loadRecurringExpenses();
        loadCategories();
        
        // Set default next due date to tomorrow
        const tomorrow = new Date();
        tomorrow.setDate(tomorrow.getDate() + 1);
        document.getElementById('recurring-next-due').valueAsDate = tomorrow;
        
        // Event listeners
        document.getElementById('recurring-form')?.addEventListener('submit', saveRecurringExpense);
        document.getElementById('recurring-frequency')?.addEventListener('change', updateDayField);
    }
});

// Sync recurring expenses currency with user profile
async function syncRecurringCurrency() {
    try {
        await apiCall('/api/recurring/sync-currency', {
            method: 'POST'
        });
    } catch (error) {
        console.error('Failed to sync currency:', error);
    }
}