options.js

document.addEventListener('DOMContentLoaded', async function() {
    // Initialize collapsible sections
    const sectionHeaders = document.querySelectorAll('.section-header');
    sectionHeaders.forEach(header => {
        header.addEventListener('click', function() {
            const sectionId = this.getAttribute('data-section');
            const content = document.getElementById(sectionId);
            const section = this.parentElement;
            const icon = this.querySelector('.collapse-icon');
            
            if (section.classList.contains('collapsed')) {
                // Expand
                section.classList.remove('collapsed');
                content.style.display = 'block';
                icon.textContent = '▼';
                // Trigger animation
                setTimeout(() => {
                    content.style.animation = 'slideDown 0.3s ease-out';
                }, 0);
            } else {
                // Collapse
                section.classList.add('collapsed');
                content.style.display = 'none';
                icon.textContent = '▶';
            }
        });
    });
    
    const labelsContainer = document.getElementById('labels-container');
    const addLabelButton = document.getElementById('add-label');
    const saveButton = document.getElementById('save-settings');
    const apiKeyInput = document.getElementById('api-key');
    const aiProviderSelect = document.getElementById('ai-provider');
    const providerInfo = document.getElementById('provider-info');
    const getApiKeyButton = document.getElementById('get-api-key');
    const testApiButton = document.getElementById('test-api');
    const apiTestResult = document.getElementById('api-test-result');
    const geminiPaidContainer = document.getElementById('gemini-paid-container');
    const geminiPaidCheckbox = document.getElementById('gemini-paid-plan');
    const geminiResetNotificationsCheckbox = document.getElementById('gemini-reset-notifications');
    const importLabelsButton = document.getElementById('import-labels');
    const bulkImportGeminiKeysTextarea = document.getElementById('bulk-import-gemini-keys-text');
    const loadImapFoldersButton = document.getElementById('load-imap-folders');
    const folderLoadingIndicator = document.getElementById('folder-loading');
    const folderSelection = document.getElementById('folder-selection');
    const foldersPreview = document.getElementById('folders-preview');
    const folderCount = document.getElementById('folder-count');
    const useImapFoldersButton = document.getElementById('use-imap-folders');
    const useCustomFoldersButton = document.getElementById('use-custom-folders');
    const geminiMultiKeysContainer = document.getElementById('gemini-multi-keys-container');
    const geminiKeysList = document.getElementById('gemini-keys-list');
    const addGeminiKeyButton = document.getElementById('add-gemini-key');
    const geminiModelInput = document.getElementById('gemini-model');
    const geminiModelCustomInput = document.getElementById('gemini-model-custom');
    const geminiModelStatus = document.getElementById('gemini-model-status');
    const loadGeminiModelsButton = document.getElementById('load-gemini-models');
    const providerModelInput = document.getElementById('provider-model');
    const providerModelHelp = document.getElementById('provider-model-help');
    const batchChunkSizeInput = document.getElementById('batch-chunk-size');
    
    // Ollama-specific elements  
    const ollamaModelSelect = document.getElementById('ollama-model');
    const ollamaCustomModelInput = document.getElementById('ollama-custom-model');
    const ollamaUrlInput = document.getElementById('ollama-url');
    const ollamaAuthTokenInput = document.getElementById('ollama-auth-token');
    const ollamaCpuOnlyCheckbox = document.getElementById('ollama-cpu-only');
    const testOllamaButton = document.getElementById('test-ollama');
    const listOllamaModelsButton = document.getElementById('list-ollama-models');
    const downloadOllamaModelButton = document.getElementById('download-ollama-model');
    const ollamaDownloadModelInput = document.getElementById('ollama-download-model');
    const ollamaDownloadStatus = document.getElementById('ollama-download-status');
    const ollamaTestResult = document.getElementById('ollama-test-result');
    const diagnoseOllamaButton = document.getElementById('diagnose-ollama');
    const ollamaDiagnostics = document.getElementById('ollama-diagnostics');

    // LM Studio-specific elements
    const lmStudioUrlInput = document.getElementById('lmstudio-url');
    const lmStudioModelSelect = document.getElementById('lmstudio-model');
    const lmStudioCustomModelInput = document.getElementById('lmstudio-custom-model');
    const lmStudioAuthTokenInput = document.getElementById('lmstudio-auth-token');
    const testLmStudioButton = document.getElementById('test-lmstudio');
    const listLmStudioModelsButton = document.getElementById('list-lmstudio-models');
    const lmStudioTestResult = document.getElementById('lmstudio-test-result');
    const LMSTUDIO_CUSTOM_VALUE = '__custom__';
    
    // Update endpoint URLs when Ollama URL changes
    if (ollamaUrlInput) {
        ollamaUrlInput.addEventListener('input', () => {
            const url = ollamaUrlInput.value.trim() || 'http://localhost:11434';
            const chatEndpoint = document.getElementById('ollama-chat-endpoint');
            const pullEndpoint = document.getElementById('ollama-pull-endpoint');
            const tagsEndpoint = document.getElementById('ollama-tags-endpoint');
            
            if (chatEndpoint) chatEndpoint.textContent = `${url}/api/chat`;
            if (pullEndpoint) pullEndpoint.textContent = `${url}/api/pull`;
            if (tagsEndpoint) tagsEndpoint.textContent = `${url}/api/tags`;
        });
    }
    
    let loadedFolders = [];
    let geminiKeys = []; // Array to store multiple Gemini API keys
    
    // AI Provider configurations
    const aiProviders = {
        gemini: {
            name: 'Google Gemini',
            signupUrl: 'https://aistudio.google.com/app/apikey',
            info: '✓ Free tier: 5 requests/minute, 20/day per API key (enforced by addon)<br>✓ Tip: Create multiple API keys in different projects, switch keys when limit reached<br>✓ Check usage: <a href="https://aistudio.google.com/usage" target="_blank">AI Studio Usage</a><br>✓ Best for: General use, multilingual support<br>✓ Model: configurable below (default: Gemini 3.5 Flash-Lite)<br>✓ Check "paid plan" option to remove limits',
            isFree: true
        },
        openai: {
            name: 'OpenAI',
            signupUrl: 'https://platform.openai.com/signup',
            info: '✓ Free trial: $5 credit<br>✓ Best for: High accuracy, English content<br>✓ Models: GPT-4o-mini ($0.15/1M tokens)',
            isFree: false
        },
        anthropic: {
            name: 'Anthropic Claude',
            signupUrl: 'https://console.anthropic.com/',
            info: '✓ Free tier: Limited requests<br>✓ Best for: Long emails, detailed analysis<br>✓ Models: Claude 3 Haiku',
            isFree: true
        },
        groq: {
            name: 'Groq',
            signupUrl: 'https://console.groq.com/',
            info: '✓ Free tier: 30 requests/minute<br>✓ Best for: Speed (fastest)<br>✓ Models: Llama 3.3 (Mixtral deprecated)',
            isFree: true
        },
        mistral: {
            name: 'Mistral AI',
            signupUrl: 'https://console.mistral.ai/',
            info: '✓ Free tier: Limited requests<br>✓ Best for: European users, GDPR compliance<br>✓ Models: Mistral Small',
            isFree: true
        },
        ollama: {
            name: 'Ollama (Local LLM)',
            signupUrl: 'https://ollama.ai/',
            info: '✓ 100% Free: Runs locally on your machine<br>✓ Privacy: No data sent to external servers<br>✓ No rate limits: Process unlimited emails<br>✓ Models: Llama 2/3, Mistral, Phi, Gemma, Qwen, and more<br>✓ Requires: <a href="https://ollama.ai/download" target="_blank">Ollama installed</a> and running locally<br>✓ Setup: Install Ollama, run "ollama pull llama3.2" to download a model',
            isFree: true
        },
        lmstudio: {
            name: 'LM Studio (Local LLM)',
            signupUrl: 'https://lmstudio.ai/',
            info: '✓ 100% Free: Runs locally on your machine<br>✓ Privacy: No data sent to external servers<br>✓ No rate limits: Process unlimited emails<br>✓ Uses LM Studio\'s native REST API (<code>/api/v1/chat</code>)<br>✓ Requires: <a href="https://lmstudio.ai/" target="_blank">LM Studio</a> installed with the local server enabled (default <code>http://localhost:1234</code>)<br>✓ Setup: In LM Studio open Settings → Local Model API, toggle the server on and load a chat model',
            isFree: true
        }
    };
    
    // Default model per provider (references may be overridden in settings)
    // Note: Gemini 2.5 models are no longer available to NEW API keys (404),
    // so new installs default to a current model.
    const DEFAULT_GEMINI_MODEL = 'gemini-3.5-flash-lite';
    const CUSTOM_MODEL_VALUE = '__custom__';
    const GEMINI_MODEL_LABELS = {
        'gemini-3.5-flash-lite': 'Gemini 3.5 Flash-Lite — recommended (fast & cheap)',
        'gemini-3.8-flash': 'Gemini 3.8 Flash — latest, most capable',
        'gemini-3.7-flash': 'Gemini 3.7 Flash',
        'gemini-3.6-flash': 'Gemini 3.6 Flash',
        'gemini-3.1-flash-lite': 'Gemini 3.1 Flash-Lite',
        'gemini-2.5-flash': 'Gemini 2.5 Flash — existing users only',
        'gemini-2.5-flash-lite': 'Gemini 2.5 Flash-Lite — existing users only'
    };
    const defaultProviderModels = {
        openai: 'gpt-4o-mini',
        anthropic: 'claude-3-haiku-20240307',
        groq: 'openai/gpt-oss-120b',
        mistral: 'mistral-small-latest'
    };

    // Human-friendly label for a Gemini model id
    function geminiModelLabel(id) {
        return GEMINI_MODEL_LABELS[id] || id;
    }

    // Escape text before injecting into option markup
    function escapeOptionHtml(str) {
        return String(str)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;');
    }

    // Rebuild the Gemini model dropdown and select the given value.
    // When the value is not in the list (or is a known custom pick) the
    // "Custom model..." option is selected and the text field is shown.
    function setGeminiModelSelect(models, selected) {
        if (!geminiModelInput) return;
        const list = (models && models.length) ? models : Object.keys(GEMINI_MODEL_LABELS);
        const customSelected = typeof selected === 'string' && selected !== '' && !list.includes(selected);

        let html = list
            .map(id => `<option value="${escapeOptionHtml(id)}">${escapeOptionHtml(geminiModelLabel(id))}</option>`)
            .join('');
        html += `<option value="${CUSTOM_MODEL_VALUE}">Custom model… (type your own)</option>`;
        geminiModelInput.innerHTML = html;

        if (customSelected) {
            geminiModelInput.value = CUSTOM_MODEL_VALUE;
            if (geminiModelCustomInput) {
                geminiModelCustomInput.value = selected;
                geminiModelCustomInput.style.display = 'block';
            }
        } else {
            const fallback = list.includes(DEFAULT_GEMINI_MODEL) ? DEFAULT_GEMINI_MODEL : list[0];
            geminiModelInput.value = selected || fallback;
            if (geminiModelCustomInput) {
                geminiModelCustomInput.value = '';
                geminiModelCustomInput.style.display = 'none';
            }
        }
    }

    // Resolve the Gemini model to use, falling back to the default
    function getSelectedGeminiModel() {
        if (geminiModelInput && geminiModelInput.value === CUSTOM_MODEL_VALUE) {
            const custom = (geminiModelCustomInput && geminiModelCustomInput.value.trim()) || '';
            return custom || DEFAULT_GEMINI_MODEL;
        }
        const selected = (geminiModelInput && geminiModelInput.value) || '';
        return selected || DEFAULT_GEMINI_MODEL;
    }

    // Toggle the custom model text field and track save-state changes
    if (geminiModelInput) {
        geminiModelInput.addEventListener('change', () => {
            if (geminiModelInput.value === CUSTOM_MODEL_VALUE) {
                if (geminiModelCustomInput) {
                    geminiModelCustomInput.style.display = 'block';
                    geminiModelCustomInput.focus();
                }
            } else if (geminiModelCustomInput) {
                geminiModelCustomInput.style.display = 'none';
            }
            updateSaveButtonState();
        });
    }
    if (geminiModelCustomInput) {
        geminiModelCustomInput.addEventListener('input', updateSaveButtonState);
    }

    // Update provider info when selection changes
    function updateProviderInfo() {
        const provider = aiProviderSelect.value;
        const config = aiProviders[provider];
        
        // Get subsection elements
        const ollamaSubsection = document.getElementById('ollama-settings-subsection');
        const lmStudioSubsection = document.getElementById('lmstudio-settings-subsection');
        const apiKeySubsection = document.getElementById('api-key-subsection');
        const geminiMultiKeysSubsection = document.getElementById('gemini-multi-keys-subsection');
        const geminiUsageSubsection = document.getElementById('gemini-usage-subsection');
        const geminiModelSubsection = document.getElementById('gemini-model-subsection');
        const rateLimitWarning = document.getElementById('rate-limit-warning');
        const isLocalProvider = provider === 'ollama' || provider === 'lmstudio';
        
        // Show/hide rate limit warning (not for local providers)
        if (rateLimitWarning) {
            rateLimitWarning.style.display = isLocalProvider ? 'none' : 'block';
        }
        
        // Show/hide provider-specific elements
        if (provider === 'gemini') {
            geminiPaidContainer.style.display = 'block';
            if (geminiMultiKeysSubsection) geminiMultiKeysSubsection.style.display = 'block';
            if (geminiUsageSubsection) geminiUsageSubsection.style.display = 'block';
            if (geminiModelSubsection) geminiModelSubsection.style.display = 'block';
            if (apiKeySubsection) apiKeySubsection.style.display = 'none';
            if (ollamaSubsection) ollamaSubsection.style.display = 'none';
            if (lmStudioSubsection) lmStudioSubsection.style.display = 'none';
            updateGeminiUsageDisplay();
        } else if (provider === 'ollama') {
            // Show Ollama settings, hide API key and Gemini sections
            geminiPaidContainer.style.display = 'none';
            if (geminiMultiKeysSubsection) geminiMultiKeysSubsection.style.display = 'none';
            if (geminiUsageSubsection) geminiUsageSubsection.style.display = 'none';
            if (geminiModelSubsection) geminiModelSubsection.style.display = 'none';
            if (apiKeySubsection) apiKeySubsection.style.display = 'none';
            if (ollamaSubsection) ollamaSubsection.style.display = 'block';
            if (lmStudioSubsection) lmStudioSubsection.style.display = 'none';
        } else if (provider === 'lmstudio') {
            // Show LM Studio settings, hide API key and Gemini sections
            geminiPaidContainer.style.display = 'none';
            if (geminiMultiKeysSubsection) geminiMultiKeysSubsection.style.display = 'none';
            if (geminiUsageSubsection) geminiUsageSubsection.style.display = 'none';
            if (geminiModelSubsection) geminiModelSubsection.style.display = 'none';
            if (apiKeySubsection) apiKeySubsection.style.display = 'none';
            if (ollamaSubsection) ollamaSubsection.style.display = 'none';
            if (lmStudioSubsection) lmStudioSubsection.style.display = 'block';
        } else {
            geminiPaidContainer.style.display = 'none';
            if (geminiMultiKeysSubsection) geminiMultiKeysSubsection.style.display = 'none';
            if (geminiUsageSubsection) geminiUsageSubsection.style.display = 'none';
            if (geminiModelSubsection) geminiModelSubsection.style.display = 'none';
            if (apiKeySubsection) apiKeySubsection.style.display = 'block';
            if (ollamaSubsection) ollamaSubsection.style.display = 'none';
            if (lmStudioSubsection) lmStudioSubsection.style.display = 'none';
        }
        
        providerInfo.innerHTML = `
            <div class="provider-details">
                <strong>${config.name}</strong> ${config.isFree ? '<span class="free-badge">FREE</span>' : '<span class="paid-badge">PAID</span>'}
                <p>${config.info}</p>
            </div>
        `;
        
        if (!isLocalProvider) {
            apiKeyInput.placeholder = `Enter your ${config.name} API key`;
        }
        
        // Show the default model / optional override for single-key providers
        if (providerModelInput) {
            const defaultModel = defaultProviderModels[provider];
            if (defaultModel) {
                providerModelInput.placeholder = `Default: ${defaultModel}`;
                if (providerModelHelp) {
                    providerModelHelp.textContent = `Leave blank to use the default model (${defaultModel}).`;
                }
            } else {
                providerModelInput.placeholder = 'Leave blank to use the default model';
                if (providerModelHelp) {
                    providerModelHelp.textContent = '';
                }
            }
        }
    }
    
    // Update Gemini usage display
    let geminiCountdownTimer = null;
    let geminiUsageRefreshTimer = null;
    async function updateGeminiUsageDisplay() {
        await browser.runtime.sendMessage({ action: 'refreshGeminiUsage' });
        const data = await browser.storage.local.get(['geminiRateLimits', 'currentGeminiKeyIndex', 'geminiApiKeys', 'geminiRateLimit']);
        const currentIndex = data.currentGeminiKeyIndex || 0;
        const keys = geminiKeys.length ? geminiKeys : (data.geminiApiKeys || []);
        
        if (keys.length > 1) {
            // Multi-key mode
            document.getElementById('single-key-usage').style.display = 'none';
            document.getElementById('multi-key-usage').style.display = 'block';
            const rateLimits = Array.isArray(data.geminiRateLimits) ? data.geminiRateLimits : [];
            updateMultiKeyUsageDisplay(keys, rateLimits, currentIndex);
        } else if (keys.length === 1) {
            // Single-key mode but stored in new format
            document.getElementById('single-key-usage').style.display = 'block';
            document.getElementById('multi-key-usage').style.display = 'none';
            const rateLimits = Array.isArray(data.geminiRateLimits) ? data.geminiRateLimits : [];
            updateSingleKeyUsageDisplay(rateLimits[0] || { requests: [], dailyCount: 0, dailyResetTime: null });
        } else {
            // Legacy single-key mode (backward compatibility)
            document.getElementById('single-key-usage').style.display = 'block';
            document.getElementById('multi-key-usage').style.display = 'none';
            const storedLegacy = data.geminiRateLimit;
            const rateLimit = (storedLegacy && typeof storedLegacy === 'object')
                ? storedLegacy
                : { requests: [], dailyCount: 0, dailyResetTime: null };
            updateSingleKeyUsageDisplay(rateLimit);
        }
        if (geminiCountdownTimer) clearInterval(geminiCountdownTimer);
        geminiCountdownTimer = setInterval(() => {
            if (keys.length > 1) {
                const limits = Array.isArray(data.geminiRateLimits) ? data.geminiRateLimits : [];
                updateMultiKeyUsageDisplay(keys, limits, currentIndex);
            } else if (keys.length === 1) {
                const limits = Array.isArray(data.geminiRateLimits) ? data.geminiRateLimits : [];
                updateSingleKeyUsageDisplay(limits[0] || { requests: [], dailyCount: 0, dailyResetTime: null });
            } else {
                updateSingleKeyUsageDisplay(data.geminiRateLimit || { requests: [], dailyCount: 0, dailyResetTime: null });
            }
            if (Date.now() >= getEarliestGeminiResetTime(data, keys.length)) {
                updateGeminiUsageDisplay();
            }
        }, 1000);

        if (!geminiUsageRefreshTimer) {
            geminiUsageRefreshTimer = setInterval(() => {
                if (aiProviderSelect.value === 'gemini') updateGeminiUsageDisplay();
            }, 10000);
        }
    }

    function getEarliestGeminiResetTime(data, keyCount) {
        const limits = keyCount > 0
            ? (Array.isArray(data.geminiRateLimits) ? data.geminiRateLimits : [])
            : [data.geminiRateLimit || {}];
        const deadlines = limits.map(limit => limit && limit.dailyResetTime).filter(time => typeof time === 'number');
        return deadlines.length ? Math.min(...deadlines) : Infinity;
    }

    function formatGeminiCountdown(resetTime) {
        const remaining = Math.max(0, Math.ceil((resetTime - Date.now()) / 1000));
        const hours = Math.floor(remaining / 3600);
        const minutes = Math.floor((remaining % 3600) / 60);
        const seconds = remaining % 60;
        return `In ${hours}h ${minutes}m ${seconds}s`;
    }
    
    // Update single key usage display (backward compatibility)
    async function updateSingleKeyUsageDisplay(rateLimit) {
        const now = Date.now();
        
        // Update daily count
        document.getElementById('gemini-daily-count').textContent = rateLimit.dailyCount;
        
        // Update last request time
        if (rateLimit.requests && rateLimit.requests.length > 0) {
            const lastRequest = Math.max(...rateLimit.requests);
            const minutesAgo = Math.floor((now - lastRequest) / 60000);
            if (minutesAgo < 1) {
                document.getElementById('gemini-last-request').textContent = 'Just now';
            } else if (minutesAgo < 60) {
                document.getElementById('gemini-last-request').textContent = `${minutesAgo} minute${minutesAgo > 1 ? 's' : ''} ago`;
            } else {
                const hoursAgo = Math.floor(minutesAgo / 60);
                document.getElementById('gemini-last-request').textContent = `${hoursAgo} hour${hoursAgo > 1 ? 's' : ''} ago`;
            }
        } else {
            document.getElementById('gemini-last-request').textContent = 'Never';
        }
        
        // Update reset time
        if (rateLimit.dailyCount >= 20 && typeof rateLimit.dailyResetTime === 'number' && rateLimit.dailyResetTime > now) {
            document.getElementById('gemini-reset-time').textContent = formatGeminiCountdown(rateLimit.dailyResetTime);
        } else if (rateLimit.dailyCount >= 20) {
            document.getElementById('gemini-reset-time').textContent = 'Resetting…';
            browser.runtime.sendMessage({ action: 'refreshGeminiUsage' }).then(() => updateGeminiUsageDisplay());
        } else {
            document.getElementById('gemini-reset-time').textContent = 'Starts when limit is reached';
        }
        
        // Update status and show warnings
        const usageMessage = document.getElementById('usage-message');
        const statusSpan = document.getElementById('gemini-status');
        
        if (rateLimit.dailyCount >= 20) {
            statusSpan.textContent = '🔴 Limit Reached';
            statusSpan.style.color = '#dc3545';
            usageMessage.className = 'usage-message warning';
            usageMessage.style.display = '';
            usageMessage.textContent = '⚠️ Daily limit reached! Create a new API key in a different project and update it above to continue processing emails.';
        } else if (rateLimit.dailyCount >= 15) {
            statusSpan.textContent = '🟡 Nearly Full';
            statusSpan.style.color = '#ffc107';
            usageMessage.className = 'usage-message warning';
            usageMessage.style.display = '';
            usageMessage.textContent = `⚠️ Only ${20 - rateLimit.dailyCount} requests remaining today. Consider switching to a new API key soon.`;
        } else {
            statusSpan.textContent = '🟢 Ready';
            statusSpan.style.color = '#28a745';
            usageMessage.style.display = 'none';
        }
    }
    
    // Update multi-key usage display
    function updateMultiKeyUsageDisplay(keys, rateLimits, currentIndex) {
        const container = document.getElementById('all-keys-usage-stats');
        const now = Date.now();
        container.innerHTML = '';
        
        keys.forEach((key, index) => {
            const rateLimit = rateLimits[index] || { requests: [], dailyCount: 0, dailyResetTime: null };
            const isActive = index === currentIndex;
            
            const card = document.createElement('div');
            card.className = `key-usage-card${isActive ? ' active' : ''}`;
            
            // Determine status
            let statusBadge = '';
            if (isActive) {
                statusBadge = '<span class="key-status active">🔵 ACTIVE</span>';
            } else if (rateLimit.dailyCount >= 20) {
                statusBadge = '<span class="key-status limit">🔴 LIMIT</span>';
            } else if (rateLimit.dailyCount >= 15) {
                statusBadge = '<span class="key-status warning">🟡 NEAR LIMIT</span>';
            } else {
                statusBadge = '<span class="key-status ready">🟢 READY</span>';
            }
            
            // Calculate reset time
            let resetText = '--';
            if (rateLimit.dailyCount >= 20 && typeof rateLimit.dailyResetTime === 'number' && rateLimit.dailyResetTime > now) {
                resetText = formatGeminiCountdown(rateLimit.dailyResetTime);
            } else if (rateLimit.dailyCount >= 20) {
                resetText = 'Resetting…';
            } else {
                resetText = 'Starts at limit';
            }
            
            // Last request time
            let lastRequestText = 'Never';
            if (rateLimit.requests && rateLimit.requests.length > 0) {
                const lastRequest = Math.max(...rateLimit.requests);
                const minutesAgo = Math.floor((now - lastRequest) / 60000);
                if (minutesAgo < 1) {
                    lastRequestText = 'Just now';
                } else if (minutesAgo < 60) {
                    lastRequestText = `${minutesAgo}m ago`;
                } else {
                    lastRequestText = `${Math.floor(minutesAgo / 60)}h ago`;
                }
            }
            
            // Mask key for display
            const maskedKey = key ? `...${key.slice(-8)}` : 'Not set';
            
            card.innerHTML = `
                <div class="key-header">
                    <span class="key-title">Key ${index + 1}: ${maskedKey}</span>
                    ${statusBadge}
                </div>
                <div class="key-stats">
                    <div class="stat-item">
                        <span class="stat-label">Usage:</span>
                        <span class="stat-value">${rateLimit.dailyCount}/20</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">Last:</span>
                        <span class="stat-value">${lastRequestText}</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">Resets:</span>
                        <span class="stat-value">${resetText}</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">Available:</span>
                        <span class="stat-value">${20 - rateLimit.dailyCount}</span>
                    </div>
                </div>
            `;
            
            container.appendChild(card);
        });
    }
    
    // Add Gemini key input field
    function addGeminiKeyInput(value = '', index = -1) {
        if (index === -1) {
            index = geminiKeys.length;
            geminiKeys.push(value);
        }
        
        const keyItem = document.createElement('div');
        keyItem.className = 'gemini-key-item';
        keyItem.dataset.index = index;
        
        const keyIndex = document.createElement('span');
        keyIndex.className = 'key-index';
        keyIndex.textContent = `#${index + 1}`;
        
        const input = document.createElement('input');
        input.type = 'password';
        input.className = 'gemini-api-key-input';
        input.placeholder = 'Enter Gemini API key from another project';
        input.value = value;
        input.dataset.index = index;
        input.addEventListener('input', (e) => {
            const newKey = e.target.value.trim();
            geminiKeys[index] = newKey;
            
            // Check for duplicates in real-time
            if (newKey) {
                const isDuplicate = geminiKeys.some((key, i) => i !== index && key.trim() === newKey);
                if (isDuplicate) {
                    input.style.borderColor = '#dc3545';
                    input.title = '⚠️ This key is already added!';
                } else {
                    input.style.borderColor = '';
                    input.title = '';
                }
            } else {
                input.style.borderColor = '';
                input.title = '';
            }
        });

        const visibilityButton = document.createElement('button');
        visibilityButton.type = 'button';
        visibilityButton.className = 'button gemini-key-visibility';
        visibilityButton.textContent = 'Show';
        visibilityButton.setAttribute('aria-label', `Show API key ${index + 1}`);
        visibilityButton.addEventListener('click', () => {
            const reveal = input.type === 'password';
            input.type = reveal ? 'text' : 'password';
            visibilityButton.textContent = reveal ? 'Hide' : 'Show';
            visibilityButton.setAttribute('aria-label', `${reveal ? 'Hide' : 'Show'} API key ${index + 1}`);
        });
        
        const testButton = document.createElement('button');
        testButton.className = 'button';
        testButton.textContent = 'Test';
        testButton.addEventListener('click', () => {
            const keyValue = input.value.trim();
            if (!keyValue) {
                setKeyTestStatus(statusSpan, '⚠️ Enter key first', 'key-test-result error', 'Enter an API key before testing.');
                return;
            }
            
            // Check for duplicates before testing
            const isDuplicate = geminiKeys.some((key, i) => i !== index && key.trim() === keyValue);
            if (isDuplicate) {
                setKeyTestStatus(statusSpan, '⚠️ Duplicate key', 'key-test-result error', 'This key is already added in the list');
                return;
            }
            
            testGeminiKey(keyValue, index, keyItem);
        });
        
        const removeButton = document.createElement('button');
        removeButton.className = 'button';
        removeButton.textContent = '×';
        removeButton.addEventListener('click', () => removeGeminiKey(index));
        
        const statusSpan = document.createElement('span');
        statusSpan.className = 'key-test-result';
        statusSpan.dataset.index = index;
        
        keyItem.appendChild(keyIndex);
        keyItem.appendChild(input);
        keyItem.appendChild(visibilityButton);
        keyItem.appendChild(testButton);
        keyItem.appendChild(removeButton);
        keyItem.appendChild(statusSpan);
        geminiKeysList.appendChild(keyItem);
    }
    
    // Remove Gemini key
    function removeGeminiKey(index) {
        if (geminiKeys.length <= 1) {
            alert('You must have at least one API key configured.');
            return;
        }
        
        if (confirm(`Remove API key #${index + 1}?`)) {
            geminiKeys.splice(index, 1);
            refreshGeminiKeysList();
            browser.storage.local.get(['geminiRateLimits', 'currentGeminiKeyIndex']).then(data => {
                const rateLimits = Array.isArray(data.geminiRateLimits) ? data.geminiRateLimits.slice() : [];
                rateLimits.splice(index, 1);
                const currentIndex = data.currentGeminiKeyIndex || 0;
                const nextIndex = Math.max(0, Math.min(currentIndex > index ? currentIndex - 1 : currentIndex, geminiKeys.length - 1));
                return browser.storage.local.set({
                    geminiApiKeys: geminiKeys.slice(),
                    geminiRateLimits: rateLimits,
                    currentGeminiKeyIndex: nextIndex
                });
            }).then(() => updateGeminiUsageDisplay()).catch(error => {
                console.error('Could not synchronize removed Gemini key usage:', error);
            });
        }
    }
    
    // Refresh Gemini keys list display
    function refreshGeminiKeysList() {
        geminiKeysList.innerHTML = '';
        geminiKeys.forEach((key, index) => {
            addGeminiKeyInput(key, index);
        });
    }
    
    // Update a key test badge (text, color and hover tooltip) in one place so
    // the tooltip always reflects the most recent test result.
    function setKeyTestStatus(statusSpan, text, className, title = '') {
        statusSpan.textContent = text;
        statusSpan.className = className;
        statusSpan.title = title;
    }

    // Test individual Gemini key
    async function testGeminiKey(apiKey, index, keyItemElement) {
        const statusSpan = keyItemElement.querySelector('.key-test-result');
        
        if (!apiKey) {
            setKeyTestStatus(statusSpan, '⚠️ Enter key first', 'key-test-result error', 'Enter an API key before testing.');
            return;
        }
        
        try {
            setKeyTestStatus(statusSpan, 'Testing...', 'key-test-result testing');
            
            const model = getSelectedGeminiModel();
            const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    contents: [{ parts: [{ text: "Test" }] }],
                    generationConfig: { maxOutputTokens: 10 }
                })
            });
            
            if (response.ok) {
                setKeyTestStatus(statusSpan, '✓ Valid', 'key-test-result success', `API key is valid for model "${model}".`);
            } else if (response.status === 429) {
                setKeyTestStatus(statusSpan, '⚠️ Limit reached', 'key-test-result error', 'This key has reached its daily rate limit (20/day). Will reset in ~24 hours.');
                console.error(`Key #${index + 1} has reached rate limit (429)`);
            } else if (response.status === 401 || response.status === 403) {
                setKeyTestStatus(statusSpan, '✗ Invalid key', 'key-test-result error', 'API key is invalid or expired. Check your key in Google AI Studio.');
                console.error(`Key #${index + 1} test failed: ${response.status}`);
            } else {
                // Try to show the API's own error message (e.g. model not found)
                let detail = `✗ Failed (${response.status})`;
                try {
                    const errBody = await response.json();
                    const apiMsg = errBody.error?.message;
                    if (apiMsg) detail = `✗ ${apiMsg}`;
                } catch (e) { /* ignore parse errors */ }
                setKeyTestStatus(statusSpan, detail, 'key-test-result error', detail);
                console.error(`Key #${index + 1} test failed:`, response.status, detail);
            }
        } catch (error) {
            const detail = `Connection error: ${error.message}`;
            setKeyTestStatus(statusSpan, '✗ Error', 'key-test-result error', detail);
            console.error(`Key #${index + 1} test error:`, error);
        }
    }
    
    // Initialize provider info
    updateProviderInfo();
    aiProviderSelect.addEventListener('change', updateProviderInfo);
    
    // Add Gemini key button
    addGeminiKeyButton.addEventListener('click', () => {
        addGeminiKeyInput('');
    });

    const testAllGeminiKeysButton = document.getElementById('test-all-gemini-keys');
    testAllGeminiKeysButton.addEventListener('click', async () => {
        const rows = Array.from(geminiKeysList.querySelectorAll('.gemini-key-item'));
        const configured = rows.map((row, index) => ({
            row,
            index,
            key: row.querySelector('input').value.trim()
        })).filter(item => item.key);
        if (!configured.length) {
            showMessage('Add at least one Gemini API key before testing.', false);
            return;
        }

        testAllGeminiKeysButton.disabled = true;
        testAllGeminiKeysButton.textContent = 'Testing keys...';
        try {
            for (const item of configured) {
                await testGeminiKey(item.key, item.index, item.row);
            }
        } finally {
            testAllGeminiKeysButton.disabled = false;
            testAllGeminiKeysButton.textContent = 'Test All Keys';
        }
    });

    // Bulk import Gemini API keys button
    const bulkImportKeysButton = document.getElementById('bulk-import-keys-button');
    if (bulkImportKeysButton) {
        bulkImportKeysButton.addEventListener('click', () => {
            const bulkText = bulkImportGeminiKeysTextarea.value.trim();
            const keys = bulkText.split('\n').map(k => k.trim()).filter(k => k !== '');
            
            // Validation
            if (keys.length === 0) {
                showMessage('Please add at least one Gemini API key. Enter keys one per line.', false);
                return;
            }
            
            // Check for duplicate keys
            const uniqueKeys = new Set(keys.map(key => key.trim().toLowerCase()));
            if (uniqueKeys.size !== keys.length) {
                showMessage('⚠️ Duplicate API keys detected! Each key must be unique. Please remove duplicates before importing.', false);
                return;
            }
            
            // Update Gemini keys
            geminiKeys = keys;
            refreshGeminiKeysList();
            
            // Save settings automatically
            const provider = aiProviderSelect.value;
            if (provider === 'gemini') {
                const apiKey = geminiKeys.find(key => key && key.trim() !== '');
                if (apiKey) {
                    browser.storage.local.set({
                        geminiApiKeys: geminiKeys,
                        currentGeminiKeyIndex: 0,
                        aiProvider: provider
                    }).then(() => {
                        showMessage(`✓ Imported ${keys.length} Gemini API keys successfully!`, true);
                        updateSaveButtonState();
                    }).catch(error => {
                        showMessage('Error saving keys: ' + error, false);
                    });
                }
            }
        });
    }

    // Load available Gemini models for the entered API key
    if (loadGeminiModelsButton) {
        loadGeminiModelsButton.addEventListener('click', async () => {
            const apiKey = (geminiKeys.find(key => key && key.trim() !== '') || '').trim();
            if (!apiKey) {
                geminiModelStatus.textContent = '⚠️ Add at least one Gemini API key first.';
                geminiModelStatus.className = 'api-test-result error';
                return;
            }

            geminiModelStatus.textContent = 'Loading models...';
            geminiModelStatus.className = 'api-test-result';

            try {
                const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models?key=${encodeURIComponent(apiKey)}`);
                if (!response.ok) {
                    let detail = `HTTP ${response.status}`;
                    try {
                        const errBody = await response.json();
                        detail = errBody.error?.message || detail;
                    } catch (e) { /* ignore */ }
                    throw new Error(detail);
                }

                const data = await response.json();
                const models = (data.models || [])
                    .filter(m => (m.supportedGenerationMethods || []).includes('generateContent'))
                    .map(m => m.name.replace(/^models\//, ''));

                if (models.length === 0) {
                    geminiModelStatus.textContent = 'No models supporting generateContent were returned for this key.';
                    geminiModelStatus.className = 'api-test-result error';
                    return;
                }

                const wasCustom = geminiModelInput && geminiModelInput.value === CUSTOM_MODEL_VALUE;
                const current = getSelectedGeminiModel();

                // If the current value isn't available for this key, offer a sensible default
                // (but keep a user-typed custom model as-is).
                let chosen = current;
                if (!wasCustom && !models.includes(current)) {
                    chosen = models.find(m => m === DEFAULT_GEMINI_MODEL)
                        || models.find(m => m.includes('flash-lite'))
                        || models.find(m => m.includes('flash'))
                        || models[0];
                }

                setGeminiModelSelect(models, chosen);

                geminiModelStatus.textContent = `✓ Found ${models.length} available model(s). Choose one above.`;
                geminiModelStatus.className = 'api-test-result success';
            } catch (error) {
                geminiModelStatus.textContent = `✗ Could not load models: ${error.message}`;
                geminiModelStatus.className = 'api-test-result error';
            }
        });
    }
    
    // Reset Gemini counter button
    document.getElementById('reset-gemini-counter').addEventListener('click', async () => {
        if (confirm('Reset usage counter? Do this only after switching to a new API key.')) {
            const makeFresh = () => ({ requests: [], dailyCount: 0, pendingCount: 0, dailyResetTime: null });

            const data = await browser.storage.local.get(['geminiRateLimits', 'geminiApiKeys']);
            const keys = data.geminiApiKeys || geminiKeys || [];
            const updates = {};

            // The live counter is stored per-key in geminiRateLimits (array).
            if (keys.length > 0) {
                const rateLimits = (data.geminiRateLimits && data.geminiRateLimits.length)
                    ? data.geminiRateLimits.slice()
                    : keys.map(() => makeFresh());
                for (let i = 0; i < keys.length; i++) {
                    rateLimits[i] = makeFresh();
                }
                updates.geminiRateLimits = rateLimits;
            }

            // Keep the legacy single-key field in sync for older installs
            updates.geminiRateLimit = makeFresh();

            await browser.storage.local.set(updates);
            await updateGeminiUsageDisplay();

            const usageMessage = document.getElementById('usage-message');
            usageMessage.className = 'usage-message info';
            usageMessage.style.display = '';
            usageMessage.textContent = '✓ Usage counter reset. You can now process up to 20 more emails today with your new API key.';
        }
    });
    
    // Refresh usage button (single key)
    document.getElementById('refresh-usage').addEventListener('click', async () => {
        await updateGeminiUsageDisplay();
        const usageMessage = document.getElementById('usage-message');
        usageMessage.className = 'usage-message info';
        usageMessage.style.display = '';
        usageMessage.textContent = '✓ Usage information refreshed.';
        setTimeout(() => {
            if (usageMessage.classList.contains('info')) {
                usageMessage.style.display = 'none';
            }
        }, 3000);
    });
    
    // Refresh all usage button (multi key)
    document.getElementById('refresh-all-usage').addEventListener('click', async () => {
        await updateGeminiUsageDisplay();
        showMessage('✓ All usage information refreshed.', true);
    });
    
    // Get API Key button
    getApiKeyButton.addEventListener('click', async () => {
        const provider = aiProviderSelect.value;
        const config = aiProviders[provider];
        
        try {
            // Try to open in new tab
            await browser.tabs.create({ url: config.signupUrl });
        } catch (error) {
            console.error('Failed to open tab:', error);
            // Fallback: show URL and copy to clipboard
            const url = config.signupUrl;
            try {
                await navigator.clipboard.writeText(url);
                showMessage(`URL copied to clipboard:\n${url}`, true);
            } catch (e) {
                // Last resort: show alert with URL
                alert(`Please visit:\n${url}`);
            }
        }
    });

    // Function to validate and update save button state
    function updateSaveButtonState() {
        const labels = Array.from(document.querySelectorAll('.label-input'))
            .map(input => input.value.trim())
            .filter(label => label !== '');
        
        const provider = aiProviderSelect.value;
        let hasValidApiKey = true; // Default to true for Ollama and other providers
        
        if (provider === 'gemini') {
            const validGeminiKeys = geminiKeys.filter(key => key && key.trim() !== '');
            hasValidApiKey = validGeminiKeys.length > 0;
        } else if (provider !== 'ollama' && provider !== 'lmstudio') {
            // Cloud providers (OpenAI, Anthropic, Groq, Mistral) require an API key
            const apiKey = apiKeyInput.value.trim();
            hasValidApiKey = !!apiKey;
        }
        // Ollama and LM Studio are local providers and don't require an API key,
        // so hasValidApiKey stays true
        
        if (labels.length === 0 || !hasValidApiKey) {
            saveButton.disabled = true;
            saveButton.classList.add('disabled');
            
            let missingItems = [];
            if (labels.length === 0) missingItems.push('folders/labels');
            if (!hasValidApiKey) missingItems.push('API key');
            
            saveButton.title = `Please configure: ${missingItems.join(' and ')}`;
        } else {
            saveButton.disabled = false;
            saveButton.classList.remove('disabled');
            saveButton.title = '';
        }
    }

    // Read and clamp the parallel batch size (1–20, default 5)
    function getBatchChunkSize() {
        const raw = batchChunkSizeInput ? parseInt(batchChunkSizeInput.value, 10) : NaN;
        if (isNaN(raw)) return 5;
        return Math.min(20, Math.max(1, raw));
    }

    // Load saved settings
    browser.storage.local.get(['labels', 'apiKey', 'geminiApiKeys', 'aiProvider', 'enableAi', 'completionSoundEnabled', 'geminiPaidPlan', 'geminiResetNotifications', 'geminiModel', 'providerModel', 'ollamaUrl', 'ollamaModel', 'ollamaCustomModel', 'ollamaCpuOnly', 'ollamaAuthToken', 'lmstudioUrl', 'lmstudioModel', 'lmstudioCustomModel', 'lmstudioAuthToken', 'batchChunkSize']).then(result => {
        if (result.labels && result.labels.length > 0) {
            result.labels.forEach(label => {
                addLabelInput(label);
            });
        } else {
            // Show instruction if no labels
            labelsContainer.innerHTML = '<div class="instruction-message">No folders/labels configured. Click "Load Folders from Mail Account" above or add custom labels below.</div>';
        }
        
        // Load API keys
        if (result.geminiApiKeys && result.geminiApiKeys.length > 0) {
            // Multi-key mode
            geminiKeys = result.geminiApiKeys;
            geminiKeys.forEach((key, index) => {
                addGeminiKeyInput(key, index);
            });
        } else if (result.apiKey) {
            // Migrate from single key to multi-key
            geminiKeys = [result.apiKey];
            addGeminiKeyInput(result.apiKey, 0);
            apiKeyInput.value = result.apiKey;
        } else {
            // No keys configured yet - add one empty field
            addGeminiKeyInput('', 0);
        }
        
        // Load Ollama settings
        if (result.ollamaUrl && ollamaUrlInput) {
            ollamaUrlInput.value = result.ollamaUrl;
        }
        if (result.ollamaAuthToken && ollamaAuthTokenInput) {
            ollamaAuthTokenInput.value = result.ollamaAuthToken;
        }
        if (result.ollamaModel && ollamaModelSelect) {
            ollamaModelSelect.value = result.ollamaModel;
            if (result.ollamaModel === 'custom' && result.ollamaCustomModel && ollamaCustomModelInput) {
                ollamaCustomModelInput.value = result.ollamaCustomModel;
                ollamaCustomModelInput.style.display = 'block';
            }
        }
        if (ollamaCpuOnlyCheckbox) {
            ollamaCpuOnlyCheckbox.checked = result.ollamaCpuOnly === true;
        }

        // Load LM Studio settings
        if (result.lmstudioUrl && lmStudioUrlInput) {
            lmStudioUrlInput.value = result.lmstudioUrl;
        }
        if (result.lmstudioAuthToken && lmStudioAuthTokenInput) {
            lmStudioAuthTokenInput.value = result.lmstudioAuthToken;
        }
        if (lmStudioModelSelect && result.lmstudioModel) {
            setLmStudioModelSelect(result.lmstudioModel, result.lmstudioCustomModel || '');
        }
        
        // Load Gemini model (default to a current model for new installs)
        if (geminiModelInput) {
            setGeminiModelSelect(null, result.geminiModel || DEFAULT_GEMINI_MODEL);
        }
        
        // Load optional per-provider model override
        if (providerModelInput) {
            providerModelInput.value = result.providerModel || '';
        }
        
        if (result.aiProvider) {
            aiProviderSelect.value = result.aiProvider;
            updateProviderInfo();
        }
        // Set enableAi to true by default if not set
        document.getElementById('enable-ai').checked = result.enableAi !== false;
        document.getElementById('completion-sound-enabled').checked = result.completionSoundEnabled === true;
        
        // Set gemini paid plan checkbox
        geminiPaidCheckbox.checked = result.geminiPaidPlan === true;
        geminiResetNotificationsCheckbox.checked = result.geminiResetNotifications === true;
        
        // Load parallel batch size (1-20, default 5)
        if (batchChunkSizeInput) {
            const storedChunkSize = parseInt(result.batchChunkSize, 10);
            batchChunkSizeInput.value = (storedChunkSize >= 1 && storedChunkSize <= 20) ? storedChunkSize : 5;
        }
        
        updateSaveButtonState();
    });

    document.getElementById('completion-sound-enabled').addEventListener('change', event => {
        browser.storage.local.set({ completionSoundEnabled: event.target.checked }).catch(error => {
            console.error('Could not save completion sound preference:', error);
        });
    });
    
    // Add input listeners for validation
    apiKeyInput.addEventListener('input', updateSaveButtonState);
    labelsContainer.addEventListener('input', updateSaveButtonState);
    if (batchChunkSizeInput) {
        batchChunkSizeInput.addEventListener('input', updateSaveButtonState);
    }

    // Test API connection
    testApiButton.addEventListener('click', async () => {
        const apiKey = apiKeyInput.value.trim();
        const provider = aiProviderSelect.value;
        
        // Skip local providers as they have their own test buttons
        if (provider === 'ollama') {
            showApiTestResult('Please use the "Test Ollama Connection" button below', false);
            return;
        }
        if (provider === 'lmstudio') {
            showApiTestResult('Please use the "Test Connection" button in the LM Studio section below', false);
            return;
        }
        
        if (!apiKey) {
            showApiTestResult('Please enter an API key', false);
            return;
        }

        try {
            showApiTestResult('Testing connection...', false);
            
            // Optional per-provider model override
            const modelOverride = (providerModelInput && providerModelInput.value.trim()) || '';
            const modelFor = (p) => modelOverride || defaultProviderModels[p];
            
            let response;
            if (provider === 'gemini') {
                const model = getSelectedGeminiModel();
                response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'x-goog-api-key': apiKey
                    },
                    body: JSON.stringify({
                        contents: [{ parts: [{ text: "Test" }] }],
                        generationConfig: { maxOutputTokens: 10 }
                    })
                });
            } else if (provider === 'openai') {
                response = await fetch('https://api.openai.com/v1/chat/completions', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${apiKey}`
                    },
                    body: JSON.stringify({
                        model: modelFor('openai'),
                        messages: [{ role: 'user', content: 'Test' }],
                        max_tokens: 10
                    })
                });
            } else if (provider === 'anthropic') {
                response = await fetch('https://api.anthropic.com/v1/messages', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'x-api-key': apiKey,
                        'anthropic-version': '2023-06-01'
                    },
                    body: JSON.stringify({
                        model: modelFor('anthropic'),
                        messages: [{ role: 'user', content: 'Test' }],
                        max_tokens: 10
                    })
                });
            } else if (provider === 'groq') {
                response = await fetch('https://api.groq.com/openai/v1/chat/completions', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${apiKey}`
                    },
                    body: JSON.stringify({
                        model: modelFor('groq'),
                        messages: [{ role: 'user', content: 'Test' }],
                        max_tokens: 10
                    })
                });
            } else if (provider === 'mistral') {
                response = await fetch('https://api.mistral.ai/v1/chat/completions', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${apiKey}`
                    },
                    body: JSON.stringify({
                        model: modelFor('mistral'),
                        messages: [{ role: 'user', content: 'Test' }],
                        max_tokens: 10
                    })
                });
            }

            if (response.ok) {
                showApiTestResult('✓ API connection successful!', true);
            } else {
                const error = await response.json();
                showApiTestResult(`API Error: ${error.error?.message || error.message || 'Unknown error'}`, false);
            }
        } catch (error) {
            showApiTestResult(`Connection Error: ${error.message}`, false);
        }
    });

    // Load IMAP folders
    loadImapFoldersButton.addEventListener('click', async () => {
        folderLoadingIndicator.style.display = 'block';
        folderSelection.style.display = 'none';
        
        try {
            const accounts = await browser.accounts.list();
            const allFolders = [];
            
            for (const account of accounts) {
                const folders = await getAllFolders(account);
                allFolders.push(...folders);
            }
            
            // Filter out system folders and duplicates
            loadedFolders = [...new Set(allFolders
                .filter(f => !['Inbox', 'Trash', 'Drafts', 'Sent', 'Spam', 'Junk', 'Templates', 'Outbox', 'Archives'].includes(f))
                .map(f => f.replace(/^INBOX\./i, '').trim())
            )].sort();
            
            if (loadedFolders.length === 0) {
                showMessage('No folders found. You can create custom folders instead.', false);
                folderLoadingIndicator.style.display = 'none';
                return;
            }
            
            // Show folder preview
            folderCount.textContent = loadedFolders.length;
            foldersPreview.innerHTML = loadedFolders
                .slice(0, 10)
                .map(f => `<div class="folder-preview-item">${f}</div>`)
                .join('') + (loadedFolders.length > 10 ? `<div class="folder-preview-item">...and ${loadedFolders.length - 10} more</div>` : '');
            
            folderSelection.style.display = 'block';
        } catch (error) {
            showMessage(`Error loading folders: ${error.message}`, false);
            console.error('Error loading folders:', error);
        } finally {
            folderLoadingIndicator.style.display = 'none';
        }
    });
    
    // Use IMAP folders
    useImapFoldersButton.addEventListener('click', () => {
        if (confirm(`This will replace any existing folders/labels with ${loadedFolders.length} folders from your mail account. Continue?`)) {
            labelsContainer.innerHTML = '';
            loadedFolders.forEach(folder => {
                addLabelInput(folder);
            });
            folderSelection.style.display = 'none';
            updateSaveButtonState();
            showMessage(`Loaded ${loadedFolders.length} folders from your mail account. Don't forget to save!`, true);
        }
    });
    
    // Use custom folders
    useCustomFoldersButton.addEventListener('click', () => {
        folderSelection.style.display = 'none';
        showMessage('You can now add custom folders below', true);
    });
    
    // Helper function to recursively get all folders
    async function getAllFolders(account) {
        const folders = [];
        
        async function processFolder(folder) {
            if (folder.type !== 'inbox' && folder.type !== 'trash' && folder.type !== 'sent' && 
                folder.type !== 'drafts' && folder.type !== 'junk' && folder.type !== 'templates' &&
                folder.type !== 'outbox' && folder.type !== 'archives') {
                folders.push(folder.name);
            }
            
            if (folder.subFolders) {
                for (const subFolder of folder.subFolders) {
                    await processFolder(subFolder);
                }
            }
        }
        
        for (const folder of account.folders) {
            await processFolder(folder);
        }
        
        return folders;
    }

    // Import categories/folders in bulk
    importLabelsButton.addEventListener('click', () => {
        const bulkText = bulkImportTextarea.value.trim();
        const labels = bulkText.split('\n').map(l => l.trim()).filter(l => l !== '');
        
        // Validation
        if (labels.length === 0) {
            showMessage('Please add at least one folder/label before importing. Enter labels one per line.', false);
            return;
        }

        // Confirm if there are existing labels
        const existingLabels = Array.from(document.querySelectorAll('.label-input'))
            .map(input => input.value.trim())
            .filter(label => label !== '');
            
        if (existingLabels.length > 0) {
            if (!confirm(`This will replace your ${existingLabels.length} existing folders/labels with ${labels.length} new ones. Continue?`)) {
                return;
            }
        }

        // Clear existing categories/folders
        labelsContainer.innerHTML = '';

        // Add each category/folder
        labels.forEach(label => {
            addLabelInput(label);
        });

        updateSaveButtonState();
        showMessage(`Imported ${labels.length} categories/folders. Don't forget to save!`, true);
        bulkImportTextarea.value = ''; // Clear the textarea
    });

    // Add new label input
    
    // Show/hide custom model input based on selection
    if (ollamaModelSelect) {
        ollamaModelSelect.addEventListener('change', () => {
            if (ollamaModelSelect.value === 'custom') {
                ollamaCustomModelInput.style.display = 'block';
            } else {
                ollamaCustomModelInput.style.display = 'none';
            }
        });
    }
    
    // Test Ollama connection
    if (testOllamaButton) {
        testOllamaButton.addEventListener('click', async () => {
            const ollamaUrl = ollamaUrlInput.value.trim() || 'http://localhost:11434';
            let selectedModel = ollamaModelSelect.value;
            
            if (selectedModel === 'custom') {
                selectedModel = ollamaCustomModelInput.value.trim();
                if (!selectedModel) {
                    ollamaTestResult.textContent = '⚠️ Please enter a custom model name first';
                    ollamaTestResult.className = 'api-test-result error';
                    return;
                }
            }
            
            try {
                ollamaTestResult.textContent = 'Testing connection and checking model...';
                ollamaTestResult.className = 'api-test-result';
                
                const testUrl = `${ollamaUrl}/api/tags`;
                console.log('[Ollama Test] Connecting to:', testUrl);
                
                const headers = {};
                if (ollamaAuthTokenInput && ollamaAuthTokenInput.value.trim()) {
                    headers['Authorization'] = `Bearer ${ollamaAuthTokenInput.value.trim()}`;
                }

                const response = await fetch(testUrl, {
                    method: 'GET',
                    headers
                });
                
                console.log('[Ollama Test] Response status:', response.status);
                
                if (response.ok) {
                    const data = await response.json();
                    console.log('[Ollama Test] Success:', data);
                    const installedModels = data.models && data.models.length > 0 
                        ? data.models.map(m => m.name)
                        : [];
                    
                    if (installedModels.length === 0) {
                        ollamaTestResult.textContent = `⚠️ Ollama is running but no models installed. Enter a model name in "Download Model" and click "Download" to get started.`;
                        ollamaTestResult.className = 'api-test-result error';
                    } else {
                        // Extract base model name (before colon) for regex matching
                        const selectedBase = selectedModel.split(':')[0].toLowerCase();
                        const installedBases = installedModels.map(m => m.split(':')[0].toLowerCase());
                        
                        const modelFound = installedBases.some(base => base === selectedBase);
                        if (modelFound) {
                            ollamaTestResult.textContent = `✓ Connected! Model "${selectedModel}" is installed and ready. Available: ${installedModels.join(', ')}`;
                            ollamaTestResult.className = 'api-test-result success';
                        } else {
                            ollamaTestResult.textContent = `✗ Model "${selectedModel}" not installed. Available models: ${installedModels.join(', ')}. Use "Download Model" to install it.`;
                            ollamaTestResult.className = 'api-test-result error';
                        }
                    }
                } else {
                    const errorText = await response.text();
                    console.error('[Ollama Test] Error response:', errorText);
                    let errorMsg = 'Connection failed';
                    if (response.status === 403) {
                        errorMsg = 'Access denied (403). Check if Ollama is running and the URL is correct.';
                    } else if (response.status === 404) {
                        errorMsg = 'Ollama not found (404). Check the server URL.';
                    } else {
                        try {
                            const errorData = JSON.parse(errorText);
                            errorMsg = errorData.error || errorText;
                        } catch (e) {
                            errorMsg = errorText || `HTTP ${response.status}`;
                        }
                    }
                    ollamaTestResult.textContent = `✗ Error: ${errorMsg}`;
                    ollamaTestResult.className = 'api-test-result error';
                }
            } catch (error) {
                console.error('[Ollama Test] Exception:', error);
                ollamaTestResult.textContent = `✗ Connection failed: ${error.message}. Make sure Ollama is running (try: ollama serve)`;
                ollamaTestResult.className = 'api-test-result error';
            }
        });
    }
    
    // Run comprehensive Ollama diagnostics
    if (diagnoseOllamaButton) {
        diagnoseOllamaButton.addEventListener('click', async () => {
            const ollamaUrl = ollamaUrlInput.value.trim() || 'http://localhost:11434';
            let diagnosticOutput = '🔍 OLLAMA DIAGNOSTICS\n' + '='.repeat(50) + '\n\n';
            
            ollamaDiagnostics.style.display = 'block';
            ollamaDiagnostics.className = 'diagnostics-result';
            ollamaDiagnostics.textContent = diagnosticOutput + 'Running tests...\n';
            
            try {
                // Test 1: Check /api/tags endpoint
                diagnosticOutput += '📋 Test 1: List Models Endpoint\n';
                diagnosticOutput += `   URL: ${ollamaUrl}/api/tags\n`;
                try {
                    const tagsResponse = await fetch(`${ollamaUrl}/api/tags`);
                    diagnosticOutput += `   Status: ${tagsResponse.status} ${tagsResponse.statusText}\n`;
                    
                    if (tagsResponse.ok) {
                        const data = await tagsResponse.json();
                        diagnosticOutput += `   ✓ SUCCESS - Found ${data.models?.length || 0} models\n`;
                        if (data.models && data.models.length > 0) {
                            diagnosticOutput += '   Installed models: ' + data.models.map(m => m.name).join(', ') + '\n';
                        } else {
                            diagnosticOutput += '   ⚠️ No models installed\n';
                        }
                    } else {
                        diagnosticOutput += `   ✗ FAILED\n`;
                    }
                } catch (error) {
                    diagnosticOutput += `   ✗ ERROR: ${error.message}\n`;
                }
                
                // Test 2: Check /api/version endpoint
                diagnosticOutput += '\n🔢 Test 2: Version Endpoint\n';
                diagnosticOutput += `   URL: ${ollamaUrl}/api/version\n`;
                try {
                    const versionResponse = await fetch(`${ollamaUrl}/api/version`);
                    diagnosticOutput += `   Status: ${versionResponse.status} ${versionResponse.statusText}\n`;
                    
                    if (versionResponse.ok) {
                        const data = await versionResponse.json();
                        diagnosticOutput += `   ✓ SUCCESS - Ollama version: ${data.version || 'unknown'}\n`;
                    } else {
                        diagnosticOutput += `   ⚠️ Endpoint not available (older Ollama version)\n`;
                    }
                } catch (error) {
                    diagnosticOutput += `   ✗ ERROR: ${error.message}\n`;
                }
                
                // Test 3: Test pull endpoint (without actually downloading)
                diagnosticOutput += '\n⬇️ Test 3: Pull Endpoint Check\n';
                diagnosticOutput += `   URL: ${ollamaUrl}/api/pull\n`;
                diagnosticOutput += `   Note: This endpoint is used for downloading models\n`;
                
                // Summary
                diagnosticOutput += '\n' + '='.repeat(50) + '\n';
                diagnosticOutput += '📊 SUMMARY:\n\n';
                
                if (diagnosticOutput.includes('✓ SUCCESS - Found')) {
                    diagnosticOutput += '✓ Ollama is running and accessible\n';
                    diagnosticOutput += `✓ API base URL: ${ollamaUrl}\n`;
                    ollamaDiagnostics.className = 'diagnostics-result success';
                } else {
                    diagnosticOutput += '✗ Cannot connect to Ollama\n';
                    diagnosticOutput += '\nTroubleshooting:\n';
                    diagnosticOutput += '1. Check if Ollama is running: ps aux | grep ollama\n';
                    diagnosticOutput += '2. Start Ollama: ollama serve\n';
                    diagnosticOutput += `3. Test manually: curl ${ollamaUrl}/api/tags\n`;
                    diagnosticOutput += '4. Check if port 11434 is in use: lsof -i :11434\n';
                    ollamaDiagnostics.className = 'diagnostics-result error';
                }
                
            } catch (error) {
                diagnosticOutput += '\n❌ CRITICAL ERROR:\n';
                diagnosticOutput += error.message + '\n';
                ollamaDiagnostics.className = 'diagnostics-result error';
            }
            
            ollamaDiagnostics.textContent = diagnosticOutput;
        });
    }
    
    // List Ollama models
    if (listOllamaModelsButton) {
        listOllamaModelsButton.addEventListener('click', async () => {
            const ollamaUrl = ollamaUrlInput.value.trim() || 'http://localhost:11434';
            
            try {
                ollamaTestResult.textContent = 'Fetching models...';
                ollamaTestResult.className = 'api-test-result';
                
                const response = await fetch(`${ollamaUrl}/api/tags`);
                
                if (response.ok) {
                    const data = await response.json();
                    if (data.models && data.models.length > 0) {
                        const modelNames = data.models.map(m => m.name).join(', ');
                        ollamaTestResult.textContent = `✓ Available models: ${modelNames}`;
                        ollamaTestResult.className = 'api-test-result success';
                    } else {
                        ollamaTestResult.textContent = '⚠️ No models installed. Run "ollama pull llama3.2" to download one.';
                        ollamaTestResult.className = 'api-test-result error';
                    }
                } else {
                    ollamaTestResult.textContent = '✗ Failed to fetch models';
                    ollamaTestResult.className = 'api-test-result error';
                }
            } catch (error) {
                ollamaTestResult.textContent = `✗ Connection failed: ${error.message}. Is Ollama running?`;
                ollamaTestResult.className = 'api-test-result error';
            }
        });
    }

    // Download Ollama model via tab proxy
    if (downloadOllamaModelButton) {
        downloadOllamaModelButton.addEventListener('click', async () => {
            const ollamaUrl = (ollamaUrlInput.value.trim() || 'http://localhost:11434').replace(/\/$/, '');
            const modelName = ollamaDownloadModelInput.value.trim();
            const token = ollamaAuthTokenInput && ollamaAuthTokenInput.value.trim();
            if (!modelName) {
                ollamaDownloadStatus.textContent = '⚠️ Please enter a model name to download';
                ollamaDownloadStatus.className = 'api-test-result error';
                ollamaDownloadStatus.style.display = 'block';
                return;
            }
            try {
                downloadOllamaModelButton.disabled = true;
                ollamaDownloadStatus.textContent = `Starting download of ${modelName}...`;
                ollamaDownloadStatus.className = 'api-test-result';
                ollamaDownloadStatus.style.display = 'block';

                // Ask background to open a hidden tab and start pull
                const headers = token ? { Authorization: `Bearer ${token}` } : {};
                await browser.runtime.sendMessage({
                    action: 'startOllamaPull',
                    ollamaUrl,
                    model: modelName,
                    headers
                });
            } catch (e) {
                ollamaDownloadStatus.textContent = `✗ Failed to start: ${e.message}`;
                ollamaDownloadStatus.className = 'api-test-result error';
            } finally {
                downloadOllamaModelButton.disabled = false;
            }
        });
        // Listen for progress events from content.js
        browser.runtime.onMessage.addListener((msg) => {
            if (msg.action === 'ollamaPullProgress') {
                const parts = [];
                if (msg.status) parts.push(msg.status);
                if (typeof msg.percent === 'number') parts.push(`${msg.percent}%`);
                ollamaDownloadStatus.textContent = parts.join(' — ');
                ollamaDownloadStatus.className = 'api-test-result';
                ollamaDownloadStatus.style.display = 'block';
            } else if (msg.action === 'ollamaPullComplete') {
                if (msg.ok) {
                    ollamaDownloadStatus.textContent = '✓ Download complete';
                    ollamaDownloadStatus.className = 'api-test-result success';
                } else {
                    ollamaDownloadStatus.textContent = `✗ Download failed: ${msg.error || 'unknown error'}`;
                    ollamaDownloadStatus.className = 'api-test-result error';
                }
                ollamaDownloadStatus.style.display = 'block';
            }
        });
    }

    // ---- LM Studio (local, native REST API /api/v1/*) ----

    // Rebuild the LM Studio model dropdown.
    // `selected` may be a real model id or the "custom" sentinel.
    function renderLmStudioModels(models, selected = '', customModel = '') {
        if (!lmStudioModelSelect) return;
        const list = (models || []).slice();
        const selectedIsCustom = selected === 'custom' || selected === LMSTUDIO_CUSTOM_VALUE;

        // Keep the currently saved model visible even if it isn't in the fetched list
        if (selected && !selectedIsCustom && !list.includes(selected)) {
            list.push(selected);
        }

        let html = '<option value="">Select a model…</option>';
        html += list
            .map(id => `<option value="${escapeOptionHtml(id)}">${escapeOptionHtml(id)}</option>`)
            .join('');
        html += `<option value="${LMSTUDIO_CUSTOM_VALUE}">Custom model… (type your own)</option>`;
        lmStudioModelSelect.innerHTML = html;

        if (selectedIsCustom) {
            lmStudioModelSelect.value = LMSTUDIO_CUSTOM_VALUE;
            if (lmStudioCustomModelInput) {
                lmStudioCustomModelInput.value = customModel || '';
                lmStudioCustomModelInput.style.display = 'block';
            }
        } else if (selected) {
            lmStudioModelSelect.value = selected;
            if (lmStudioCustomModelInput) lmStudioCustomModelInput.style.display = 'none';
        }
    }

    function setLmStudioModelSelect(model, customModel = '') {
        renderLmStudioModels([], model, customModel);
    }

    function getSelectedLmStudioModel() {
        if (!lmStudioModelSelect) return '';
        if (lmStudioModelSelect.value === LMSTUDIO_CUSTOM_VALUE) {
            return (lmStudioCustomModelInput && lmStudioCustomModelInput.value.trim()) || '';
        }
        return lmStudioModelSelect.value || '';
    }

    function lmStudioHeaders() {
        const headers = {};
        const token = lmStudioAuthTokenInput && lmStudioAuthTokenInput.value.trim();
        if (token) headers['Authorization'] = `Bearer ${token}`;
        return headers;
    }

    // Normalize the LM Studio server URL to its root.
    // Users often paste the OpenAI-compatible base (http://host:1234/v1) or the
    // native base (http://host:1234/api/v1). We always append /api/v1/* ourselves,
    // so strip those suffixes to avoid paths like /v1/api/v1/models.
    function normalizeLmStudioBaseUrl(rawUrl) {
        let url = (rawUrl || 'http://localhost:1234').trim().replace(/\/+$/, '');
        url = url.replace(/\/(?:api\/v[01]|v1)$/i, '');
        return url.replace(/\/+$/, '') || 'http://localhost:1234';
    }

    function lmStudioBaseUrl() {
        return normalizeLmStudioBaseUrl(lmStudioUrlInput.value);
    }

    // LM Studio answers unknown endpoints with HTTP 200 and a JSON error body,
    // so an OK status is not enough - surface any `error` field explicitly.
    function lmStudioErrorFromBody(data) {
        if (!data || !data.error) return null;
        const err = data.error;
        if (typeof err === 'string') return err;
        return err.message || JSON.stringify(err);
    }

    // Fetch the list of chat-capable models from LM Studio.
    async function loadLmStudioModels() {
        const url = lmStudioBaseUrl();
        let response;
        try {
            response = await fetch(`${url}/api/v1/models`, { headers: lmStudioHeaders() });
        } catch (e) {
            throw new Error(`Could not reach LM Studio at ${url}. Is the local server running? (${e.message})`);
        }

        if (!response.ok) {
            const text = await response.text().catch(() => '');
            throw new Error(`LM Studio returned HTTP ${response.status} ${response.statusText}${text ? ': ' + text.substring(0, 150) : ''}`);
        }

        const data = await response.json();

        // LM Studio returns HTTP 200 even for unknown endpoints; catch that here.
        const errMsg = lmStudioErrorFromBody(data);
        if (errMsg) {
            const hint = /unexpected endpoint/i.test(errMsg)
                ? ' Check the Server URL - use the server root (e.g. http://localhost:1234), not the /v1 OpenAI-compatible base.'
                : '';
            throw new Error(`LM Studio error: ${errMsg}.${hint}`);
        }

        let models = [];
        if (Array.isArray(data.models)) {
            models = data.models
                .filter(m => !m.type || m.type === 'llm')
                .map(m => m.key || m.id)
                .filter(Boolean);
        } else if (Array.isArray(data.data)) {
            // OpenAI-compatible fallback shape
            models = data.data.map(m => m.id).filter(Boolean);
        }
        // Deduplicate while preserving order
        return [...new Set(models)];
    }

    if (lmStudioModelSelect) {
        lmStudioModelSelect.addEventListener('change', () => {
            if (lmStudioCustomModelInput) {
                lmStudioCustomModelInput.style.display =
                    lmStudioModelSelect.value === LMSTUDIO_CUSTOM_VALUE ? 'block' : 'none';
            }
            updateSaveButtonState();
        });
    }
    if (lmStudioCustomModelInput) {
        lmStudioCustomModelInput.addEventListener('input', updateSaveButtonState);
    }
    if (lmStudioUrlInput) {
        lmStudioUrlInput.addEventListener('input', updateSaveButtonState);
    }

    // List installed LM Studio models
    if (listLmStudioModelsButton) {
        listLmStudioModelsButton.addEventListener('click', async () => {
            lmStudioTestResult.textContent = 'Fetching models…';
            lmStudioTestResult.className = 'api-test-result';
            try {
                const models = await loadLmStudioModels();
                const selected = getSelectedLmStudioModel();
                renderLmStudioModels(models, selected, (lmStudioCustomModelInput && lmStudioCustomModelInput.value) || '');
                if (models.length === 0) {
                    lmStudioTestResult.textContent = '⚠️ Connected, but no chat (LLM) models found. Load a model in LM Studio.';
                    lmStudioTestResult.className = 'api-test-result error';
                } else {
                    lmStudioTestResult.textContent = `✓ Found ${models.length} model(s): ${models.join(', ')}`;
                    lmStudioTestResult.className = 'api-test-result success';
                }
            } catch (e) {
                lmStudioTestResult.textContent = `✗ ${e.message}`;
                lmStudioTestResult.className = 'api-test-result error';
            }
        });
    }

    // Test LM Studio connection + a minimal chat request
    if (testLmStudioButton) {
        testLmStudioButton.addEventListener('click', async () => {
            const url = lmStudioBaseUrl();
            let model = getSelectedLmStudioModel();

            lmStudioTestResult.textContent = 'Testing connection…';
            lmStudioTestResult.className = 'api-test-result';

            try {
                const models = await loadLmStudioModels();

                if (!model) {
                    model = models[0] || '';
                }
                if (!model) {
                    lmStudioTestResult.textContent = '⚠️ Connected to LM Studio, but no chat model is available. Load a model first.';
                    lmStudioTestResult.className = 'api-test-result error';
                    return;
                }
                if (!models.includes(model)) {
                    lmStudioTestResult.textContent = `⚠️ Model "${model}" is not available. Found: ${models.join(', ') || '(none)'}`;
                    lmStudioTestResult.className = 'api-test-result error';
                    return;
                }

                const headers = Object.assign({ 'Content-Type': 'application/json' }, lmStudioHeaders());
                const response = await fetch(`${url}/api/v1/chat`, {
                    method: 'POST',
                    headers,
                    body: JSON.stringify({
                        model,
                        input: 'Reply with the single word: ok',
                        max_output_tokens: 10,
                        temperature: 0
                    })
                });

                if (!response.ok) {
                    const text = await response.text().catch(() => '');
                    throw new Error(`HTTP ${response.status} ${response.statusText}${text ? ': ' + text.substring(0, 150) : ''}`);
                }

                const data = await response.json();
                const errMsg = lmStudioErrorFromBody(data);
                if (errMsg) {
                    throw new Error(`LM Studio error: ${errMsg}`);
                }
                const msg = Array.isArray(data.output)
                    ? (data.output.find(o => o.type === 'message') || {}).content
                    : '';
                lmStudioTestResult.textContent = `✓ Connected! Model "${model}" responded${msg ? ': ' + msg.trim().substring(0, 60) : ''}`;
                lmStudioTestResult.className = 'api-test-result success';
            } catch (e) {
                lmStudioTestResult.textContent = `✗ ${e.message}`;
                lmStudioTestResult.className = 'api-test-result error';
            }
        });
    }
    
    addLabelButton.addEventListener('click', () => {
        // Clear instruction message if present
        const instructionMsg = labelsContainer.querySelector('.instruction-message');
        if (instructionMsg) {
            labelsContainer.innerHTML = '';
        }
        addLabelInput('');
        updateSaveButtonState();
    });

    // Save settings
    saveButton.addEventListener('click', () => {
        const labels = Array.from(document.querySelectorAll('.label-input'))
            .map(input => input.value.trim())
            .filter(label => label !== '');
        
        const apiKey = apiKeyInput.value.trim();
        const provider = aiProviderSelect.value;
        
        // Validation
        if (labels.length === 0) {
            showMessage('Please add at least one folder/label before saving. Use "Load Folders from Mail Account" or add custom labels.', false);
            return;
        }
        
        // Validate API keys based on provider
        if (provider === 'gemini') {
            // Filter out empty Gemini keys
            const validGeminiKeys = geminiKeys.filter(key => key && key.trim() !== '');
            
            if (validGeminiKeys.length === 0) {
                showMessage('Please add at least one Gemini API key before saving.', false);
                return;
            }
            
            // Check for duplicate keys
            const uniqueKeys = new Set(validGeminiKeys.map(key => key.trim().toLowerCase()));
            if (uniqueKeys.size !== validGeminiKeys.length) {
                showMessage('⚠️ Duplicate API keys detected! Each key must be unique. Please remove duplicates before saving.', false);
                return;
            }
            
            const settings = {
                labels: labels,
                geminiApiKeys: validGeminiKeys,
                currentGeminiKeyIndex: 0, // Start with first key
                aiProvider: provider,
                enableAi: document.getElementById('enable-ai').checked,
                geminiPaidPlan: geminiPaidCheckbox.checked,
                geminiResetNotifications: geminiResetNotificationsCheckbox.checked,
                geminiModel: getSelectedGeminiModel(),
                batchChunkSize: getBatchChunkSize()
            };
            
            // Initialize rate limits array for all keys if not exists
            browser.storage.local.get(['geminiRateLimits']).then(result => {
                if (!result.geminiRateLimits || result.geminiRateLimits.length !== validGeminiKeys.length) {
                    settings.geminiRateLimits = validGeminiKeys.map(() => ({
                        requests: [],
                        dailyCount: 0,
                        pendingCount: 0,
                        dailyResetTime: null
                    }));
                }
                
                browser.storage.local.set(settings).then(() => {
                    showMessage('✓ Settings saved successfully! Multiple Gemini API keys configured for automatic rotation.', true);
                    updateSaveButtonState();
                }).catch(error => {
                    showMessage('Error saving settings: ' + error, false);
                });
            });
        } else if (provider === 'ollama') {
            // Ollama doesn't need API key, just save URL and model
            let ollamaModel = ollamaModelSelect.value;
            if (ollamaModel === 'custom') {
                ollamaModel = ollamaCustomModelInput.value.trim();
                if (!ollamaModel) {
                    showMessage('Please enter a custom model name for Ollama.', false);
                    return;
                }
            }
            
            const settings = {
                labels: labels,
                aiProvider: provider,
                enableAi: document.getElementById('enable-ai').checked,
                ollamaUrl: ollamaUrlInput.value.trim() || 'http://localhost:11434',
                ollamaModel: ollamaModel,
                ollamaCustomModel: ollamaCustomModelInput.value.trim(),
                ollamaAuthToken: ollamaAuthTokenInput ? ollamaAuthTokenInput.value.trim() : '',
                ollamaCpuOnly: ollamaCpuOnlyCheckbox.checked,
                batchChunkSize: getBatchChunkSize()
            };

            browser.storage.local.set(settings).then(() => {
                const cpuMode = ollamaCpuOnlyCheckbox.checked ? ' (CPU-only mode)' : '';
                showMessage(`✓ Settings saved successfully! Ollama is configured for local email processing${cpuMode}.`, true);
                updateSaveButtonState();
            }).catch(error => {
                showMessage('Error saving settings: ' + error, false);
            });
        } else if (provider === 'lmstudio') {
            // LM Studio is local and doesn't need an API key, just URL and model
            const lmModel = getSelectedLmStudioModel();
            if (!lmModel) {
                showMessage('Please select an LM Studio model (or enter a custom one) before saving.', false);
                return;
            }

            const settings = {
                labels: labels,
                aiProvider: provider,
                enableAi: document.getElementById('enable-ai').checked,
                lmstudioUrl: lmStudioBaseUrl(),
                lmstudioModel: (lmStudioModelSelect && lmStudioModelSelect.value === LMSTUDIO_CUSTOM_VALUE)
                    ? 'custom'
                    : (lmStudioModelSelect ? lmStudioModelSelect.value : lmModel),
                lmstudioCustomModel: lmStudioCustomModelInput ? lmStudioCustomModelInput.value.trim() : '',
                lmstudioAuthToken: lmStudioAuthTokenInput ? lmStudioAuthTokenInput.value.trim() : '',
                batchChunkSize: getBatchChunkSize()
            };

            browser.storage.local.set(settings).then(() => {
                showMessage(`✓ Settings saved successfully! LM Studio is configured to use "${lmModel}" locally.`, true);
                updateSaveButtonState();
            }).catch(error => {
                showMessage('Error saving settings: ' + error, false);
            });
        } else {
            // Other providers use single key
            if (!apiKey) {
                showMessage('Please enter your API key before saving. Click "Get API Key" to obtain one.', false);
                return;
            }

            const settings = {
                labels: labels,
                apiKey: apiKey,
                aiProvider: provider,
                enableAi: document.getElementById('enable-ai').checked,
                geminiPaidPlan: geminiPaidCheckbox.checked,
                geminiResetNotifications: geminiResetNotificationsCheckbox.checked,
                providerModel: (providerModelInput && providerModelInput.value.trim()) || '',
                batchChunkSize: getBatchChunkSize()
            };

            browser.storage.local.set(settings).then(() => {
                showMessage('✓ Settings saved successfully! You can now use AutoSort+ to analyze emails.', true);
                updateSaveButtonState();
            }).catch(error => {
                showMessage('Error saving settings: ' + error, false);
            });
        }
    });

    // Add category/folder input field
    function addLabelInput(value = '') {
        const labelItem = document.createElement('div');
        labelItem.className = 'label-item';
        
        const input = document.createElement('input');
        input.type = 'text';
        input.className = 'label-input';
        input.placeholder = 'Enter category/folder name';
        input.value = value;
        input.addEventListener('input', updateSaveButtonState);

        const removeButton = document.createElement('button');
        removeButton.className = 'remove-label';
        removeButton.textContent = '×';
        removeButton.addEventListener('click', () => {
            labelItem.remove();
            updateSaveButtonState();
            
            // Show instruction if no labels left
            const remainingLabels = document.querySelectorAll('.label-input');
            if (remainingLabels.length === 0) {
                labelsContainer.innerHTML = '<div class="instruction-message">No folders/labels configured. Click "Load Folders from Mail Account" above or add custom labels below.</div>';
            }
        });

        labelItem.appendChild(input);
        labelItem.appendChild(removeButton);
        labelsContainer.appendChild(labelItem);
    }

    // Show API test result
    function showApiTestResult(message, isSuccess) {
        apiTestResult.textContent = message;
        apiTestResult.className = `api-test-result ${isSuccess ? 'success' : 'error'}`;
        apiTestResult.title = message;
    }

    // Show message to user
    function showMessage(message, isSuccess = true) {
        const messageDiv = document.createElement('div');
        messageDiv.className = 'message';
        messageDiv.textContent = message;
        messageDiv.style.backgroundColor = isSuccess ? 'var(--success-color)' : 'var(--error-color)';
        document.body.appendChild(messageDiv);

        setTimeout(() => {
            messageDiv.remove();
        }, 3000);
    }

    // Function to format timestamp
    function formatTimestamp(timestamp) {
        const date = new Date(timestamp);
        return date.toLocaleString();
    }

    // Function to update history table
    async function updateHistoryTable() {
        const historyBody = document.getElementById('history-body');
        const data = await browser.storage.local.get('moveHistory');
        const history = data.moveHistory || [];
        
        historyBody.innerHTML = history.map(entry => `
            <tr>
                <td class="timestamp">${formatTimestamp(entry.timestamp)}</td>
                <td>${entry.subject}</td>
                <td class="${entry.status.toLowerCase()}">${entry.status}</td>
                <td>${entry.destination}</td>
            </tr>
        `).join('');
    }

    // Function to clear history
    async function clearHistory() {
        if (confirm('Are you sure you want to clear the move history?')) {
            await browser.storage.local.set({ moveHistory: [] });
            await updateHistoryTable();
        }
    }

    // Initialize the page
    await updateHistoryTable();

    // Add event listeners for history controls
    document.getElementById('clear-history').addEventListener('click', clearHistory);
    document.getElementById('refresh-history').addEventListener('click', updateHistoryTable);
});