static/backend.js

class Logger {
    static isDebugMode = false;

    static debug(message, data = null) {
        if (this.isDebugMode) {
            console.log(`[Debug] ${message}`, data || '');
        }
    }

    static error(message, error = null) {
        console.error(`[Error] ${message}`, error || '');
    }

    static initializeDebugMode() {
        try {
            const urlParams = new URLSearchParams(window.location.search);
            this.isDebugMode = urlParams.has('debug');
        } catch (error) {
            console.error('Fehler beim Initialisieren des Debug-Modus:', error);
            this.isDebugMode = false;
        }
    }
}

const utils = {
    showLoading() {
        if (document.body) {
            document.body.classList.add('loading');
            Logger.debug('Loading-Status aktiviert');
        } else {
            Logger.error('document.body nicht verfügbar');
        }
    },

    hideLoading() {
        if (document.body) {
            document.body.classList.remove('loading');
            Logger.debug('Loading-Status deaktiviert');
        } else {
            Logger.error('document.body nicht verfügbar');
        }
    },

    safeGetElement(id) {
        const element = document.getElementById(id);
        if (!element) {
            Logger.error(`Element mit ID '${id}' nicht gefunden`);
            return null;
        }
        return element;
    },

    async withLoading(asyncFn) {
        try {
            this.showLoading();
            await asyncFn();
        } finally {
            this.hideLoading();
        }
    }
};

class BackendManager {
    constructor() {
        this.selectedItems = new Set();
        this.initializeEventListeners();
    }

    initializeEventListeners() {
        // Event-Listener für Dark Mode Toggle
        const darkModeToggle = document.getElementById('darkModeToggle');
        if (darkModeToggle) {
            darkModeToggle.addEventListener('click', () => this.toggleDarkMode());
        }

        // Event-Listener für Aktualisieren-Button
        const refreshButton = document.querySelector(".btn-primary[onclick='refreshData()']");
        if (refreshButton) {
          refreshButton.addEventListener("click", () => {
            this.refreshData();
          });
        }
    }

    toggleDarkMode() {
        document.body.classList.toggle('dark-mode');
        const isDarkMode = document.body.classList.contains('dark-mode');
        localStorage.setItem('darkMode', isDarkMode);

        // Aktualisiere das Icon
        const icon = document.querySelector('#darkModeToggle i');
        if (isDarkMode) {
            icon.classList.remove('bi-moon');
            icon.classList.add('bi-sun');
        } else {
            icon.classList.remove('bi-sun');
            icon.classList.add('bi-moon');
        }
    }

    async updateStats() {
        try {
            const response = await fetch('/backend/stats');
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            const stats = await response.json();
            console.log("Stats from backend:", stats);

            // Aktualisiere die Statistik-Anzeige
            document.getElementById('totalImages').textContent = stats.total_images;
            document.getElementById('totalAlbums').textContent = stats.albums.total;
            document.getElementById('totalCategories').textContent = stats.categories.total;
            document.getElementById('storageUsage').textContent = `${(stats.storage_usage_mb).toFixed(2)} MB`;

        } catch (error) {
            console.error('Fehler beim Laden der Statistiken:', error);
        }
    }

    async refreshData() {
        try {
            await this.updateStats();
            this.showToast('Erfolg', 'Daten erfolgreich aktualisiert', 'success');
        } catch (error) {
            this.showToast('Fehler', 'Fehler beim Aktualisieren der Daten', 'danger');
        }
    }

    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', 'bg-warning');
        toast.classList.add(`bg-${type}`);
        toastTitle.textContent = title;
        toastMessage.textContent = message;

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

// Initialisierung
document.addEventListener('DOMContentLoaded', () => {
    new BackendManager();
    updateStatistics(); // Statistiken beim Laden der Seite abrufen

    // Dark Mode aus localStorage wiederherstellen, falls vorhanden
    if (localStorage.getItem('darkMode') === 'true') {
        document.body.classList.add('dark-mode');
        const icon = document.querySelector('#darkModeToggle i');
        if (icon) {
            icon.classList.remove('bi-moon');
            icon.classList.add('bi-sun');
        }
    }
});