document.addEventListener('DOMContentLoaded', () => {
    loadVocab();

    document.getElementById('addVocab').addEventListener('click', () => {
        const englishInput = document.getElementById('englishInput').value;
        const germanInput = document.getElementById('germanInput').value;

        if (englishInput && germanInput) {
            fetch('/add_vocab', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: new URLSearchParams({
                    english: englishInput,
                    german: germanInput,
                    level: 1 // Automatisch Level 1 setzen
                })
            }).then(response => response.json())
            .then(data => {
                if (data.success) {
                    loadVocab();

                    document.getElementById('englishInput').value = '';
                    document.getElementById('germanInput').value = '';
                } else {
                    alert(data.error);
                }
            }).catch(error => {
                console.error('Fehler beim Hinzufügen der Vokabel:', error);
            });
        } else {
            alert('Bitte alle Felder ausfüllen.');
        }
    });

    document.getElementById('backToHome').addEventListener('click', () => {
        window.location.href = '/'; // Pfad zur Startseite anpassen
    });
});

function loadVocab() {
    fetch('/get_vocab')
        .then(response => response.json())
        .then(vocabList => {
            const tables = [1, 2, 3, 4, 5].map(level => document.getElementById(`vocab-list-${level}`));
            tables.forEach(table => table.querySelector('tbody').innerHTML = '');

            vocabList.forEach(vocab => {
                const row = document.createElement('tr');
                row.dataset.id = vocab.id;
                row.dataset.level = vocab.level; // Level in dataset speichern
                row.innerHTML = `
                    <td class="editable">${vocab.english}</td>
                    <td class="editable">${vocab.german}</td>
                    <td>
                        <button class="edit-btn">Bearbeiten</button>
                        <button class="delete-btn" data-id="${vocab.id}">Löschen</button>
                    </td>
                `;

                const targetTable = document.getElementById(`vocab-list-${vocab.level}`);
                targetTable.querySelector('tbody').appendChild(row);
            });

            // Event-Listener für den „Löschen“-Button
            document.querySelectorAll('.delete-btn').forEach(btn => {
                btn.addEventListener('click', (event) => {
                    const vocabId = event.target.getAttribute('data-id');
                    fetch(`/delete_vocab/${vocabId}`, {
                        method: 'DELETE'
                    }).then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            loadVocab();
                        } else {
                            alert(data.error);
                        }
                    }).catch(error => {
                        console.error('Fehler beim Löschen der Vokabel:', error);
                    });
                });
            });

            // Event-Listener für den „Bearbeiten“-Button
            document.querySelectorAll('.edit-btn').forEach(btn => {
                btn.addEventListener('click', (event) => {
                    const row = event.target.closest('tr');
                    const id = row.dataset.id;
                    const english = row.children[0].textContent;
                    const german = row.children[1].textContent;
                    const level = row.dataset.level || 1; // Level aus dem dataset lesen, Fallback auf 1

                    // Setze die Zeile in den Bearbeitungsmodus
                    row.innerHTML = `
                        <td><input type="text" class="editable-input" value="${english}"></td>
                        <td><input type="text" class="editable-input" value="${german}"></td>
                        <td class="edit-controls">
                            <div class="level-input-container">
                                <label for="levelInput">Level:</label>
                                <input type="number" id="levelInput" class="level-input" min="1" max="5" value="${level}">
                            </div>
                            <button class="save-btn">Speichern</button>
                            <button class="cancel-btn">Abbrechen</button>
                        </td>
                    `;

                    row.querySelector('.save-btn').addEventListener('click', () => {
                        const englishInput = row.querySelector('.editable-input').value;
                        const germanInput = row.querySelectorAll('.editable-input')[1].value;
                        const levelInput = row.querySelector('#levelInput').value;

                        fetch(`/update_vocab/${id}`, {
                            method: 'PUT',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({
                                english: englishInput,
                                german: germanInput,
                                level: parseInt(levelInput, 10)
                            })
                        }).then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                loadVocab();
                            } else {
                                alert(data.error);
                            }
                        }).catch(error => {
                            console.error('Fehler beim Aktualisieren der Vokabel:', error);
                        });
                    });

                    row.querySelector('.cancel-btn').addEventListener('click', () => {
                        loadVocab();
                    });
                });
            });
        }).catch(error => {
            console.error('Fehler beim Laden der Vokabeln:', error);
        });
}





//sqlite3 anstatt cokkies