document.getElementById('registerForm').addEventListener('submit', async function (e) {
    e.preventDefault();

    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    const confirmPassword = document.getElementById('confirm_password').value;

    if (password !== confirmPassword) {
        showError(['Passwords are different!']);
        return;
    }

    const userData = {
        email,
        description: "string",
        activated: true,
        password
    };

    try {
        const response = await fetch('http://localhost:8000/user_create', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(userData)
        });

        if (response.ok) {
            window.location.href = './../login/index.html';
        } else {
            const err = await response.json();
            if (Array.isArray(err.detail)) {
                const messages = err.detail.map(e => {
                    const field = e.loc.filter(locPart => locPart !== 'body').join(' -> ');
                    return `${field}: ${e.msg}`;
                });
                showError(messages);
            } else if (typeof err.detail === 'string') {
                showError([err.detail]);
            }
        }
    } catch {
        showError(['Connection timeout']);
    }
});

function showError(messages) {
    let errorElem = document.getElementById('formError');
    let container = document.getElementById('glass-container');
    if (!errorElem) {
        errorElem = document.createElement('div');
        errorElem.style.transition = "3s";
        errorElem.id = 'formError';
        errorElem.style.color = 'red';
        errorElem.style.marginTop = '20px';
        errorElem.style.fontSize = "14px";
        errorElem.style.fontWeight="100";
        errorElem.style.marginBottom='20px';
        errorElem.style.lineHeight = "120%";
        container.style.height = "auto";
        const form = document.getElementById('registerForm');
        form.insertAdjacentElement('afterend', errorElem);
    };
    errorElem.innerHTML = '';
    messages.forEach(msg => {
        const li = document.createElement('li');
        li.style.listStyleType="none";
        li.textContent = msg;
        errorElem.appendChild(li);
    });
}