document.addEventListener("DOMContentLoaded", function () {
    const navLinks = document.querySelectorAll(".sidebar .nav-item .nav-link");
    const currentUrl = window.location.href.split('#')[0]; // Base URL without hash

    navLinks.forEach((link) => {
        const linkUrl = link.href.split('#')[0]; // Base URL of the link without hash
        const linkHash = link.href.split('#')[1]; // Extract the hash (if present) from the link

        // Compare base URLs to set active class for different pages
        if (currentUrl === linkUrl) {
            // If there is no hash (e.g., home link), mark it active
            if (!window.location.hash && !linkHash) {
                link.classList.add("active");
            }

            // Check if the current URL hash matches the link's hash
            if (window.location.hash && window.location.hash.substring(1) === linkHash) {
                link.classList.add("active");
            }
        }

        // Handle click events to update the active class
        link.addEventListener("click", function () {
            navLinks.forEach((nav) => nav.classList.remove("active"));
            link.classList.add("active");
        });
    });
});
document.getElementById("sidebarToggle").addEventListener("click", function () {
    const sidebar = document.getElementById("accordionSidebar");
    const contentWrapper = document.getElementById("content-wrapper");

    // Toggle minimized class for sidebar
    sidebar.classList.toggle("minimized");

    // Adjust content based on sidebar state
    if (sidebar.classList.contains("minimized")) {
        contentWrapper.classList.add("collapsed");
        contentWrapper.classList.remove("expanded");
    } else {
        contentWrapper.classList.add("expanded");
        contentWrapper.classList.remove("collapsed");
    }
});

document.addEventListener("DOMContentLoaded", function () {
    const toggleTabularIntro = document.getElementById("toggleIntro");
    const tabularIntroContent = document.getElementById("introContent");

    toggleTabularIntro.addEventListener("click", function () {
        const isExpanded = tabularIntroContent.classList.contains("show");
        toggleTabularIntro.querySelector("span").textContent = isExpanded ? "Read More" : "Read Less";
        toggleTabularIntro.querySelector("i").classList.toggle("fa-chevron-up", !isExpanded);
        toggleTabularIntro.querySelector("i").classList.toggle("fa-chevron-down", isExpanded);
    });
});

document.addEventListener("DOMContentLoaded", function () {
    const datasetButtons = document.querySelectorAll(".btn-dataset");

    datasetButtons.forEach((button) => {
        button.addEventListener("click", function () {
            // Remove "active" class from all buttons
            datasetButtons.forEach((btn) => btn.classList.remove("active"));

            // Add "active" class to the clicked button
            this.classList.add("active");
        });
    });
});


if (document.getElementById("backToDatasetButton")) {
    document.getElementById("backToDatasetButton").addEventListener("click", function () {
        // Redirect to the dataset selection section
        window.location.href = "/#dataset_selection";
    });
}

if (document.getElementById("viewCounterfactualsButton")) {
    document.getElementById("viewCounterfactualsButton").addEventListener("click", function () {
        // Redirect to the counterfactuals view section
        window.location.href = "/counterfactuals.html";
    });
}

if (document.getElementById("viewPreTrainedButton")) {
    document.getElementById("viewPreTrainedButton").addEventListener("click", function () {
        // Redirect to the pre trained view section
        window.location.href = "/charts.html"; 
    });
}

// JavaScript to handle delete functionality
document.addEventListener("DOMContentLoaded", function () {

    document.getElementById("radio_buttons").addEventListener("click", function (event) {        
        // Identify if the click originated from the button or its child span
        let targetButton = event.target.closest(".delete-file-icon");
        console.log(targetButton)
        // Only proceed if a delete-file-icon button was clicked
        if (targetButton) {
            // Get the filename from the data-file attribute
            const fileName = targetButton.getAttribute("data-file");

            const fileNameValue = targetButton.getAttribute("data-file-value");

            // Set the file name in the modal for display
            document.getElementById("fileToDeleteName").innerText = fileName;

            // Set the filename in the confirm button for reference during deletion
            document.getElementById("confirmDeleteButton").setAttribute("data-file", fileName);

            document.getElementById("confirmDeleteButton").setAttribute("data-file-value", fileNameValue);

            // Show the delete confirmation modal
            $('#deleteFileModal').modal('show');
        }
    });
});