document.addEventListener('DOMContentLoaded', () => {
    // Obtén el elemento del tema
    const themeStylesheet = document.getElementById('theme-stylesheet');
    const themeToggle = document.getElementById('theme-toggle');
    
    if (!themeStylesheet || !themeToggle) {
        console.error("No se encontró el theme-stylesheet o theme-toggle");
        return;
    }

    // Guarda las URLs del tema oscuro y claro desde los atributos data
    const lightThemeURL = themeStylesheet.getAttribute('data-light');
    const darkThemeURL = themeStylesheet.getAttribute('data-dark');

    // Función para activar el tema
    const activateTheme = (theme) => {
        themeStylesheet.href = theme === 'dark' ? darkThemeURL : lightThemeURL;
        document.body.setAttribute('data-theme', theme);
        localStorage.setItem('theme', theme);
    };

    // Función para cambiar el estilo de Pygments
    const changePygmentsStyle = (style) => {
        const pygmentsStylesheets = {};
        document.querySelectorAll('link[id^="pygments-"]').forEach(sheet => {
            pygmentsStylesheets[sheet.id.replace('pygments-', '')] = sheet;
        });

        Object.entries(pygmentsStylesheets).forEach(([key, sheet]) => {
            sheet.disabled = (key !== style);
        });

        localStorage.setItem('pygments-style', style);
    };

    // Recuperar el tema guardado en localStorage o usar 'light' por defecto
    let savedTheme = localStorage.getItem('theme') || 'light';
    activateTheme(savedTheme);

    // Recuperar el estilo de Pygments guardado o usar el predeterminado
    let savedPygmentsStyle = localStorage.getItem('pygments-style') || (savedTheme === 'dark' ? 'monokai' : 'default');
    changePygmentsStyle(savedPygmentsStyle);

    // Actualizar el contenido del botón de tema
    themeToggle.innerHTML = `<i class="fas fa-adjust me-1"></i> ${savedTheme === 'dark' ? 'Light Mode' : 'Dark Mode'}`;

    // Manejar el clic en el botón de alternar tema
    themeToggle.addEventListener('click', (e) => {
        e.preventDefault(); // Evitar comportamiento por defecto del enlace

        // Alternar el tema
        savedTheme = savedTheme === 'dark' ? 'light' : 'dark';
        activateTheme(savedTheme);

        // Actualizar el contenido del botón
        themeToggle.innerHTML = `<i class="fas fa-adjust me-1"></i> ${savedTheme === 'dark' ? 'Light Mode' : 'Dark Mode'}`;

        // Cambiar el estilo de Pygments según el tema
        const defaultStyle = savedTheme === 'dark' ? 'monokai' : 'default';
        changePygmentsStyle(defaultStyle);

        // Guardar en localStorage
        localStorage.setItem('pygments-style', defaultStyle);

        // Enviar el tema al servidor para persistencia en sesión
        fetch('/update-theme', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ theme: savedTheme })
        }).then(response => {
            if (response.ok) {
                console.log('Theme updated on server');
            } else {
                console.error('Failed to update theme on server');
            }
        }).catch(err => console.error('Fetch error:', err));
    });
});