// Note: URLValidator is available globally via /static/js/security/url-validator.js
// Function to save settings using the individual settings manager API
function saveMenuSettings(settingKey, settingValue) {
    SafeLogger.log('Saving setting:', settingKey, '=', settingValue);

    // Get CSRF token
    const csrfToken = window.api ? window.api.getCsrfToken() : '';

    // Use the individual settings API endpoint that uses the settings manager
    fetch(`/settings/api/${settingKey}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrfToken
        },
        body: JSON.stringify({ value: settingValue })
    })
    .then(response => {
        SafeLogger.log('Response status:', response.status, response.statusText);
        if (!response.ok) {
            return response.text().then(text => {
                SafeLogger.error('Error response body:', text);
                throw new Error(`HTTP ${response.status}: ${text}`);
            });
        }
        return response.json();
    })
    .then(data => {
        SafeLogger.log(`Setting ${settingKey} saved via settings manager:`, data);

        // If the response includes warnings, display them directly
        if (data.warnings && typeof window.displayWarnings === 'function') {
            window.displayWarnings(data.warnings);
        }

        // Also trigger client-side warning recalculation for search settings
        if (settingKey.startsWith('search.') || settingKey === 'llm.provider') {
            if (typeof window.refetchSettingsAndUpdateWarnings === 'function') {
                window.refetchSettingsAndUpdateWarnings();
            }
        }

        // Show success notification if UI module is available
        if (window.ui && window.ui.showMessage) {
            window.ui.showMessage(`${settingKey.split('.').pop()} updated successfully`, 'success');
        } else {
            SafeLogger.log('Setting saved successfully:', data);
        }
    })
    .catch(error => {
        SafeLogger.error(`Error saving setting ${settingKey}:`, error);
        if (window.ui && window.ui.showMessage) {
            window.ui.showMessage(`Error updating ${settingKey}: ${error.message}`, 'error');
        }
    });
}

/**
 * Connects the menu settings to use the same save method as the settings page.
 */
function connectMenuSettings() {
    SafeLogger.log('Initializing menu settings handler');

    // Handle model dropdown changes
    const modelInput = document.getElementById('model');
    const modelHidden = document.getElementById('model_hidden');

    if (modelHidden) {
        modelHidden.addEventListener('change', function() {
            SafeLogger.log('Model changed to:', this.value);
            saveMenuSettings('llm.model', this.value);
        });
    }

    // Handle provider dropdown changes
    const providerSelect = document.getElementById('model_provider');
    if (providerSelect) {
        providerSelect.addEventListener('change', function() {
            SafeLogger.log('Provider changed to:', this.value);
            saveMenuSettings('llm.provider', this.value);
        });
    }

    // Handle search engine dropdown changes
    const searchEngineHidden = document.getElementById('search_engine_hidden');
    if (searchEngineHidden) {
        searchEngineHidden.addEventListener('change', function() {
            SafeLogger.log('Search engine changed to:', this.value);
            saveMenuSettings('search.tool', this.value);
        });
    }

    // Handle iterations and questions per iteration
    const iterationsInput = document.getElementById('iterations');
    if (iterationsInput) {
        iterationsInput.addEventListener('change', function() {
            SafeLogger.log('Iterations changed to:', this.value);
            saveMenuSettings('search.iterations', this.value);
        });
    }

    const questionsInput = document.getElementById('questions_per_iteration');
    if (questionsInput) {
        questionsInput.addEventListener('change', function() {
            SafeLogger.log('Questions per iteration changed to:', this.value);
            saveMenuSettings('search.questions_per_iteration', this.value);
        });
    }

    // Handle search strategy dropdown changes
    const strategySelect = document.getElementById('strategy');
    if (strategySelect) {
        strategySelect.addEventListener('change', function() {
            SafeLogger.log('Search strategy changed to:', this.value);
            saveMenuSettings('search.search_strategy', this.value);
        });
    }

    // Handle Ollama URL input changes
    const ollamaUrlInput = document.getElementById('ollama_url');
    if (ollamaUrlInput) {
        ollamaUrlInput.addEventListener('change', function() {
            SafeLogger.log('Ollama URL changed to:', this.value);
            saveMenuSettings('llm.ollama.url', this.value);
        });
        // Also save on blur (when user clicks away)
        ollamaUrlInput.addEventListener('blur', function() {
            if (this.value && this.value !== this.getAttribute('data-last-saved')) {
                SafeLogger.log('Ollama URL changed (on blur) to:', this.value);
                saveMenuSettings('llm.ollama.url', this.value);
                this.setAttribute('data-last-saved', this.value);
            }
        });
    }

    // Handle custom endpoint URL input changes (for OpenAI endpoint)
    const customEndpointInput = document.getElementById('custom_endpoint');
    if (customEndpointInput) {
        customEndpointInput.addEventListener('change', function() {
            SafeLogger.log('Custom endpoint URL changed to:', this.value);
            saveMenuSettings('llm.openai_endpoint.url', this.value);
        });
        // Also save on blur
        customEndpointInput.addEventListener('blur', function() {
            if (this.value && this.value !== this.getAttribute('data-last-saved')) {
                SafeLogger.log('Custom endpoint URL changed (on blur) to:', this.value);
                saveMenuSettings('llm.openai_endpoint.url', this.value);
                this.setAttribute('data-last-saved', this.value);
            }
        });
    }

    // Handle theme dropdown changes
    // Try multiple selectors to find the theme select element
    const themeSelect = document.querySelector('select[data-key="app.theme"], select[name="app.theme"], #theme-select');
    if (themeSelect) {
        themeSelect.addEventListener('change', function() {
            SafeLogger.log('Theme changed to:', this.value);
            // Use themeService if available (handles both UI update and server sync)
            if (window.themeService && typeof window.themeService.setTheme === 'function') {
                window.themeService.setTheme(this.value, true);
            } else {
                // Fallback: just save to server
                saveMenuSettings('app.theme', this.value);
            }
        });
    }

    SafeLogger.log('Menu settings handlers initialized');
}

// Call this function after the page and other scripts are loaded
document.addEventListener('DOMContentLoaded', function() {
    // Use requestIdleCallback for better performance, fallback to requestAnimationFrame
    if (typeof requestIdleCallback === 'function') {
        requestIdleCallback(connectMenuSettings, { timeout: 500 });
    } else if (typeof requestAnimationFrame === 'function') {
        requestAnimationFrame(connectMenuSettings);
    } else {
        // Fallback for older browsers
        setTimeout(connectMenuSettings, 100);
    }
});
