document.addEventListener('DOMContentLoaded', async () => {
    const backButton = document.getElementById('backButton');
    backButton.addEventListener('click', async () => {
        await window.electronAPI.closeUcSocket();
        fadeOut('main_menu');
    });

    const operationCodes = await window.electronAPI.getOperationsCodes();
    if (!operationCodes) {
        alert('Internal error of the application.');
        return;
    }

    // Open the TCP socket right after fetching the operation codes
    if (!await window.electronAPI.openUcSocket()) {
        alert('Failed to open socket. Internal error of the application.');
        return;
    }

    let codeGetDepartments = operationCodes.GET_DEPARTMENTS;
    let codeGetUsers = operationCodes.GET_USERS;
    let codeDeleteUser = operationCodes.DELETE_USER;
    let codeOk = operationCodes.OK;

    // Fetch both users and departments, then display the users with their departments
    async function fetchData() {
        try {
            // Fetch departments
            const departmentsResponse = await fetchDepartments();
            if (!departmentsResponse || departmentsResponse.operationCode !== codeOk) {
                alert('Failed to fetch departments. Redirecting to main menu...');
                await redirectToMainMenu();
                return;
            }

            const departments = departmentsResponse.metaInfo.departments;

            // Fetch users
            const usersResponse = await fetchUsers();
            if (!usersResponse || usersResponse.operationCode !== codeOk) {
                alert('Failed to fetch users. Redirecting to main menu...');
                await redirectToMainMenu();
                return;
            }

            const users = usersResponse.metaInfo.users;

            const usersContainer = document.getElementById('users-container');
            usersContainer.innerHTML = ''; // Clear the container

            // Filter out users in the CEO department
            const ceoDepartment = departments.find(dept => dept.name.toLowerCase() === 'ceo');
            const filteredUsers = users.filter(user => user.departmentId !== ceoDepartment.id);

            // Check if there are no users after filtering
            if (!filteredUsers.length) {
                const noUsersMessage = document.createElement('p');
                noUsersMessage.textContent = 'No users exist.';
                noUsersMessage.classList.add('no-users-message'); // Add a class for styling
                usersContainer.appendChild(noUsersMessage);
                fadeIn(); // Fade in the container when the message is loaded
                return;
            }

            // Render users if there are any
            filteredUsers.forEach(user => {
                const userDiv = document.createElement('div');
                userDiv.classList.add('user-card');

                // Create user name div
                const nameDiv = document.createElement('div');
                nameDiv.classList.add('user-name');
                nameDiv.textContent = user.name;

                // Find the user's department name using departmentId
                const department = departments.find(dept => dept.id === user.departmentId);
                const departmentName = department ? department.name : 'Unknown';

                // Create department div
                const departmentDiv = document.createElement('div');
                departmentDiv.classList.add('user-department');
                departmentDiv.textContent = `Department: ${departmentName}`;

                // Create delete button
                const deleteButton = document.createElement('button');
                deleteButton.textContent = 'Delete';
                deleteButton.classList.add('delete-button');
                deleteButton.onclick = () => deleteUser(user.id);

                // Append user info and delete button to the user div
                userDiv.appendChild(nameDiv);
                userDiv.appendChild(departmentDiv);
                userDiv.appendChild(deleteButton);

                // Append user div to the container
                usersContainer.appendChild(userDiv);
            });

            fadeIn(); // Fade in the container when the users are loaded
        } catch (error) {
            console.error('Error fetching data:', error);
            alert('An unexpected error occurred. Redirecting to main menu...');
            await redirectToMainMenu();
        }
    }

    async function fetchDepartments() {
        // Send the request to get departments
        if (!await window.electronAPI.sendUcMessage(codeGetDepartments)) {
            return null;
        }
        return await waitForResponse();
    }

    async function fetchUsers() {
        // Send the request to get users
        if (!await window.electronAPI.sendUcMessage(codeGetUsers)) {
            return null;
        }
        return await waitForResponse();
    }

    async function deleteUser(userId) {
        // Find the index of the user in the dummy data
        const userIndex = dummyUsers.findIndex(user => user.id === userId);

        // If user found, remove it from the array
        if (userIndex !== -1) {
            dummyUsers.splice(userIndex, 1);
            alert(`User with ID ${userId} deleted.`);
            await fetchData(); // Refresh the users after deleting
        }
    }

    async function redirectToMainMenu() {
        await window.electronAPI.closeUcSocket();
        fadeOut('main_menu');
    }

    // Fetch data on page load
    await fetchData();
});