const r = document.querySelector(':root');

const fgInput = document.getElementById('foreground-setting');
const bgInput = document.getElementById('background-setting');
const spacingInput = document.getElementById('frame-spacing-setting');
const radiusInput = document.getElementById('frame-border-radius-setting');
const saveBtn = document.getElementById('save-settings-button');
const resetBtn = document.getElementById('reset-settings-button');

let lightMode = false;

const defaultSettings = {
    foreground: "#ba1818",
    background: "#0f0f0f",
    spacing: "15px",
    radius: "10px"
};

saveBtn.addEventListener('click', () => {
    const currentSettings = {
        foreground: fgInput.value,
        background: bgInput.value,
        spacing: spacingInput.value + 'px',
        radius: radiusInput.value + 'px'
    };

    setForegroundColor(currentSettings.foreground);
    setBackgroundColor(currentSettings.background);
    setFrameSpacing(currentSettings.spacing);
    setFrameBorderRadius(currentSettings.radius);

    localStorage.setItem('user-settings', JSON.stringify(currentSettings));
});

resetBtn.addEventListener('click', () => {
    localStorage.setItem('user-settings', JSON.stringify(defaultSettings));
    loadStoredSettings();
    syncSettings();
});

function setForegroundColor(color) {
    r.style.setProperty('--color-foreground', color);
}

function setBackgroundColor(color) {
    r.style.setProperty('--color-background', color);
}

function setFrameSpacing(amount) {
    r.style.setProperty('--frame-spacing', amount);
}

function setFrameBorderRadius(amount) {
    r.style.setProperty('--frame-border-radius', amount);
}

function syncSettings() {
    const rootStyles = getComputedStyle(document.documentElement);

    const varMap = {
        'foreground-setting': '--color-foreground',
        'background-setting': '--color-background',
        'frame-spacing-setting': '--frame-spacing',
        'frame-border-radius-setting': '--frame-border-radius'
    };

    for (const [id, variable] of Object.entries(varMap)) {
        const element = document.getElementById(id);
        
        if (element) {
            let cssValue = rootStyles.getPropertyValue(variable).trim();

            if (element.type === 'number') {
                element.value = parseFloat(cssValue) || 0;
            } else {
                element.value = cssValue;
            }
        }
    }
}

function loadStoredSettings() {
    const saved = localStorage.getItem('user-settings');
    
    if (saved) {
        const settings = JSON.parse(saved);
        
        setForegroundColor(settings.foreground);
        setBackgroundColor(settings.background);
        setFrameSpacing(settings.spacing);
        setFrameBorderRadius(settings.radius);
    }
}

loadStoredSettings();
syncSettings();