let codeGetDepartments = '';
let codeGetUsers = '';
let codeDeleteUser = '';
let codeOk = '';
let fetchInterval = null; // Store interval ID
const userElementsMap = new Map(); // Track user elements by ID

document.addEventListener('DOMContentLoaded', async () => {
    const backButton = document.getElementById('backButton');
    backButton.addEventListener('click', async () => {
        await stopFetchingUsers(); // Stop interval before leaving
        await window.networkAPI.closeUcSocket();
        fadeOut('main_menu');
    });

    await startFetchingUsers(); // Start fetching users every 5 seconds
});

async function startFetchingUsers() {
    await fetchData(); // Initial fetch

    // Set interval to fetch users every 5 seconds
    fetchInterval = setInterval(async () => {
        await fetchData();
    }, 5000);
}

async function stopFetchingUsers() {
    if (fetchInterval) {
        clearInterval(fetchInterval); // Stop interval when leaving the page
        fetchInterval = null;
    }
}

async function fetchData() {
    const operationCodes = await window.networkAPI.getOperationsCodes();
    if (!operationCodes) {
        await window.uiAPI.showAlert('Internal error of the application. Failed to retrieve operation codes.');
        return;
    }

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

    if (!await window.networkAPI.openUcSocket()) {
        alert('Failed to open socket. Internal error of the application.');
        return;
    }

    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;

    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;
    updateUsersList(users, departments);
}

function updateUsersList(users, departments) {
    const usersContainer = document.getElementById('users-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);

    const existingUserIds = new Set(filteredUsers.map(user => user.id));

    // Remove users that no longer exist
    userElementsMap.forEach((element, userId) => {
        if (!existingUserIds.has(userId)) {
            element.remove();
            userElementsMap.delete(userId);
        }
    });

    // Update or add users
    filteredUsers.forEach(user => {
        if (!userElementsMap.has(user.id)) {
            // Create new user element
            const userDiv = document.createElement('div');
            userDiv.classList.add('user-card');

            const userInfoDiv = document.createElement('div');
            userInfoDiv.classList.add('user-info');

            const nameP = document.createElement('p');
            nameP.classList.add('user-name');
            nameP.textContent = user.name;

            console.log(user);
            console.log(departments);

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

            const departmentP = document.createElement('p');
            departmentP.classList.add('user-department');
            departmentP.textContent = `Department: ${departmentName}`;

            userInfoDiv.appendChild(nameP);
            userInfoDiv.appendChild(departmentP);

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

            userDiv.appendChild(userInfoDiv);
            userDiv.appendChild(deleteButton);
            usersContainer.appendChild(userDiv);

            userElementsMap.set(user.id, userDiv); // Store reference
        } else {
            // Update existing user info if necessary
            const existingDiv = userElementsMap.get(user.id);
            const nameElement = existingDiv.querySelector('.user-name');
            const departmentElement = existingDiv.querySelector('.user-department');

            if (nameElement.textContent !== user.name) {
                nameElement.textContent = user.name;
            }
            const department = departments.find(dept => dept.id === user.departmentId);
            const departmentName = department ? department.name : 'Unknown';

            if (departmentElement.textContent !== `Department: ${departmentName}`) {
                departmentElement.textContent = `Department: ${departmentName}`;
            }
        }
    });
}

async function fetchDepartments() {
    if (!await window.networkAPI.sendUcMessage(codeGetDepartments)) {
        return null;
    }
    return await waitForResponse();
}

async function fetchUsers() {
    if (!await window.networkAPI.sendUcMessage(codeGetUsers)) {
        return null;
    }
    return await waitForResponse();
}

async function deleteUser(userId) {
    if (!await window.networkAPI.sendUcMessage(codeDeleteUser, { id: userId })) {
        alert('Failed to send request to delete user.');
        return;
    }

    const response = await waitForResponse();
    if (!response || response.operationCode !== codeOk) {
        alert('Failed to delete user.');
        return;
    }

    // Remove user from UI
    if (userElementsMap.has(userId)) {
        userElementsMap.get(userId).remove();
        userElementsMap.delete(userId);
    }
}

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