document.addEventListener('DOMContentLoaded', () => {
    const refreshButton = document.getElementById('refreshButton');
    const darkModeToggle = document.getElementById('darkModeToggle');
    const newAlbumButton = document.getElementById('newAlbumButton');
    const createAlbumButton = document.getElementById('createAlbumButton');
    const albumTable = document.getElementById('albumTable').querySelector('tbody'); // tbody auswählen
    const albumPageSizeSelect = document.getElementById('albumPageSize');
    const selectAllAlbumsCheckbox = document.getElementById('selectAllAlbums');

    // Mock-Daten (ersetzen durch echte Daten vom Backend)
    let albums = JSON.parse(localStorage.getItem('albums')) || [
        { id: 1, name: 'Urlaub 2022', images: 120, created: '2022-08-15' },
        { id: 2, name: 'Familienfeier', images: 85, created: '2023-01-20' },
    ];

    function saveAlbumsToLocalStorage() {
        localStorage.setItem('albums', JSON.stringify(albums));
    }

    function renderAlbums() {
        albumTable.innerHTML = ''; // Tabelle leeren
        albums.forEach(album => {
            const row = albumTable.insertRow();
            row.innerHTML = `
                <td><input type="checkbox" class="form-check-input item-checkbox" data-type="album" data-id="${album.id}"></td>
                <td>${album.name}</td>
                <td>${album.images}</td>
                <td>${album.created}</td>
                <td><button class="btn btn-danger btn-sm delete-album" data-id="${album.id}"><i class="bi bi-trash"></i></button></td>
            `;
        });
        addDeleteAlbumEventListeners();
    }

    function addDeleteAlbumEventListeners(){
        document.querySelectorAll('.delete-album').forEach(button => {
            button.addEventListener('click', () => {
                const idToDelete = parseInt(button.dataset.id);
                albums = albums.filter(album => album.id !== idToDelete);
                saveAlbumsToLocalStorage();
                renderAlbums();
            });
        });
    }

    function showToast(title, message, type = 'info') {
        const toast = document.getElementById('toast');
        const toastTitle = document.getElementById('toastTitle');
        const toastMessage = document.getElementById('toastMessage');

        toast.classList.remove('bg-success', 'bg-danger', 'bg-info');
        toast.classList.add(`bg-${type}`);
        toastTitle.textContent = title;
        toastMessage.textContent = message;

        const bsToast = new bootstrap.Toast(toast);
        bsToast.show();
    }

    refreshButton.addEventListener('click', () => {
        // Hier würde normalerweise der Datenabruf vom Backend erfolgen
        showToast('Info', 'Daten wurden simuliert aktualisiert.', 'info');
        renderAlbums();
    });

    darkModeToggle.addEventListener('click', () => {
        document.body.classList.toggle('dark-mode');
        localStorage.setItem('darkMode', document.body.classList.contains('dark-mode'));
    });

    if (localStorage.getItem('darkMode') === 'true') {
        document.body.classList.add('dark-mode');
    }

    newAlbumButton.addEventListener('click', () => {
        const newAlbumModal = new bootstrap.Modal(document.getElementById('newAlbumModal'));
        newAlbumModal.show();
    });

    createAlbumButton.addEventListener('click', () => {
        const albumName = document.getElementById('albumName').value;
        const albumDescription = document.getElementById('albumDescription').value;
        if (albumName.trim() === '') {
            showToast("Fehler", "Bitte geben Sie einen Album Namen ein", "danger")
            return;
        }

        const newAlbum = {
            id: albums.length + 1, // Provisorische ID
            name: albumName,
            images: 0,
            created: new Date().toISOString().slice(0, 10),
        };
        albums.push(newAlbum);
        saveAlbumsToLocalStorage();
        renderAlbums();
        document.getElementById('newAlbumForm').reset();
        bootstrap.Modal.getInstance(document.getElementById('newAlbumModal')).hide();
        showToast('Erfolg', 'Album erfolgreich erstellt.', 'success');
    });

    selectAllAlbumsCheckbox.addEventListener('change', () => {
        const itemCheckboxes = document.querySelectorAll(`.item-checkbox[data-type="album"]`);
        itemCheckboxes.forEach(item => item.checked = selectAllAlbumsCheckbox.checked);
    });

    renderAlbums();
});