const signupForm = document.getElementById('signupForm');
const vornameInput = document.getElementById('vorname');
const nachnameInput = document.getElementById('nachname');
const emailInput = document.getElementById('email');
const passwortInput = document.getElementById('passwort');
const welcomeModal = document.getElementById('welcomeModal');

// Funktion zum Öffnen des Welcome Modals
function openWelcomeModal() {
    welcomeModal.classList.add('show');
    document.body.style.overflow = 'hidden';
}

// Funktion zum Schließen des Welcome Modals
function closeWelcomeModal() {
    welcomeModal.classList.remove('show');
    document.body.style.overflow = 'auto';
}

// Validierungsfunktion
function validateForm(event) {
    event.preventDefault();
    
    let isValid = true;

    // Vorname-Validierung
    const vornameValue = vornameInput.value.trim();
    const vornameGroup = vornameInput.parentElement;

    if (!vornameValue) {
        vornameGroup.classList.add('has-error');
        isValid = false;
    } else {
        vornameGroup.classList.remove('has-error');
    }

    // Nachname-Validierung
    const nachnameValue = nachnameInput.value.trim();
    const nachnameGroup = nachnameInput.parentElement;

    if (!nachnameValue) {
        nachnameGroup.classList.add('has-error');
        isValid = false;
    } else {
        nachnameGroup.classList.remove('has-error');
    }

    // Email-Validierung
    const emailValue = emailInput.value.trim();
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    const emailGroup = emailInput.parentElement;

    if (!emailValue) {
        emailGroup.classList.add('has-error');
        document.getElementById('emailError').textContent = 'Bitte gib deine E-Mail Adresse ein.';
        isValid = false;
    } else if (!emailRegex.test(emailValue)) {
        emailGroup.classList.add('has-error');
        document.getElementById('emailError').textContent = 'Bitte gib eine gültige E-Mail Adresse ein.';
        isValid = false;
    } else {
        emailGroup.classList.remove('has-error');
    }

    // Passwort-Validierung
    const passwortValue = passwortInput.value;
    const passwortGroup = passwortInput.parentElement;

    if (!passwortValue) {
        passwortGroup.classList.add('has-error');
        document.getElementById('passwortError').textContent = 'Bitte gib ein Passwort ein.';
        isValid = false;
    } else if (passwortValue.length < 8) {
        passwortGroup.classList.add('has-error');
        document.getElementById('passwortError').textContent = 'Dein Passwort muss mindestens 8 Zeichen lang sein.';
        isValid = false;
    } else {
        passwortGroup.classList.remove('has-error');
    }

    // Wenn alle Validierungen bestanden, Modal anzeigen
    if (isValid) {
        openWelcomeModal();
        // Hier würde später die Registrierung zum Backend gesendet
    }
}

// Fehlerbehandlung bei Input-Änderung (entfernt Fehler wenn Benutzer korrigiert)
vornameInput.addEventListener('input', function() {
    const vornameGroup = this.parentElement;
    if (this.value.trim()) {
        vornameGroup.classList.remove('has-error');
    }
});

nachnameInput.addEventListener('input', function() {
    const nachnameGroup = this.parentElement;
    if (this.value.trim()) {
        nachnameGroup.classList.remove('has-error');
    }
});

emailInput.addEventListener('input', function() {
    const emailGroup = this.parentElement;
    if (this.value.trim()) {
        emailGroup.classList.remove('has-error');
    }
});

passwortInput.addEventListener('input', function() {
    const passwortGroup = this.parentElement;
    if (this.value) {
        passwortGroup.classList.remove('has-error');
    }
});

// Modal schließen wenn außerhalb geklickt wird
welcomeModal.addEventListener('click', function(event) {
    if (event.target === welcomeModal) {
        closeWelcomeModal();
    }
});

// Form Submit Event
signupForm.addEventListener('submit', validateForm);