document.addEventListener("DOMContentLoaded", function () {
    const styleSelector = document.getElementById("pygments-style");
    if (!styleSelector) return;

    // Función para actualizar el selector según el tema activo
    function updatePygmentsSelector() {
        const currentTheme = document.body.dataset.theme; // 'light' o 'dark'
        const defaultStyle = currentTheme === "dark" ? "monokai" : "default";

        // Cambiar el valor en el selector
        styleSelector.value = defaultStyle;

        // Aplicar el nuevo estilo
        document.querySelectorAll('link[id^="pygments-"]').forEach(link => link.disabled = true);
        const selectedLink = document.getElementById(`pygments-${defaultStyle}`);
        if (selectedLink) selectedLink.disabled = false;
    }

    // Ejecutar al cargar la página
    updatePygmentsSelector();

    // Escuchar cambios en el selector
    styleSelector.addEventListener("change", function () {
        const selectedStyle = this.value;

        // Deshabilita todos los estilos de Pygments
        document.querySelectorAll('link[id^="pygments-"]').forEach(link => link.disabled = true);

        // Habilita el estilo seleccionado
        const selectedLink = document.getElementById(`pygments-${selectedStyle}`);
        if (selectedLink) selectedLink.disabled = false;
    });

    // Escuchar cambios en el tema y actualizar el selector
    document.getElementById("theme-toggle").addEventListener("click", function () {
        setTimeout(updatePygmentsSelector, 100); // Pequeño delay para que el cambio del tema se aplique
    });
});