let codeOk = '';
let codeGetDepartments = '';
let codeSignUp = '';
let userData = {
    email: null,
    name: null,
    password: null,
    app_type: null,
    departmentId: null
};

document.addEventListener('DOMContentLoaded', async function () {
    const nextToStep2Button = document.getElementById('nextToStep2');
    const backToStep1Button = document.getElementById('backToStep1');
    const submitSignupButton = document.getElementById('submitSignup');
    const backToLogin = document.getElementById('backToLogin');

    const step1 = document.getElementById('step1');
    const step2 = document.getElementById('step2');

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

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

    codeGetDepartments = operationCodes.GET_DEPARTMENTS;
    codeSignUp = operationCodes.SIGN_UP;
    codeOk = operationCodes.OK;

    let departments = await getDepartments();
    if (departments === null) {
        await window.uiAPI.showAlert('Failed to fetch departments.');
        return;
    }

    // Handle form submission for Step 1 (Profile Information)
    nextToStep2Button.addEventListener('click', async function (e) {
        e.preventDefault(); // Prevent the default form submission

        // Collect data from Step 1 inputs
        userData.email = document.querySelector('input[name="email"]').value;
        userData.name = document.querySelector('input[name="name"]').value;
        userData.password = document.querySelector('input[name="password"]').value;
        userData.app_type = await window.databaseAPI.getAppType();

        // Move to Step 2
        const departmentList = document.getElementById('departmentList');
        departmentList.innerHTML = ''; // Clear existing departments

        // Populate department list
        departments.forEach(department => {
            if (department.name !== 'CEO' && department.name !== 'ADMIN') {
                const label = document.createElement('label');
                label.innerHTML = `
                    <input type="radio" name="dept" value="${department.id}">
                    ${department.name}
                `;
                departmentList.appendChild(label);
            }
        });

        switchStep(step1, step2);
    });

    // Handle form submission for Step 2 (Department Selection)
    submitSignupButton.addEventListener('click', async function (e) {
        e.preventDefault(); // Prevent form from being submitted in the usual way

        // Get the selected department
        userData.departmentId = document.querySelector('input[name="dept"]:checked')?.value;
        if (!userData.departmentId) {
            await window.uiAPI.showAlert('Please select a department.');
            return;
        }

        if (!await attemptSignUp()) {
            switchStep(step2, step1);
            return;
        }

        await window.uiAPI.showAlert('Signup successful!');
        await window.uiAPI.changeContent('login');
    });

    // Back to Step 1 from Step 2
    backToStep1Button.addEventListener('click', function () {
        switchStep(step2, step1);
    });

    // Back to login
    backToLogin.addEventListener('click', async function (e) {
        e.preventDefault();
        await window.networkAPI.closeUcSocket();
        await window.uiAPI.changeContent('login');
    });
});

async function getDepartments() {
    if (!await window.electronAPI.sendUcMessage('GET_DEPARTMENTS')) return null;

    const response = await waitForResponse();
    console.log(response);
    if (response && response.operationCode === codeOk) {
        return response.metaInfo.departments;
    }
    return null;
}

async function attemptSignUp() {
    if (!await window.networkAPI.sendUcMessage(codeSignUp, userData)) return false;

    const response = await waitForResponse();
    if (response && response.operationCode === codeOk) {
        return true;
    }
    await window.uiAPI.showAlert(`Signup failed: ${response?.metaInfo?.message || 'Unknown error'}`);
    return false;
}

// Function to switch between steps
function switchStep(fromStep, toStep) {
    fromStep.classList.remove('active'); // Fade out the current step
    setTimeout(() => {
        fromStep.style.display = 'none'; // Hide the current step after transition
        toStep.style.display = 'flex';   // Ensure display is flex for the next step
        setTimeout(() => {
            toStep.classList.add('active'); // Fade in the next step
        }, 20); // Small delay to allow display change before applying opacity
    }, 500);  // Transition duration (0.5s)
}