document.addEventListener('DOMContentLoaded', async () => {
    const backButton = document.getElementById('backButton');
    const form = document.getElementById('new-department-form');
    const modifyModal = document.getElementById('modify-department-modal');
    const closeModal = document.getElementById('close-modal');
    const confirmModifyButton = document.getElementById('confirm-modify');
    let currentDepartmentId = null;

    // Retrieve operation codes via IPC
    const operationCodes = await window.electronAPI.getOperationsCodes();
    if (!operationCodes) {
        await window.electronAPI.showAlert('Internal error of the application.');
        return;
    }

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

    let codeGetDepartments = operationCodes.GET_DEPARTMENTS;
    let codeCreateDepartment = operationCodes.CREATE_DEPARTMENT;
    let codeModifyDepartment = operationCodes.MODIFY_DEPARTMENT;
    let codeDeleteDepartment = operationCodes.DELETE_DEPARTMENT;
    let codeOk = operationCodes.OK;

    // Set up the back button - close the socket before going back
    backButton.addEventListener('click', async () => {
        await window.electronAPI.closeUcSocket();  // Close the socket when going back
        fadeOut('main_menu'); // Navigate to the main menu
    });

    // Set up the form for creating new departments
    form.addEventListener('submit', async function (event) {
        event.preventDefault(); // Prevent the form from refreshing the page
        const departmentName = document.getElementById('departmentName').value;

        if (departmentName.trim()) {
            await createDepartment(departmentName); // Call createDepartment function when the form is submitted
        }
    });

    // Fetch the departments on page load
    await fetchDepartments();

    // Fetch departments and render them in the left block
    async function fetchDepartments() {
        const departmentsContainer = document.getElementById('departments-container');

        // Send the request to get the departments
        if (!await window.electronAPI.sendUcMessage(codeGetDepartments)) {
            await window.electronAPI.showAlert("Failed to send request.");
            await redirectToMainMenu();
            return;
        }

        const response = await waitForResponse();
        if (!response || response.operationCode !== codeOk) {
            await window.electronAPI.showAlert("Unable to fetch departments.");
            await redirectToMainMenu();
            return;
        }

        departmentsContainer.innerHTML = ''; // Clear any existing data

        const departments = response.metaInfo.departments;

        // Filter out CEO department
        const filteredDepartments = departments.filter(department => department.name.toLowerCase() !== 'ceo');

        // Check if there are no departments after filtering
        if (!filteredDepartments.length) {
            const noDepartmentsMessage = document.createElement('p');
            noDepartmentsMessage.textContent = 'No departments exist.';
            noDepartmentsMessage.classList.add('no-departments-message'); // Add a class for styling
            departmentsContainer.appendChild(noDepartmentsMessage);
            return;
        }

        // Iterate over the remaining departments and render them
        filteredDepartments.forEach(department => {
            const departmentDiv = document.createElement('div');
            departmentDiv.classList.add('department-card');

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

            // Create modify button
            const modifyButton = document.createElement('button');
            modifyButton.textContent = 'Modify';
            modifyButton.classList.add('modify-button');
            modifyButton.dataset.departmentId = department.id;

            // Create delete button
            const deleteButton = document.createElement('button');
            deleteButton.textContent = 'Delete';
            deleteButton.classList.add('delete-button');
            deleteButton.dataset.departmentId = department.id;

            // Append department info and buttons to the department div
            departmentDiv.appendChild(nameDiv);
            departmentDiv.appendChild(modifyButton);
            departmentDiv.appendChild(deleteButton);

            // Append department div to the container
            departmentsContainer.appendChild(departmentDiv);
        });

        // Add click event listeners for all dynamically created buttons
        addEventListenersToButtons();
    }

    // Add event listeners to dynamically created buttons
    function addEventListenersToButtons() {
        const modifyButtons = document.querySelectorAll('.modify-button');
        const deleteButtons = document.querySelectorAll('.delete-button');

        modifyButtons.forEach(button => {
            button.addEventListener('click', () => {
                currentDepartmentId = button.dataset.departmentId;
                openModifyModal(); // Open the modal when modify button is clicked
            });
        });

        deleteButtons.forEach(button => {
            button.addEventListener('click', () => {
                const departmentId = button.dataset.departmentId;
                deleteDepartment(departmentId);
            });
        });
    }

    // Open the modify modal
    function openModifyModal() {
        modifyModal.style.display = 'block';
    }

    // Close the modify modal
    function closeModifyModal() {
        modifyModal.style.display = 'none';
        currentDepartmentId = null;
    }

    // Handle modify modal close event
    closeModal.addEventListener('click', closeModifyModal);

    // Handle department modification
    confirmModifyButton.addEventListener('click', async () => {
        const newDepartmentName = document.getElementById('new-department-name').value;
        if (newDepartmentName.trim() && currentDepartmentId) {
            await modifyDepartment(currentDepartmentId, newDepartmentName);
            closeModifyModal(); // Close the modal after modification
        }
    });

    async function modifyDepartment(departmentId, newName) {
        if (!await window.electronAPI.sendUcMessage(codeModifyDepartment, {
            departmentId: departmentId,
            newDepartmentName: newName
        })) {
            await window.electronAPI.showAlert('Failed to send modification request.');
            return;
        }

        const response = await waitForResponse();
        if (response && response.operationCode === codeOk) {
            await window.electronAPI.showAlert(`Department modified: ${newName}`);
            await fetchDepartments(); // Refresh the department list after modification
        } else {
            await window.electronAPI.showAlert('Failed to modify the department.');
        }
    }

    async function deleteDepartment(departmentId) {
        const confirmDelete = confirm("Are you sure you want to delete this department?");
        if (confirmDelete) {
            if (!await window.electronAPI.sendUcMessage(codeDeleteDepartment, { departmentId })) {
                await window.electronAPI.showAlert('Failed to send delete request.');
                return;
            }

            const response = await waitForResponse();
            if (response && response.operationCode === codeOk) {
                await window.electronAPI.showAlert("Department deleted successfully.");
                await fetchDepartments(); // Refresh the department list after deletion
            } else {
                await window.electronAPI.showAlert("Failed to delete the department.");
            }
        }
    }

    // Function to create a new department
    async function createDepartment(departmentName) {
        if (!await window.electronAPI.sendUcMessage(codeCreateDepartment, { departmentName })) {
            await window.electronAPI.showAlert('Failed to send create request.');
            return;
        }

        const response = await waitForResponse();
        if (response && response.operationCode === codeOk) {
            await window.electronAPI.showAlert(`New department created: ${departmentName}`);
            await fetchDepartments(); // Refresh the department list
        } else {
            await window.electronAPI.showAlert("Failed to create department.");
        }
    }

    // Redirect to main menu
    async function redirectToMainMenu() {
        await window.electronAPI.closeUcSocket();
        fadeOut('main_menu');
    }
});