/**
 * Airline Tycoon - Main JavaScript
 * Vanilla JS, Mobile-responsive, Touch-friendly
 */

(function() {
    'use strict';

    // ============================================
    // GLOBAL STATE
    // ============================================
    const App = {
        config: {
            basePath: window.BASE_PATH || '/',
            apiTimeout: 10000
        },
        state: {
            theme: localStorage.getItem('theme') || 'light',
            map: null,
            markers: [],
            selectedAirport: null
        }
    };

    // ============================================
    // INITIALIZATION
    // ============================================
    document.addEventListener('DOMContentLoaded', function() {
        initTheme();
        initNavigation();
        initModals();
        initToasts();
        initForms();
        initWorldMap();
        initTouchHandlers();
    });

    // ============================================
    // THEME MANAGEMENT
    // ============================================
    function initTheme() {
        const themeToggle = document.getElementById('themeToggle');
        
        // System-Präferenz prüfen
        if (!localStorage.getItem('theme')) {
            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            App.state.theme = prefersDark ? 'dark' : 'light';
        }
        
        applyTheme(App.state.theme);
        
        if (themeToggle) {
            themeToggle.addEventListener('click', toggleTheme);
        }
    }

    function toggleTheme() {
        App.state.theme = App.state.theme === 'light' ? 'dark' : 'light';
        localStorage.setItem('theme', App.state.theme);
        applyTheme(App.state.theme);
    }

    function applyTheme(theme) {
        document.documentElement.setAttribute('data-theme', theme);
        
        const themeIcon = document.querySelector('#themeToggle, .theme-toggle');
        if (themeIcon) {
            themeIcon.textContent = theme === 'dark' ? '☀️' : '🌙';
        }
    }

    // ============================================
    // NAVIGATION
    // ============================================
    function initNavigation() {
        const navbarToggle = document.querySelector('.navbar-toggle');
        const navbarMenu = document.querySelector('.navbar-menu');
        const navbarOverlay = document.querySelector('.navbar-overlay');

        if (navbarToggle && navbarMenu) {
            navbarToggle.addEventListener('click', function() {
                navbarMenu.classList.toggle('active');
                navbarOverlay?.classList.toggle('active');
            });

            navbarOverlay?.addEventListener('click', function() {
                navbarMenu.classList.remove('active');
                navbarOverlay?.classList.remove('active');
            });
        }

        // Aktive Navigation highlight
        const currentPath = window.location.pathname;
        document.querySelectorAll('.navbar-item').forEach(item => {
            if (item.getAttribute('href') === currentPath) {
                item.classList.add('active');
            }
        });
    }

    // ============================================
    // MODALS
    // ============================================
    function initModals() {
        document.querySelectorAll('[data-modal]').forEach(trigger => {
            trigger.addEventListener('click', function(e) {
                e.preventDefault();
                const modalId = this.getAttribute('data-modal');
                openModal(modalId);
            });
        });

        document.querySelectorAll('.modal-overlay').forEach(overlay => {
            overlay.addEventListener('click', function(e) {
                if (e.target === this) {
                    closeModal(this.id);
                }
            });
        });

        document.querySelectorAll('.modal-close').forEach(btn => {
            btn.addEventListener('click', function() {
                const modal = this.closest('.modal-overlay');
                if (modal) {
                    closeModal(modal.id);
                }
            });
        });

        // ESC Key zum Schließen
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                document.querySelectorAll('.modal-overlay.active').forEach(modal => {
                    closeModal(modal.id);
                });
            }
        });
    }

    function openModal(id) {
        const modal = document.getElementById(id);
        if (modal) {
            modal.classList.add('active');
            document.body.style.overflow = 'hidden';
        }
    }

    function closeModal(id) {
        const modal = document.getElementById(id);
        if (modal) {
            modal.classList.remove('active');
            document.body.style.overflow = '';
        }
    }

    // ============================================
    // TOAST NOTIFICATIONS
    // ============================================
    function initToasts() {
        // Toasts werden dynamisch erstellt
    }

    window.showToast = function(message, type = 'info', duration = 4000) {
        const container = document.getElementById('toastContainer') || createToastContainer();
        
        const toast = document.createElement('div');
        toast.className = `toast toast-${type}`;
        toast.innerHTML = `
            <span>${getToastIcon(type)}</span>
            <span>${escapeHtml(message)}</span>
        `;
        
        container.appendChild(toast);
        
        setTimeout(() => {
            toast.style.animation = 'slideIn 0.3s ease reverse';
            setTimeout(() => toast.remove(), 300);
        }, duration);
    };

    function createToastContainer() {
        const container = document.createElement('div');
        container.id = 'toastContainer';
        container.className = 'toast-container';
        document.body.appendChild(container);
        return container;
    }

    function getToastIcon(type) {
        const icons = {
            success: '✅',
            error: '❌',
            warning: '⚠️',
            info: 'ℹ️'
        };
        return icons[type] || icons.info;
    }

    // ============================================
    // FORM HANDLING
    // ============================================
    function initForms() {
        document.querySelectorAll('form[data-ajax]').forEach(form => {
            form.addEventListener('submit', handleAjaxForm);
        });

        document.querySelectorAll('form').forEach(form => {
            // CSRF Token hinzufügen
            const csrfInput = form.querySelector('input[name="csrf_token"]');
            if (!csrfInput && form.dataset.csrf !== 'false') {
                const token = document.querySelector('meta[name="csrf-token"]');
                if (token) {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'csrf_token';
                    input.value = token.content;
                    form.appendChild(input);
                }
            }

            // Form Validation
            form.addEventListener('submit', function(e) {
                if (!validateForm(this)) {
                    e.preventDefault();
                }
            });
        });
    }

    async function handleAjaxForm(e) {
        e.preventDefault();
        
        const form = e.target;
        const submitBtn = form.querySelector('[type="submit"]');
        const originalText = submitBtn?.textContent;
        
        try {
            if (submitBtn) {
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<span class="loading"></span>';
            }

            const formData = new FormData(form);
            const response = await fetch(form.action || window.location.href, {
                method: form.method || 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });

            const data = await response.json();

            if (response.ok) {
                showToast(data.message || 'Erfolgreich!', 'success');
                
                if (data.redirect) {
                    setTimeout(() => {
                        window.location.href = data.redirect;
                    }, 1000);
                } else if (data.reset && form.dataset.reset !== 'false') {
                    form.reset();
                }
                
                // Callback
                if (typeof window[data.onSuccess] === 'function') {
                    window[data.onSuccess](data);
                }
            } else {
                showToast(data.error || 'Ein Fehler ist aufgetreten', 'error');
            }
        } catch (error) {
            console.error('Form submission error:', error);
            showToast('Netzwerkfehler. Bitte versuche es erneut.', 'error');
        } finally {
            if (submitBtn) {
                submitBtn.disabled = false;
                submitBtn.textContent = originalText;
            }
        }
    }

    function validateForm(form) {
        let isValid = true;
        
        form.querySelectorAll('[required]').forEach(field => {
            if (!field.value.trim()) {
                isValid = false;
                showFieldError(field, 'Dieses Feld ist erforderlich');
            } else {
                clearFieldError(field);
            }
        });

        // Email Validation
        form.querySelectorAll('[type="email"]').forEach(field => {
            if (field.value && !isValidEmail(field.value)) {
                isValid = false;
                showFieldError(field, 'Bitte gib eine gültige E-Mail ein');
            }
        });

        return isValid;
    }

    function showFieldError(field, message) {
        clearFieldError(field);
        
        field.classList.add('error');
        
        const error = document.createElement('div');
        error.className = 'form-error';
        error.textContent = message;
        
        field.parentNode.appendChild(error);
    }

    function clearFieldError(field) {
        field.classList.remove('error');
        
        const error = field.parentNode.querySelector('.form-error');
        if (error) {
            error.remove();
        }
    }

    function isValidEmail(email) {
        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    }

    // ============================================
    // WORLD MAP
    // ============================================
    function initWorldMap() {
        const mapContainer = document.getElementById('mapContainer');
        if (!mapContainer) return;

        // Map Canvas erstellen
        const canvas = document.createElement('canvas');
        canvas.id = 'mapCanvas';
        canvas.className = 'map-canvas';
        mapContainer.appendChild(canvas);

        // Controls erstellen
        const controls = document.createElement('div');
        controls.className = 'map-controls';
        controls.innerHTML = `
            <button class="map-btn" id="mapZoomIn" title="Zoomen">+</button>
            <button class="map-btn" id="mapZoomOut" title="Verkleinern">−</button>
            <button class="map-btn" id="mapReset" title="Zurücksetzen">⟲</button>
        `;
        mapContainer.appendChild(controls);

        // Tooltip erstellen
        const tooltip = document.createElement('div');
        tooltip.className = 'map-tooltip';
        tooltip.id = 'mapTooltip';
        mapContainer.appendChild(tooltip);

        // Map State
        App.state.map = {
            canvas: canvas,
            ctx: canvas.getContext('2d'),
            zoom: 1,
            offsetX: 0,
            offsetY: 0,
            isDragging: false,
            lastX: 0,
            lastY: 0
        };

        // Canvas Größe setzen
        resizeMapCanvas();
        window.addEventListener('resize', resizeMapCanvas);

        // Map Events
        canvas.addEventListener('mousedown', mapMouseDown);
        canvas.addEventListener('mousemove', mapMouseMove);
        canvas.addEventListener('mouseup', mapMouseUp);
        canvas.addEventListener('mouseleave', mapMouseUp);
        canvas.addEventListener('wheel', mapWheel);

        // Touch Events
        canvas.addEventListener('touchstart', mapTouchStart, { passive: false });
        canvas.addEventListener('touchmove', mapTouchMove, { passive: false });
        canvas.addEventListener('touchend', mapTouchEnd);

        // Control Events
        document.getElementById('mapZoomIn')?.addEventListener('click', () => mapZoom(1.2));
        document.getElementById('mapZoomOut')?.addEventListener('click', () => mapZoom(0.8));
        document.getElementById('mapReset')?.addEventListener('click', mapReset);

        // Map laden
        loadMapData();
    }

    function resizeMapCanvas() {
        if (!App.state.map) return;
        
        const rect = App.state.map.canvas.parentElement.getBoundingClientRect();
        App.state.map.canvas.width = rect.width;
        App.state.map.canvas.height = rect.height;
        renderMap();
    }

    async function loadMapData() {
        try {
            const response = await fetch(App.config.basePath + 'api/airports.php?action=list');
            const data = await response.json();
            
            if (data.airports) {
                App.state.airports = data.airports;
                renderMap();
            }
        } catch (error) {
            console.error('Map data loading error:', error);
        }
    }

    function renderMap() {
        if (!App.state.map || !App.state.map.ctx) return;

        const { canvas, ctx, zoom, offsetX, offsetY } = App.state.map;
        
        // Canvas löschen
        ctx.fillStyle = getComputedStyle(document.documentElement)
            .getPropertyValue('--bg-tertiary').trim() || '#e8e0d4';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Weltkarte zeichnen (vereinfacht)
        drawWorldMap(ctx, canvas.width, canvas.height, zoom, offsetX, offsetY);

        // Flughäfen zeichnen
        if (App.state.airports) {
            App.state.airports.forEach(airport => {
                drawAirport(ctx, airport, zoom, offsetX, offsetY);
            });
        }
    }

    function drawWorldMap(ctx, width, height, zoom, offsetX, offsetY) {
        // Vereinfachte Weltkarte mit Kontinenten
        ctx.save();
        ctx.translate(width / 2 + offsetX, height / 2 + offsetY);
        ctx.scale(zoom, zoom);

        // Ozean Hintergrund
        ctx.fillStyle = 'rgba(78, 205, 196, 0.1)';
        ctx.beginPath();
        ctx.ellipse(0, 0, 800, 400, 0, 0, Math.PI * 2);
        ctx.fill();

        // Vereinfachte Kontinente
        const continents = [
            // Nordamerika
            { x: -300, y: -100, points: [[0,0], [100,20], [150,80], [100,150], [0,120], [-50,50]], color: '#6BCB77' },
            // Südamerika
            { x: -100, y: 100, points: [[0,0], [50,20], [60,80], [30,150], [-20,100], [-30,40]], color: '#6BCB77' },
            // Europa
            { x: 100, y: -80, points: [[0,0], [80,10], [100,50], [60,80], [10,60], [-20,20]], color: '#FFD93D' },
            // Afrika
            { x: 120, y: 60, points: [[0,0], [70,10], [90,60], [50,120], [0,80], [-30,30]], color: '#FFD93D' },
            // Asien
            { x: 350, y: -50, points: [[0,0], [150,20], [200,80], [180,150], [100,100], [30,30]], color: '#FF9F43' },
            // Australien
            { x: 450, y: 150, points: [[0,0], [80,20], [90,70], [50,100], [-10,60], [-30,20]], color: '#FF6B6B' }
        ];

        continents.forEach(continent => {
            ctx.fillStyle = continent.color + '40';
            ctx.strokeStyle = continent.color;
            ctx.lineWidth = 2 / zoom;
            
            ctx.beginPath();
            ctx.moveTo(continent.x + continent.points[0][0], continent.y + continent.points[0][1]);
            continent.points.forEach((point, i) => {
                if (i > 0) ctx.lineTo(continent.x + point[0], continent.y + point[1]);
            });
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
        });

        ctx.restore();
    }

    function drawAirport(ctx, airport, zoom, offsetX, offsetY) {
        const { canvas } = App.state.map;
        
        // Koordinaten zu Pixeln konvertieren
        const x = canvas.width / 2 + offsetX + (airport.longitude * 8 * zoom);
        const y = canvas.height / 2 + offsetY + (airport.latitude * -5 * zoom);

        // Sichtbarkeit prüfen
        if (x < -20 || x > canvas.width + 20 || y < -20 || y > canvas.height + 20) return;

        ctx.save();
        
        // Airport Marker
        const isSelected = App.state.selectedAirport?.id === airport.id;
        const radius = (isSelected ? 12 : 8) / zoom;
        
        // Glow für ausgewählten Flughafen
        if (isSelected) {
            ctx.fillStyle = 'rgba(255, 107, 107, 0.3)';
            ctx.beginPath();
            ctx.arc(x, y, radius * 2, 0, Math.PI * 2);
            ctx.fill();
        }

        // Hauptmarker
        ctx.fillStyle = isSelected ? '#FF6B6B' : '#4ECDC4';
        ctx.strokeStyle = '#2c2416';
        ctx.lineWidth = 2 / zoom;
        
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2);
        ctx.fill();
        ctx.stroke();

        // IATA Code
        ctx.fillStyle = '#2c2416';
        ctx.font = `${10 / zoom}px Nunito, sans-serif`;
        ctx.textAlign = 'center';
        ctx.fillText(airport.iata_code, x, y + radius + 14 / zoom);

        ctx.restore();

        // Airport in Marker-Array speichern
        airport.pixelX = x;
        airport.pixelY = y;
    }

    function getAirportFromPixel(x, y) {
        if (!App.state.airports) return null;

        return App.state.airports.find(airport => {
            const dx = Math.abs(airport.pixelX - x);
            const dy = Math.abs(airport.pixelY - y);
            return dx < 20 && dy < 20;
        });
    }

    function mapMouseDown(e) {
        const rect = App.state.map.canvas.getBoundingClientRect();
        App.state.map.isDragging = true;
        App.state.map.lastX = e.clientX - rect.left;
        App.state.map.lastY = e.clientY - rect.top;
        App.state.map.dragStartTime = Date.now();
        App.state.map.dragStartX = App.state.map.offsetX;
        App.state.map.dragStartY = App.state.map.offsetY;
    }

    function mapMouseMove(e) {
        const rect = App.state.map.canvas.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;

        if (App.state.map.isDragging) {
            const dx = x - App.state.map.lastX;
            const dy = y - App.state.map.lastY;
            
            App.state.map.offsetX += dx;
            App.state.map.offsetY += dy;
            
            App.state.map.lastX = x;
            App.state.map.lastY = y;
            
            renderMap();
        } else {
            // Tooltip bei Hover
            const airport = getAirportFromPixel(x, y);
            const tooltip = document.getElementById('mapTooltip');
            
            if (airport) {
                tooltip.innerHTML = `
                    <strong>${airport.iata_code}</strong> - ${airport.name}<br>
                    <small>${airport.city}, ${airport.country}</small><br>
                    <small>Passagiere: ${formatNumber(airport.passenger_volume)}/Jahr</small>
                `;
                tooltip.style.left = (x + 15) + 'px';
                tooltip.style.top = (y - 10) + 'px';
                tooltip.classList.add('visible');
                App.state.map.canvas.style.cursor = 'pointer';
            } else {
                tooltip.classList.remove('visible');
                App.state.map.canvas.style.cursor = 'grab';
            }
        }
    }

    function mapMouseUp(e) {
        if (App.state.map.isDragging) {
            const dragDuration = Date.now() - App.state.map.dragStartTime;
            const dragDistance = Math.abs(App.state.map.offsetX - App.state.map.dragStartX) + 
                               Math.abs(App.state.map.offsetY - App.state.map.dragStartY);
            
            // Klick erkennen (kurze Dauer, little movement)
            if (dragDuration < 200 && dragDistance < 5) {
                const rect = App.state.map.canvas.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                const airport = getAirportFromPixel(x, y);
                
                if (airport) {
                    selectAirport(airport);
                }
            }
        }
        
        App.state.map.isDragging = false;
    }

    function mapWheel(e) {
        e.preventDefault();
        const delta = e.deltaY > 0 ? 0.9 : 1.1;
        mapZoom(delta);
    }

    function mapTouchStart(e) {
        e.preventDefault();
        
        if (e.touches.length === 1) {
            const touch = e.touches[0];
            const rect = App.state.map.canvas.getBoundingClientRect();
            
            App.state.map.isDragging = true;
            App.state.map.lastX = touch.clientX - rect.left;
            App.state.map.lastY = touch.clientY - rect.top;
            App.state.map.dragStartTime = Date.now();
            App.state.map.dragStartX = App.state.map.offsetX;
            App.state.map.dragStartY = App.state.map.offsetY;
            App.state.map.touchStartX = touch.clientX;
            App.state.map.touchStartY = touch.clientY;
        }
    }

    function mapTouchMove(e) {
        e.preventDefault();
        
        if (e.touches.length === 1 && App.state.map.isDragging) {
            const touch = e.touches[0];
            const rect = App.state.map.canvas.getBoundingClientRect();
            const x = touch.clientX - rect.left;
            const y = touch.clientY - rect.top;
            
            const dx = x - App.state.map.lastX;
            const dy = y - App.state.map.lastY;
            
            App.state.map.offsetX += dx;
            App.state.map.offsetY += dy;
            
            App.state.map.lastX = x;
            App.state.map.lastY = y;
            
            renderMap();
        }
    }

    function mapTouchEnd(e) {
        if (App.state.map.isDragging) {
            const touch = e.changedTouches[0];
            const dragDuration = Date.now() - App.state.map.dragStartTime;
            const dragDistance = Math.abs(touch.clientX - App.state.map.touchStartX) + 
                               Math.abs(touch.clientY - App.state.map.touchStartY);
            
            // Tap erkennen
            if (dragDuration < 200 && dragDistance < 10) {
                const rect = App.state.map.canvas.getBoundingClientRect();
                const x = touch.clientX - rect.left;
                const y = touch.clientY - rect.top;
                const airport = getAirportFromPixel(x, y);
                
                if (airport) {
                    selectAirport(airport);
                }
            }
        }
        
        App.state.map.isDragging = false;
    }

    function mapZoom(factor) {
        const newZoom = Math.max(0.5, Math.min(4, App.state.map.zoom * factor));
        
        // Zoom um Mausposition
        const rect = App.state.map.canvas.getBoundingClientRect();
        const mouseX = App.state.map.lastX - rect.width / 2;
        const mouseY = App.state.map.lastY - rect.height / 2;
        
        App.state.map.offsetX = mouseX - (mouseX - App.state.map.offsetX) * factor;
        App.state.map.offsetY = mouseY - (mouseY - App.state.map.offsetY) * factor;
        App.state.map.zoom = newZoom;
        
        renderMap();
    }

    function mapReset() {
        App.state.map.zoom = 1;
        App.state.map.offsetX = 0;
        App.state.map.offsetY = 0;
        renderMap();
    }

    function selectAirport(airport) {
        App.state.selectedAirport = airport;
        renderMap();
        
        // Airport Info Panel aktualisieren
        const infoPanel = document.getElementById('airportInfo');
        if (infoPanel && airport) {
            infoPanel.innerHTML = `
                <h3>${airport.iata_code} - ${airport.name}</h3>
                <p><strong>Stadt:</strong> ${airport.city}, ${airport.country}</p>
                <p><strong>Kontinent:</strong> ${airport.continent}</p>
                <p><strong>Passagiere:</strong> ${formatNumber(airport.passenger_volume)}/Jahr</p>
                <p><strong>Nachfrage:</strong> ${(airport.demand_multiplier * 100).toFixed(0)}%</p>
                <button class="btn btn-primary mt-md" onclick="createRouteFromAirport(${airport.id})">
                    Route erstellen
                </button>
            `;
            infoPanel.classList.add('active');
        }
        
        // Event emit
        document.dispatchEvent(new CustomEvent('airportSelected', { detail: airport }));
    }

    // ============================================
    // TOUCH HANDLERS
    // ============================================
    function initTouchHandlers() {
        // Touch-freundliche Button-Press-Effekte
        document.querySelectorAll('.btn').forEach(btn => {
            btn.addEventListener('touchstart', function() {
                this.classList.add('pressed');
            }, { passive: true });
            
            btn.addEventListener('touchend', function() {
                this.classList.remove('pressed');
            }, { passive: true });
        });
    }

    // ============================================
    // API HELPERS
    // ============================================
    window.api = {
        async get(endpoint, params = {}) {
            const queryString = new URLSearchParams(params).toString();
            const url = App.config.basePath + 'api/' + endpoint + (queryString ? '?' + queryString : '');
            
            const response = await fetch(url, {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });
            
            return response.json();
        },
        
        async post(endpoint, data = {}) {
            const formData = new FormData();
            Object.keys(data).forEach(key => formData.append(key, data[key]));
            
            const response = await fetch(App.config.basePath + 'api/' + endpoint, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });
            
            return response.json();
        }
    };

    // ============================================
    // GAME ACTIONS
    // ============================================
    window.createRouteFromAirport = async function(fromAirportId) {
        const modal = document.getElementById('createRouteModal');
        if (modal) {
            document.getElementById('routeFromAirport').value = fromAirportId;
            openModal('createRouteModal');
        }
    };

    window.executeFlight = async function(routeId, aircraftId) {
        try {
            const result = await api.post('game.php?action=flight', {
                route_id: routeId,
                aircraft_id: aircraftId
            });
            
            if (result.success) {
                showToast(`Flug erfolgreich! +${formatMoney(result.profit)}`, 'success');
                
                // Dashboard aktualisieren
                if (typeof updateDashboard === 'function') {
                    updateDashboard();
                }
            } else {
                showToast(result.error || 'Flug fehlgeschlagen', 'error');
            }
        } catch (error) {
            showToast('Netzwerkfehler', 'error');
        }
    };

    window.purchaseAircraft = async function(type) {
        try {
            const result = await api.post('game.php?action=purchase', {
                aircraft_type: type
            });
            
            if (result.success) {
                showToast(`${type} gekauft für ${formatMoney(result.price)}`, 'success');
                
                // Modal schließen
                const modal = document.getElementById('purchaseAircraftModal');
                if (modal) closeModal('purchaseAircraftModal');
                
                // Dashboard aktualisieren
                if (typeof updateDashboard === 'function') {
                    updateDashboard();
                }
            } else {
                showToast(result.error || 'Kauf fehlgeschlagen', 'error');
            }
        } catch (error) {
            showToast('Netzwerkfehler', 'error');
        }
    };

    // ============================================
    // UTILITIES
    // ============================================
    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    function formatNumber(num) {
        return new Intl.NumberFormat('de-DE').format(num);
    }

    function formatMoney(amount) {
        return new Intl.NumberFormat('de-DE', {
            style: 'currency',
            currency: 'EUR'
        }).format(amount);
    }

    // ============================================
    // EXPORTS
    // ============================================
    window.App = App;
    window.showToast = showToast;
    window.openModal = openModal;
    window.closeModal = closeModal;

})();