document.addEventListener('DOMContentLoaded', () => {
    const themeToggle = document.getElementById('theme-toggle');
    const body = document.body;

    // Check for saved theme in localStorage
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
        body.className = savedTheme;
        updateButtonText();
    }

    // Toggle theme on button click
    if (themeToggle) {
        themeToggle.addEventListener('click', () => {
            if (body.classList.contains('light-mode')) {
                body.className = 'dark-mode';
                localStorage.setItem('theme', 'dark-mode');
            } else {
                body.className = 'light-mode';
                localStorage.setItem('theme', 'light-mode');
            }
            updateButtonText();
        });
    }

    // Function to update the button text
    function updateButtonText() {
        if (body.classList.contains('light-mode')) {
            themeToggle.textContent = 'Change to dark theme';
        } else {
            themeToggle.textContent = 'Change to light theme';
        }
    }

    const createUserBtn = document.getElementById('create-user-btn');
    const createUserPopup = document.getElementById('create-user-popup');
    const closePopupBtn = document.getElementById('close-popup-btn');

    // Open the popup
    createUserBtn.addEventListener('click', () => {
        createUserPopup.style.display = 'flex';
    });

    // Close the popup
    closePopupBtn.addEventListener('click', () => {
        createUserPopup.style.display = 'none';
    });

    // Close the popup when clicking outside the popup content
    createUserPopup.addEventListener('click', (e) => {
        if (e.target === createUserPopup) {
            createUserPopup.style.display = 'none';
        }
    });

    const editButtons = document.querySelectorAll('.edit-btn');
    const editUserPopup = document.getElementById('edit-user-popup');
    const closeEditPopupBtn = document.getElementById('close-edit-popup-btn');

    // Open the edit user popup
    editButtons.forEach((button) => {
        button.addEventListener('click', (e) => {
            const userElement = e.target.closest('li');
            const username = userElement.querySelector('.user-name').textContent;
            const role = userElement.querySelector('.user-role').textContent.split(': ')[1];
            const userId = userElement.dataset.userId;

            // Populate the form fields
            document.getElementById('edit-user-id').value = userId;
            document.getElementById('edit-username').value = username;
            document.getElementById('edit-role').value = role;

            // Show the popup
            editUserPopup.style.display = 'flex';
        });
    });

    // Close the edit user popup
    closeEditPopupBtn.addEventListener('click', () => {
        editUserPopup.style.display = 'none';
    });

    // Close the popup when clicking outside the popup content
    editUserPopup.addEventListener('click', (e) => {
        if (e.target === editUserPopup) {
            editUserPopup.style.display = 'none';
        }
    });

    const deleteButtons = document.querySelectorAll('.delete-btn');
    const deleteUserPopup = document.getElementById('delete-user-popup');
    const closeDeletePopupBtn = document.getElementById('close-delete-popup-btn');
    const deleteUsernameSpan = document.getElementById('delete-username');
    const deleteUserIdInput = document.getElementById('delete-user-id');

    // Open the delete user popup
    deleteButtons.forEach((button) => {
        button.addEventListener('click', (e) => {
            const userElement = e.target.closest('li');
            const username = userElement.querySelector('.user-name').textContent;
            const userId = userElement.dataset.userId;

            // Populate the popup with user details
            deleteUsernameSpan.textContent = username;
            deleteUserIdInput.value = userId;

            // Show the popup
            deleteUserPopup.style.display = 'flex';
        });
    });

    // Close the delete user popup
    closeDeletePopupBtn.addEventListener('click', () => {
        deleteUserPopup.style.display = 'none';
    });

    // Close the popup when clicking outside the popup content
    deleteUserPopup.addEventListener('click', (e) => {
        if (e.target === deleteUserPopup) {
            deleteUserPopup.style.display = 'none';
        }
    });
});