document.addEventListener("DOMContentLoaded", function(){
    console.log("main.js loaded");
    // Aplicar modo oscuro persistente
    if(localStorage.getItem("darkTheme") === "true"){
        document.body.classList.add("dark-theme");
    }

    // Botón para cambiar el tema
    const themeToggle = document.getElementById("themeToggle");
    if(themeToggle) {
        themeToggle.addEventListener("click", function(){
            document.body.classList.toggle("dark-theme");
            localStorage.setItem("darkTheme", document.body.classList.contains("dark-theme"));
            console.log("Tema cambiado. Estado oscuro:", document.body.classList.contains("dark-theme"));
        });
    } else {
        console.error("No se encontró el botón themeToggle");
    }

    // Actualizar la lista de usuarios activos cada 5 segundos
    function updateActiveUsers() {
        fetch("/active_users")
        .then(response => response.json())
        .then(data => {
            const list = document.getElementById("activeUsersList");
            list.innerHTML = "";
            data.users.forEach(function(user) {
                const li = document.createElement("li");
                li.textContent = user;
                li.style.padding = "4px 0";
                list.appendChild(li);
            });
        })
        .catch(error => console.error("Error:", error));
    }
    setInterval(updateActiveUsers, 5000);
    updateActiveUsers();
});