document.addEventListener('DOMContentLoaded', function () {
    console.log('tasks.js wurde geladen.');

    // Funktion zum Anzeigen des Toasts
    function showToast(message, type = 'success') {
        const toastsContainer = document.getElementById('toasts');

        // Erstellen eines neuen Toast-Elements
        const toast = document.createElement('div');
        toast.classList.add('toast-content', `toast-${type}`);

        // Erstellen des Icons
        const icon = document.createElement('i');
        icon.classList.add('fa-solid');
        switch (type) {
            case 'success':
                icon.classList.add('fa-check');
                break;
            case 'error':
                icon.classList.add('fa-times');
                break;
            case 'info':
                icon.classList.add('fa-info-circle');
                break;
            default:
                icon.classList.add('fa-check');
        }
        icon.classList.add('toast-icon'); // Hinzufügen der CSS-Klasse für das Icon

        // Erstellen des Nachrichten-Elements
        const toastMessage = document.createElement('span');
        toastMessage.textContent = message;
        toastMessage.classList.add('toast-message'); // Hinzufügen der CSS-Klasse für den Text

        // Fügen Sie Icon und Nachricht zum Toast hinzu
        toast.appendChild(icon);
        toast.appendChild(toastMessage);

        // Fügen Sie den Toast zum Container hinzu
        toastsContainer.appendChild(toast);

        // Anzeigen des Toasts mit Animation
        requestAnimationFrame(() => {
            toast.classList.add('show');
        });

        // Automatisches Ausblenden nach 3 Sekunden
        setTimeout(() => {
            toast.classList.remove('show');
            // Entfernen des Toasts nach der Animation
            setTimeout(() => {
                toast.remove();
            }, 500); // Muss mit der CSS-Transition übereinstimmen
        }, 3000);
    }

    // Event-Delegation für "Antwort prüfen" Buttons
    document.querySelectorAll('.check-answer').forEach(function (button, index) {
        button.addEventListener('click', function () {
            console.log(`Antwort prüfen Button geklickt. Button Index: ${index}`);
            const variableContainer = this.closest('.variable-container');
            if (!variableContainer) {
                console.error('Variable Container nicht gefunden für Button:', this);
                showToast('Interner Fehler: Container nicht gefunden.', 'error');
                return;
            }
            const input = variableContainer.querySelector('input');
            if (!input) {
                console.error('Input Feld nicht gefunden in Variable Container:', variableContainer);
                showToast('Interner Fehler: Eingabefeld nicht gefunden.', 'error');
                return;
            }
            const userAnswer = input.value.trim();
            const correctAnswer = input.getAttribute('data-correct-answer');
            if (!correctAnswer) {
                console.error('Data-Correct-Answer Attribut fehlt im Input:', input);
                showToast('Interner Fehler: Richtige Antwort nicht verfügbar.', 'error');
                return;
            }

            console.log(`Benutzerantwort: "${userAnswer}", Richtige Antwort: "${correctAnswer}"`);

            if (userAnswer.toLowerCase() === correctAnswer.trim().toLowerCase()) {
                showToast('Richtig!', 'success');
            } else {
                showToast('Falsch.', 'error');
            }
        });
    });

    // Event-Delegation für "Antwort anzeigen" Buttons
    document.querySelectorAll('.show-answer').forEach(function (button, index) {
        button.addEventListener('click', function () {
            console.log(`Antwort anzeigen Button geklickt. Button Index: ${index}`);
            const variableContainer = this.closest('.variable-container');
            if (!variableContainer) {
                console.error('Variable Container nicht gefunden für Button:', this);
                showToast('Interner Fehler: Container nicht gefunden.', 'error');
                return;
            }
            const input = variableContainer.querySelector('input');
            if (!input) {
                console.error('Input Feld nicht gefunden in Variable Container:', variableContainer);
                showToast('Interner Fehler: Eingabefeld nicht gefunden.', 'error');
                return;
            }
            const correctAnswer = input.getAttribute('data-correct-answer');
            if (!correctAnswer) {
                console.error('Data-Correct-Answer Attribut fehlt im Input:', input);
                showToast('Interner Fehler: Richtige Antwort nicht verfügbar.', 'error');
                return;
            }

            console.log(`Richtige Antwort: "${correctAnswer}"`);
            showToast(`Richtige Antwort: ${correctAnswer}`, 'info');
        });
    });
});