let codeOk = '';
let codeGetDepartments = '';
let codeCreateDepartment = '';
let codeModifyDepartment = '';
let codeDeleteDepartment = '';

document.addEventListener('DOMContentLoaded', async () => {
    const backButton = document.getElementById('backButton');
    const createButton = document.getElementById('createDepartmentButton');
    const closeCreateModalButton = document.getElementById('closeCreateModal');
    const confirmCreateButton = document.getElementById('confirmCreateButton');

    if (!await window.electronAPI.openUcSocket()) {
        await window.electronAPI.showAlert('Internal error of the application. Unable to open socket.');
        return;
    }

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

    // Show the Create Department Modal
    createButton.addEventListener('click', () => {
        document.getElementById('createDepartmentModal').style.display = 'block';
    });

    // Close Modals
    closeCreateModalButton.addEventListener('click', () => {
        document.getElementById('createDepartmentModal').style.display = 'none';
    });

    // Confirm Create Department
    confirmCreateButton.addEventListener('click', async () => {
        const departmentName = document.getElementById('newDepartmentName').value.trim();
        if (!departmentName) {
            window.electronAPI.showAlert("Please enter a department name.");
            return;
        }

        await createDepartment(departmentName);
        document.getElementById('createDepartmentModal').style.display = 'none';
    });
});

// Example usage to render these dummy departments
async function fetchDepartments() {
    const departmentsContainer = document.getElementById('departments-container');
    departmentsContainer.innerHTML = ''; // Clear any existing data

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

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

    // Send the login message to the server
    if (!await window.electronAPI.sendUcMessage(codeGetDepartments)) {
        await window.electronAPI.showAlert('Failed to send login request.');
        return false;
    }

    // Wait for the response using waitForResponse
    const response = await waitForResponse();

    if(!response || response.operationCode !== codeOk){
        await window.electronAPI.showAlert('Could not fetch departments.');
        return false;
    }

    const departments = response.metaInfo.departments;

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

    if (!filteredDepartments.length) {
        const noDepartmentsMessage = document.createElement('p');
        noDepartmentsMessage.textContent = 'No departments exist.';
        noDepartmentsMessage.classList.add('no-departments-message');
        departmentsContainer.appendChild(noDepartmentsMessage);
        return;
    }

    filteredDepartments.forEach(department => {
        const departmentDiv = document.createElement('div');
        departmentDiv.classList.add('department-card');

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

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

        modifyButton.addEventListener('click', () => {
            console.log(`Modify button clicked for department ID: ${department.id}`);
            openModifyModal(department.id, department.name); // Call the function to open the modify modal
        });

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

        deleteButton.addEventListener('click', async () => {
            console.log(`Delete button clicked for department ID: ${department.id}`);
            await deleteDepartment(department.id); // Call the function to delete the department
        });

        departmentDiv.appendChild(nameDiv);
        departmentDiv.appendChild(modifyButton);
        departmentDiv.appendChild(deleteButton);

        departmentsContainer.appendChild(departmentDiv);
    });

    toggleScroll('departments-container', 370);
}


async function createDepartment(departmentName) {
    if (!await window.electronAPI.sendUcMessage(codeCreateDepartment, { departmentName: departmentName })) {
        await window.electronAPI.showAlert('Failed to send login request.');
        return false;
    }

    // Wait for the response using waitForResponse
    const response = await waitForResponse();

    if(!response || response.operationCode !== codeOk){
        await window.electronAPI.showAlert('Could not create new department.');
        return false;
    }

    await fetchDepartments();
}

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

    // Wait for the response using waitForResponse
    const response = await waitForResponse();

    if(!response || response.operationCode !== codeOk){
        await window.electronAPI.showAlert('Could not modify department.');
        console.log(response.metaInfo.message);
        return false;
    }

    await fetchDepartments();
}

async function deleteDepartment(departmentId) {
    const confirmDelete = confirm("Are you sure you want to delete this department?");
    if (!confirmDelete) return;

    if (!await window.electronAPI.sendUcMessage(codeDeleteDepartment, { departmentId: departmentId })) {
        await window.electronAPI.showAlert('Failed to send delete request.');
        return false;
    }

    const response = await waitForResponse();

    if(!response || response.operationCode !== codeOk){
        await window.electronAPI.showAlert('Could not delete department.');
        return false;
    }

    await fetchDepartments();
}

// Show the Modify Department Modal
function openModifyModal(departmentId, departmentName) {
    document.getElementById('confirmModifyButton').value = departmentId;
    document.getElementById('modifiedDepartmentName').value = departmentName;
    document.getElementById('modifyDepartmentModal').style.display = 'block';

    document.getElementById('closeModifyModal').addEventListener('click', () => {
        document.getElementById('modifyDepartmentModal').style.display = 'none';
    });

    document.getElementById('confirmModifyButton').addEventListener('click', async () => {
        const newDepartmentName = document.getElementById('modifiedDepartmentName').value.trim();
        const departmentId = document.getElementById('confirmModifyButton').value;

        console.log(newDepartmentName, departmentId);

        if (!newDepartmentName || !departmentId) {
            window.electronAPI.showAlert("Please enter a new department name.");
            return;
        }
        await modifyDepartment(departmentId, newDepartmentName);
        document.getElementById('modifyDepartmentModal').style.display = 'none';
    });

}