document.getElementById('wishForm').addEventListener('submit', async (event) => {
    event.preventDefault();

    const category = document.getElementById('category').value;
    const link = document.getElementById('link').value;
    const title = document.getElementById('title').value;
    const submitBtn = document.getElementById('submitBtn');

    // Modal-Elemente
    const popup = document.getElementById('popup');
    const popupMessage = document.getElementById('popupMessage');
    const popupOverlay = document.getElementById('popupOverlay');
    const modalIcon = document.getElementById('modalIcon');
    const modalTitle = document.getElementById('modalTitle');

    // Button State ändern (Lade-Animation)
    const originalBtnText = submitBtn.textContent;
    submitBtn.textContent = 'Sende... ⏳';
    submitBtn.disabled = true;
    submitBtn.style.opacity = '0.7';

    try {
        const response = await fetch('/api/sendWish', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ category, link, title })
        });

        if (response.ok) {
            modalIcon.textContent = '✅';
            modalTitle.textContent = 'Erfolgreich!';
            popupMessage.textContent = 'Dein Wunsch wurde an den Bot weitergeleitet.';
        } else {
            throw new Error('Server-Fehler');
        }
    } catch (error) {
        modalIcon.textContent = '⚠️';
        modalTitle.textContent = 'Fehler';
        popupMessage.textContent = 'Es ist ein Fehler aufgetreten. Bitte versuche es später erneut.';
        console.error(error);
    } finally {
        // Button Reset
        submitBtn.textContent = originalBtnText;
        submitBtn.disabled = false;
        submitBtn.style.opacity = '1';

        // Popup anzeigen
        popup.style.display = 'block';
        popupOverlay.style.display = 'block';
        
        // Formular zurücksetzen
        event.target.reset();
    }
});

// Popup schließen
document.getElementById('closePopup').addEventListener('click', () => {
    document.getElementById('popup').style.display = 'none';
    document.getElementById('popupOverlay').style.display = 'none';
});

// Schließen beim Klick auf Overlay
document.getElementById('popupOverlay').addEventListener('click', () => {
    document.getElementById('popup').style.display = 'none';
    document.getElementById('popupOverlay').style.display = 'none';
});