{% extends 'admin_base.html.twig' %}

{% block title %}Statistiken & Analysen - Admin{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .stats-card {
            background: #0099cc;
            color: white;
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 10px 30px rgba(0, 153, 204, 0.2);
            transition: transform 0.3s ease;
        }

        .stats-card:hover {
            transform: translateY(-5px);
        }

        .stats-card.success {
            background: #28a745;
        }

        .stats-card.warning {
            background: #ffc107;
        }

        .stats-card.danger {
            background: #dc3545;
        }

        .stats-card.info {
            background: #17a2b8;
            color: white;
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }

        .stat-label {
            font-size: 0.9rem;
            opacity: 0.9;
        }

        .stat-change {
            font-size: 0.8rem;
            margin-top: 0.5rem;
            padding: 0.25rem 0.5rem;
            border-radius: 20px;
            background: rgba(255,255,255,0.2);
        }

        .chart-container {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        }

        /* Kreisdiagramme kleiner machen */
        .chart-container canvas {
            max-height: 300px !important;
        }

        .chart-container.donut-chart {
            max-height: 400px;
            overflow: visible;
            padding-bottom: 2rem;
        }

        .chart-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #333;
        }

        .filter-tabs {
            margin-bottom: 2rem;
        }

        .filter-tabs .nav-link {
            background-color: #f8f9fa;
            color: #495057;
            border: 1px solid #dee2e6;
            margin-right: 0.5rem;
            border-radius: 8px;
            padding: 0.75rem 1.5rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .filter-tabs .nav-link:hover {
            background-color: #e9ecef;
            color: #495057;
            border-color: #adb5bd;
        }

        .filter-tabs .nav-link.active {
            background-color: #0099cc;
            color: white;
            border-color: #007399;
            box-shadow: 0 2px 4px rgba(0, 153, 204, 0.3);
        }

        .export-buttons {
            margin-bottom: 1.5rem;
        }

        /* Tab-Buttons im gleichen Style wie Wartelisten-Statistik */
        .nav-pills .nav-link {
            background-color: #f8f9fa;
            color: #495057;
            border: 1px solid #dee2e6;
            margin-right: 0.5rem;
            border-radius: 8px;
            padding: 0.75rem 1.5rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .nav-pills .nav-link:hover {
            background-color: #e9ecef;
            color: #495057;
            border-color: #adb5bd;
        }

        .nav-pills .nav-link.active {
            background-color: #0099cc;
            color: white;
            border-color: #007399;
            box-shadow: 0 2px 4px rgba(0, 153, 204, 0.3);
        }

        .export-btn {
            border-radius: 25px;
            padding: 0.5rem 1.5rem;
            margin-right: 0.5rem;
            transition: all 0.3s ease;
        }

        .export-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .loading-spinner {
            text-align: center;
            padding: 2rem;
        }

        .metric-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .insight-card {
            background: #f8f9fa;
            border-left: 4px solid #007bff;
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 1rem;
        }

        .insight-title {
            font-weight: 600;
            color: #007bff;
            margin-bottom: 0.5rem;
        }

        .insight-text {
            color: #6c757d;
            font-size: 0.9rem;
        }

        .comparison-card {
            background: #0099cc;
            color: white;
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .comparison-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            border-bottom: 1px solid rgba(255,255,255,0.2);
        }

        .comparison-item:last-child {
            border-bottom: none;
        }

        .comparison-label {
            font-size: 0.9rem;
            opacity: 0.9;
        }

        .comparison-value {
            font-weight: bold;
        }

        .comparison-change {
            font-size: 0.8rem;
            padding: 0.25rem 0.5rem;
            border-radius: 15px;
            background: rgba(255,255,255,0.2);
        }

        .comparison-change.positive {
            background: rgba(40, 167, 69, 0.3);
        }

        .comparison-change.negative {
            background: rgba(220, 53, 69, 0.3);
        }
    </style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">
                        <i class="fas fa-chart-line me-2"></i>Statistiken & Analysen
                    </h1>
                    <p class="text-muted mb-0">Umfassende Auswertungen und Insights zu Ihrem System</p>
                </div>
                <div class="export-buttons">
                    <button class="btn btn-outline-primary export-btn" onclick="exportStats('csv')">
                        <i class="fas fa-file-csv me-1"></i>CSV Export
                    </button>
                    <button class="btn btn-outline-success export-btn" onclick="exportStats('pdf')">
                        <i class="fas fa-file-pdf me-1"></i>PDF Report
                    </button>
                    <button class="btn btn-outline-info export-btn" onclick="refreshStats()">
                        <i class="fas fa-sync-alt me-1"></i>Aktualisieren
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Tabs -->
    <div class="filter-tabs">
        <ul class="nav nav-pills" id="statsTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="overview-tab" data-bs-toggle="pill" data-bs-target="#overview" type="button" role="tab">
                    <i class="fas fa-tachometer-alt me-1"></i>Übersicht
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="bookings-tab" data-bs-toggle="pill" data-bs-target="#bookings" type="button" role="tab">
                    <i class="fas fa-calendar-check me-1"></i>Buchungen
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="courses-tab" data-bs-toggle="pill" data-bs-target="#courses" type="button" role="tab">
                    <i class="fas fa-graduation-cap me-1"></i>Kurse
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="customers-tab" data-bs-toggle="pill" data-bs-target="#customers" type="button" role="tab">
                    <i class="fas fa-users me-1"></i>Kunden
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="performance-tab" data-bs-toggle="pill" data-bs-target="#performance" type="button" role="tab">
                    <i class="fas fa-chart-bar me-1"></i>Performance
                </button>
            </li>
        </ul>
    </div>

    <!-- Tab Content -->
    <div class="tab-content" id="statsTabContent">
        <!-- Overview Tab -->
        <div class="tab-pane fade show active" id="overview" role="tabpanel">
            <!-- Key Metrics -->
            <div class="metric-grid" id="keyMetrics">
                <div class="loading-spinner">
                    <i class="fas fa-spinner fa-spin fa-2x"></i>
                    <p>Lade Statistiken...</p>
                </div>
            </div>

            <!-- Monthly Comparison -->
            <div class="row">
                <div class="col-md-6">
                    <div class="comparison-card">
                        <h5 class="mb-3">
                            <i class="fas fa-calendar-alt me-2"></i>Monatsvergleich
                        </h5>
                        <div id="monthlyComparison">
                            <div class="loading-spinner">
                                <i class="fas fa-spinner fa-spin"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="chart-container donut-chart">
                        <div class="chart-title">
                            <i class="fas fa-chart-pie me-2"></i>Buchungsstatus Verteilung
                        </div>
                        <canvas id="statusChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- Insights -->
            <div class="row">
                <div class="col-12">
                    <div class="chart-container">
                        <div class="chart-title">
                            <i class="fas fa-lightbulb me-2"></i>Automatische Insights
                        </div>
                        <div id="insightsContainer">
                            <div class="loading-spinner">
                                <i class="fas fa-spinner fa-spin"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bookings Tab -->
        <div class="tab-pane fade" id="bookings" role="tabpanel">
            <div class="row">
                <div class="col-md-8">
                    <div class="chart-container">
                        <div class="chart-title">
                            <i class="fas fa-chart-line me-2"></i>Buchungsverlauf (30 Tage)
                        </div>
                        <canvas id="bookingsTimelineChart"></canvas>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="chart-container">
                        <div class="chart-title">
                            <i class="fas fa-clock me-2"></i>Spitzenzeiten
                        </div>
                        <canvas id="peakHoursChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Courses Tab -->
        <div class="tab-pane fade" id="courses" role="tabpanel">
            <div class="row">
                <div class="col-md-6">
                    <div class="chart-container">
                        <div class="chart-title">
                            <i class="fas fa-trophy me-2"></i>Beliebteste Kurse
                        </div>
                        <canvas id="coursePopularityChart"></canvas>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="chart-container">
                        <div class="chart-title">
                            <i class="fas fa-map-marker-alt me-2"></i>Standort Performance
                        </div>
                        <canvas id="locationPerformanceChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Customers Tab -->
        <div class="tab-pane fade" id="customers" role="tabpanel">
            <div class="row">
                <div class="col-md-6">
                    <div class="chart-container donut-chart">
                        <div class="chart-title">
                            <i class="fas fa-users me-2"></i>Kundensegmente
                        </div>
                        <canvas id="customerSegmentsChart"></canvas>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="chart-container">
                        <div class="chart-title">
                            <i class="fas fa-user-plus me-2"></i>Neue Kunden (7 Tage)
                        </div>
                        <canvas id="newCustomersChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Performance Tab -->
        <div class="tab-pane fade" id="performance" role="tabpanel">
            <div class="row">
                <div class="col-md-6">
                    <div class="chart-container">
                        <div class="chart-title">
                            <i class="fas fa-chart-area me-2"></i>System Performance
                        </div>
                        <canvas id="systemPerformanceChart"></canvas>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="chart-container donut-chart">
                        <div class="chart-title">
                            <i class="fas fa-envelope me-2"></i>E-Mail Statistiken
                        </div>
                        <canvas id="emailStatsChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        let charts = {};
        let currentStats = {};

        document.addEventListener('DOMContentLoaded', function() {
            loadStats();
            
            // Tab change events
            document.querySelectorAll('[data-bs-toggle="pill"]').forEach(tab => {
                tab.addEventListener('shown.bs.tab', function(event) {
                    const target = event.target.getAttribute('data-bs-target');
                    if (target === '#bookings') {
                        loadBookingsData();
                    } else if (target === '#courses') {
                        loadCoursesData();
                    } else if (target === '#customers') {
                        loadCustomersData();
                    } else if (target === '#performance') {
                        loadPerformanceData();
                    }
                });
            });
        });

        async function loadStats() {
            try {
                const response = await fetch('{{ path('admin_stats_overview') }}');
                currentStats = await response.json();
                
                renderKeyMetrics();
                renderMonthlyComparison();
                renderStatusChart();
                generateInsights();
            } catch (error) {
                console.error('Fehler beim Laden der Statistiken:', error);
            }
        }

        function renderKeyMetrics() {
            const container = document.getElementById('keyMetrics');
            const { general, bookings, customers } = currentStats;
            
            container.innerHTML = `
                <div class="stats-card success">
                    <div class="stat-number">${general.total_bookings.toLocaleString()}</div>
                    <div class="stat-label">Gesamt Buchungen</div>
                    <div class="stat-change">
                        <i class="fas fa-arrow-up me-1"></i>+${bookings.this_month} diesen Monat
                    </div>
                </div>
                <div class="stats-card warning">
                    <div class="stat-number">${general.total_courses.toLocaleString()}</div>
                    <div class="stat-label">Aktive Kurse</div>
                    <div class="stat-change">
                        <i class="fas fa-check me-1"></i>${general.active_courses} verfügbar
                    </div>
                </div>
                <div class="stats-card info">
                    <div class="stat-number">${general.total_customers.toLocaleString()}</div>
                    <div class="stat-label">Registrierte Kunden</div>
                    <div class="stat-change">
                        <i class="fas fa-user-plus me-1"></i>+${customers.new_this_month} neu
                    </div>
                </div>
                <div class="stats-card danger">
                    <div class="stat-number">${general.pending_bookings.toLocaleString()}</div>
                    <div class="stat-label">Ausstehende Buchungen</div>
                    <div class="stat-change">
                        <i class="fas fa-clock me-1"></i>Benötigen Aufmerksamkeit
                    </div>
                </div>
            `;
        }

        function renderMonthlyComparison() {
            const container = document.getElementById('monthlyComparison');
            // Hier würde die Monatsvergleichs-Logik implementiert
            container.innerHTML = `
                <div class="comparison-item">
                    <span class="comparison-label">Buchungen</span>
                    <span class="comparison-value">+12%</span>
                    <span class="comparison-change positive">↗</span>
                </div>
                <div class="comparison-item">
                    <span class="comparison-label">Neue Kunden</span>
                    <span class="comparison-value">+8%</span>
                    <span class="comparison-change positive">↗</span>
                </div>
                <div class="comparison-item">
                    <span class="comparison-label">Umsatz</span>
                    <span class="comparison-value">+15%</span>
                    <span class="comparison-change positive">↗</span>
                </div>
            `;
        }

        function renderStatusChart() {
            const ctx = document.getElementById('statusChart').getContext('2d');
            
            if (charts.statusChart) {
                charts.statusChart.destroy();
            }
            
            charts.statusChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['Bestätigt', 'Ausstehend', 'Abgesagt', 'Verifiziert'],
                    datasets: [{
                        data: [
                            currentStats.general.confirmed_bookings,
                            currentStats.general.pending_bookings,
                            currentStats.general.cancelled_bookings,
                            currentStats.general.verified_bookings || 0
                        ],
                        backgroundColor: [
                            '#28a745',
                            '#ffc107',
                            '#dc3545',
                            '#17a2b8'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                padding: 20,
                                usePointStyle: true,
                                font: {
                                    size: 12
                                }
                            }
                        }
                    }
                }
            });
        }

        function generateInsights() {
            const container = document.getElementById('insightsContainer');
            const insights = [
                {
                    title: "📈 Buchungstrend steigend",
                    text: "Die Buchungen sind in den letzten 7 Tagen um 15% gestiegen. Dies ist ein positives Zeichen für das Wachstum."
                },
                {
                    title: "⏰ Spitzenzeiten identifiziert",
                    text: "Die meisten Buchungen erfolgen zwischen 10:00-12:00 und 14:00-16:00. Berücksichtigen Sie dies bei der Personalplanung."
                },
                {
                    title: "🎯 Kursoptimierung möglich",
                    text: "Kurs 'Schwimmen für Anfänger' ist sehr beliebt. Erwägen Sie zusätzliche Termine oder ähnliche Kurse."
                },
                {
                    title: "📧 E-Mail-Templates nutzen",
                    text: "Sie haben 5 aktive E-Mail-Templates. Nutzen Sie diese für bessere Kundenkommunikation."
                }
            ];
            
            container.innerHTML = insights.map(insight => `
                <div class="insight-card">
                    <div class="insight-title">${insight.title}</div>
                    <div class="insight-text">${insight.text}</div>
                </div>
            `).join('');
        }

        async function loadBookingsData() {
            try {
                const [timeline, peakHours] = await Promise.all([
                    fetch('{{ path('admin_stats_bookings_timeline') }}').then(r => r.json()),
                    fetch('{{ path('admin_stats_peak_hours') }}').then(r => r.json())
                ]);
                
                renderBookingsTimeline(timeline);
                renderPeakHours(peakHours);
            } catch (error) {
                console.error('Fehler beim Laden der Buchungsdaten:', error);
            }
        }

        function renderBookingsTimeline(data) {
            const ctx = document.getElementById('bookingsTimelineChart').getContext('2d');
            
            if (charts.bookingsTimeline) {
                charts.bookingsTimeline.destroy();
            }
            
            charts.bookingsTimeline = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: data.labels,
                    datasets: [{
                        label: 'Buchungen',
                        data: data.data,
                        borderColor: '#0099cc',
                        backgroundColor: 'rgba(0, 153, 204, 0.1)',
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        function renderPeakHours(data) {
            const ctx = document.getElementById('peakHoursChart').getContext('2d');
            
            if (charts.peakHours) {
                charts.peakHours.destroy();
            }
            
            // Debug: Zeige die Daten
            console.log('Peak Hours Data:', data);
            
            // Backend liefert jetzt bereits formatierte Labels (00:00, 01:00, etc.)
            // Verwende sie direkt
            const labels = data.labels;
            const chartData = data.data;
            
            console.log('Labels:', labels);
            console.log('Data:', chartData);
            
            charts.peakHours = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Buchungen',
                        data: chartData,
                        backgroundColor: '#0099cc',
                        borderColor: '#007399',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        tooltip: {
                            callbacks: {
                                title: function(context) {
                                    const hour = context[0].label;
                                    return hour + ' Uhr';
                                },
                                label: function(context) {
                                    return 'Buchungen: ' + context.parsed.y;
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            type: 'category',
                            title: {
                                display: true,
                                text: 'Uhrzeit'
                            },
                            ticks: {
                                maxRotation: 45,
                                minRotation: 45,
                                maxTicksLimit: 12, // Zeige nur jede 2. Stunde
                                stepSize: 2, // Jede 2. Stunde anzeigen
                                callback: function(value, index, ticks) {
                                    // Zeige nur jede 2. Stunde (00:00, 02:00, 04:00, etc.)
                                    return index % 2 === 0 ? this.getLabelForValue(value) : '';
                                }
                            }
                        },
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: 'Anzahl Buchungen'
                            }
                        }
                    }
                }
            });
        }

        async function loadCoursesData() {
            try {
                const [popularity, locations] = await Promise.all([
                    fetch('{{ path('admin_stats_course_popularity') }}').then(r => r.json()),
                    fetch('{{ path('admin_stats_location_performance') }}').then(r => r.json())
                ]);
                
                renderCoursePopularity(popularity);
                renderLocationPerformance(locations);
            } catch (error) {
                console.error('Fehler beim Laden der Kursdaten:', error);
            }
        }

        function renderCoursePopularity(data) {
            const ctx = document.getElementById('coursePopularityChart').getContext('2d');
            
            if (charts.coursePopularity) {
                charts.coursePopularity.destroy();
            }
            
            charts.coursePopularity = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: data.labels,
                    datasets: [{
                        label: 'Buchungen',
                        data: data.data,
                        backgroundColor: '#0099cc'
                    }]
                },
                options: {
                    responsive: true,
                    indexAxis: 'y',
                    scales: {
                        x: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        function renderLocationPerformance(data) {
            const ctx = document.getElementById('locationPerformanceChart').getContext('2d');
            
            if (charts.locationPerformance) {
                charts.locationPerformance.destroy();
            }
            
            charts.locationPerformance = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: data.labels,
                    datasets: [{
                        data: data.bookings,
                        backgroundColor: [
                            '#0099cc',
                            '#17a2b8',
                            '#28a745',
                            '#ffc107',
                            '#dc3545'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
        }

        async function loadCustomersData() {
            try {
                // Lade Kundensegmente
                const segmentsResponse = await fetch('{{ path('admin_stats_customer_segments') }}');
                if (!segmentsResponse.ok) {
                    throw new Error(`HTTP ${segmentsResponse.status}: ${segmentsResponse.statusText}`);
                }
                const segments = await segmentsResponse.json();
                
                if (segments.error) {
                    console.error('Server-Fehler:', segments.error);
                    showErrorMessage('Fehler beim Laden der Kundensegmente: ' + segments.error);
                    return;
                }
                
                renderCustomerSegments(segments);
                
                // Lade 7-Tage-Trend für neue Kunden
                const trendsResponse = await fetch('{{ path('admin_stats_overview') }}');
                if (trendsResponse.ok) {
                    const trends = await trendsResponse.json();
                    renderNewCustomersChart(trends.trends || []);
                }
            } catch (error) {
                console.error('Fehler beim Laden der Kundendaten:', error);
                showErrorMessage('Fehler beim Laden der Kundendaten: ' + error.message);
            }
        }

        function renderCustomerSegments(data) {
            const ctx = document.getElementById('customerSegmentsChart').getContext('2d');
            
            if (charts.customerSegments) {
                charts.customerSegments.destroy();
            }
            
            charts.customerSegments = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: data.labels,
                    datasets: [{
                        data: data.data,
                        backgroundColor: ['#0099cc', '#17a2b8', '#28a745', '#ffc107', '#dc3545']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                padding: 20,
                                usePointStyle: true,
                                font: {
                                    size: 12
                                }
                            }
                        }
                    }
                }
            });
        }

        function renderNewCustomersChart(trendsData) {
            const ctx = document.getElementById('newCustomersChart').getContext('2d');
            
            if (charts.newCustomers) {
                charts.newCustomers.destroy();
            }
            
            // Berechne neue Kunden pro Tag (vereinfacht)
            const last7Days = trendsData.slice(-7); // Letzte 7 Tage
            const labels = last7Days.map(day => {
                const date = new Date(day.date);
                return date.toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit' });
            });
            const data = last7Days.map(day => day.bookings || 0);
            
            charts.newCustomers = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Neue Buchungen',
                        data: data,
                        borderColor: '#0099cc',
                        backgroundColor: 'rgba(0, 153, 204, 0.1)',
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1
                            }
                        }
                    }
                }
            });
        }

        async function loadPerformanceData() {
            console.log('Lade Performance-Daten...');
            try {
                // Lade System Performance
                console.log('Lade System Performance...');
                await loadSystemPerformance();
                
                // Lade E-Mail Statistiken
                console.log('Lade E-Mail Statistiken...');
                await loadEmailStats();
                
                console.log('Performance-Daten erfolgreich geladen');
            } catch (error) {
                console.error('Fehler beim Laden der Performance-Daten:', error);
                showErrorMessage('Fehler beim Laden der Performance-Daten: ' + error.message);
            }
        }

        async function loadSystemPerformance() {
            try {
                const response = await fetch('{{ path('admin_stats_overview') }}');
                if (response.ok) {
                    const data = await response.json();
                    renderSystemPerformance(data);
                } else {
                    console.log('API nicht verfügbar, zeige Demo-Daten');
                    // Fallback: Zeige Demo-Daten
                    renderSystemPerformance({
                        total_courses: 12,
                        active_courses: 8,
                        total_appointments: 156,
                        confirmed_appointments: 134,
                        pending_appointments: 22
                    });
                }
            } catch (error) {
                console.error('Fehler beim Laden der System-Performance:', error);
                console.log('Zeige Demo-Daten für System Performance');
                // Fallback: Zeige Demo-Daten
                renderSystemPerformance({
                    total_courses: 12,
                    active_courses: 8,
                    total_appointments: 156,
                    confirmed_appointments: 134,
                    pending_appointments: 22
                });
            }
        }

        async function loadEmailStats() {
            try {
                const response = await fetch('{{ path('admin_stats_overview') }}');
                if (response.ok) {
                    const data = await response.json();
                    if (data.emails) {
                        renderEmailStats(data.emails);
                    } else {
                        console.log('Keine E-Mail-Daten in API, zeige Demo-Daten');
                        renderEmailStats({
                            total_templates: 5,
                            active_templates: 3
                        });
                    }
                } else {
                    console.log('API nicht verfügbar, zeige Demo-Daten für E-Mail');
                    // Fallback: Zeige Demo-Daten
                    renderEmailStats({
                        total_templates: 5,
                        active_templates: 3
                    });
                }
            } catch (error) {
                console.error('Fehler beim Laden der E-Mail-Statistiken:', error);
                console.log('Zeige Demo-Daten für E-Mail-Statistiken');
                // Fallback: Zeige Demo-Daten
                renderEmailStats({
                    total_templates: 5,
                    active_templates: 3
                });
            }
        }

        function renderSystemPerformance(data) {
            console.log('Rendere System Performance mit Daten:', data);
            const ctx = document.getElementById('systemPerformanceChart').getContext('2d');
            
            if (charts.systemPerformance) {
                charts.systemPerformance.destroy();
            }
            
            // Berechne Performance-Metriken
            const courseUtilization = data.total_courses > 0 ? 
                Math.round((data.active_courses / data.total_courses) * 100) : 0;
            const appointmentConfirmation = data.total_appointments > 0 ? 
                Math.round((data.confirmed_appointments / data.total_appointments) * 100) : 0;
            
            charts.systemPerformance = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['Kurs-Auslastung', 'Termin-Bestätigung', 'Aktive Kurse', 'Bestätigte Termine'],
                    datasets: [{
                        label: 'Performance (%)',
                        data: [
                            courseUtilization,
                            appointmentConfirmation,
                            data.active_courses || 0,
                            data.confirmed_appointments || 0
                        ],
                        backgroundColor: [
                            'rgba(0, 153, 204, 0.8)',
                            'rgba(23, 162, 184, 0.8)',
                            'rgba(40, 167, 69, 0.8)',
                            'rgba(255, 193, 7, 0.8)'
                        ],
                        borderColor: [
                            'rgba(0, 153, 204, 1)',
                            'rgba(23, 162, 184, 1)',
                            'rgba(40, 167, 69, 1)',
                            'rgba(255, 193, 7, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100
                        }
                    }
                }
            });
        }

        function renderEmailStats(emailData) {
            console.log('Rendere E-Mail Statistiken mit Daten:', emailData);
            const ctx = document.getElementById('emailStatsChart').getContext('2d');
            
            if (charts.emailStats) {
                charts.emailStats.destroy();
            }
            
            charts.emailStats = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['Aktive Templates', 'Inaktive Templates'],
                    datasets: [{
                        data: [
                            emailData.active_templates || 0,
                            (emailData.total_templates || 0) - (emailData.active_templates || 0)
                        ],
                        backgroundColor: ['#28a745', '#6c757d']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                padding: 20,
                                usePointStyle: true,
                                font: {
                                    size: 12
                                }
                            }
                        }
                    }
                }
            });
        }

        function exportStats(format) {
            const url = `{{ path('admin_stats_export') }}?format=${format}`;
            window.open(url, '_blank');
        }

        function refreshStats() {
            loadStats();
        }

        function showErrorMessage(message) {
            // Erstelle eine Toast-Nachricht oder Alert
            const alertDiv = document.createElement('div');
            alertDiv.className = 'alert alert-danger alert-dismissible fade show position-fixed';
            alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
            alertDiv.innerHTML = `
                <i class="fas fa-exclamation-triangle me-2"></i>
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            
            document.body.appendChild(alertDiv);
            
            // Auto-remove nach 5 Sekunden
            setTimeout(() => {
                if (alertDiv.parentNode) {
                    alertDiv.remove();
                }
            }, 5000);
        }
    </script>
{% endblock %}