/**
 * Settings component for managing application settings
 * Note: URLValidator is available globally via /static/js/security/url-validator.js
 */
(function() {
    'use strict';

    // DOM elements and global variables
    let settingsForm;
    let settingsContent;
    let settingsSearch;
    let settingsTabs;
    let settingsAlert;
    let resetButton;
    let rawConfigToggle;
    let rawConfigSection;
    let rawConfigEditor;
    let originalSettings = {};
    let allSettings = [];
    let activeTab = 'all';
    let saveTimer = null;
    let pendingSaves = new Set();

    // Model and search engine dropdown variables
    let modelOptions = [];
    let searchEngineOptions = [];

    // Store save timers for each setting key
    let saveTimers = {};
    let pendingSaveData = {};

    // Cache keys - same as research.js for shared caching
    const CACHE_KEYS = {
        MODELS: 'deepResearch.availableModels',
        SEARCH_ENGINES: 'deepResearch.searchEngines',
        CACHE_TIMESTAMP: 'deepResearch.cacheTimestamp'
    };

    // Cache expiration time (24 hours in milliseconds)
    const CACHE_EXPIRATION = 24 * 60 * 60 * 1000;

    /**
     * Escape HTML to prevent XSS attacks
     * @param {string} unsafe - Text to escape
     * @returns {string} Escaped text
     */
    function escapeHtml(unsafe) {
        if (unsafe === null || unsafe === undefined) return '';
        return String(unsafe)
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    }

    /**
     * Helper function to generate custom dropdown HTML (similar to Jinja macro)
     * @param {object} params - Parameters for the dropdown
     * @returns {string} HTML string for the custom dropdown input part
     */
    function renderCustomDropdownHTML(params) {
        // Basic structure with input and list container
        let dropdownHTML = `
            <div class="ldr-custom-dropdown" id="${params.dropdown_id}">
                <input type="text"
                       id="${params.input_id}"
                       data-key="${params.data_setting_key || params.input_id}"
                       class="ldr-custom-dropdown-input"
                       placeholder="${params.placeholder}"
                       autocomplete="off"
                       aria-haspopup="listbox"
                       ${params.disabled ? "disabled" : ""}>
                <!-- Hidden input that will be included in form submission -->
                <input type="hidden" name="${params.input_id}" id="${params.input_id}_hidden" value="">
                <div class="ldr-custom-dropdown-list" id="${params.dropdown_id}-list"></div>
            </div>
        `;

        // Add refresh button if needed
        const refreshButtonHTML = params.show_refresh ? `
            <button type="button"
                    class="ldr-custom-dropdown-refresh-btn"
                    id="${params.input_id}-refresh"
                    aria-label="${params.refresh_aria_label || 'Refresh options'}">
                <i class="fas fa-sync-alt"></i>
            </button>
        ` : '';

        // Wrap with refresh container if needed
        if (params.show_refresh) {
            dropdownHTML = `
                <div class="ldr-custom-dropdown-with-refresh">
                    ${dropdownHTML} ${refreshButtonHTML}
                </div>
            `;
        }

        // Note: This returns only the input element part. Label and help text are handled outside.
        return dropdownHTML;
    }

    /**
     * Set up refresh buttons for model and search engine dropdowns
     */
    function setupRefreshButtons() {
        console.log('Setting up refresh buttons...');

        // Handle test notification button
        let testNotificationBtn = document.getElementById('test-notification-button');

        // If the button doesn't exist, create it dynamically for the notifications service URL field
        if (!testNotificationBtn) {
            const serviceUrlInput = document.getElementById('notifications-service-url') ||
                                   document.querySelector('input[name="notifications.service_url"], textarea[name="notifications.service_url"]');
            if (serviceUrlInput) {
                // Find the parent container for the setting
                const settingContainer = serviceUrlInput.closest('.ldr-settings-item, .settings-item');
                if (settingContainer) {
                    // Check if button container already exists to avoid duplicates
                    let buttonContainer = settingContainer.querySelector('.ldr-settings-test-button-container');
                    if (!buttonContainer) {
                        // Create button container
                        buttonContainer = document.createElement('div');
                        buttonContainer.className = 'ldr-settings-test-button-container';
                        buttonContainer.innerHTML = `
                            <input type="button"
                                   id="test-notification-button"
                                   class="btn btn-secondary btn-sm"
                                   value="Test Notification">
                            <div id="test-notification-result" class="ldr-test-result" style="display: none;"></div>
                        `;

                        // Add the button container right after the input field
                        serviceUrlInput.parentNode.insertBefore(buttonContainer, serviceUrlInput.nextSibling);

                        console.log('Dynamically created test notification button');
                    }

                    // Now get the button (either newly created or existing)
                    testNotificationBtn = document.getElementById('test-notification-button');
                }
            }
        }

        if (testNotificationBtn) {
            console.log('Found and set up test notification button');
            testNotificationBtn.addEventListener('click', function() {
                testNotification();
            });

            // Also enable/disable button based on input value
            const serviceUrlInput = document.getElementById('notifications-service-url') ||
                                   document.querySelector('input[name="notifications.service_url"], textarea[name="notifications.service_url"]');
            if (serviceUrlInput) {
                const updateButtonState = () => {
                    const hasValue = serviceUrlInput.value.trim() !== '';
                    testNotificationBtn.disabled = !hasValue;
                };

                serviceUrlInput.addEventListener('input', updateButtonState);
                serviceUrlInput.addEventListener('change', updateButtonState);
                // Initial check
                updateButtonState();
            }
        }

        // Handle model refresh button
        const modelRefreshBtn = document.getElementById('llm.model-refresh');
        if (modelRefreshBtn) {
            console.log('Found and set up model refresh button:', modelRefreshBtn.id);
            modelRefreshBtn.addEventListener('click', function() {
                const icon = modelRefreshBtn.querySelector('i');
                if (icon) icon.className = 'fas fa-spinner fa-spin';
                modelRefreshBtn.classList.add('ldr-loading');

                // Reset the initialization flag to allow reinitializing the dropdown
                window.modelDropdownsInitialized = false;

                // Force refresh models and reinitialize
                fetchModelProviders(true)
                    .then(() => {
                        if (icon) icon.className = 'fas fa-sync-alt';
                        modelRefreshBtn.classList.remove('ldr-loading');

                        // Re-initialize model dropdowns with the new data
                        initializeModelDropdowns();

                        // Show success message
                        showAlert('Model list refreshed', 'success');
                    })
                    .catch(error => {
                        console.error('Error refreshing models:', error);
                        if (icon) icon.className = 'fas fa-sync-alt';
                        modelRefreshBtn.classList.remove('ldr-loading');
                        showAlert('Failed to refresh models', 'error');
                    });
            });
        } else {
            console.log('Could not find model refresh button');
        }

        // Handle search engine refresh button
        const searchEngineRefreshBtn = document.getElementById('search.tool-refresh');
        if (searchEngineRefreshBtn) {
            console.log('Found and set up search engine refresh button:', searchEngineRefreshBtn.id);
            searchEngineRefreshBtn.addEventListener('click', function() {
                const icon = searchEngineRefreshBtn.querySelector('i');
                if (icon) icon.className = 'fas fa-spinner fa-spin';
                searchEngineRefreshBtn.classList.add('ldr-loading');

                // Reset the initialization flag to allow reinitializing the dropdown
                window.searchEngineDropdownInitialized = false;

                // Force refresh search engines and reinitialize
                fetchSearchEngines(true)
                    .then(() => {
                        if (icon) icon.className = 'fas fa-sync-alt';
                        searchEngineRefreshBtn.classList.remove('ldr-loading');

                        // Re-initialize search engine dropdowns with the new data
                        initializeSearchEngineDropdowns();

                        // Show success message
                        showAlert('Search engine list refreshed', 'success');
                    })
                    .catch(error => {
                        console.error('Error refreshing search engines:', error);
                        if (icon) icon.className = 'fas fa-sync-alt';
                        searchEngineRefreshBtn.classList.remove('ldr-loading');
                        showAlert('Failed to refresh search engines', 'error');
                    });
            });
        } else {
            console.log('Could not find search engine refresh button');

            // Try to create refresh button if it doesn't exist for search engine
            createRefreshButton('search.tool', fetchSearchEngines);
        }
    }

    /**
     * Cache data in localStorage with timestamp
     * @param {string} key - The cache key
     * @param {Object} data - The data to cache
     */
    function cacheData(key, data) {
        try {
            // Store the data
            // Don't cache - always fetch fresh from API

            // Update or set the timestamp
            let timestamps;
            try {
                timestamps = {}; // No cache timestamps
                // Ensure timestamps is an object, not a number or other type
                if (typeof timestamps !== 'object' || timestamps === null) {
                    timestamps = {};
                }
            } catch (e) {
                // If parsing fails, start with a new object
                timestamps = {};
            }

            timestamps[key] = Date.now();
            // Don't save cache timestamps

            console.log(`Cached data for ${key}`);
        } catch (error) {
            console.error('Error caching data:', error);
        }
    }

    /**
     * Get cached data if it exists and is not expired
     * @param {string} key - The cache key
     * @returns {Object|null} The cached data or null if not found or expired
     */
    function getCachedData(key) {
        try {
            // Get timestamps
            let timestamps;
            try {
                timestamps = {}; // No cache timestamps
                // Ensure timestamps is an object, not a number or other type
                if (typeof timestamps !== 'object' || timestamps === null) {
                    timestamps = {};
                }
            } catch (e) {
                // If parsing fails, start with an empty object
                timestamps = {};
            }

            const timestamp = timestamps[key];

            // Check if data exists and is not expired
            if (timestamp && (Date.now() - timestamp < CACHE_EXPIRATION)) {
                try {
                const data = null; // No cached data
                return data;
                } catch (e) {
                    console.error('Error parsing cached data:', e);
                    return null;
                }
            }
        } catch (error) {
            console.error('Error getting cached data:', error);
        }
        return null;
    }

    /**
     * Initialize auto-save handlers for settings inputs
     */
    function initAutoSaveHandlers() {
        // Only run this for the main settings dashboard
        if (!settingsContent) {
            console.log('[initAutoSaveHandlers] No settingsContent found, exiting');
            return;
        }

                // Get all inputs in settings form
        const inputs = settingsForm.querySelectorAll('input, textarea, select');

        let checkboxCount = 0;
        // Set up event handlers for each input
        inputs.forEach(input => {
            // Skip if this is a button or submit input
            if (input.type === 'button' || input.type === 'submit') return;

            // Set data-key attribute from name if not already set
            if (!input.getAttribute('data-key') && input.getAttribute('name')) {
                input.setAttribute('data-key', input.getAttribute('name'));
            }

            // Remove existing listeners to avoid duplicates
            input.removeEventListener('input', handleInputChange);
            input.removeEventListener('keydown', handleInputChange);
            input.removeEventListener('blur', handleInputChange);
            input.removeEventListener('change', handleInputChange);

            // For checkboxes, we use change event
            if (input.type === 'checkbox') {
                checkboxCount++;
                                input.addEventListener('change', function(e) {
                    // For checkboxes, pass custom event type parameter to avoid issues
                    handleInputChange(e, 'change');
                });
            }
            // For selects, we use change event
            else if (input.tagName.toLowerCase() === 'select') {
                input.addEventListener('change', function(e) {
                    // Create a custom parameter instead of modifying e.type
                    handleInputChange(e, 'change');
                });

                input.addEventListener('blur', function(e) {
                    // Create a custom parameter instead of modifying e.type
                    handleInputChange(e, 'blur');
                });
            }
            // For text, number, etc. we monitor for changes but only save
            // on blur or Enter. We don't do anything with custom drop-downs
            // (we use the hidden input instead).
            else if (!input.classList.contains("ldr-custom-dropdown-input")) {
                // Listen for input events to track changes and validate in real-time
                input.addEventListener('input', function(e) {
                    // Create a custom parameter instead of modifying e.type
                    handleInputChange(e, 'input');
                });

                // Handle Enter key press for immediate saving
                input.addEventListener('keydown', function(e) {
                    if (e.key === 'Enter') {
                        // Create a custom parameter instead of modifying e.type
                        handleInputChange(e, 'keydown');
                    }
                });

                // Save on blur if changes were made.
                if (input.id.endsWith("_hidden")) {
                    //  We can't use this for custom dropdowns, because it
                    //  will fire before the value has been changed, causing
                    //  it to read the wrong value.
                    input.addEventListener('change', function(e) {
                        // Create a custom parameter instead of modifying e.type
                        handleInputChange(e, 'change');
                    });
                } else {
                    input.addEventListener('blur', function(e) {
                        // Create a custom parameter instead of modifying e.type
                        handleInputChange(e, 'blur');
                    });
                }
            }
        });


        // Set up special handlers for JSON property controls
        const jsonPropertyControls = settingsForm.querySelectorAll('.ldr-json-property-control');

        jsonPropertyControls.forEach(control => {
            // Remove existing listeners
            control.removeEventListener('change', updateJsonFromControls);
            control.removeEventListener('input', updateJsonFromControls);
            control.removeEventListener('keydown', updateJsonFromControls);
            control.removeEventListener('blur', updateJsonFromControls);

            if (control.type === 'checkbox') {
                control.addEventListener('change', function(e) {
                    updateJsonFromControls(control, true); // true = force save
                });
            } else {
                control.addEventListener('input', function(e) {
                    updateJsonFromControls(control, false); // false = don't save yet
                });

                // Handle Enter key for JSON property controls
                control.addEventListener('keydown', function(e) {
                    if (e.key === 'Enter' && !e.shiftKey) {
                        e.preventDefault();
                        updateJsonFromControls(control, true); // true = force save
                        control.blur();
                    }
                });

                control.addEventListener('blur', function(e) {
                    updateJsonFromControls(control, true); // true = force save
                });
            }
        });

        // If the raw JSON editor is visible, set up its event handlers
        if (rawConfigEditor) {
            rawConfigEditor.addEventListener('input', handleRawJsonInput);
            rawConfigEditor.addEventListener('blur', function(e) {
                if (rawConfigEditor.getAttribute('data-modified') === 'true') {
                    handleRawJsonInput(e, true); // Force save on blur
                }
            });
        }
    }

    /**
     * Handle input change for autosave
     * @param {Event} e - The input change event
     * @param {string} [customEventType] - Optional event type parameter
     */
    function handleInputChange(e, customEventType) {
        // --- MODIFICATION START: Simplified handleInputChange ---
        const input = e.target;
        const eventType = customEventType || e.type;
        const key = input.dataset.key || input.name; // Get key using data-key first

        if (!key || input.disabled) return;

        let value;
        let shouldSaveImmediately = false;

        // Handle hidden inputs for custom dropdowns
        if (input.type === 'hidden' && input.id.endsWith('_hidden')) {
            value = input.value;
            shouldSaveImmediately = true; // Save immediately on hidden input change
            console.log(`[Hidden Input Change] Key: ${key}, Value: ${value}`);
        }
        // Handle checkboxes
        else if (input.type === 'checkbox') {
            value = input.checked;
            shouldSaveImmediately = true; // Checkboxes save immediately

            // Sync with hidden fallback if it exists
            const hiddenFallback = input.dataset.hiddenFallback;
            if (hiddenFallback) {
                const hiddenInput = document.getElementById(hiddenFallback);
                if (hiddenInput) {
                    hiddenInput.disabled = input.checked;
                }
            }
        }
        // Handle standard selects
        else if (input.tagName.toLowerCase() === 'select') {
            value = input.value;
            // Save on change or blur if changed
            if (eventType === 'change' || eventType === 'blur') {
                shouldSaveImmediately = true;
            }
        }
        // Handle range/slider (save on change/input or blur)
        else if (input.type === 'range') {
            value = input.value;
            if (eventType === 'change' || eventType === 'input' || eventType === 'blur') {
                shouldSaveImmediately = true;
            }
        }
        // Handle other inputs (text, number, textarea) - Save on Enter or Blur
        else {
            value = input.value;

            // Handle JSON.
            if (input.classList.contains('ldr-json-content'))  {
                try {
                    // Validate
                    value = JSON.parse(input.value);
                } catch (e) {
                    markInvalidInput(input, 'Invalid JSON');
                    return;
                }
            }

            // Basic validation for number
            if (input.type === 'number') {
               try {
                   const numValue = parseFloat(value);
                   const min = input.min ? parseFloat(input.min) : null;
                   const max = input.max ? parseFloat(input.max) : null;
                   if ((min !== null && numValue < min) || (max !== null && numValue > max)) {
                        markInvalidInput(input, `Value must be between ${min ?? '-∞'} and ${max ?? '∞'}`);
                        return; // Don't save invalid number
                   }
                   value = numValue; // Use parsed number
               } catch {
                    markInvalidInput(input, 'Invalid number');
                    return;
               }
            }
            // Save on Enter or Blur
            if ((eventType === 'keydown' && e.key === 'Enter' && !e.shiftKey) || eventType === 'blur') {
                shouldSaveImmediately = true;
                 if (eventType === 'keydown') e.preventDefault(); // Prevent form submission on enter
            }
        }

        // Clear previous errors
        markInvalidInput(input, null);

        // Compare with original value
        const originalValue = originalSettings.hasOwnProperty(key) ? originalSettings[key] : undefined;
        const hasChanged = !areValuesEqual(value, originalValue);


        if (hasChanged) {
            // Mark parent item as modified
            const item = input.closest('.settings-item');
            if (item) item.classList.add('ldr-settings-modified');

            // Save if needed
            if (shouldSaveImmediately) {
                const formData = { [key]: value };
                submitSettingsData(formData, input); // Direct submit might be better than debouncing here

                // If saved on Enter, blur the input
                if (eventType === 'keydown' && e.key === 'Enter') {
                    input.blur();
                }
            }
        } else {
            // If blur event and no changes, remove modified indicator maybe?
            if (eventType === 'blur') {
                const item = input.closest('.settings-item');
                if (item) item.classList.remove('ldr-settings-modified');
            }
        }
        // --- MODIFICATION END ---
    }

    /**
     * Compare two values for equality, handling different types
     * @param {any} value1 - First value
     * @param {any} value2 - Second value
     * @returns {boolean} - Whether the values are equal
     */
    function areValuesEqual(value1, value2) {
        // Handle null/undefined
        if (value1 === null && value2 === null) return true;
        if (value1 === undefined && value2 === undefined) return true;
        if (value1 === null && value2 === undefined) return true;
        if (value1 === undefined && value2 === null) return true;

        // If one is null/undefined but the other isn't
        if ((value1 === null || value1 === undefined) && (value2 !== null && value2 !== undefined)) return false;
        if ((value2 === null || value2 === undefined) && (value1 !== null && value1 !== undefined)) return false;

        // Handle different types
        const type1 = typeof value1;
        const type2 = typeof value2;

        // If types are different, they're not equal
        // Except for numbers and strings that might be equivalent
        if (type1 !== type2) {
            // Special case for numeric strings vs numbers
            if ((type1 === 'number' && type2 === 'string') || (type1 === 'string' && type2 === 'number')) {
                return String(value1) === String(value2);
            }
            return false;
        }

        // Handle objects (including arrays)
        if (type1 === 'object') {
            // Handle arrays
            if (Array.isArray(value1) && Array.isArray(value2)) {
                if (value1.length !== value2.length) return false;
                return JSON.stringify(value1) === JSON.stringify(value2);
            }

            // Handle objects
            return JSON.stringify(value1) === JSON.stringify(value2);
        }

        // Handle primitives
        return value1 === value2;
    }

    /**
     * Handle input to raw JSON fields for validation
     * @param {Event} e - The input event
     */
    function handleRawJsonInput(e) {
        const input = e.target;

        try {
            // Try to parse the JSON
            JSON.parse(input.value);

            // Valid JSON, remove any error styling
            const settingsItem = input.closest('.settings-item');
            if (settingsItem) {
                settingsItem.classList.remove('ldr-settings-error');

                // Remove any error message
                const errorMsg = settingsItem.querySelector('.ldr-settings-error-message');
                if (errorMsg) {
                    errorMsg.remove();
                }
            }
            input.classList.remove('ldr-settings-error');
        } catch (e) {
            // Invalid JSON, mark as error but don't prevent typing
            input.classList.add('ldr-settings-error');

            // Don't show error message while actively typing, only on blur
            input.addEventListener('blur', function onBlur() {
                try {
                    JSON.parse(input.value);
                    // Valid JSON on blur, clear any error
                    markInvalidInput(input, null);
                } catch (e) {
                    // Still invalid on blur, show error
                    markInvalidInput(input, 'Invalid JSON format: ' + e.message);
                }
                // Remove this blur handler after it runs once
                input.removeEventListener('blur', onBlur);
            }, { once: true });
        }
    }

    /**
     * Mark an input as invalid with error styling
     * @param {HTMLElement} input - The input element
     * @param {string|null} errorMessage - The error message or null to clear error
     */
    function markInvalidInput(input, errorMessage) {
        const settingsItem = input.closest('.settings-item');
        if (!settingsItem) return;

        // Clear existing error message
        const existingMsg = settingsItem.querySelector('.ldr-settings-error-message');
        if (existingMsg) {
            existingMsg.remove();
        }

        if (errorMessage) {
            // Add error class
            settingsItem.classList.add('ldr-settings-error');
            input.classList.add('ldr-settings-error');

            // Create error message
            const errorMsg = document.createElement('div');
            errorMsg.className = 'ldr-settings-error-message';
            errorMsg.textContent = errorMessage;
            settingsItem.appendChild(errorMsg);
        } else {
            // Remove error class
            settingsItem.classList.remove('ldr-settings-error');
            input.classList.remove('ldr-settings-error');
        }
    }

    /**
     * Schedule a debounced save operation
     * @param {Object} formData - The form data to save
     * @param {HTMLElement} sourceElement - The element that triggered the save
     */
    function scheduleSave(formData, sourceElement) {
        // Merge the form data with any existing pending save data
        Object.entries(formData).forEach(([key, value]) => {
            pendingSaveData[key] = value;

            // Clear any existing timer for this specific key
            if (saveTimers[key]) {
                clearTimeout(saveTimers[key]);
            }

            // Set loading state on the source element
            if (sourceElement) {
                sourceElement.classList.add('ldr-saving');
            }

            // Create a new timer for this specific key
            saveTimers[key] = setTimeout(() => {
                // Create a single-key form data object with just this setting
                const singleSettingData = { [key]: pendingSaveData[key] };

                // Submit just this setting's data
                submitSettingsData(singleSettingData, sourceElement);

                // Clear this key from pending saves
                delete pendingSaveData[key];
                delete saveTimers[key];
            }, 800); // 800ms debounce
        });
    }

    /**
     * Initialize expanded JSON controls
     * This sets up event listeners for the individual form controls that represent JSON properties
     */
    function initExpandedJsonControls() {
        // Find all JSON property controls
        document.querySelectorAll('.ldr-json-property-control').forEach(control => {
            // When the control changes, update the hidden JSON field
            control.addEventListener('change', function() {
                updateJsonFromControls(this);
            });

            // For text and number inputs, also listen for input events
            if (control.tagName === 'INPUT' && (control.type === 'text' || control.type === 'number')) {
                control.addEventListener('input', function() {
                    updateJsonFromControls(this);
                });
            }
        });
    }

    /**
     * Update JSON data from individual controls
     * @param {HTMLElement} changedControl - The control that triggered the update
     * @param {boolean} forceSave - Whether to force an update to the server
     */
    function updateJsonFromControls(changedControl, forceSave = false) {
        const parentKey = changedControl.dataset.parentKey;
        const property = changedControl.dataset.property;

        if (!parentKey || !property) return;

        // Find all controls for this parent JSON
        const controls = document.querySelectorAll(`.json-property-control[data-parent-key="${parentKey}"]`);

        // Create an object to hold the JSON data
        const jsonData = {};

        // Populate the object with values from all controls
        controls.forEach(control => {
            const prop = control.dataset.property;
            let value = null;

            if (control.type === 'checkbox') {
                value = control.checked;
                // Note: Hidden fallback sync is handled automatically by checkbox_handler.js
            } else if (control.type === 'number') {
                value = parseFloat(control.value);
            } else if (control.tagName === 'SELECT') {
                value = control.value;
            } else {
                value = control.value;
                // Try to convert to number if it's numeric
                if (!isNaN(value) && value !== '') {
                    value = parseFloat(value);
                }
            }

            jsonData[prop] = value;
        });

        // Find the hidden input that stores the original JSON
        const originalInput = document.getElementById(`${parentKey.replace(/\./g, '-')}_original`);
        let originalJson = {};

        if (originalInput) {
            // Get the original JSON
            try {
                originalJson = JSON.parse(originalInput.value);
            } catch (e) {
                console.error('Error parsing original JSON:', e);
                // Create an empty object if parsing fails
                originalJson = {};
            }
        }

        // Check if there's actually a change before saving
        const hasChanged = !areObjectsEqual(jsonData, originalJson);

        // Mark the parent container as modified if there's a change
        const settingItem = changedControl.closest('.settings-item');
        if (settingItem && hasChanged) {
            settingItem.classList.add('ldr-settings-modified');
        }

        // Update the UI even if we're not saving to the server
        if (originalInput) {
            // Update the original JSON with new values
            Object.assign(originalJson, jsonData);
            originalInput.value = JSON.stringify(originalJson);
        }

        // Also update any textarea that might display this JSON
        const jsonTextarea = document.getElementById(parentKey.replace(/\./g, '-'));
        if (jsonTextarea && jsonTextarea.tagName === 'TEXTAREA') {
            jsonTextarea.value = JSON.stringify(jsonData, null, 2);
        }

        // If we have a raw config editor, update it as well
        if (rawConfigEditor) {
            try {
                const rawConfig = JSON.parse(rawConfigEditor.value);
                const parts = parentKey.split('.');
                const prefix = parts[0]; // app, llm, search, etc.

                if (rawConfig[prefix]) {
                    const subKey = parentKey.substring(prefix.length + 1);
                    rawConfig[prefix][subKey] = jsonData;
                    rawConfigEditor.value = JSON.stringify(rawConfig, null, 2);
                }
            } catch (e) {
                console.log('Error updating raw config:', e);
            }
        }

        // Only save to the server if forced or there's a change
        if ((forceSave && hasChanged) || (changedControl.type === 'checkbox' && hasChanged)) {
            // Auto-save this setting
            const formData = {};
            formData[parentKey] = jsonData;
            submitSettingsData(formData, changedControl);
        }
    }

    /**
     * Compare two objects for equality
     * @param {Object} obj1 - First object
     * @param {Object} obj2 - Second object
     * @returns {boolean} - Whether the objects are equal
     */
    function areObjectsEqual(obj1, obj2) {
        // Get the keys of both objects
        const keys1 = Object.keys(obj1);
        const keys2 = Object.keys(obj2);

        // If the number of keys is different, they're not equal
        if (keys1.length !== keys2.length) return false;

        // Check each key/value pair
        for (const key of keys1) {
            // If the key doesn't exist in obj2, not equal
            if (!obj2.hasOwnProperty(key)) return false;

            // If the values are not equal, not equal
            if (!areValuesEqual(obj1[key], obj2[key])) return false;
        }

        // All keys/values match
        return true;
    }

    /**
     * Initialize specific settings page form handlers
     */
    function initSpecificSettingsForm() {
        // Get the form ID to determine which specific page we're on
        const specificForm = document.getElementById('report-settings-form') ||
                             document.getElementById('llm-settings-form') ||
                             document.getElementById('search-settings-form') ||
                             document.getElementById('app-settings-form');

        if (specificForm) {
            // Add form submission handler
            specificForm.addEventListener('submit', function(e) {
                // Handle checkbox values - only for checkboxes without hidden fallbacks
                const checkboxes = specificForm.querySelectorAll('input[type="checkbox"]');
                checkboxes.forEach(checkbox => {
                    if (!checkbox.checked && !checkbox.dataset.hiddenFallback) {
                        // Only create hidden input for unchecked boxes that don't have fallback inputs
                        const hidden = document.createElement('input');
                        hidden.type = 'hidden';
                        hidden.name = checkbox.name;
                        hidden.value = 'false';
                        specificForm.appendChild(hidden);
                    }
                });

                // Check for validation errors in JSON textareas
                let hasInvalidJson = false;

                document.querySelectorAll('.ldr-json-content').forEach(textarea => {
                    try {
                        // Try to parse JSON to validate
                        JSON.parse(textarea.value);
                    } catch (e) {
                        // If it's not valid JSON, show an error
                        e.preventDefault();
                        hasInvalidJson = true;

                        // Find the closest settings-item
                        const settingsItem = textarea.closest('.settings-item');
                        if (settingsItem) {
                            settingsItem.classList.add('ldr-settings-error');

                            // Add error message if it doesn't exist
                            let errorMsg = settingsItem.querySelector('.ldr-settings-error-message');
                            if (!errorMsg) {
                                errorMsg = document.createElement('div');
                                errorMsg.className = 'ldr-settings-error-message';
                                settingsItem.appendChild(errorMsg);
                            }
                            errorMsg.textContent = 'Invalid JSON format';
                        }
                    }
                });

                // Handle JSON from expanded controls
                document.querySelectorAll('input[id$="_original"]').forEach(input => {
                    if (input.name.endsWith('_original')) {
                        const actualName = input.name.replace('_original', '');

                        // Create a hidden input with the actual name
                        const hiddenInput = document.createElement('input');
                        hiddenInput.type = 'hidden';
                        hiddenInput.name = actualName;
                        hiddenInput.value = input.value;
                        specificForm.appendChild(hiddenInput);
                    }
                });

                if (hasInvalidJson) {
                    e.preventDefault();
                    return false;
                }
            });
        }
    }

    /**
     * Initialize range inputs to display their values
     */
    function initRangeInputs() {
        const rangeInputs = document.querySelectorAll('input[type="range"]');

        rangeInputs.forEach(range => {
            const valueDisplay = document.getElementById(`${range.id}-value`) || range.nextElementSibling;

            if (valueDisplay &&
                (valueDisplay.classList.contains('ldr-settings-range-value') ||
                 valueDisplay.classList.contains('ldr-range-value'))) {
                // Set initial value
                valueDisplay.textContent = range.value;

                // Update on input change
                range.addEventListener('input', () => {
                    valueDisplay.textContent = range.value;
                });
            }
        });
    }

    /**
     * Initialize accordion behavior
     */
    function initAccordions() {
        document.querySelectorAll('.ldr-settings-section-header').forEach(header => {
            const targetId = header.dataset.target;
            const target = document.getElementById(targetId);

            if (target) {
                // Set initial state - expanded
                header.classList.remove('ldr-collapsed');
                target.style.display = 'block';

                header.addEventListener('click', () => {
                    header.classList.toggle('ldr-collapsed');
                    target.style.display = header.classList.contains('collapsed') ? 'none' : 'block';

                    // Rotate chevron icon
                    const icon = header.querySelector('.ldr-settings-toggle-icon i');
                    if (icon) {
                        icon.style.transform = header.classList.contains('collapsed') ? 'rotate(-90deg)' : '';
                    }
                });
            }
        });
    }

    /**
     * Format JSON in textareas
     */
    function initJsonFormatting() {
        document.querySelectorAll('.ldr-json-content').forEach(textarea => {
            const value = textarea.value.trim();

            if (value && (value.startsWith('{') || value.startsWith('['))) {
                try {
                    const formatted = JSON.stringify(JSON.parse(value), null, 2);
                    textarea.value = formatted;
                } catch (e) {
                    // Not valid JSON, leave as is
                    console.log('Error formatting JSON:', e);
                }
            }

            // Add event listener to format on input
            textarea.addEventListener('input', function() {
                if (this.value.trim() && (this.value.trim().startsWith('{') || this.value.trim().startsWith('['))) {
                    try {
                        const obj = JSON.parse(this.value);
                        const formatted = JSON.stringify(obj, null, 2);

                        // Only update if actually different (to avoid cursor jumping)
                        if (this.value !== formatted) {
                            // Remember cursor position
                            const selectionStart = this.selectionStart;
                            const selectionEnd = this.selectionEnd;

                            this.value = formatted;

                            // Try to restore cursor
                            this.setSelectionRange(selectionStart, selectionEnd);
                        }
                    } catch (e) {
                        // Invalid JSON, just leave it alone
                    }
                }
            });
        });

        // Convert text inputs with JSON content to textareas
        document.querySelectorAll('.ldr-settings-input').forEach(input => {
            const value = input.value.trim();

            // Skip if the value is "[object Object]" which isn't valid JSON
            if (value === "[object Object]") {
                // Replace with an empty object
                input.value = "{}";
                console.log('Fixed [object Object] string in input:', input.name);
                return;
            }

            if (value && (value.startsWith('{') || value.startsWith('['))) {
                try {
                    // Try to parse as JSON to validate
                    JSON.parse(value);

                    // Create a new textarea
                    const textarea = document.createElement('textarea');
                    textarea.id = input.id;
                    textarea.name = input.name;
                    textarea.className = 'ldr-settings-textarea ldr-json-content';
                    textarea.disabled = input.disabled;

                    try {
                        textarea.value = JSON.stringify(JSON.parse(value), null, 2);
                    } catch (e) {
                        textarea.value = value;
                    }

                    // Replace the input with textarea
                    input.parentNode.replaceChild(textarea, input);
                } catch (e) {
                    // Not valid JSON, leave as is
                    console.log('Error converting JSON input to textarea:', e);
                }
            }
        });
    }

    /**
     * Load settings from the API
     */
    function loadSettings() {
        // Only run this for the main settings dashboard
        if (!settingsContent) return;

        fetch(URLS.SETTINGS_API.BASE)
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    // Process settings to handle object values and check for corruption
                    allSettings = processSettings(data.settings);

                    // Store original values
                    allSettings.forEach(setting => {
                        originalSettings[setting.key] = setting.value;
                    });

                    // Render settings by tab
                    renderSettingsByTab(activeTab);

                    // Initialize auto-save handlers
                    setTimeout(initAutoSaveHandlers, 300);

                    // Initialize the dropdowns after the settings are loaded
                    if (activeTab === 'llm' || activeTab === 'all') {
                        setTimeout(initializeModelDropdowns, 300);
                    }
                    if (activeTab === 'search' || activeTab === 'all') {
                        setTimeout(initializeSearchEngineDropdowns, 300);
                    }

                    // Prepare the raw JSON editor if it exists
                    prepareRawJsonEditor();

                    // Initialize expanded JSON controls
                    setTimeout(() => {
                        initExpandedJsonControls();
                    }, 100);
                } else {
                    showAlert('Error loading settings: ' + data.message, 'error');
                }
            })
            .catch(error => {
                showAlert('Error loading settings: ' + error, 'error');
            });
    }

    /**
     * Format category names to be more user-friendly
     * @param {string} key - The setting key
     * @param {string} category - The category name
     * @returns {string} - The formatted category name
     */
    function formatCategoryName(key, category) {
        // Special cases for known categories
        if (category === 'app_interface') return 'App Interface';
        if (category === 'app_parameters') return 'App Parameters';
        if (category === 'llm_general') return 'LLM General';
        if (category === 'llm_parameters') return 'LLM Parameters';
        if (category === 'report_parameters') return 'Report Parameters';
        if (category === 'search_general') return 'Search General';
        if (category === 'notifications') return 'Notifications';
        if (category === 'search_parameters') return 'Search Parameters';
        if (category === 'warnings') return 'Warnings';

        // Remove any underscores and capitalize each word
        let formattedCategory = category.replace(/_/g, ' ');

        // Capitalize first letter of each word
        formattedCategory = formattedCategory.split(' ')
            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
            .join(' ');

        return formattedCategory;
    }

    /**
     * Organize settings to avoid duplicate group names and improve organization
     * @param {Array} settings - The settings array
     * @param {string} tab - The current tab
     * @returns {Object} - The organized settings
     */
    function organizeSettings(settings, tab) {
        // Create a mapping of types
        const typeMap = {
            'app': 'Application',
            'llm': 'Language Models',
            'search': 'Search Engines',
            'report': 'Reports'
        };

        // Define settings that should only appear in specific tabs
        const tabSpecificSettings = {
            'llm': [
                'llamacpp_f16_kv',
                'provider',
                'model',
                'temperature',
                'max_tokens',
                'openai_endpoint_url',
                'lmstudio_url',
                'llamacpp_model_path',
                'llamacpp_n_batch',
                'llamacpp_n_gpu_layers',
                'api_key'
            ],
            'search': [
                'iterations',
                'max_filtered_results',
                'max_results',
                'quality_check_urls',
                'questions_per_iteration',
                'region',
                'search_engine',
                'searches_per_section',
                'skip_relevance_filter',
                'safe_search',
                'search_language',
                'time_period',
                'tool',
                'snippets_only'
            ],
            'report': [
                'enable_fact_checking',
                'knowledge_accumulation',
                'knowledge_accumulation_context_limit',
                'output_dir',
                'detailed_citations'
            ],
            'app': [
                'debug',
                'host',
                'port',
                'enable_notifications',
                'web_interface',
                'enable_web',
                'dark_mode',
                'default_theme',
                'theme',
                'warnings',
                'allow_registrations'
            ]
        };

        // Priority settings that should appear at the top of each tab
        const prioritySettings = {
            'app': ['enable_web', 'enable_notifications', 'web_interface', 'theme', 'default_theme', 'dark_mode', 'debug', 'host', 'port', 'warnings'],
            'llm': ['provider', 'model', 'temperature', 'max_tokens', 'api_key', 'openai_endpoint_url', 'lmstudio_url', 'llamacpp_model_path'],
            'search': ['tool', 'iterations', 'questions_per_iteration', 'max_results', 'region', 'search_engine'],
            'report': ['enable_fact_checking', 'knowledge_accumulation', 'output_dir', 'detailed_citations']
        };

        // Group by prefix and category
        const grouped = {};

        // Filter settings based on current tab
        const filteredSettings = settings.filter(setting => {
            const parts = setting.key.split('.');
            const prefix = parts[0]; // app, llm, search, etc.
            const subKey = parts[1]; // The actual key name without prefix

            // Filter out nested settings like app.llm, app.search, app.general, app.web, etc.
            if (prefix === 'app' && (subKey === 'llm' || subKey === 'search' || subKey === 'general' || subKey === 'web')) {
                return false;
            }

            // Filter out fact checking duplicates - only keep in report tab
            if (prefix !== 'report' && subKey === 'enable_fact_checking') {
                return false;
            }

            // Filter out knowledge_accumulation duplicates - only keep in report tab
            if (prefix !== 'report' && (subKey === 'knowledge_accumulation' || subKey === 'knowledge_accumulation_context_limit')) {
                return false;
            }

            // Filter out settings that are not marked as visible.
            if (!setting.visible) {
                return false;
            }

            // If we're on a specific tab, only show settings for that tab
            if (tab !== 'all') {
                // Only show settings in tab-specific lists for that tab
                if (tab === prefix) {
                    // For tab-specific settings, make sure they're in the list
                    if (tabSpecificSettings[tab] && tabSpecificSettings[tab].includes(subKey)) {
                        return true;
                    }
                    // For settings not in any tab-specific list, allow showing them in their own tab
                    for (const otherTab in tabSpecificSettings) {
                        if (otherTab !== tab && tabSpecificSettings[otherTab].includes(subKey)) {
                            return false;
                        }
                    }
                    return true;
                }
                return false;
            }

            // For "all" tab, filter out duplicates and specialized settings
            // Check if this setting belongs exclusively to a specific tab
            for (const tabName in tabSpecificSettings) {
                if (tabSpecificSettings[tabName].includes(subKey) && prefix !== tabName) {
                    // Don't show this setting if it belongs to a different tab
                    return false;
                }
            }

            // Include all remaining settings in the "all" tab
            return true;
        });

        // First pass: group settings by prefix and category
        filteredSettings.forEach(setting => {
            const parts = setting.key.split('.');
            const prefix = parts[0]; // app, llm, search, etc.
            const subKey = parts[1]; // The setting key without prefix

            // Create namespace if needed
            if (!grouped[prefix]) {
                grouped[prefix] = {};
            }

            // Use category or create one based on subkey
            let category = setting.category || 'general';

            // Format the category name to be user-friendly
            category = formatCategoryName(prefix, category);

            // For duplicate "general" categories, prefix with the type
            if (category.toLowerCase() === 'general') {
                category = `${typeMap[prefix] || prefix.charAt(0).toUpperCase() + prefix.slice(1)} General`;
            }

            // Create category array if needed
            if (!grouped[prefix][category]) {
                grouped[prefix][category] = [];
            }

            // Add setting to category
            grouped[prefix][category].push(setting);
        });

        // Second pass: sort settings within each category by priority and sort categories
        for (const prefix in grouped) {
            // Get existing categories for this prefix
            const categories = Object.keys(grouped[prefix]);

            // --- MODIFICATION START: Prioritize categories containing specific dropdowns ---
            // Identify high-priority categories
            const highPriorityCategories = [];
            const otherCategories = [];
            const priorityKeysForPrefix = prioritySettings[prefix] || [];
            const highestPriorityKeys = ['provider', 'model', 'tool']; // Keys whose *containing category* should be first

            categories.forEach(category => {
                const containsHighestPriority = grouped[prefix][category].some(setting => {
                    const subKey = setting.key.split('.')[1];
                    // Ensure the setting key itself is also in the general priority list for the prefix
                    return highestPriorityKeys.includes(subKey) && priorityKeysForPrefix.includes(subKey);
                });
                if (containsHighestPriority) {
                    highPriorityCategories.push(category);
                } else {
                    otherCategories.push(category);
                }
            });

            // Sort the high-priority categories (e.g., alphabetically or by specific order if needed)
            highPriorityCategories.sort((a, b) => {
                // Simple sort for now, could be more specific if needed
                // Example: ensure "Provider" comes before "Model" if both are high priority
                const order = ['Provider', 'Model', 'Tool'];
                const aIndex = order.findIndex(word => a.includes(word));
                const bIndex = order.findIndex(word => b.includes(word));
                if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;
                if (aIndex !== -1) return -1;
                if (bIndex !== -1) return 1;
                return a.localeCompare(b);
            });

            // Sort other categories based on existing logic (e.g., using categoryOrder)
            const categoryOrder = ['General', 'Interface', 'Connection', 'API', 'Parameters']; // Adjusted order slightly
            otherCategories.sort((a, b) => {
                const aIndex = categoryOrder.findIndex(word => a.includes(word));
                const bIndex = categoryOrder.findIndex(word => b.includes(word));
                if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;
                if (aIndex !== -1) return -1;
                if (bIndex !== -1) return 1;
                return a.localeCompare(b);
            });

            // Combine sorted categories
            const sortedCategoryNames = [...highPriorityCategories, ...otherCategories];

            // Create new object with sorted categories and sorted settings within each
            const sortedPrefixedCategories = {};
            sortedCategoryNames.forEach(category => {
                sortedPrefixedCategories[category] = grouped[prefix][category];

                // Sort settings within this category (existing logic seems okay)
                sortedPrefixedCategories[category].sort((a, b) => {
                    const aKey = a.key.split('.')[1];
                    const bKey = b.key.split('.')[1];
                    const priorities = prioritySettings[prefix] || [];
                    const aIndex = priorities.indexOf(aKey);
                    const bIndex = priorities.indexOf(bKey);
                    if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;
                    if (aIndex !== -1) return -1;
                    if (bIndex !== -1) return 1;
                    return aKey.localeCompare(bKey);
                });
            });

            // Replace original categories with sorted ones
            grouped[prefix] = sortedPrefixedCategories;
            // --- MODIFICATION END ---
        }

        return grouped;
    }

    /**
     * Render the data location information section
     * @returns {string} HTML for the data location section
     */
    function renderDataLocationSection() {
        // Fetch data location info and create the section
        // This will be populated asynchronously
        const sectionId = 'section-data-location';

        let html = `
        <div class="settings-section data-location-section">
            <div class="ldr-settings-section-header" data-target="${sectionId}">
                <div class="settings-section-title">
                    <i class="fas fa-database"></i> Database & Encryption
                </div>
                <div class="ldr-settings-toggle-icon">
                    <i class="fas fa-chevron-down"></i>
                </div>
            </div>
            <div id="${sectionId}" class="settings-section-body">
                <div id="data-location-content" class="data-location-info">
                    <div class="loading-spinner">
                        <i class="fas fa-spinner fa-spin"></i> Loading data location information...
                    </div>
                </div>
            </div>
        </div>
        `;

        // Fetch the data location info asynchronously
        setTimeout(() => fetchDataLocationInfo(), 100);

        return html;
    }

    /**
     * Fetch and display data location information
     */
    function fetchDataLocationInfo() {
        const contentElement = document.getElementById('data-location-content');
        if (!contentElement) return;

        fetch('/settings/api/data-location')
            .then(response => response.json())
            .then(data => {
                let html = '<div class="data-location-details">';

                // Security and storage info with all settings
                if (data.security_notice.encrypted) {
                    // Get encryption details
                    const settings = data.encryption_settings || {};
                    const kdfIter = settings.kdf_iterations || 256000;
                    const kdfIterDisplay = kdfIter >= 1000 ? `${kdfIter/1000}k` : kdfIter;

                    // Sanitize data directory path to prevent XSS
                    const safeDataDir = window.escapeHtml(data.data_directory);

                    html += `
                    <div class="data-location-detailed">
                        <div class="data-path">
                            <i class="fas fa-folder"></i>
                            <code>${safeDataDir}</code>
                        </div>

                        <div class="security-status encrypted">
                            <i class="fas fa-shield-alt"></i>
                            <span><strong>Database encrypted</strong> with AES-256-GCM</span>
                        </div>

                        <div class="encryption-settings">
                            <div class="settings-grid">
                                <div class="setting-item">
                                    <span class="setting-label">KDF Iterations:</span>
                                    <code>${kdfIterDisplay}</code>
                                </div>
                                <div class="setting-item">
                                    <span class="setting-label">Page Size:</span>
                                    <code>${settings.page_size || 16384}</code>
                                </div>
                                <div class="setting-item">
                                    <span class="setting-label">HMAC Algorithm:</span>
                                    <code>${settings.hmac_algorithm || 'HMAC_SHA512'}</code>
                                </div>
                                <div class="setting-item">
                                    <span class="setting-label">KDF Algorithm:</span>
                                    <code>${settings.kdf_algorithm || 'PBKDF2_HMAC_SHA512'}</code>
                                </div>
                            </div>
                        </div>

                        <div class="env-variables-info">
                            <details class="env-details">
                                <summary><i class="fas fa-terminal"></i> Configuration via Environment Variables</summary>
                                <div class="env-content">
                                    <div class="env-list">
                                        <div class="env-item">
                                            <code>LDR_DATA_DIR</code>
                                            <span>Data directory location</span>
                                        </div>
                                        <div class="env-item">
                                            <code>LDR_DB_KDF_ITERATIONS</code>
                                            <span>Key derivation iterations (current: ${kdfIter})</span>
                                        </div>
                                        <div class="env-item">
                                            <code>LDR_DB_PAGE_SIZE</code>
                                            <span>Database page size (current: ${settings.page_size || 16384})</span>
                                        </div>
                                        <div class="env-item">
                                            <code>LDR_DB_HMAC_ALGORITHM</code>
                                            <span>HMAC algorithm</span>
                                        </div>
                                        <div class="env-item">
                                            <code>LDR_DB_KDF_ALGORITHM</code>
                                            <span>KDF algorithm</span>
                                        </div>
                                        <div class="env-item">
                                            <code>LDR_DB_CACHE_SIZE_MB</code>
                                            <span>Cache size in MB</span>
                                        </div>
                                        <div class="env-item">
                                            <code>LDR_DB_JOURNAL_MODE</code>
                                            <span>Journal mode (WAL, DELETE, etc.)</span>
                                        </div>
                                        <div class="env-item">
                                            <code>LDR_DB_SYNCHRONOUS</code>
                                            <span>Synchronous mode (NORMAL, FULL, OFF)</span>
                                        </div>
                                    </div>
                                    <div class="migration-warning">
                                        <i class="fas fa-exclamation-triangle"></i>
                                        <strong>Warning:</strong> Changing encryption settings requires deleting existing databases and creating new ones. There is no migration path.
                                    </div>
                                    <div class="sqlcipher-link">
                                        <i class="fas fa-external-link-alt"></i>
                                        <a href="https://www.zetetic.net/sqlcipher/sqlcipher-api/#cipher_default_kdf_iter" target="_blank" rel="noopener noreferrer">
                                            SQLCipher Configuration Documentation
                                        </a>
                                    </div>
                                </div>
                            </details>
                        </div>
                    </div>
                    `;
                } else {
                    html += `
                    <div class="data-location-compact">
                        <div class="data-path">
                            <i class="fas fa-folder"></i>
                            <code>${data.data_directory}</code>
                        </div>
                        <div class="security-status unencrypted">
                            <i class="fas fa-exclamation-triangle"></i>
                            <span><strong>Warning:</strong> Database not encrypted</span>
                        </div>
                        <div class="env-info">
                            <small>Install SQLCipher for encryption. Set <code>LDR_DATA_DIR</code> to change location.</small>
                        </div>
                    </div>
                    `;
                }

                html += '</div>';

                // Add styles for the data location section
                if (!document.getElementById('data-location-styles')) {
                    const style = document.createElement('style');
                    style.id = 'data-location-styles';
                    style.textContent = `
                        .data-location-section {
                            margin-bottom: 1.5rem;
                            border: 1px solid var(--border-color, #ddd);
                            border-radius: 8px;
                            background: var(--bg-secondary);
                        }

                        .data-location-info {
                            padding: 1rem;
                        }

                        .data-location-compact, .data-location-detailed {
                            display: flex;
                            flex-direction: column;
                            gap: 0.75rem;
                        }

                        .security-status {
                            display: flex;
                            align-items: center;
                            gap: 0.5rem;
                            font-size: 0.95rem;
                        }

                        .security-status.encrypted {
                            color: var(--success-color, #28a745);
                        }

                        .security-status.unencrypted {
                            color: var(--warning-color, #ffc107);
                        }

                        .data-path {
                            display: flex;
                            align-items: center;
                            gap: 0.5rem;
                            color: var(--text-secondary);
                            padding-bottom: 0.5rem;
                            border-bottom: 1px solid var(--border-color);
                            margin-bottom: 0.5rem;
                        }

                        .data-path code {
                            background: var(--bg-tertiary);
                            padding: 0.35rem 0.75rem;
                            border-radius: 4px;
                            font-family: monospace;
                            font-size: 0.9em;
                            color: var(--text-primary);
                            font-weight: 500;
                        }

                        .encryption-settings {
                            background: var(--bg-tertiary);
                            padding: 0.75rem;
                            border-radius: 6px;
                            margin-top: 0.5rem;
                        }

                        .settings-grid {
                            display: grid;
                            grid-template-columns: repeat(2, auto);
                            gap: 0.75rem 2rem;
                            width: fit-content;
                        }

                        .setting-item {
                            display: flex;
                            align-items: center;
                            gap: 0.75rem;
                            font-size: 0.85rem;
                        }

                        .setting-label {
                            color: var(--text-secondary);
                            white-space: nowrap;
                        }

                        .setting-item code {
                            background: var(--bg-primary);
                            padding: 0.125rem 0.375rem;
                            border-radius: 3px;
                            font-size: 0.85em;
                            color: var(--text-primary);
                            white-space: nowrap;
                        }

                        .env-variables-info {
                            margin-top: 0.5rem;
                        }

                        .env-details {
                            background: var(--bg-tertiary);
                            padding: 0.75rem;
                            border-radius: 6px;
                            cursor: pointer;
                        }

                        .env-details summary {
                            font-size: 0.9rem;
                            color: var(--text-secondary);
                            outline: none;
                            font-weight: 500;
                        }

                        .env-details summary:hover {
                            color: var(--text-primary);
                        }

                        .env-content {
                            margin-top: 1rem;
                        }

                        .env-list {
                            display: flex;
                            flex-direction: column;
                            gap: 0.5rem;
                            margin-bottom: 1rem;
                        }

                        .env-item {
                            display: flex;
                            align-items: baseline;
                            gap: 1rem;
                            font-size: 0.9rem;
                            line-height: 1.5;
                        }

                        .env-item code {
                            background: var(--bg-primary);
                            padding: 0.25rem 0.5rem;
                            border-radius: 3px;
                            font-size: 0.85em;
                            color: var(--accent-primary);
                            font-weight: 600;
                            min-width: 220px;
                            flex-shrink: 0;
                        }

                        .env-item span {
                            color: var(--text-secondary);
                        }

                        .migration-warning {
                            margin-top: 0.75rem;
                            padding: 0.5rem;
                            background: rgba(255, 193, 7, 0.1);
                            border-radius: 4px;
                            font-size: 0.8rem;
                            color: var(--warning-color, #ffc107);
                            border: 1px solid rgba(255, 193, 7, 0.3);
                        }

                        .migration-warning i {
                            margin-right: 0.25rem;
                        }

                        .sqlcipher-link {
                            margin-top: 0.75rem;
                            font-size: 0.9rem;
                        }

                        .sqlcipher-link i {
                            margin-right: 0.5rem;
                            font-size: 0.8em;
                            color: var(--text-secondary);
                        }

                        .sqlcipher-link a {
                            color: var(--accent-primary);
                            text-decoration: none;
                        }

                        .sqlcipher-link a:hover {
                            text-decoration: underline;
                        }

                        .env-info {
                            color: var(--text-secondary);
                            font-size: 0.85rem;
                            opacity: 0.8;
                        }

                        .env-info code {
                            background: var(--bg-tertiary);
                            padding: 0.125rem 0.25rem;
                            border-radius: 3px;
                            font-size: 0.9em;
                        }

                        .loading-spinner {
                            text-align: center;
                            padding: 2rem;
                            color: var(--text-secondary, #666);
                        }
                    `;
                    document.head.appendChild(style);
                }

                contentElement.innerHTML = html;
            })
            .catch(error => {
                console.error('Error fetching data location:', error);
                // Clear content safely
                contentElement.innerHTML = '';

                // Create error alert
                const alertDiv = document.createElement('div');
                alertDiv.className = 'alert alert-danger';

                const icon = document.createElement('i');
                icon.className = 'fas fa-exclamation-circle';
                alertDiv.appendChild(icon);

                const errorText = document.createTextNode(' Failed to load data location information: ' + (error.message || 'Unknown error'));
                alertDiv.appendChild(errorText);

                contentElement.appendChild(alertDiv);
            });
    }

    /**
     * Render settings based on active tab
     * @param {string} tab - The active tab
     */
    function renderSettingsByTab(tab) {
        // Only run this for the main settings dashboard
        if (!settingsContent) return;

        // Reset dropdown initialization state when switching tabs
        window.modelDropdownsInitialized = false;
        window.searchEngineDropdownInitialized = false;

        // Filter settings by tab
        let filteredSettings = allSettings;

        if (tab !== 'all') {
            filteredSettings = allSettings.filter(setting => setting.key.startsWith(tab + '.'));
        }

        // Organize settings to avoid duplicate groups
        const groupedSettings = organizeSettings(filteredSettings, tab);

        // Build HTML
        let html = '';

        // Add data location section at the beginning if on app or all tab
        if (tab === 'app' || tab === 'all') {
            html += renderDataLocationSection();
        }

        // Define the order for the types in "all" tab
        const typeOrder = ['llm', 'search', 'report', 'app', 'notifications'];
        const prefixTypes = Object.keys(groupedSettings);

        // Sort prefixes by the defined order for the "all" tab
        if (tab === 'all') {
            prefixTypes.sort((a, b) => {
                const aIndex = typeOrder.indexOf(a);
                const bIndex = typeOrder.indexOf(b);

                // If both are in the ordered list, sort by that order
                if (aIndex !== -1 && bIndex !== -1) {
                    return aIndex - bIndex;
                }

                // If only one is in the list, it comes first
                if (aIndex !== -1) return -1;
                if (bIndex !== -1) return 1;

                // Alphabetically for anything else
                return a.localeCompare(b);
            });
        }

        // For each type (app, llm, search, etc.)
        for (const type of prefixTypes) {
            if (tab !== 'all' && type !== tab) continue;

            // For each category in this type
            for (const category in groupedSettings[type]) {
                const sectionId = `section-${type}-${category.replace(/\s+/g, '-').toLowerCase()}`;

                html += `
                <div class="settings-section">
                    <div class="ldr-settings-section-header" data-target="${sectionId}">
                        <div class="settings-section-title" title="${category}">
                            ${category}
                        </div>
                        <div class="ldr-settings-toggle-icon">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div id="${sectionId}" class="settings-section-body">
                `;

                // Add all settings in this category
                groupedSettings[type][category].forEach(setting => {
                    html += renderSettingItem(setting);
                });

                html += `
                    </div>
                </div>
                `;
            }
        }

        if (html === '') {
            html = '<div class="empty-state"><p>No settings found for this category</p></div>';
        }

        // Update the content
        settingsContent.innerHTML = html;

        // Check if the element exists immediately after setting innerHTML
        console.log('Checking for llm.model after render:', document.getElementById('llm.model'));

        // Initialize accordion behavior
        initAccordions();

        // Initialize JSON handling
        initJsonFormatting();

        // Initialize range inputs
        initRangeInputs();

        // Initialize expanded JSON controls
        setTimeout(() => {
            initExpandedJsonControls();
        }, 100);

        // Initialize dropdowns AFTER content is rendered
        initializeModelDropdowns();
        initializeSearchEngineDropdowns();
        // Also initialize the main setup which finds all dropdowns
        setupCustomDropdowns();
        // Setup provider change listener after rendering
        setupProviderChangeListener();

    }

    /**
     * Render a single setting item
     * @param {Object} setting - The setting object
     * @returns {string} - The HTML for the setting item
     */
    function renderSettingItem(setting) {
        // Log the setting being processed
        console.log('Processing Setting:', setting.key, 'UI Element:', setting.ui_element);

        const settingId = `setting-${setting.key.replace(/\./g, '-')}`;
        let inputElement = '';

        // Generate the appropriate input element based on UI element type
        switch(setting.ui_element) {
            case 'textarea':
                inputElement = `
                    <textarea id="${settingId}" name="${setting.key}"
                        class="ldr-settings-textarea"
                        ${!setting.editable ? 'disabled' : ''}
                    >${setting.value !== null ? setting.value : ''}</textarea>
                `;
                break;

            case 'json':
                let jsonClass = ' ldr-json-content';

                // Try to format the JSON for better display
                try {
                    setting.value = JSON.stringify(JSON.parse(setting.value), null, 2);
                } catch (e) {
                    // If parsing fails, keep the original value
                    console.log('Error formatting JSON:', e);
                }

                // If it's an object (not an array), render individual controls
                if (setting.value.startsWith('{')) {
                    try {
                        const jsonObj = JSON.parse(setting.value);
                        return renderExpandedJsonControls(setting, settingId, jsonObj);
                    } catch (e) {
                        console.log('Error parsing JSON for controls:', e);
                    }
                }

                inputElement = `
                    <textarea id="${settingId}" name="${setting.key}"
                        class="ldr-settings-textarea${jsonClass}"
                        ${!setting.editable ? 'disabled' : ''}
                    >${setting.value !== null ? setting.value : ''}</textarea>
                `;
                break;

            case 'select':
                // Handle specific keys that should use custom dropdowns
                if (setting.key === 'llm.provider') {
                    const dropdownParams = {
                        input_id: setting.key,
                        dropdown_id: settingId + "-dropdown",
                        placeholder: "Select a provider",
                        label: null, // Label handled outside
                        help_text: setting.description || null,
                        allow_custom: false,
                        show_refresh: true, // Set to true for provider
                        data_setting_key: setting.key,
                        disabled: !setting.editable
                    };
                    inputElement = renderCustomDropdownHTML(dropdownParams);
                } else if (setting.key === 'search.tool') {
                    const dropdownParams = {
                        input_id: setting.key,
                        dropdown_id: settingId + "-dropdown",
                        placeholder: "Select a search tool",
                        label: null,
                        help_text: setting.description || null,
                        allow_custom: false,
                        show_refresh: false, // No refresh for search tool
                        data_setting_key: setting.key,
                        disabled: !setting.editable
                    };
                    inputElement = renderCustomDropdownHTML(dropdownParams);
                } else if (setting.key === 'llm.model') { // ADD THIS ELSE IF
                    // Handle llm.model specifically within the 'select' case
                    const dropdownParams = {
                        input_id: setting.key,
                        dropdown_id: settingId + "-dropdown",
                        placeholder: "Select or enter a model",
                        label: null,
                        help_text: setting.description || null,
                        allow_custom: true, // Allow custom for model
                        show_refresh: true, // Show refresh for model
                        refresh_aria_label: "Refresh model list",
                        data_setting_key: setting.key,
                        disabled: !setting.editable
                    };
                    inputElement = renderCustomDropdownHTML(dropdownParams);
                } else {
                    // Standard select for other keys
                    const selectOptions = [];
                    if (setting.options) {
                        setting.options.forEach(option => {
                            // Handle both string options and object options
                            let optionValue, optionLabel;
                            if (typeof option === 'object' && option !== null) {
                                // Object format: {value: "basic", label: "Basic"}
                                optionValue = option.value;
                                optionLabel = option.label || option.value;
                            } else {
                                // String format: "basic"
                                optionValue = option;
                                optionLabel = option;
                            }
                            const selected = optionValue === setting.value ? 'selected' : '';
                            // Escape HTML to prevent XSS attacks
                            selectOptions.push(
                                `<option value="${escapeHtml(optionValue)}" ${selected}>${escapeHtml(optionLabel)}</option>`
                            );
                        });
                    }
                    inputElement = `
                        <select id="${settingId}" name="${setting.key}"
                            class="settings-select ldr-form-control"
                            ${!setting.editable ? 'disabled' : ''}
                        >
                            ${selectOptions.join('')}
                        </select>
                    `;
                }
                break;

            case 'checkbox':
                const checked = setting.value === true || setting.value === 'true' ? 'checked' : '';
                const hiddenFallbackId = `${settingId}_hidden_fallback`;
                inputElement = `
                    <div class="settings-checkbox-container">
                        <label class="checkbox-label" for="${settingId}">
                            <!-- Hidden input ensures unchecked state is submitted -->
                            <input type="hidden"
                                   name="${setting.key}"
                                   id="${hiddenFallbackId}"
                                   value="false"
                                   class="checkbox-hidden-fallback">
                            <!-- Actual checkbox overrides hidden input when checked -->
                            <input type="checkbox" id="${settingId}" name="${setting.key}"
                                class="ldr-settings-checkbox"
                                data-hidden-fallback="${hiddenFallbackId}"
                                ${checked}
                                ${!setting.editable ? 'disabled' : ''}
                            >
                            <span class="checkbox-text">${setting.name}</span>
                        </label>
                    </div>
                `;
                break;

            case 'slider':
            case 'range':
                const min = setting.min_value !== null ? setting.min_value : 0;
                const max = setting.max_value !== null ? setting.max_value : 100;
                const step = setting.step !== null ? setting.step : 1;

                inputElement = `
                    <div class="settings-range-container">
                        <input type="range" id="${settingId}" name="${setting.key}"
                            class="settings-range ldr-form-control"
                            value="${setting.value !== null ? setting.value : min}"
                            min="${min}" max="${max}" step="${step}"
                            ${!setting.editable ? 'disabled' : ''}
                        >
                        <span class="settings-range-value">${setting.value !== null ? setting.value : min}</span>
                    </div>
                `;
                break;

            case 'number':
                const numMin = setting.min_value !== null ? setting.min_value : '';
                const numMax = setting.max_value !== null ? setting.max_value : '';
                const numStep = setting.step !== null ? setting.step : 1;

                inputElement = `
                    <input type="number" id="${settingId}" name="${setting.key}"
                        class="settings-input ldr-form-control"
                        value="${setting.value !== null ? setting.value : ''}"
                        min="${numMin}" max="${numMax}" step="${numStep}"
                        ${!setting.editable ? 'disabled' : ''}
                    >
                `;
                break;

            // Add a case for explicit custom dropdown if needed, or handle in default
            // case 'custom_dropdown':

            default:
                // Handle llm.model here explicitly if not handled by ui_element
                // Default to text input
                inputElement = `
                    <input type="${setting.ui_element === 'password' ? 'password' : 'text'}"
                        id="${settingId}" name="${setting.key}"
                        class="settings-input ldr-form-control"
                        value="${setting.value !== null ? setting.value : ''}"
                        ${!setting.editable ? 'disabled' : ''}
                    >
                `;
                break;
        }

        // Format the setting name to be more user-friendly if it contains underscores
        let settingName = setting.name;
        if (settingName.includes('_')) {
            settingName = formatCategoryName('', settingName);
        }

        // For checkboxes, we've already handled the label in the inputElement
        if (setting.ui_element === 'checkbox') {
            return `
                <div class="settings-item form-group" data-key="${setting.key}">
                    ${inputElement}
                    ${setting.description ? `
                    <div class="input-help">
                        ${setting.description}
                    </div>
                    ` : ''}
                </div>
            `;
        }

        // For non-checkbox elements, use the standard layout without info icons
        // Ensure help text is appended correctly AFTER the input element is generated
        const helpTextHTML = setting.description ? `<div class="input-help">${setting.description}</div>` : '';

        return `
            <div class="settings-item form-group" data-key="${setting.key}">
                <div class="settings-item-header">
                    <label for="${settingId}" title="${settingName}">
                        ${settingName}
                    </label>
                </div>
                ${inputElement}
                ${helpTextHTML}
            </div>
        `;
    }

    /**
     * Render expanded JSON controls for a JSON object setting
     * @param {Object} setting - The setting object
     * @param {string} settingId - The ID for the setting
     * @param {Object} jsonObj - The parsed JSON object
     * @returns {string} - The HTML for the expanded JSON controls
     */
    function renderExpandedJsonControls(setting, settingId, jsonObj) {
        let html = `
        <div class="settings-item form-group" data-key="${setting.key}">
            <div class="settings-item-header">
                <label for="${settingId}" title="${setting.name}">
                    ${setting.name}
                </label>
            </div>
            <div class="json-expanded-controls">
                <input type="hidden" id="${settingId}_original" name="${setting.key}_original"
                    value="${JSON.stringify(jsonObj)}">

                <div class="json-property-controls">
        `;

        // Create individual form controls for each JSON property
        for (const key in jsonObj) {
            const value = jsonObj[key];
            const controlId = `${settingId}_${key}`;
            const formattedName = formatPropertyName(key);
            let controlHtml = '';

            // Create appropriate control based on value type
            if (typeof value === 'boolean') {
                const hiddenFallbackId = `${controlId}_hidden_fallback`;
                controlHtml = `
                    <div class="json-property-item boolean-property" onclick="directToggleCheckbox('${controlId}')" data-checkboxid="${controlId}">
                        <div class="checkbox-wrapper">
                            <label class="checkbox-label" for="${controlId}">
                                <!-- Hidden input ensures unchecked state is submitted -->
                                <input type="hidden"
                                       name="${setting.key}_${key}"
                                       id="${hiddenFallbackId}"
                                       value="false"
                                       class="checkbox-hidden-fallback">
                                <!-- Actual checkbox overrides hidden input when checked -->
                                <input type="checkbox"
                                       id="${controlId}"
                                       name="${setting.key}_${key}"
                                       class="json-property-control ldr-settings-checkbox"
                                       data-property="${key}"
                                       data-parent-key="${setting.key}"
                                       data-hidden-fallback="${hiddenFallbackId}"
                                       ${value ? 'checked' : ''}
                                       ${!setting.editable ? 'disabled' : ''}>
                                <span class="checkbox-text">${formattedName}</span>
                            </label>
                        </div>
                    </div>
                `;
            } else if (typeof value === 'number') {
                controlHtml = `
                    <div class="json-property-item">
                        <label for="${controlId}" class="property-label" title="${formattedName}">${formattedName}</label>
                        <input type="number"
                               id="${controlId}"
                               name="${setting.key}_${key}"
                               class="settings-input ldr-form-control json-property-control"
                               data-property="${key}"
                               data-parent-key="${setting.key}"
                               value="${value}"
                               ${!setting.editable ? 'disabled' : ''}>
                    </div>
                `;
            } else if (typeof value === 'string' && (value === 'ITERATION' || value === 'NONE')) {
                controlHtml = `
                    <div class="json-property-item">
                        <label for="${controlId}" class="property-label" title="${formattedName}">${formattedName}</label>
                        <select id="${controlId}"
                                name="${setting.key}_${key}"
                                class="settings-select ldr-form-control json-property-control"
                                data-property="${key}"
                                data-parent-key="${setting.key}"
                                ${!setting.editable ? 'disabled' : ''}>
                            <option value="ITERATION" ${value === 'ITERATION' ? 'selected' : ''}>Iteration</option>
                            <option value="NONE" ${value === 'NONE' ? 'selected' : ''}>None</option>
                        </select>
                    </div>
                `;
            } else {
                controlHtml = `
                    <div class="json-property-item">
                        <label for="${controlId}" class="property-label" title="${formattedName}">${formattedName}</label>
                        <input type="text"
                               id="${controlId}"
                               name="${setting.key}_${key}"
                               class="settings-input ldr-form-control json-property-control"
                               data-property="${key}"
                               data-parent-key="${setting.key}"
                               value="${value}"
                               ${!setting.editable ? 'disabled' : ''}>
                    </div>
                `;
            }

            html += controlHtml;
        }

        html += `
                </div>
            </div>
            ${setting.description ? `
            <div class="input-help">
                ${setting.description}
            </div>
            ` : ''}
        </div>
        `;

        return html;
    }

    /**
     * Parse form values to boolean (server-side consistency)
     * @param {any} value - The value to convert
     * @returns {boolean} - The boolean value
     */
    function parseFormBoolean(value) {
        if (typeof value === 'boolean') return value;
        if (value === null || value === undefined) return false;
        if (typeof value === 'string') {
            const lower = value.toLowerCase().trim();
            return ['on', 'true', '1', 'yes'].includes(lower);
        }
        return Boolean(value);
    }

    /**
     * Format property name to be more user-friendly
     * @param {string} name - The property name
     * @returns {string} - The formatted property name
     */
    function formatPropertyName(name) {
        // Replace underscores with spaces and capitalize each word
        return name.split('_')
            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
            .join(' ');
    }

    /**
     * Handle settings form submission (for the entire form)
     * @param {Event} e - The submit event
     */
    function handleSettingsSubmit(e) {
        e.preventDefault();

        // Clear any previous errors
        document.querySelectorAll('.ldr-settings-error').forEach(element => {
            element.classList.remove('ldr-settings-error');
        });

        document.querySelectorAll('.ldr-settings-error-message').forEach(element => {
            element.remove();
        });

        // Collect form data
        const formData = {};

        // Get values from inputs
        document.querySelectorAll('.ldr-settings-input, .ldr-settings-textarea, .ldr-settings-select, .ldr-settings-range').forEach(input => {
            // Skip inputs that are part of expanded JSON controls
            if (input.classList.contains('ldr-json-property-control')) return;

            if (input.name) {
                // Check if value is a JSON object (textarea)
                if (input.tagName === 'TEXTAREA' && input.classList.contains('ldr-settings-textarea')) {
                    try {
                        const jsonValue = JSON.parse(input.value);
                        formData[input.name] = jsonValue;
                    } catch (e) {
                        // Mark as invalid and don't include
                        markInvalidInput(input, 'Invalid JSON format: ' + e.message);
                        return;
                    }
                } else {
                    formData[input.name] = input.value;
                }
            }
        });

        // Get values from checkboxes (AJAX mode - reads checkbox.checked directly)
        document.querySelectorAll('.ldr-settings-checkbox').forEach(checkbox => {
            // Skip checkboxes that are part of expanded JSON controls
            if (checkbox.classList.contains('ldr-json-property-control')) return;

            if (checkbox.name) {
                // Ensure boolean type for consistency with server-side validation
                formData[checkbox.name] = Boolean(checkbox.checked);
            }
        });

        // Process expanded JSON controls
        document.querySelectorAll('input[id$="_original"]').forEach(input => {
            if (input.name && input.name.endsWith('_original')) {
                const actualName = input.name.replace('_original', '');

                // Get all controls for this setting
                const jsonData = {};
                const controls = document.querySelectorAll(`.json-property-control[data-parent-key="${actualName}"]`);

                controls.forEach(control => {
                    const propName = control.dataset.property;

                    if (propName) {
                        if (control.type === 'checkbox') {
                            jsonData[propName] = control.checked;
                        } else if (control.tagName === 'SELECT') {
                            jsonData[propName] = control.value;
                        } else {
                            // Attempt to convert to number if appropriate
                            if (!isNaN(control.value) && control.value !== '') {
                                // Check if it should be a float or int
                                if (control.value.includes('.')) {
                                    jsonData[propName] = parseFloat(control.value);
                                } else {
                                    jsonData[propName] = parseInt(control.value, 10);
                                }
                            } else {
                                jsonData[propName] = control.value;
                            }
                        }
                    }
                });

                // Special handling for corrupted JSON values (check for empty objects, single characters, etc.)
                if (Object.keys(jsonData).length === 0) {
                    // Use the original JSON if it's non-empty and valid
                    try {
                        const originalJson = JSON.parse(input.value);
                        if (originalJson && typeof originalJson === 'object' && Object.keys(originalJson).length > 0) {
                            formData[actualName] = originalJson;
                        } else {
                            // Skip empty JSON
                            console.log(`Skipping empty JSON object for ${actualName}`);
                        }
                    } catch (e) {
                        console.log(`Error parsing original JSON for ${actualName}:`, e);
                    }
                } else {
                    // Use the collected data
                    formData[actualName] = jsonData;
                }
            }
        });

        // For report nested values that might be corrupted, ensure they're proper objects
        Object.keys(formData).forEach(key => {
            // Check for various forms of corrupted data
            if (
                (typeof formData[key] === 'string' &&
                (formData[key] === '{' ||
                 formData[key] === '[' ||
                 formData[key] === '' ||
                 formData[key] === null ||
                 formData[key] === "[object Object]")) ||
                formData[key] === null
            ) {
                // This is likely a corrupted setting
                console.log(`Detected corrupted setting: ${key} with value: ${formData[key]}`);

                if (key.startsWith('report.')) {
                    // For report settings, replace with empty object
                    formData[key] = {};
                } else {
                    // For other settings, delete to let defaults take over
                    delete formData[key];
                }
            }
        });

        // Get raw config from editor if visible
        if (rawConfigSection.style.display !== 'none' && rawConfigEditor) {
            try {
                const rawConfig = JSON.parse(rawConfigEditor.value);

                // Process raw config and flatten the structure
                const flattenedConfig = {};

                // Process each namespace in the config (app, llm, search, report)
                Object.keys(rawConfig).forEach(namespace => {
                    const section = rawConfig[namespace];

                    // Each key in the section should be added to form data with namespace prefix
                    Object.keys(section).forEach(key => {
                        const fullKey = `${namespace}.${key}`;
                        flattenedConfig[fullKey] = section[key];
                    });
                });

                // Merge with form data, giving precedence to the raw JSON config
                Object.assign(formData, flattenedConfig);
            } catch (e) {
                showAlert('Invalid JSON in raw config editor: ' + e.message, 'error');
                return;
            }
        }

        // Show saving state for the form
        if (settingsForm) {
            settingsForm.classList.add('ldr-saving');
        }

        // Submit data to API
        submitSettingsData(formData, settingsForm);
    }

    /**
     * Show a success indicator on an input
     * @param {HTMLElement} element - The input element
     */
    function showSaveSuccess(element) {
        if (!element) return;

        // Add success class
        element.classList.add('ldr-save-success');

        // Remove it after a short delay
        setTimeout(() => {
            element.classList.remove('ldr-save-success');
        }, 1500);
    }

    /**
     * Validates user-specified JSON data and shows and error if it is not
     * valid JSON.
     * @param content The content to validate.
     * @return True if the content is valid.
     */
    function validateJsonContent(content) {
        try {
            JSON.parse(content);
            return true;
        } catch (e) {
            showMessage('Setting value must be valid JSON.', 'error', 5000);
            return false;
        }
    }

    /**
     * Submit settings data to the API
     * @param {Object} formData - The settings to save
     * @param {HTMLElement} sourceElement - The input element that triggered the save
     */
    function submitSettingsData(formData, sourceElement) {
        // Show loading indicator
        let loadingContainer = sourceElement;

        // If it's a specific input element, find its container to position the spinner correctly
        if (sourceElement && sourceElement.tagName) {
            if (sourceElement.type === 'checkbox') {
                // For checkboxes, use the checkbox label
                loadingContainer = sourceElement.closest('.ldr-checkbox-label') || sourceElement;
            } else if (sourceElement.classList.contains('ldr-json-property-control')) {
                // For JSON property controls, use the property item
                loadingContainer = sourceElement.closest('.json-property-item') || sourceElement;
            } else if (sourceElement.classList.contains('ldr-json-content')) {
                // For JSON content, validate it before saving.
                if (!validateJsonContent(sourceElement.value)) {
                    return;
                }
            } else {
                // For other inputs, use the form-group or settings-item
                loadingContainer = sourceElement.closest('.form-group') ||
                                  sourceElement.closest('.settings-item') ||
                                  sourceElement;
            }
        }

        // Add the saving class to show the spinner
        if (loadingContainer) {
            loadingContainer.classList.add('ldr-saving');
        }

        // Get the keys being saved for reference
        const savingKeys = Object.keys(formData);

        // Store original values to show what changed
        const originalValues = {};
        savingKeys.forEach(key => {
            const settingObj = allSettings.find(s => s.key === key);
            originalValues[key] = settingObj ? settingObj.value : null;
        });


        fetch(URLS.SETTINGS_API.SAVE_ALL_SETTINGS, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCsrfToken()
            },
            body: JSON.stringify(formData),
        })
        .then(response => {
            return response.json();
        })
        .then(data => {
            if (data.status === 'success') {
                // Show success indicator on the source element
                if (sourceElement) {
                    showSaveSuccess(sourceElement);
                }

                // Remove loading state
                if (loadingContainer) {
                    loadingContainer.classList.remove('ldr-saving');
                }

                // Update all settings data if it's a global change
                if (!sourceElement || savingKeys.length > 1) {
                    // Update global state
                    if (data.settings) {
                        allSettings = processSettings(data.settings);
                    }
                } else {
                    // Update just the changed setting in our allSettings array
                    if (savingKeys.length === 1) {
                        const key = savingKeys[0];
                        const settingIndex = allSettings.findIndex(s => s.key === key);

                        if (settingIndex !== -1 && data.settings) {
                            // Find the updated setting in the response
                            const updatedSetting = data.settings.find(s => s.key === key);

                            if (updatedSetting) {
                                // Update the setting in our array
                                const settingMap = {};
                                settingMap[key] = updatedSetting;
                                allSettings[settingIndex] = processSettings(settingMap)[0];
                            }
                        }
                    }
                }

                // Update originalSettings cache for the saved keys
                savingKeys.forEach(key => {
                    const settingIndex = allSettings.findIndex(s => s.key === key);
                    if (settingIndex !== -1) {
                        originalSettings[key] = allSettings[settingIndex].value;
                        console.log(`Updated originalSettings cache for ${key}:`, originalSettings[key]);
                    }
                });

                // Update the raw JSON editor if it's visible
                if (rawConfigSection && rawConfigSection.style.display === 'block') {
                    prepareRawJsonEditor();
                }

                // Format a more informative message
                let successMessage = '';
                if (savingKeys.length === 1) {
                    const key = savingKeys[0];
                    const settingObj = allSettings.find(s => s.key === key);
                    const oldValue = originalValues[key];
                    const newValue = settingObj ? settingObj.value : formData[key];

                    // Format the display name for better readability
                    const displayName = key.split('.').pop().replace(/_/g, ' ');
                    const capitalizedName = displayName.charAt(0).toUpperCase() + displayName.slice(1);

                    // Format the values for display
                    const oldDisplay = formatValueForDisplay(oldValue);
                    const newDisplay = formatValueForDisplay(newValue);

                    successMessage = `${capitalizedName}: ${oldDisplay} → ${newDisplay}`;
                } else {
                    // If multiple settings were updated, use the original message
                    successMessage = data.message || 'Settings saved successfully';
                }

                // Show toast notification if ui.showMessage is available
                if (window.ui && window.ui.showMessage) {
                    window.ui.showMessage(successMessage, 'success', 3000);
                    // We're showing toast, so we pass true to skip showing the regular alert
                    showAlert(successMessage, 'success', true);
                } else {
                    // Fallback to regular alert, force showing it
                    showAlert(successMessage, 'success', false);
                }
            } else {
                // Show error message
                if (window.ui && window.ui.showMessage) {
                    window.ui.showMessage(data.message || 'Error saving settings', 'error', 5000);
                    showAlert(data.message || 'Error saving settings', 'error', true);
                } else {
                    showAlert(data.message || 'Error saving settings', 'error', false);
                }

                // Remove loading state
                if (loadingContainer) {
                    loadingContainer.classList.remove('ldr-saving');
                }
            }
        })
        .catch(error => {
            console.error('[submitSettingsData] AJAX Error:', error);
            console.error('[submitSettingsData] Error details:', error.message);

            // Show error message
            if (window.ui && window.ui.showMessage) {
                window.ui.showMessage('Error saving settings: ' + error.message, 'error', 5000);
                showAlert('Error saving settings: ' + error.message, 'error', true);
            } else {
                showAlert('Error saving settings: ' + error.message, 'error', false);
            }

            // Remove loading state
            if (loadingContainer) {
                loadingContainer.classList.remove('ldr-saving');
            }
        });
    }

    /**
     * Format a value for display in notifications
     * @param {any} value - The value to format
     * @returns {string} - Formatted value for display
     */
    function formatValueForDisplay(value) {
        if (value === null || value === undefined) {
            return 'empty';
        } else if (typeof value === 'boolean') {
            return value ? 'enabled' : 'disabled';
        } else if (typeof value === 'object') {
            // For objects, show a simplified representation
            return '{...}';
        } else if (typeof value === 'string' && value.length > 20) {
            // Truncate long strings
            return `"${value.substring(0, 18)}..."`;
        } else if (typeof value === 'string') {
            return `"${value}"`;
        } else {
            return String(value);
        }
    }

    /**
     * Handle search input for filtering settings
     */
    function handleSearchInput() {
        // Only run this for the main settings dashboard
        if (!settingsContent || !settingsSearch) return;

        const searchValue = settingsSearch.value.toLowerCase();

        if (searchValue === '') {
            // If search is empty, just re-render based on active tab
            renderSettingsByTab(activeTab);
            return;
        }

        // Filter settings based on search
        const filteredSettings = allSettings.filter(setting => {
            return (
                setting.key.toLowerCase().includes(searchValue) ||
                setting.name.toLowerCase().includes(searchValue) ||
                (setting.description && setting.description.toLowerCase().includes(searchValue)) ||
                (setting.category && setting.category.toLowerCase().includes(searchValue))
            );
        });

        // Organize settings to avoid duplicate groups
        const groupedSettings = organizeSettings(filteredSettings, 'all');

        // Build HTML
        let html = '';

        // Define the order for the types
        const typeOrder = ['app', 'llm', 'search', 'report'];
        const prefixTypes = Object.keys(groupedSettings);

        // Sort prefixes by the defined order
        prefixTypes.sort((a, b) => {
            const aIndex = typeOrder.indexOf(a);
            const bIndex = typeOrder.indexOf(b);

            // If both are in the ordered list, sort by that order
            if (aIndex !== -1 && bIndex !== -1) {
                return aIndex - bIndex;
            }

            // If only one is in the list, it comes first
            if (aIndex !== -1) return -1;
            if (bIndex !== -1) return 1;

            // Alphabetically for anything else
            return a.localeCompare(b);
        });

        // For each type (app, llm, search, etc.)
        for (const type of prefixTypes) {
            // For each category in this type
            for (const category in groupedSettings[type]) {
                const sectionId = `section-${type}-${category.replace(/\s+/g, '-').toLowerCase()}`;

                html += `
                <div class="settings-section">
                    <div class="ldr-settings-section-header" data-target="${sectionId}">
                        <div class="settings-section-title" title="${category}">
                            ${category}
                        </div>
                        <div class="ldr-settings-toggle-icon">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div id="${sectionId}" class="settings-section-body">
                `;

                // Add all settings in this category
                groupedSettings[type][category].forEach(setting => {
                    html += renderSettingItem(setting);
                });

                html += `
                    </div>
                </div>
                `;
            }
        }

        if (html === '') {
            html = '<div class="empty-state"><p>No settings found matching your search</p></div>';
        }

        // Add a container for alerts that will maintain proper positioning
        html = '<div id="filtered-settings-alert" class="settings-alert-container"></div>' + html;

        // Update the content
        settingsContent.innerHTML = html;

        // Initialize accordion behavior - all expanded for search results
        initAccordions();

        // Initialize JSON handling
        initJsonFormatting();

        // Initialize range inputs
        initRangeInputs();

        // Initialize auto-save handlers after re-rendering
        initAutoSaveHandlers();

        // Initialize expanded JSON controls
        setTimeout(() => {
            initExpandedJsonControls();
        }, 100);
    }

    /**
     * Handle the reset button click
     */
    function handleReset() {
        // Reset to original values
        document.querySelectorAll('.ldr-settings-input, .ldr-settings-textarea, .ldr-settings-select').forEach(input => {
            // Skip inputs that are part of expanded JSON controls
            if (input.classList.contains('ldr-json-property-control')) return;

            const originalValue = originalSettings[input.name];

            if (typeof originalValue === 'object' && originalValue !== null) {
                input.value = JSON.stringify(originalValue, null, 2);
            } else {
                input.value = originalValue !== undefined ? originalValue : '';
            }
        });

        document.querySelectorAll('.ldr-settings-checkbox').forEach(checkbox => {
            // Skip checkboxes that are part of expanded JSON controls
            if (checkbox.classList.contains('ldr-json-property-control')) return;

            const originalValue = originalSettings[checkbox.name];
            checkbox.checked = originalValue === true || originalValue === 'true';
        });

        document.querySelectorAll('.ldr-settings-range').forEach(range => {
            const originalValue = originalSettings[range.name];
            range.value = originalValue !== undefined ? originalValue : range.min;

            // Update value display
            const valueDisplay = range.nextElementSibling;
            if (valueDisplay && valueDisplay.classList.contains('ldr-settings-range-value')) {
                valueDisplay.textContent = range.value;
            }
        });

        // Reset expanded JSON controls
        document.querySelectorAll('input[id$="_original"]').forEach(input => {
            if (input.name.endsWith('_original')) {
                const actualName = input.name.replace('_original', '');
                const originalValue = originalSettings[actualName];

                if (originalValue) {
                    // Check for corrupted JSON (single character values like "{")
                    if (typeof originalValue === 'string' && originalValue.length < 3) {
                        console.log(`Skipping corrupted JSON value for ${actualName}`);
                        return;
                    }

                    let jsonData = originalValue;
                    if (typeof jsonData === 'string') {
                        try {
                            jsonData = JSON.parse(jsonData);
                        } catch (e) {
                            console.log('Error parsing JSON during reset:', e);
                            return;
                        }
                    }

                    // Update the hidden input
                    input.value = JSON.stringify(jsonData);

                    // Update individual controls
                    for (const prop in jsonData) {
                        const control = document.querySelector(`.json-property-control[data-parent-key="${actualName}"][data-property="${prop}"]`);
                        if (control) {
                            if (control.type === 'checkbox') {
                                control.checked = !!jsonData[prop];
                            } else if (control.tagName === 'SELECT') {
                                control.value = jsonData[prop];
                            } else {
                                control.value = jsonData[prop];
                            }
                        }
                    }
                }
            }
        });

        // Format JSON values
        initJsonFormatting();

        showAlert('Settings reset to last saved values', 'info');
    }

    /**
     * Handle the reset to defaults button click
     */
    function handleResetToDefaults() {
        // Show confirmation dialog
        if (confirm('Are you sure you want to reset ALL settings to their default values? This cannot be undone.')) {
            // Call the reset to defaults API
            fetch(URLS.SETTINGS_API.RESET_TO_DEFAULTS, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCsrfToken()
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    showAlert('Settings have been reset to defaults. Reloading page...', 'success');

                    // Reload the page after a brief delay to show the success message
                    setTimeout(() => {
                        window.location.reload();
                    }, 1500);
                } else {
                    showAlert('Error resetting settings: ' + data.message, 'error');
                }
            })
            .catch(error => {
                showAlert('Error resetting settings: ' + error, 'error');
            });
        }
    }

    /**
     * Toggle the display of raw configuration
     */
    function toggleRawConfig() {
        if (rawConfigSection && rawConfigEditor) {
            const isVisible = rawConfigSection.style.display !== 'none';

            // If hiding the editor, try to apply changes
            if (isVisible) {
                try {
                    // Parse the JSON to validate it
                    const rawConfig = JSON.parse(rawConfigEditor.value);

                    // Process and flatten the JSON
                    const flattenedConfig = {};

                    Object.keys(rawConfig).forEach(namespace => {
                        const section = rawConfig[namespace];

                        Object.keys(section).forEach(key => {
                            const fullKey = `${namespace}.${key}`;
                            flattenedConfig[fullKey] = section[key];
                        });
                    });

                    // Save the changes to apply them to UI
                    submitSettingsData(flattenedConfig, null);
                } catch (e) {
                    // Show error but don't prevent hiding the editor
                    showAlert('Invalid JSON in editor: ' + e.message, 'error');
                }
            }

            // Toggle visibility
            rawConfigSection.style.display = isVisible ? 'none' : 'block';

            // Update toggle text
            const toggleText = document.getElementById('toggle-text');
            if (toggleText) {
                toggleText.textContent = isVisible ? 'Show JSON Configuration' : 'Hide JSON Configuration';
            }

            // If showing the config, prepare it
            if (!isVisible) {
                prepareRawJsonEditor();
            }
        }
    }

    /**
     * Prepare the raw JSON editor with all settings
     */
    function prepareRawJsonEditor() {
        if (rawConfigEditor && allSettings.length > 0) {
            // Try to parse existing JSON from editor if it exists
            let existingConfig = {};
            try {
                if (rawConfigEditor.value) {
                    existingConfig = JSON.parse(rawConfigEditor.value);
                }
            } catch (e) {
                console.warn('Could not parse existing JSON config, starting fresh');
                existingConfig = {};
            }

            // Prepare settings as a JSON object
            const settingsObj = {};

            // Group by prefix (app, llm, search, report)
            allSettings.forEach(setting => {
                const key = setting.key;
                const parts = key.split('.');
                const prefix = parts[0];

                // Initialize namespace if needed
                if (!settingsObj[prefix]) {
                    settingsObj[prefix] = {};
                }

                // Parse JSON values
                let value = setting.value;
                if (typeof value === 'string' && (value.startsWith('{') || value.startsWith('['))) {
                    try {
                        value = JSON.parse(value);
                    } catch (e) {
                        // Leave as string if not valid JSON
                    }
                }

                // Add to settings object
                settingsObj[prefix][key.substring(prefix.length + 1)] = value;
            });

            // Merge with existing config to preserve unknown parameters
            Object.keys(existingConfig).forEach(prefix => {
                if (!settingsObj[prefix]) {
                    settingsObj[prefix] = {};
                }

                Object.keys(existingConfig[prefix]).forEach(key => {
                    // Only keep parameters that don't exist in our known settings
                    const fullKey = `${prefix}.${key}`;
                    const exists = allSettings.some(s => s.key === fullKey);

                    if (!exists) {
                        settingsObj[prefix][key] = existingConfig[prefix][key];
                    }
                });
            });

            // Format as pretty JSON
            rawConfigEditor.value = JSON.stringify(settingsObj, null, 2);
        }
    }

    /**
     * Function to open file location (for collections config)
     * @param {string} filePath - The file path to open
     */
    function openFileLocation(filePath) {
        // Create a hidden form and submit it to a route that will open the file location
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = "/api/open_file_location";

        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'file_path';
        input.value = filePath;

        form.appendChild(input);
        document.body.appendChild(form);
        form.submit();
    }

    /**
     * Initialize click handlers for checkbox wrappers
     */
    function initCheckboxWrappers() {
        // No longer needed - using direct onclick attribute instead
    }

    /**
     * Toggle checkbox directly from onclick event
     * Simple, direct function to toggle checkboxes
     * @param {string} checkboxId - The ID of the checkbox to toggle
     */
    function directToggleCheckbox(checkboxId) {
        const checkbox = document.getElementById(checkboxId);
        if (checkbox && !checkbox.disabled) {
            // Toggle the checkbox state
            checkbox.checked = !checkbox.checked;

            // Trigger change event for listeners
            const changeEvent = new Event('change', { bubbles: true });
            checkbox.dispatchEvent(changeEvent);

            // Stop event propagation
            event.stopPropagation();
        }
    }

    /**
     * Get CSRF token from meta tag
     */
    function getCsrfToken() {
        return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    }

    /**
     * Handle the fix corrupted settings button click
     */
    function handleFixCorruptedSettings() {
        // Call the fix corrupted settings API
        fetch(URLS.SETTINGS_API.FIX_CORRUPTED_SETTINGS, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCsrfToken()
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                if (data.fixed_settings && data.fixed_settings.length > 0) {
                    showAlert(`Fixed ${data.fixed_settings.length} corrupted settings. Reloading page...`, 'success');

                    // Reload the page after a brief delay to show the success message
                    setTimeout(() => {
                        window.location.reload();
                    }, 1500);
                } else {
                    showAlert('No corrupted settings were found.', 'info');
                }
            } else {
                showAlert('Error fixing corrupted settings: ' + data.message, 'error');
            }
        })
        .catch(error => {
            showAlert('Error fixing corrupted settings: ' + error, 'error');
        });
    }

    /**
     * Check if Ollama service is running
     * @returns {Promise<boolean>} True if Ollama is running
     */
    async function isOllamaRunning() {
        try {
            const controller = new AbortController();
            const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 second timeout

            const response = await fetch(URLS.SETTINGS_API.OLLAMA_STATUS, {
                signal: controller.signal
            });

            clearTimeout(timeoutId);

            if (response.ok) {
                const data = await response.json();
                return data.running === true;
            }
            return false;
        } catch (error) {
            console.error('Ollama check failed:', error.name === 'AbortError' ? 'Request timed out' : error);
            return false;
        }
    }

    /**
     * Fetch model providers from API
     * @param {boolean} forceRefresh - Whether to force refresh the data
     * @returns {Promise} - A promise that resolves with the model providers
     */
    function fetchModelProviders(forceRefresh = false) {
        // Use a debounce mechanism to prevent multiple calls in quick succession
        if (window.modelProvidersRequestInProgress && !forceRefresh) {
            console.log('Model providers request already in progress, using existing promise');
            return window.modelProvidersRequestInProgress;
        }

        const cachedData = getCachedData('deepResearch.modelProviders');
        const cacheTimestamp = getCachedData('deepResearch.cacheTimestamp');

        // If not forcing refresh and we have valid cached data, use it
        if (!forceRefresh && cachedData && cacheTimestamp && (Date.now() - cacheTimestamp < 3600000)) { // 1 hour cache
            console.log('Using cached model providers');
            return Promise.resolve(cachedData);
        }

        console.log('Fetching model providers from API');

        // Create a promise and store it
        const url = forceRefresh
            ? `${URLS.SETTINGS_API.AVAILABLE_MODELS}?force_refresh=true`
            : URLS.SETTINGS_API.AVAILABLE_MODELS;

        window.modelProvidersRequestInProgress = fetch(url)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`API returned status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                console.log('Got model data from API:', data);
                // Cache the data for future use
                cacheData('deepResearch.modelProviders', data);
                cacheData('deepResearch.cacheTimestamp', Date.now());

                // Process the data
                const processedData = processModelData(data);
                // Clear the request flag
                window.modelProvidersRequestInProgress = null;
                return processedData;
            })
            .catch(error => {
                console.error('Error fetching model providers:', error);
                // Clear the request flag on error
                window.modelProvidersRequestInProgress = null;
                throw error;
            });

        return window.modelProvidersRequestInProgress;
    }

    /**
     * Fetch search engines from API
     * @param {boolean} forceRefresh - Whether to force refresh the data
     * @returns {Promise} - A promise that resolves with the search engines
     */
    function fetchSearchEngines(forceRefresh = false) {
        // Use a debounce mechanism to prevent multiple calls in quick succession
        if (window.searchEnginesRequestInProgress && !forceRefresh) {
            console.log('Search engines request already in progress, using existing promise');
            return window.searchEnginesRequestInProgress;
        }

        const cachedData = getCachedData('deepResearch.searchEngines');
        const cacheTimestamp = getCachedData('deepResearch.cacheTimestamp');

        // Use cached data if available and not forcing refresh
        if (!forceRefresh && cachedData && cacheTimestamp && (Date.now() - cacheTimestamp < 3600000)) { // 1 hour cache
            console.log('Using cached search engines data');
            return Promise.resolve(cachedData);
        }

        console.log('Fetching search engines from API');

        // Create a promise and store it
        window.searchEnginesRequestInProgress = fetch(URLS.SETTINGS_API.AVAILABLE_SEARCH_ENGINES)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`API returned status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                console.log('Received search engine data:', data);
                // Cache the data
                cacheData('deepResearch.searchEngines', data);
                cacheData('deepResearch.cacheTimestamp', Date.now());

                // Process the data
                const processedData = processSearchEngineData(data);
                // Clear the request flag
                window.searchEnginesRequestInProgress = null;
                return processedData;
            })
            .catch(error => {
                console.error('Error fetching search engines:', error);
                // Clear the request flag on error
                window.searchEnginesRequestInProgress = null;
                throw error;
            });

        return window.searchEnginesRequestInProgress;
    }

    /**
     * Process model data from API or cache
     * @param {Object} data - The model data
     */
    function processModelData(data) {
        console.log('Processing model data:', data);

        // Create a new array to store all formatted models
        const formattedModels = [];

        // Process provider options first
        if (data.provider_options) {
            console.log('Found provider options:', data.provider_options.length);
        }

        // Check for Ollama models
        if (data.providers && data.providers.ollama_models && data.providers.ollama_models.length > 0) {
            const ollama_models = data.providers.ollama_models;
            console.log('Found Ollama models:', ollama_models.length);

            // Add provider information to each model
            ollama_models.forEach(model => {
                formattedModels.push({
                    value: model.value,
                    label: model.label,
                    provider: 'OLLAMA' // Ensure provider field is added
                });
            });
        }

        // Add OpenAI models if available
        if (data.providers && data.providers.openai_models && data.providers.openai_models.length > 0) {
            const openai_models = data.providers.openai_models;
            console.log('Found OpenAI models:', openai_models.length);

            // Add provider information to each model
            openai_models.forEach(model => {
                formattedModels.push({
                    value: model.value,
                    label: model.label,
                    provider: 'OPENAI' // Ensure provider field is added
                });
            });
        }

        // Add Anthropic models if available
        if (data.providers && data.providers.anthropic_models && data.providers.anthropic_models.length > 0) {
            const anthropic_models = data.providers.anthropic_models;
            console.log('Found Anthropic models:', anthropic_models.length);

            // Add provider information to each model
            anthropic_models.forEach(model => {
                formattedModels.push({
                    value: model.value,
                    label: model.label,
                    provider: 'ANTHROPIC' // Ensure provider field is added
                });
            });
        }

        // Add Custom OpenAI Endpoint models if available
        if (data.providers && data.providers.openai_endpoint_models && data.providers.openai_endpoint_models.length > 0) {
            const openai_endpoint_models = data.providers.openai_endpoint_models;
            console.log('Found OpenAI Endpoint models:', openai_endpoint_models.length);

            // Add provider information to each model
            openai_endpoint_models.forEach(model => {
                formattedModels.push({
                    value: model.value,
                    label: model.label,
                    provider: 'OPENAI_ENDPOINT' // Ensure provider field is added
                });
            });
        }

        // Update the global modelOptions array
        modelOptions = formattedModels;
        console.log('Final modelOptions:', modelOptions.length, 'models');

        // Cache the processed models
        cacheData('deepResearch.availableModels', formattedModels);

        // Return the processed models
        return formattedModels;
    }

    /**
     * Process search engine data from API or cache
     * @param {Object} data - The search engine data
     */
    function processSearchEngineData(data) {
        console.log('Processing search engine data:', data);
        if (data.engine_options && data.engine_options.length > 0) {
            searchEngineOptions = data.engine_options;
            console.log('Updated search engine options:', searchEngineOptions);

            // Always initialize search engine dropdowns when receiving new data
            initializeSearchEngineDropdowns();
        } else {
            console.warn('No engine options found in search engine data');
        }
    }

    /**
     * Initialize custom model dropdowns in the LLM section
     */
    function initializeModelDropdowns() {
        console.log('Initializing model dropdowns');

        // Use getElementById for direct access
        const settingsProviderInput = document.getElementById('llm.provider');
        const settingsModelInput = document.getElementById('llm.model');
        const providerHiddenInput = document.getElementById('llm.provider_hidden');
        const modelHiddenInput = document.getElementById('llm.model_hidden');
        const providerDropdownList = document.getElementById('setting-llm-provider-dropdown-list');
        const modelDropdownList = document.getElementById('setting-llm-model-dropdown-list');

        // Skip if already initialized (avoid redundant calls)
        if (window.modelDropdownsInitialized) {
            console.log('Model dropdowns already initialized, skipping');
            return;
        }

        console.log('Found model elements:', {
            settingsProviderInput: !!settingsProviderInput,
            settingsModelInput: !!settingsModelInput,
            providerHiddenInput: !!providerHiddenInput,
            modelHiddenInput: !!modelHiddenInput,
            providerDropdownList: !!providerDropdownList,
            modelDropdownList: !!modelDropdownList
        });

        // Check if elements exist before proceeding
        if (!settingsProviderInput || !providerDropdownList || !providerHiddenInput) {
            console.warn('LLM Provider input, dropdown list, or hidden input element not found. Skipping provider initialization.');
            return; // Don't proceed if required elements are missing
        }

        if (!settingsModelInput || !modelDropdownList || !modelHiddenInput) {
            console.warn('LLM Model input, dropdown list, or hidden input element not found. Skipping model initialization.');
            return; // Don't proceed if required elements are missing
        }

        // Mark as initialized to prevent redundant setup
        window.modelDropdownsInitialized = true;

        // Load model options first
        loadModelOptions().then(() => {
            console.log(`Models loaded, available options: ${modelOptions.length}`);

            // Get current settings from hidden inputs
            const currentProvider = providerHiddenInput.value.toUpperCase() || 'OLLAMA'
            const currentModel = modelHiddenInput.value || 'gemma3:12b';

            console.log('Current settings:', { provider: currentProvider, model: currentModel });

            // Setup provider dropdown
            if (settingsProviderInput && providerDropdownList && window.setupCustomDropdown) {
                // Set hidden input value first for provider (prevents race conditions)
                if (providerHiddenInput) {
                    console.log('Set provider hidden input value:', currentProvider);
                    providerHiddenInput.value = currentProvider;
                }

                // Set hidden input value for model too
                if (modelHiddenInput) {
                    console.log('Set model hidden input value:', currentModel);
                    modelHiddenInput.value = currentModel;
                }

                // If there are available options, create or update the dropdowns
                if (MODEL_PROVIDERS && MODEL_PROVIDERS.length > 0) {
                    // Cache references to DOM elements to prevent lookups
                    const providerList = providerDropdownList;

                    // Create provider dropdown
                    const providerDropdown = window.setupCustomDropdown(
                        settingsProviderInput,
                        providerList,
                        () => MODEL_PROVIDERS,
                        (value, item) => {
                            console.log('Provider selected:', value);

                            // Update hidden input
                            if (providerHiddenInput) {
                                providerHiddenInput.value = value;

                                // Trigger filtering of model options
                                filterModelOptionsForProvider(value);

                                // Save to localStorage
                                // Provider saved to DB

                                // Trigger save
                                const changeEvent = new Event('change', { bubbles: true });
                                providerHiddenInput.dispatchEvent(changeEvent);
                            }
                        },
                        false // Don't allow custom values
                    );

                    // Set initial value
                    if (currentProvider && providerDropdown.setValue) {
                        console.log('Setting initial provider:', currentProvider);
                        providerDropdown.setValue(currentProvider, false); // Don't fire event
                        // Explicitly set hidden input value on init
                        providerHiddenInput.value = currentProvider.toLowerCase();
                    }

                    // --- ADD CHANGE LISTENER TO HIDDEN INPUT ---
                    providerHiddenInput.removeEventListener('change', handleInputChange); // Remove old listener first
                    providerHiddenInput.addEventListener('change', handleInputChange);
                    console.log('Added change listener to hidden provider input:', providerHiddenInput.id);
                    // --- END OF ADDED LISTENER ---
                }
            }

            // Create model dropdown with full list of models first
            if (settingsModelInput && modelDropdownList && modelHiddenInput && window.setupCustomDropdown) {
                // Initialize the dropdown with ALL models first, don't filter yet
                const modelDropdownControl = window.setupCustomDropdown(
                    settingsModelInput,
                    modelDropdownList,
                    () => modelOptions.length > 0 ? modelOptions : [
                        { value: 'gpt-4o', label: 'GPT-4o (OpenAI)' },
                        { value: 'gpt-3.5-turbo', label: 'GPT-3.5 Turbo (OpenAI)' },
                        { value: 'claude-3-5-sonnet-latest', label: 'Claude 3.5 Sonnet (Anthropic)' },
                        { value: 'llama3', label: 'Llama 3 (Ollama)' }
                    ],
                    (value, item) => {
                        console.log('Model selected:', value);

                        // Update hidden input
                        if (modelHiddenInput) {
                            modelHiddenInput.value = value;

                            // Save to localStorage
                            // Model saved to DB
                        }
                    },
                    true // Allow custom values
                );

                // Set initial model value
                if (modelDropdownControl) {
                    // Set the current model without filtering first
                    if (currentModel) {
                        console.log('Setting initial model:', currentModel);
                        modelDropdownControl.setValue(currentModel, false); // Don't fire event
                        // Explicitly set hidden input value on init
                        modelHiddenInput.value = currentModel;
                    }

                    // Now filter models for the current provider - AFTER setting the initial value
                    setTimeout(() => {
                        filterModelOptionsForProvider(currentProvider);
                    }, 100); // Small delay to ensure value is set first

                    // --- ADD CHANGE LISTENER TO HIDDEN INPUT ---
                    modelHiddenInput.removeEventListener('change', handleInputChange); // Remove old listener first
                    modelHiddenInput.addEventListener('change', handleInputChange);
                    console.log('Added change listener to hidden model input:', modelHiddenInput.id);
                    // --- END OF ADDED LISTENER ---
                }

                // Set up refresh button
                const refreshBtn = document.querySelector('#llm-model-refresh');
                if (refreshBtn) {
                    refreshBtn.addEventListener('click', function() {
                        const icon = refreshBtn.querySelector('i');
                        if (icon) icon.className = 'fas fa-spinner fa-spin';

                        // Force refresh models
                        loadModelOptions(true).then(() => {
                            if (icon) icon.className = 'fas fa-sync-alt';

                            // Re-filter for current provider
                            const currentProvider = providerHiddenInput ?
                                providerHiddenInput.value :
                                settingsProviderInput ? settingsProviderInput.value : 'ollama';

                            filterModelOptionsForProvider(currentProvider);

                            showAlert('Model list refreshed', 'success');
                        }).catch(error => {
                            console.error('Error refreshing models:', error);
                            if (icon) icon.className = 'fas fa-sync-alt';
                            showAlert('Failed to refresh models: ' + error.message, 'error');
                        });
                    });
                }
            }

            // Set up provider change listener after everything is initialized
            setupProviderChangeListener();
        }).catch(err => {
            console.error('Error initializing model dropdowns:', err);
            // Show a warning to the user
            showAlert('Failed to load model options. Using fallback values.', 'warning');
        });
    }

    /**
     * Add fallback model based on provider
     */
    function addFallbackModel(provider, hiddenInput, visibleInput) {
        let fallbackModel = '';
        let displayName = '';

        if (provider === 'OLLAMA') {
            fallbackModel = 'llama3';
            displayName = 'Llama 3 (Ollama)';
        } else if (provider === 'OPENAI') {
            fallbackModel = 'gpt-3.5-turbo';
            displayName = 'GPT-3.5 Turbo (OpenAI)';
        } else if (provider === 'ANTHROPIC') {
            fallbackModel = 'claude-3-5-sonnet-latest';
            displayName = 'Claude 3.5 Sonnet (Anthropic)';
        } else {
            fallbackModel = 'gpt-3.5-turbo';
            displayName = 'GPT-3.5 Turbo';
        }

        if (hiddenInput) {
            hiddenInput.value = fallbackModel;
        }

        if (visibleInput) {
            visibleInput.value = displayName;
        }
    }

    /**
     * Initialize custom search engine dropdowns
     */
    function initializeSearchEngineDropdowns() {
        console.log('Initializing search engine dropdown');
        // Check for the search engine input field
        const searchEngineInput = document.getElementById('search.tool');
        const searchEngineHiddenInput = document.getElementById('search.tool_hidden');
        const dropdownList = document.getElementById('setting-search-tool-dropdown-list');

        // Skip if already initialized (avoid redundant calls)
        if (window.searchEngineDropdownInitialized) {
            console.log('Search engine dropdown already initialized, skipping');
            return;
        }

        console.log('Found search engine elements:', {
            searchEngineInput: !!searchEngineInput,
            searchEngineHiddenInput: !!searchEngineHiddenInput,
            dropdownList: !!dropdownList
        });

        if (!searchEngineInput || !dropdownList || !searchEngineHiddenInput) {
            console.warn('Search engine input, hidden input, or dropdown list not found. Skipping initialization.');
            return; // Exit early if required elements are missing
        }

        // Mark as initialized to prevent redundant calls
        window.searchEngineDropdownInitialized = true;

        // Set up the dropdown
        if (window.setupCustomDropdown) {
            const dropdown = window.setupCustomDropdown(
                searchEngineInput,
                dropdownList,
                () => searchEngineOptions.length > 0 ? searchEngineOptions : [{ value: 'auto', label: 'Auto (Default)' }],
                (value, item) => {
                    console.log('Search engine selected:', value);
                    // Update the hidden input value
                    searchEngineHiddenInput.value = value;
                    // Trigger a change event on the hidden input to save
                    const changeEvent = new Event('change', { bubbles: true });
                    searchEngineHiddenInput.dispatchEvent(changeEvent);
                    // Save to localStorage
                    // Search engine saved to DB
                },
                false, // Don't allow custom values
                'No search engines available.'
            );

            // Get current value
            let currentValue = '';
            if (typeof allSettings !== 'undefined' && Array.isArray(allSettings)) {
                const currentSetting = allSettings.find(s => s.key === 'search.tool');
                if (currentSetting) {
                    currentValue = currentSetting.value || '';
                }
            }
            if (!currentValue) {
                currentValue = 'auto'; // Default value, actual value comes from DB
            }

            // Set initial value
            if (currentValue && dropdown.setValue) {
                console.log('Setting initial search engine value:', currentValue);
                dropdown.setValue(currentValue, false);
                searchEngineHiddenInput.value = currentValue;
            }

            // --- ADD CHANGE LISTENER TO HIDDEN INPUT ---
            searchEngineHiddenInput.removeEventListener('change', handleInputChange); // Remove old listener first
            searchEngineHiddenInput.addEventListener('change', handleInputChange);
            console.log('Added change listener to hidden search engine input:', searchEngineHiddenInput.id);
            // --- END OF ADDED LISTENER ---
        }
    }

    /**
     * Process settings to handle object values
     */
    function processSettings(settings) {
        // Convert to a list.
        const settingsList = [];
        for (const key in settings) {
            const setting = settings[key];
            setting["key"] = key
            settingsList.push(setting);
        }

        return settingsList.map(setting => {
            const processedSetting = {...setting};

            // Convert object values to JSON strings for display
            if (typeof processedSetting.value === 'object' && processedSetting.value !== null) {
                processedSetting.value = JSON.stringify(processedSetting.value, null, 2);
            }

            // Handle corrupted JSON values (e.g., just "{" or "[" or "[object Object]")
            if (typeof processedSetting.value === 'string' &&
                (processedSetting.value === '{' ||
                 processedSetting.value === '[' ||
                 processedSetting.value === '{}' ||
                 processedSetting.value === '[]' ||
                 processedSetting.value === '[object Object]')) {

                console.log(`Detected corrupted JSON value for ${processedSetting.key}: ${processedSetting.value}`);

                // Initialize with empty object for corrupted JSON values
                if (processedSetting.key.startsWith('report.')) {
                    processedSetting.value = '{}';
                }
            }

            return processedSetting;
        });
    }

    /**
     * Add CSS styles for loading indicators and saved state
     */
    function addDynamicStyles() {
        // Create a style element if it doesn't exist
        let styleEl = document.getElementById('settings-dynamic-styles');
        if (!styleEl) {
            styleEl = document.createElement('style');
            styleEl.id = 'settings-dynamic-styles';
            document.head.appendChild(styleEl);
        }

        // Add CSS for saving and success states
        styleEl.textContent = `
            .saving {
                opacity: 0.7;
                pointer-events: none;
                position: relative;
            }

            .saving::after {
                content: '';
                position: absolute;
                top: 50%;
                right: 10px;
                width: 16px;
                height: 16px;
                margin-top: -8px;
                border: 2px solid rgba(0, 123, 255, 0.1);
                border-top-color: #007bff;
                border-radius: 50%;
                animation: spinner 0.8s linear infinite;
                z-index: 10;
            }

            .save-success {
                border-color: #28a745 !important;
                transition: border-color 0.3s;
            }

            @keyframes spinner {
                to { transform: rotate(360deg); }
            }

            .spinner {
                width: 40px;
                height: 40px;
                border: 3px solid rgba(255, 255, 255, 0.1);
                border-radius: 50%;
                border-top-color: var(--accent-primary);
                animation: spin 1s ease-in-out infinite;
                margin: 0 auto 1rem auto;
                display: block;
            }

            .settings-item .checkbox-label {
                margin-top: 8px;
                padding-left: 0;
            }

            // Add styles for the loading spinner
            const spinnerStyles =
                '.saving {' +
                '    position: relative;' +
                '}' +
                '' +
                '.saving:before {' +
                '    content: \'\';' +
                '    position: absolute;' +
                '    left: -25px;' +
                '    top: 50%;' +
                '    transform: translateY(-50%);' +
                '    width: 16px;' +
                '    height: 16px;' +
                '    border: 2px solid rgba(255, 255, 255, 0.3);' +
                '    border-radius: 50%;' +
                '    border-top-color: #fff;' +
                '    animation: spinner .6s linear infinite;' +
                '    z-index: 10;' +
                '}' +
                '' +
                '.checkbox-label.saving:before {' +
                '    left: -25px;' +
                '    top: 50%;' +
                '}' +
                '' +
                '@keyframes spinner {' +
                '    to {transform: translateY(-50%) rotate(360deg);}' +
                '}';

            // Add the styles to the head
            const style = document.createElement('style');
            style.textContent = spinnerStyles;
            document.head.appendChild(style);
        `;
    }

    // Initialize dynamic styles
    addDynamicStyles();

    /**
     * Initialize the settings component
     */
    function initializeSettings() {
        // Get DOM elements
        settingsForm = document.getElementById('settings-form');
        settingsContent = document.getElementById('settings-content');
        settingsSearch = document.getElementById('settings-search');
        settingsTabs = document.querySelectorAll('.ldr-settings-tab');
        settingsAlert = document.getElementById('settings-alert');
        rawConfigToggle = document.getElementById('toggle-raw-config');
        rawConfigSection = document.getElementById('raw-config');
        rawConfigEditor = document.getElementById('raw_config_editor');


        // Add dynamic styles immediately
        addDynamicStyles();

        // Initialize range inputs to display their values
        initRangeInputs();

        // Initialize accordion behavior
        initAccordions();

        // Initialize JSON handling
        initJsonFormatting();

        // Load settings from API if on settings dashboard
        if (settingsContent) {
            // First fetch the model and search engine data to have it ready
            // when needed, but don't wait for it to complete
            Promise.all([fetchModelProviders(), fetchSearchEngines()]).then(() => {
                // Then load settings
                loadSettings();
            }).catch(err => {
                console.error("Error fetching providers/engines initially", err);
                // Still try to load settings even if fetching options fails
                loadSettings();
            });
        }

        // Handle tab switching
        if (settingsTabs) {
            settingsTabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    // Remove active class from all tabs
                    settingsTabs.forEach(t => t.classList.remove('active'));

                    // Add active class to clicked tab
                    tab.classList.add('active');

                    // Update active tab and re-render
                    activeTab = tab.dataset.tab;
                    renderSettingsByTab(activeTab);

                    // Set a small timeout to ensure DOM is ready before initializing
                    setTimeout(() => {
                        // Initialize dropdowns after rendering content
                        // Moved dropdown init inside loadSettings success callback
                        // if (activeTab === 'llm' || activeTab === 'all') {
                        //     initializeModelDropdowns();
                        // }
                        // if (activeTab === 'search' || activeTab === 'all') {
                        //     initializeSearchEngineDropdowns();
                        // }

                        // Re-initialize auto-save handlers after tab switch and render
                        initAutoSaveHandlers();
                        // Setup refresh buttons after dropdowns might have been created
                        setupRefreshButtons();
                    }, 100); // Reduced timeout slightly
                });
            });
        }

        // Handle search filtering
        if (settingsSearch) {
            settingsSearch.addEventListener('input', handleSearchInput);
        }

        // Handle reset to defaults button
        const resetToDefaultsButton = document.getElementById('reset-to-defaults-button');
        if (resetToDefaultsButton) {
            resetToDefaultsButton.addEventListener('click', handleResetToDefaults);
        }

        // Add a fix corrupted settings button
        const fixCorruptedButton = document.createElement('button');
        fixCorruptedButton.setAttribute('type', 'button');
        fixCorruptedButton.setAttribute('id', 'fix-corrupted-button');
        fixCorruptedButton.className = 'btn btn-info';
        fixCorruptedButton.innerHTML = '<i class="fas fa-wrench"></i> Fix Corrupted Settings';
        fixCorruptedButton.addEventListener('click', handleFixCorruptedSettings);

        // Insert it after the reset to defaults button
        if (resetToDefaultsButton) {
            resetToDefaultsButton.insertAdjacentElement('afterend', fixCorruptedButton);
        }

        // Handle raw config toggle
        if (rawConfigToggle) {
            rawConfigToggle.addEventListener('click', toggleRawConfig);
        }

        // Initialize specific settings page form handlers
        initSpecificSettingsForm();

        // Handle form submission
        if (settingsForm) {
            settingsForm.addEventListener('submit', handleSettingsSubmit);
        }

        // Add click handler for the logo to navigate home
        const logoLink = document.getElementById('logo-link');
        if (logoLink) {
            logoLink.addEventListener('click', () => {
                window.location.href = URLS.PAGES.HOME;
            });
        }

        // --- MODIFICATION START: Call initAutoSaveHandlers at the end of initializeSettings ---
        // Initialize auto-save handlers after all other setup
        initAutoSaveHandlers();
        // --- MODIFICATION END ---
    }

    // Initialize on DOM content loaded
    // --- MODIFICATION START: Ensure initialization order ---
    // Ensure initialization happens after DOM content is loaded
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initializeSettings);
    } else {
        // DOM is already loaded, run initialize
        initializeSettings();
    }
    // --- MODIFICATION END ---

    // Expose the setupCustomDropdowns function for other modules to use
    window.setupSettingsDropdowns = initializeModelDropdowns;

    /**
     * Show an alert message at the top of the settings form
     * @param {string} message - The message to display
     * @param {string} type - The alert type: success, error, warning, info
     * @param {boolean} skipIfToastShown - Whether to skip showing this alert if a toast was already shown
     */
    function showAlert(message, type, skipIfToastShown = true) {
        // If window.ui.showAlert exists, use it
        if (window.ui && window.ui.showAlert) {
            window.ui.showAlert(message, type, skipIfToastShown);
            return;
        }

        // Otherwise fallback to old implementation (this shouldn't happen once ui.js is loaded)
        // If we're showing a toast and we want to skip the regular alert, just return
        if (skipIfToastShown && window.ui && window.ui.showMessage) {
            return;
        }

        // Find the alert container - look for filtered settings alert first
        let alertContainer = document.getElementById('filtered-settings-alert');

        // If not found, fall back to the regular alert
        if (!alertContainer) {
            alertContainer = document.getElementById('settings-alert');
        }

        if (!alertContainer) return;

        // Clear any existing alerts
        alertContainer.innerHTML = '';

        // Create alert element
        const alert = document.createElement('div');
        alert.className = `alert alert-${type}`;

        // Create icon element
        const icon = document.createElement('i');
        icon.className = `fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}`;
        alert.appendChild(icon);

        // Create text node for message (safe from XSS)
        const messageText = document.createTextNode(' ' + message);
        alert.appendChild(messageText);

        // Add a close button
        const closeBtn = document.createElement('span');
        closeBtn.className = 'ldr-alert-close';
        closeBtn.innerHTML = '&times;';
        closeBtn.addEventListener('click', () => {
            alert.remove();
            alertContainer.style.display = 'none';
        });

        alert.appendChild(closeBtn);

        // Add to container
        alertContainer.appendChild(alert);
        alertContainer.style.display = 'block';

        // Auto-hide after 5 seconds
        setTimeout(() => {
            alert.remove();
            if (alertContainer.children.length === 0) {
                alertContainer.style.display = 'none';
            }
        }, 5000);
    }

    /**
     * Set up custom dropdowns for settings
     */
    function setupCustomDropdowns() {
        // Find all custom dropdowns in the settings form
        const customDropdowns = document.querySelectorAll('.ldr-custom-dropdown');

        // Process each dropdown
        customDropdowns.forEach(dropdown => {
            const dropdownInput = dropdown.querySelector('.ldr-custom-dropdown-input');
            const dropdownList = dropdown.querySelector('.ldr-custom-dropdown-list');

            if (!dropdownInput || !dropdownList) return;

            // Get the setting key from the data attribute or input ID
            const settingKey = dropdownInput.getAttribute('data-setting-key') || dropdownInput.id;
            if (!settingKey) return;

            console.log('Setting up custom dropdown for:', settingKey);

            // Get current setting value from settings or localStorage
            let currentValue = '';

            // Try to get from allSettings first if available
            if (typeof allSettings !== 'undefined' && Array.isArray(allSettings)) {
            const currentSetting = allSettings.find(s => s.key === settingKey);
                if (currentSetting) {
                    currentValue = currentSetting.value || '';
                }
            }

            // Fallback to localStorage values if we don't have a value yet
            if (!currentValue) {
                if (settingKey === 'llm.model') {
                    currentValue = ''; // Value comes from DB
                } else if (settingKey === 'llm.provider') {
                    currentValue = ''; // Value comes from DB
                } else if (settingKey === 'search.tool') {
                    currentValue = ''; // Value comes from DB
                }
            }

            // Get the hidden input
            const hiddenInput = document.getElementById(`${dropdownInput.id}_hidden`);
            if (!hiddenInput) {
                console.warn(`Hidden input not found for dropdown: ${dropdownInput.id}`);
                return; // Skip if hidden input doesn't exist
            }

            // Set up options source based on setting key
            let optionsSource = [];
            let allowCustom = false;

            if (settingKey === 'llm.model') {
                // For model dropdown, use the model options from cache or fallback
                optionsSource = typeof modelOptions !== 'undefined' && modelOptions.length > 0 ?
                    modelOptions : [
                        { value: 'gpt-4o', label: 'GPT-4o (OpenAI)' },
                        { value: 'gpt-3.5-turbo', label: 'GPT-3.5 Turbo (OpenAI)' },
                        { value: 'claude-3-5-sonnet-latest', label: 'Claude 3.5 Sonnet (Anthropic)' },
                        { value: 'llama3', label: 'Llama 3 (Ollama)' }
                    ];
                allowCustom = true;

                // Set up refresh button if it exists
                const refreshBtn = dropdown.querySelector('.ldr-custom-dropdown-refresh-btn');
                if (refreshBtn) {
                    refreshBtn.addEventListener('click', function() {
                        const icon = refreshBtn.querySelector('i');
                        if (icon) icon.className = 'fas fa-spinner fa-spin';

                        // Force refresh of model options
                        if (typeof loadModelOptions === 'function') {
                            loadModelOptions(true).then(() => {
                                if (icon) icon.className = 'fas fa-sync-alt';

                                // Force dropdown update
                                const event = new Event('click', { bubbles: true });
                                dropdownInput.dispatchEvent(event);
                            }).catch(error => {
                                console.error('Error refreshing models:', error);
                                if (icon) icon.className = 'fas fa-sync-alt';
                                if (typeof showAlert === 'function') {
                                    showAlert('Failed to refresh models: ' + error.message, 'error');
                                }
                            });
                        } else {
                            if (icon) icon.className = 'fas fa-sync-alt';
                        }
                    });
                }
            } else if (settingKey === 'llm.provider') {
                // Special handling for provider dropdown
                const MODEL_PROVIDERS = [
                        { value: 'ollama', label: 'Ollama (Local)' },
                    { value: 'openai', label: 'OpenAI (Cloud)' },
                    { value: 'anthropic', label: 'Anthropic (Cloud)' },
                        { value: 'openai_endpoint', label: 'Custom OpenAI Endpoint' }
                    ];

                optionsSource = MODEL_PROVIDERS;

                // Try to get options from settings if available
                if (typeof allSettings !== 'undefined' && Array.isArray(allSettings)) {
                    const availableProviders = allSettings.find(s => s.key === 'llm.provider');
                    if (availableProviders && availableProviders.options && availableProviders.options.length > 0) {
                        optionsSource = availableProviders.options.map(opt => ({
                            value: opt.value,
                            label: opt.label
                        }));
                    }
                }
            } else if (settingKey === 'search.tool') {
                optionsSource = typeof searchEngineOptions !== 'undefined' && searchEngineOptions.length > 0 ?
                    searchEngineOptions : [
                        { value: 'google_pse', label: 'Google Programmable Search' },
                        { value: 'duckduckgo', label: 'DuckDuckGo' },
                        { value: 'auto', label: 'Auto (Default)' }
                    ];
            }

            console.log(`Setting up dropdown for ${settingKey} with ${optionsSource.length} options`);

            // Initialize the dropdown
            if (window.setupCustomDropdown) {
                const dropdown = window.setupCustomDropdown(
                    dropdownInput,
                    dropdownList,
                    () => optionsSource,
                    (value, item) => {
                        console.log(`Dropdown ${settingKey} selected:`, value);
                        // --- MODIFICATION START: Removed hiddenInput retrieval, already have it ---
                        const hiddenInput = document.getElementById(`${dropdownInput.id}_hidden`);
                        // --- MODIFICATION END ---

                        // --- MODIFICATION START: Update hidden input and trigger change ---
                        if (hiddenInput) {
                            hiddenInput.value = value;
                            const changeEvent = new Event('change', { bubbles: true });
                            hiddenInput.dispatchEvent(changeEvent);
                        }
                        // --- MODIFICATION END ---

                        // For provider changes, update model options
                        if (settingKey === 'llm.provider' && typeof filterModelOptionsForProvider === 'function') {
                            filterModelOptionsForProvider(value);
                        }

                        // Save to localStorage for persistence
                        if (settingKey === 'llm.model') {
                            // Model saved to DB
                        } else if (settingKey === 'llm.provider') {
                            localStorage.setItem('lastUsedProvider', value);
                        } else if (settingKey === 'search.tool') {
                            // Search engine saved to DB
                        }
                    },
                    allowCustom
                );

                // Set initial value
                if (currentValue && dropdown.setValue) {
                    console.log(`Setting initial value for ${settingKey}:`, currentValue);
                    dropdown.setValue(currentValue, false); // Don't fire event on init
                    // --- MODIFICATION START: Set hidden input initial value ---
                    if (hiddenInput) {
                        hiddenInput.value = currentValue;
                        console.log('Set initial hidden input value for', settingKey, 'to', currentValue);
                    }
                    // --- MODIFICATION END ---
                }

                // --- MODIFICATION START: Add listener to hidden input in initAutoSaveHandlers ---
                // The listener is added globally in initAutoSaveHandlers now.
                // Ensure initAutoSaveHandlers is called *after* setupCustomDropdowns.
                // --- MODIFICATION END ---
            }
        });

        // --- MODIFICATION START: Call initAutoSaveHandlers after setup ---
        // Ensure initAutoSaveHandlers is called after dropdowns are set up
        // It might be better to call initAutoSaveHandlers once after all rendering and setup is done.
        // Let's move the call within initializeSettings() to ensure order.
        initAutoSaveHandlers();
        // --- MODIFICATION END ---
    }

    /**
     * Filter model options based on the selected provider
     * @param {string} provider - The provider to filter models by
     */
    function filterModelOptionsForProvider(provider) {
        const providerUpper = provider ? provider.toUpperCase() : ''; // Handle potential null/undefined
        console.log('Filtering models for provider:', providerUpper);

        // Get model dropdown elements using ID
        const modelInput = document.getElementById('llm.model');
        const modelDropdownList = document.getElementById('setting-llm-model-dropdown-list'); // Correct ID based on template generation
        const modelHiddenInput = document.getElementById('llm.model_hidden');

        if (!modelInput || !modelDropdownList) { // Use correct variable name
            console.warn('Model input or list not found when filtering.');
            return;
        }

        // Check if dropdown is currently open
        const isDropdownOpen = window.getComputedStyle(modelDropdownList).display !== 'none';
        console.log('Dropdown is currently:', isDropdownOpen ? 'open' : 'closed');

        // Filter the models based on provider
        const filteredModels = modelOptions.filter(model => {
            if (!model || typeof model !== 'object') return false;

            // For Ollama, use more flexible matching due to model name variations
            if (providerUpper === 'OLLAMA') {
                // Check model provider property first
                if (model.provider && model.provider.toUpperCase() === 'OLLAMA') {
                    return true;
                }

                // Check label for Ollama mentions
                if (model.label && model.label.toUpperCase().includes('OLLAMA')) {
                    return true;
                }

                // Check value for common Ollama model name patterns
                if (model.value) {
                    const value = model.value.toLowerCase();
                    // Common Ollama model name patterns
                    if (value.includes('llama') || value.includes('mistral') ||
                        value.includes('gemma') || value.includes('falcon') ||
                        value.includes('codellama') || value.includes('phi')) {
                        return true;
                    }
                }

                return false;
            }

            if (providerUpper === 'OPENAI_ENDPOINT') {
                if (model.provider && model.provider.toUpperCase() === 'OPENAI_ENDPOINT') {
                    return true;
                }

                if (model.label && model.label.toLowerCase().includes('custom')) {
                    return true;
                }

                return false;
            }

            // For other providers, use standard matching
            if (model.provider) {
                return model.provider.toUpperCase() === providerUpper;
            }

            // If provider is missing, check label for provider hints
            if (model.label) {
                const label = model.label.toUpperCase();
                if (providerUpper === 'OPENAI' && label.includes('OPENAI'))
                    return true;
                if (providerUpper === 'ANTHROPIC' && (label.includes('ANTHROPIC') || label.includes('CLAUDE')))
                    return true;
            }

            return false;
        });

        console.log(`Filtered models for ${providerUpper}:`, filteredModels.length, 'models');

        // Try to update the dropdown options without reinitializing if possible
        if (window.updateDropdownOptions && typeof window.updateDropdownOptions === 'function') {
            console.log('Using updateDropdownOptions to preserve dropdown state');
            window.updateDropdownOptions(modelInput, filteredModels);

            // Try to maintain the current selection if applicable
            const currentModel = modelHiddenInput ? modelHiddenInput.value : null;
            if (currentModel) {
                // Check if current model is valid for this provider
                const isValid = filteredModels.some(m => m.value === currentModel);
                if (!isValid && filteredModels.length > 0) {
                    // Select first available model if current is not valid
                    const firstModel = filteredModels[0].value;
                    console.log(`Current model ${currentModel} invalid for provider ${providerUpper}. Setting to first available: ${firstModel}`);
                    modelHiddenInput.value = firstModel;
                    modelInput.value = filteredModels[0].label || firstModel;
                }
            }

            // If dropdown was open, ensure it stays open
            if (isDropdownOpen) {
                setTimeout(() => {
                    if (modelDropdownList.style.display === 'none') {
                        console.log('Reopening dropdown that was closed during update');
                        modelDropdownList.style.display = 'block';
                    }
                }, 50);
            }

            return;
        }

        // Backup method - reinitialize the dropdown but try to preserve open state
        if (window.setupCustomDropdown) {
            console.log('Reinitializing model dropdown with filtered models');

            // Store the returned control object
            const modelDropdownControl = window.setupCustomDropdown(
                modelInput,
                modelDropdownList, // Use correct variable name
                () => filteredModels.length > 0 ? filteredModels : [
                    { value: 'no-models', label: 'No models available for this provider' }
                ],
                (value, item) => {
                    console.log('Selected model:', value);
                    // Save the selection
                    if (modelHiddenInput) { // Use the variable we already have
                        modelHiddenInput.value = value;

                        // Trigger change event to save
                        const changeEvent = new Event('change', { bubbles: true });
                        modelHiddenInput.dispatchEvent(changeEvent);
                    }
                },
                true // Allow custom values
            );

            // Try to maintain the current selection if applicable
            const currentModel = modelHiddenInput ? modelHiddenInput.value : null;

            if (currentModel && modelDropdownControl && modelDropdownControl.setValue) {
                // Check if current model is valid for this provider
                const isValid = filteredModels.some(m => m.value === currentModel);
                if (isValid) {
                    console.log(`Setting model value to currently selected: ${currentModel}`);
                    modelDropdownControl.setValue(currentModel, false);
                } else {
                    // Select first available model
                    // *** FIX: Check if filteredModels has elements ***
                    if (filteredModels.length > 0) {
                        const firstModel = filteredModels[0].value;
                        console.log(`Current model ${currentModel} invalid for provider ${providerUpper}. Setting to first available: ${firstModel}`);
                        modelDropdownControl.setValue(firstModel, false); // DON'T fire event, avoid loop
                    } else {
                        // No models available, clear the input
                        console.log(`No models found for provider ${providerUpper}. Clearing model selection.`);
                        modelDropdownControl.setValue("", false);
                    }
                }
            }

            // If dropdown was open, force it to reopen
            if (isDropdownOpen) {
                setTimeout(() => {
                    console.log('Reopening dropdown that was closed during reinitialization');
                    modelDropdownList.style.display = 'block';
                }, 100);
            }
        }

        // Also update any provider-dependent UI
        updateProviderDependentUI(providerUpper);
    }

    /**
     * Update any UI elements that depend on the provider selection
     */
    function updateProviderDependentUI(provider) {
        // Show/hide custom endpoint input if needed
        const endpointContainer = document.querySelector('#endpoint-container');
        if (endpointContainer) {
            if (provider === 'OPENAI_ENDPOINT') {
                endpointContainer.style.display = 'block';
            } else {
                endpointContainer.style.display = 'none';
            }
        }
    }

    /**
     * Set up event listener for provider changes to update model options
     */
    function setupProviderChangeListener() {
        console.log('Setting up provider change listener');
        const providerInput = document.getElementById('llm.provider'); // Use ID selector
        const providerHiddenInput = document.getElementById('llm.provider_hidden');
        console.log(`setupProviderChangeListener: providerInput=${!!providerInput}, providerHiddenInput=${!!providerHiddenInput}`);

        // Function to handle the change
        const handleProviderChange = (selectedValue) => {
            console.log('Provider changed to:', selectedValue);
            if (typeof filterModelOptionsForProvider === 'function') {
                filterModelOptionsForProvider(selectedValue);
            }
            // Update other UI elements if needed
            updateProviderDependentUI(selectedValue ? selectedValue.toUpperCase() : '');
            // No need to explicitly save here, the main auto-save handler for hidden input does it
        };

        if (providerHiddenInput) {
            // Monitor the hidden input for changes (triggered by custom dropdown selection)
            providerHiddenInput.removeEventListener('change', (e) => handleProviderChange(e.target.value)); // Remove previous if any
            providerHiddenInput.addEventListener('change', (e) => handleProviderChange(e.target.value));
            console.log('Re-added provider change listener to hidden input:', providerHiddenInput.id);
        } else if (providerInput && providerInput.tagName === 'SELECT') {
            // Fallback for standard select (shouldn't happen with custom dropdown)
            providerInput.removeEventListener('change', (e) => handleProviderChange(e.target.value));
            providerInput.addEventListener('change', (e) => handleProviderChange(e.target.value));
            console.log('Added change listener to standard provider select');
        } else {
            console.warn('Could not find provider input (hidden or standard select) to attach change listener.');
        }
    }

    /**
     * Constants - model providers
     */
    const MODEL_PROVIDERS = [
        { value: 'OLLAMA', label: 'Ollama (Local)' },
        { value: 'OPENAI', label: 'OpenAI (Cloud)' },
        { value: 'ANTHROPIC', label: 'Anthropic (Cloud)' },
        { value: 'OPENAI_ENDPOINT', label: 'Custom OpenAI Endpoint' },
        { value: 'VLLM', label: 'vLLM (Local)' },
        { value: 'LMSTUDIO', label: 'LM Studio (Local)' },
        { value: 'LLAMACPP', label: 'Llama.cpp (Local)' }
    ];

    /**
     * Load model options for the dropdown
     * @param {boolean} forceRefresh - Force refresh of model options
     * @returns {Promise} Promise that resolves with model options
     */
    function loadModelOptions(forceRefresh = false) {
        // Check if we already have cached models and haven't forced a refresh
        const cachedModels = getCachedData('deepResearch.availableModels');
        const cacheTimestamp = getCachedData('deepResearch.cacheTimestamp');

        if (!forceRefresh && cachedModels && Array.isArray(cachedModels) && cachedModels.length > 0 &&
            cacheTimestamp && (Date.now() - cacheTimestamp < 3600000)) { // 1 hour cache
            console.log('Using cached model options, count:', cachedModels.length);
            modelOptions = cachedModels;
            return Promise.resolve(cachedModels);
        }

        console.log('Loading model options from API' + (forceRefresh ? ' (forced refresh)' : ''));

        return fetchModelProviders(forceRefresh)
            .then(data => {
                // Don't overwrite our model options if the result is empty
                if (data && Array.isArray(data) && data.length > 0) {
                    modelOptions = data;
                    cacheData('deepResearch.availableModels', data);
                    console.log('Stored model options, count:', data.length);
                } else {
                    console.warn('API returned empty model data, keeping existing options');
                }
                return modelOptions;
            })
            .catch(error => {
                console.error('Error loading model options:', error);
                // Log but don't throw, so we can continue with default models if needed
                if (!modelOptions || modelOptions.length === 0) {
                    console.log('Using fallback model options due to error');
                    modelOptions = [
                        { value: 'gpt-4o', label: 'GPT-4o (OpenAI)', provider: 'OPENAI' },
                        { value: 'gpt-3.5-turbo', label: 'GPT-3.5 Turbo (OpenAI)', provider: 'OPENAI' },
                        { value: 'claude-3-5-sonnet-latest', label: 'Claude 3.5 Sonnet (Anthropic)', provider: 'ANTHROPIC' },
                        { value: 'llama3', label: 'Llama 3 (Ollama)', provider: 'OLLAMA' },
                        { value: 'mistral', label: 'Mistral (Ollama)', provider: 'OLLAMA' },
                        { value: 'gemma:latest', label: 'Gemma (Ollama)', provider: 'OLLAMA' }
                    ];
                }
                return modelOptions;
            });
    }

    /**
     * Test notification functionality
     */
    function testNotification() {
        const testBtn = document.getElementById('test-notification-button');
        const resultDiv = document.getElementById('test-notification-result');

        if (!testBtn || !resultDiv) {
            console.error('Test notification elements not found');
            return;
        }

        // Get the service URL from the input field - try multiple possible selectors
        let serviceUrl = '';

        // Try the standard ID formats
        const serviceUrlInput = document.getElementById('notifications-service-url');
        if (serviceUrlInput) {
            serviceUrl = serviceUrlInput.value.trim();
        }

        // Try the alt format if still empty
        if (!serviceUrl) {
            const altInput = document.getElementById('notifications.service_url');
            if (altInput) {
                serviceUrl = altInput.value.trim();
            }
        }

        // Try the dynamically generated format (e.g., setting-notifications-service_url) if still empty
        if (!serviceUrl) {
            const dynamicInput = document.getElementById('setting-notifications-service_url');
            if (dynamicInput) {
                serviceUrl = dynamicInput.value.trim();
            }
        }

        // Also try to find by name attribute if still empty
        if (!serviceUrl) {
            const nameInput = document.querySelector('input[name="notifications.service_url"], textarea[name="notifications.service_url"]');
            if (nameInput) {
                serviceUrl = nameInput.value.trim();
            }
        }

        if (!serviceUrl) {
            showTestResult('No notification service URL configured', 'error');
            return;
        }

        // Disable button and show loading state
        testBtn.disabled = true;
        const originalText = testBtn.innerHTML;
        testBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Testing...';

        // Make API call to test notification
        fetch('/settings/api/notifications/test-url', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCsrfToken()
            },
            body: JSON.stringify({
                service_url: serviceUrl
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showTestResult('Test notification sent successfully!', 'success');
            } else {
                showTestResult(`Test failed: ${data.error || 'Unknown error'}`, 'error');
            }
        })
        .catch(error => {
            console.error('Error testing notification:', error);
            showTestResult('Network error while testing notification', 'error');
        })
        .finally(() => {
            // Re-enable button and restore original text
            testBtn.disabled = false;
            testBtn.innerHTML = originalText;
        });
    }

    /**
     * Show test result message
     * @param {string} message - The message to display
     * @param {string} type - The type of message ('success' or 'error')
     */
    function showTestResult(message, type) {
        const resultDiv = document.getElementById('test-notification-result');
        if (!resultDiv) return;

        resultDiv.textContent = message;
        resultDiv.className = `ldr-test-result ldr-test-${type}`;
        resultDiv.style.display = 'block';

        // Auto-hide after 5 seconds
        setTimeout(() => {
            resultDiv.style.display = 'none';
        }, 5000);
    }

    /**
     * Get CSRF token from meta tag
     */
    function getCsrfToken() {
        const token = document.querySelector('meta[name="csrf-token"]');
        return token ? token.getAttribute('content') : '';
    }

    /**
     * Create a refresh button for a dropdown input
     * @param {string} inputId - The ID of the input to create a refresh button for
     * @param {Function} fetchFunc - The function to call when the button is clicked
     */
    function createRefreshButton(inputId, fetchFunc) {
        console.log('Creating refresh button for', inputId);
        // Check if the input exists
        const input = document.getElementById(inputId);
        if (!input) {
            console.warn(`Cannot create refresh button for non-existent input: ${inputId}`);
            return null;
        }

        // Find the parent container
        const container = input.closest('.form-group');
        if (!container) {
            console.warn(`Cannot find container for input: ${inputId}`);
            return null;
        }

        // Create a new button
        const refreshBtn = document.createElement('button');
        refreshBtn.type = 'button';
        refreshBtn.id = inputId + '-refresh';
        refreshBtn.className = 'ldr-custom-dropdown-refresh-btn';
        refreshBtn.setAttribute('aria-label', 'Refresh options');
        refreshBtn.style.display = 'flex';
        refreshBtn.style.alignItems = 'center';
        refreshBtn.style.justifyContent = 'center';
        refreshBtn.style.width = '38px';
        refreshBtn.style.height = '38px';
        refreshBtn.style.backgroundColor = 'var(--bg-tertiary, #2a2a3a)';
        refreshBtn.style.border = '1px solid var(--border-color, #343452)';
        refreshBtn.style.borderRadius = '6px';
        refreshBtn.style.cursor = 'pointer';
        refreshBtn.style.marginLeft = '8px';

        // Add icon to the button
        const icon = document.createElement('i');
        icon.className = 'fas fa-sync-alt';
        refreshBtn.appendChild(icon);

        // Add event listener to the button
        refreshBtn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();

            console.log('Refresh button clicked for', inputId);
            icon.className = 'fas fa-spinner fa-spin';

            // Reset initialization flags
            if (inputId.includes('llm') || inputId.includes('model')) {
                window.modelDropdownsInitialized = false;
            } else if (inputId.includes('search') || inputId.includes('tool')) {
                window.searchEngineDropdownInitialized = false;
            }

            // Call the function directly as a parameter
            fetchFunc(true).then(() => {
                icon.className = 'fas fa-sync-alt';

                // Re-initialize appropriate dropdowns
                if (inputId.includes('llm') || inputId.includes('model')) {
                    initializeModelDropdowns();
                } else if (inputId.includes('search') || inputId.includes('tool')) {
                    initializeSearchEngineDropdowns();
                }

                showAlert(`Options refreshed`, 'success');
            }).catch(error => {
                console.error('Error refreshing options:', error);
                icon.className = 'fas fa-sync-alt';
                showAlert('Failed to refresh options', 'error');
            });
        });

        // Find the input wrapper or create one
        let inputWrapper = input.parentElement;
        if (inputWrapper.classList.contains('ldr-custom-dropdown-input')) {
            inputWrapper = inputWrapper.parentElement;
        }

        if (inputWrapper) {
            // Add the button after the input
            inputWrapper.style.display = 'flex';
            inputWrapper.style.alignItems = 'center';
            inputWrapper.style.gap = '8px';
            inputWrapper.appendChild(refreshBtn);
            console.log('Created new refresh button for:', inputId);
            return refreshBtn;
        }

        console.warn(`Could not find a suitable place to add refresh button for ${inputId}`);
        return null;
    }
})();
