document.addEventListener('DOMContentLoaded', function() {
    // all available settings
    const fontInputs = document.querySelectorAll('input[name="font-setting"]');
    const themeInputs = document.querySelectorAll('input[name="theme-setting"]');
    const uncapitalizationCheckbox = document.getElementById('uncapitalization');
    const disableBgCheckbox = document.getElementById('disable-bg');
    const disableWindowAnimationsCheckbox = document.getElementById('disable-window-animations');
    const disableFocusAnimationsCheckbox = document.getElementById('disable-focus-animations');
    const disableAlttextCheckbox = document.getElementById('disable-alttext');
    
    // load saved settings
    loadSettings();
    applyTheme();
    
    // event listeners on all inputs
    fontInputs.forEach(input => {
        input.addEventListener('change', saveSettings);
    });
    
    themeInputs.forEach(input => {
        input.addEventListener('change', function() {
            saveSettings();
            applyTheme();
        });
    });
    
    uncapitalizationCheckbox.addEventListener('change', saveSettings);
    disableBgCheckbox.addEventListener('change', saveSettings);
    disableWindowAnimationsCheckbox.addEventListener('change', saveSettings);
    disableFocusAnimationsCheckbox.addEventListener('change', saveSettings);
    disableAlttextCheckbox.addEventListener('change', saveSettings);
    
    // settings saving function
    function saveSettings() {
        // save font setting
        const selectedFont = document.querySelector('input[name="font-setting"]:checked').id;
        localStorage.setItem('accessibility-font', selectedFont);
        
        // save theme setting
        const selectedTheme = document.querySelector('input[name="theme-setting"]:checked').value;
        localStorage.setItem('accessibility-theme', selectedTheme);
        
        // save toggle states
        localStorage.setItem('accessibility-uncapitalization', uncapitalizationCheckbox.checked);
        localStorage.setItem('accessibility-disable-bg', disableBgCheckbox.checked);
        localStorage.setItem('accessibility-disable-window-animations', disableWindowAnimationsCheckbox.checked);
        localStorage.setItem('accessibility-disable-focus-animations', disableFocusAnimationsCheckbox.checked);
        localStorage.setItem('accessibility-disable-alttext', disableAlttextCheckbox.checked);
    }
    
    // settings loading function
    function loadSettings() {
        // load the font setting
        const savedFont = localStorage.getItem('accessibility-font');
        if (savedFont) {
            const fontInput = document.getElementById(savedFont);
            if (fontInput) fontInput.checked = true;
        }
        
        // load the theme setting
        const savedTheme = localStorage.getItem('accessibility-theme');
        if (savedTheme) {
            const themeInput = document.querySelector(`input[name="theme-setting"][value="${savedTheme}"]`);
            if (themeInput) themeInput.checked = true;
        }
        
        // load toggle states
        if (localStorage.getItem('accessibility-uncapitalization') === 'true') {
            uncapitalizationCheckbox.checked = true;
        }
        
        if (localStorage.getItem('accessibility-disable-bg') === 'true') {
            disableBgCheckbox.checked = true;
        }

        if (localStorage.getItem('accessibility-disable-window-animations') === 'true') {
            disableWindowAnimationsCheckbox.checked = true;
        }
        
        if (localStorage.getItem('accessibility-disable-focus-animations') === 'true') {
            disableFocusAnimationsCheckbox.checked = true;
        }
        
        if (localStorage.getItem('accessibility-disable-alttext') === 'true') {
            disableAlttextCheckbox.checked = true;
        }
    }
    
    // apply the theme based on user preference
    function applyTheme() {
        const selectedTheme = document.querySelector('input[name="theme-setting"]:checked').value;
        
        // remove any existing theme
        document.documentElement.removeAttribute('data-theme');
        
        // apply the selected theme
        if (selectedTheme === 'light') {
            document.documentElement.setAttribute('data-theme', 'light');
        } else if (selectedTheme === 'dark') {
            document.documentElement.setAttribute('data-theme', 'dark');
        }
        // if auto, don't set a data-theme attribute, let the media query handle it
    }
});