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

{% block title %}Wartelisten-Analyse{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">
                <i class="fas fa-clock text-warning me-2"></i>
                Wartelisten-Analyse
            </h1>
            <p class="text-muted mb-0">Analyse der Wartelisten-Nachfrage und Standort-Empfehlungen</p>
        </div>
        <div>
            <button class="btn btn-outline-primary me-2" onclick="refreshData()">
                <i class="fas fa-sync-alt me-1"></i>Aktualisieren
            </button>
            <button class="btn btn-primary" onclick="exportAnalysis()">
                <i class="fas fa-download me-1"></i>Export
            </button>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="row mb-4" id="summaryCards">
        <div class="col-md-3">
            <div class="card stat-card bg-warning text-white">
                <div class="card-body text-center">
                    <div class="stat-number" id="totalWaitingList">-</div>
                    <div class="stat-label">Gesamte Wartelisten</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card bg-info text-white">
                <div class="card-body text-center">
                    <div class="stat-number" id="coursesWithWaitingList">-</div>
                    <div class="stat-label">Kurse mit Warteliste</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card bg-success text-white">
                <div class="card-body text-center">
                    <div class="stat-number" id="averageWaitingList">-</div>
                    <div class="stat-label">Ø Wartelisten pro Kurs</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card bg-danger text-white">
                <div class="card-body text-center">
                    <div class="stat-number" id="highDemandCourses">-</div>
                    <div class="stat-label">Hohe Nachfrage</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabs -->
    <ul class="nav nav-pills mb-4" id="analysisTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="courses-tab" data-bs-toggle="pill" data-bs-target="#courses" type="button" role="tab">
                <i class="fas fa-graduation-cap me-1"></i>Kurs-Analyse
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="locations-tab" data-bs-toggle="pill" data-bs-target="#locations" type="button" role="tab">
                <i class="fas fa-map-marker-alt me-1"></i>Standort-Analyse
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="recommendations-tab" data-bs-toggle="pill" data-bs-target="#recommendations" type="button" role="tab">
                <i class="fas fa-lightbulb me-1"></i>Empfehlungen
            </button>
        </li>
    </ul>

    <!-- Tab Content -->
    <div class="tab-content" id="analysisTabContent">
        <!-- Kurs-Analyse Tab -->
        <div class="tab-pane fade show active" id="courses" role="tabpanel">
            <div class="row">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-chart-bar me-2"></i>Wartelisten nach Kursen
                            </h5>
                        </div>
                        <div class="card-body chart-container">
                            <canvas id="waitingListChart" height="300"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-pie-chart me-2"></i>Zielgruppen-Verteilung
                            </h5>
                        </div>
                        <div class="card-body chart-container">
                            <canvas id="targetGroupChart" height="250"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Kurs-Tabelle -->
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-table me-2"></i>Detaillierte Kurs-Analyse
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover" id="coursesTable">
                            <thead class="table-light">
                                <tr>
                                    <th>Kurs</th>
                                    <th>Standort</th>
                                    <th>Zielgruppe</th>
                                    <th>Warteliste</th>
                                    <th>Kapazität</th>
                                    <th>Auslastung</th>
                                    <th>Wartelisten-Ratio</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody id="coursesTableBody">
                                <tr>
                                    <td colspan="8" class="text-center">
                                        <div class="spinner-border text-primary" role="status">
                                            <span class="visually-hidden">Lade...</span>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Standort-Analyse Tab -->
        <div class="tab-pane fade" id="locations" role="tabpanel">
            <div class="row">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-chart-line me-2"></i>Wartelisten-Druck nach Standorten
                            </h5>
                        </div>
                        <div class="card-body chart-container">
                            <canvas id="locationPressureChart" height="300"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-info-circle me-2"></i>Standort-Status
                            </h5>
                        </div>
                        <div class="card-body">
                            <div id="locationStatusCards">
                                <!-- Wird dynamisch gefüllt -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Standort-Tabelle -->
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-map-marker-alt me-2"></i>Standort-Analyse
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover" id="locationsTable">
                            <thead class="table-light">
                                <tr>
                                    <th>Standort</th>
                                    <th>Adresse</th>
                                    <th>Wartelisten</th>
                                    <th>Kapazität</th>
                                    <th>Kurse mit WL</th>
                                    <th>Druck (%)</th>
                                    <th>Empfehlung</th>
                                </tr>
                            </thead>
                            <tbody id="locationsTableBody">
                                <tr>
                                    <td colspan="7" class="text-center">
                                        <div class="spinner-border text-primary" role="status">
                                            <span class="visually-hidden">Lade...</span>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Empfehlungen Tab -->
        <div class="tab-pane fade" id="recommendations" role="tabpanel">
            <div id="recommendationsContainer">
                <div class="text-center">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Lade Empfehlungen...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
        .stat-card {
            transition: transform 0.2s ease;
        }

        .stat-card:hover {
            transform: translateY(-2px);
        }

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

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

        /* Tab-Buttons verbessern */
        .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);
        }

        /* Chart-Höhen begrenzen */
        .chart-container {
            max-height: 400px;
            overflow: hidden;
        }

        .chart-container canvas {
            max-height: 350px !important;
        }

.card {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 12px;
}

.card-header {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-bottom: 1px solid #dee2e6;
    border-radius: 12px 12px 0 0 !important;
}

.table th {
    border-top: none;
    font-weight: 600;
    color: #495057;
}

.badge {
    font-size: 0.75rem;
}

.recommendation-card {
    border-left: 4px solid;
    margin-bottom: 1rem;
}

.recommendation-high {
    border-left-color: #dc3545;
}

.recommendation-medium {
    border-left-color: #ffc107;
}

.recommendation-low {
    border-left-color: #28a745;
}
</style>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let charts = {};
let currentData = {};

document.addEventListener('DOMContentLoaded', function() {
    loadWaitingListData();
    
    // 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');
            
            switch(target) {
                case '#courses':
                    loadCoursesData();
                    break;
                case '#locations':
                    loadLocationsData();
                    break;
                case '#recommendations':
                    loadRecommendations();
                    break;
            }
        });
    });
});

async function loadWaitingListData() {
    try {
        const response = await fetch('{{ path('admin_waiting_list_data') }}');
        const data = await response.json();
        
        if (data.success) {
            currentData = data.data;
            updateSummaryCards(data.summary);
            loadCoursesData();
        } else {
            showError('Fehler beim Laden der Wartelisten-Daten: ' + data.error);
        }
    } catch (error) {
        console.error('Fehler:', error);
        showError('Fehler beim Laden der Daten');
    }
}

function updateSummaryCards(summary) {
    document.getElementById('totalWaitingList').textContent = summary.total_waiting_list;
    document.getElementById('coursesWithWaitingList').textContent = summary.total_courses;
    document.getElementById('averageWaitingList').textContent = summary.average_waiting_list;
    document.getElementById('highDemandCourses').textContent = summary.courses_with_high_demand;
}

async function loadCoursesData() {
    if (!currentData || currentData.length === 0) return;
    
    renderWaitingListChart();
    renderTargetGroupChart();
    renderCoursesTable();
}

async function loadLocationsData() {
    try {
        const response = await fetch('{{ path('admin_waiting_list_location_analysis') }}');
        const data = await response.json();
        
        if (data.success) {
            renderLocationPressureChart(data.data);
            renderLocationStatusCards(data.data);
            renderLocationsTable(data.data);
        } else {
            showError('Fehler beim Laden der Standort-Daten: ' + data.error);
        }
    } catch (error) {
        console.error('Fehler:', error);
        showError('Fehler beim Laden der Standort-Daten');
    }
}

async function loadRecommendations() {
    try {
        const response = await fetch('{{ path('admin_waiting_list_recommendations') }}');
        const data = await response.json();
        
        if (data.success) {
            renderRecommendations(data.recommendations);
        } else {
            showError('Fehler beim Laden der Empfehlungen: ' + data.error);
        }
    } catch (error) {
        console.error('Fehler:', error);
        showError('Fehler beim Laden der Empfehlungen');
    }
}

function renderWaitingListChart() {
    const ctx = document.getElementById('waitingListChart').getContext('2d');
    
    if (charts.waitingList) {
        charts.waitingList.destroy();
    }
    
    const topCourses = currentData.slice(0, 10);
    
            charts.waitingList = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: topCourses.map(course => course.course_name.length > 20 ? 
                        course.course_name.substring(0, 20) + '...' : course.course_name),
                    datasets: [{
                        label: 'Wartelisten',
                        data: topCourses.map(course => course.waiting_list_count),
                        backgroundColor: 'rgba(0, 153, 204, 0.8)',
                        borderColor: 'rgba(0, 153, 204, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
}

function renderTargetGroupChart() {
    const ctx = document.getElementById('targetGroupChart').getContext('2d');
    
    if (charts.targetGroup) {
        charts.targetGroup.destroy();
    }
    
    const targetGroups = {};
    currentData.forEach(course => {
        const group = course.target_group || 'Nicht zugewiesen';
        targetGroups[group] = (targetGroups[group] || 0) + course.waiting_list_count;
    });
    
    const labels = Object.keys(targetGroups);
    const data = Object.values(targetGroups);
    const colors = [
        '#0099cc', '#17a2b8', '#28a745', '#ffc107', 
        '#dc3545', '#6c757d', '#007399', '#00bfff'
    ];
    
    charts.targetGroup = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: labels,
            datasets: [{
                data: data,
                backgroundColor: colors.slice(0, labels.length)
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
}

function renderCoursesTable() {
    const tbody = document.getElementById('coursesTableBody');
    tbody.innerHTML = '';
    
    currentData.forEach(course => {
        const row = document.createElement('tr');
        
        const statusBadge = getStatusBadge(course.waiting_list_count, course.waiting_list_ratio);
        
        row.innerHTML = `
            <td>
                <strong>${course.course_name}</strong>
                <br><small class="text-muted">${course.course_type}</small>
            </td>
            <td>${course.location}</td>
            <td>${course.target_group || 'Nicht zugewiesen'}</td>
            <td><span class="badge bg-warning">${course.waiting_list_count}</span></td>
            <td>${course.max_participants}</td>
            <td>${course.utilization_rate}%</td>
            <td>${course.waiting_list_ratio}%</td>
            <td>${statusBadge}</td>
        `;
        
        tbody.appendChild(row);
    });
}

function renderLocationPressureChart(locationData) {
    const ctx = document.getElementById('locationPressureChart').getContext('2d');
    
    if (charts.locationPressure) {
        charts.locationPressure.destroy();
    }
    
    charts.locationPressure = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: locationData.map(loc => loc.location_name),
            datasets: [{
                label: 'Wartelisten-Druck (%)',
                data: locationData.map(loc => loc.waiting_list_pressure),
                backgroundColor: locationData.map(loc => 
                    loc.waiting_list_pressure >= 50 ? 'rgba(220, 53, 69, 0.8)' :
                    loc.waiting_list_pressure >= 25 ? 'rgba(255, 193, 7, 0.8)' :
                    'rgba(0, 153, 204, 0.8)'
                ),
                borderColor: locationData.map(loc => 
                    loc.waiting_list_pressure >= 50 ? 'rgba(220, 53, 69, 1)' :
                    loc.waiting_list_pressure >= 25 ? 'rgba(255, 193, 7, 1)' :
                    'rgba(0, 153, 204, 1)'
                ),
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100
                }
            }
        }
    });
}

function renderLocationStatusCards(locationData) {
    const container = document.getElementById('locationStatusCards');
    container.innerHTML = '';
    
    locationData.forEach(location => {
        const card = document.createElement('div');
        card.className = 'card mb-3';
        
        const statusClass = location.waiting_list_pressure >= 50 ? 'border-danger' :
                           location.waiting_list_pressure >= 25 ? 'border-warning' :
                           'border-success';
        
        card.innerHTML = `
            <div class="card-body ${statusClass}">
                <h6 class="card-title">${location.location_name}</h6>
                <p class="card-text">
                    <strong>${location.total_waiting_list}</strong> Wartelisten<br>
                    <strong>${location.waiting_list_pressure}%</strong> Druck<br>
                    <small class="text-muted">${location.courses_with_waiting_list}/${location.total_courses} Kurse</small>
                </p>
                <span class="badge ${location.waiting_list_pressure >= 50 ? 'bg-danger' : 
                                   location.waiting_list_pressure >= 25 ? 'bg-warning' : 'bg-success'}">
                    ${location.recommendation}
                </span>
            </div>
        `;
        
        container.appendChild(card);
    });
}

function renderLocationsTable(locationData) {
    const tbody = document.getElementById('locationsTableBody');
    tbody.innerHTML = '';
    
    locationData.forEach(location => {
        const row = document.createElement('tr');
        
        const pressureBadge = location.waiting_list_pressure >= 50 ? 'bg-danger' :
                              location.waiting_list_pressure >= 25 ? 'bg-warning' :
                              'bg-success';
        
        row.innerHTML = `
            <td><strong>${location.location_name}</strong></td>
            <td>${location.address || 'Nicht angegeben'}</td>
            <td><span class="badge bg-warning">${location.total_waiting_list}</span></td>
            <td>${location.total_capacity}</td>
            <td>${location.courses_with_waiting_list}</td>
            <td><span class="badge ${pressureBadge}">${location.waiting_list_pressure}%</span></td>
            <td><small>${location.recommendation}</small></td>
        `;
        
        tbody.appendChild(row);
    });
}

function renderRecommendations(recommendations) {
    const container = document.getElementById('recommendationsContainer');
    container.innerHTML = '';
    
    if (recommendations.length === 0) {
        container.innerHTML = `
            <div class="alert alert-success">
                <i class="fas fa-check-circle me-2"></i>
                <strong>Keine kritischen Wartelisten gefunden!</strong><br>
                Das aktuelle Kursangebot scheint ausreichend zu sein.
            </div>
        `;
        return;
    }
    
    recommendations.forEach(rec => {
        const priorityClass = rec.priority === 'high' ? 'recommendation-high' :
                            rec.priority === 'medium' ? 'recommendation-medium' :
                            'recommendation-low';
        
        const card = document.createElement('div');
        card.className = `card recommendation-card ${priorityClass}`;
        
        let content = `
            <div class="card-body">
                <h5 class="card-title">
                    <i class="fas fa-${rec.type === 'course_expansion' ? 'graduation-cap' : 
                                       rec.type === 'location_expansion' ? 'map-marker-alt' : 
                                       'users'} me-2"></i>
                    ${rec.title}
                </h5>
                <p class="card-text">${rec.description}</p>
                <p class="card-text"><strong>Empfehlung:</strong> ${rec.action}</p>
        `;
        
        if (rec.courses) {
            content += `
                <h6>Betroffene Kurse:</h6>
                <ul class="list-group list-group-flush">
            `;
            rec.courses.forEach(course => {
                content += `
                    <li class="list-group-item">
                        <strong>${course.name}</strong> (${course.location})<br>
                        <small class="text-muted">${course.waiting_list_count} Wartelisten • ${course.target_group}</small>
                    </li>
                `;
            });
            content += '</ul>';
        }
        
        if (rec.locations) {
            content += `
                <h6>Betroffene Standorte:</h6>
                <ul class="list-group list-group-flush">
            `;
            rec.locations.forEach(location => {
                content += `
                    <li class="list-group-item">
                        <strong>${location.name}</strong><br>
                        <small class="text-muted">${location.address} • ${location.waiting_list_count} Wartelisten • ${location.pressure_percentage}% Druck</small>
                    </li>
                `;
            });
            content += '</ul>';
        }
        
        content += '</div>';
        card.innerHTML = content;
        container.appendChild(card);
    });
}

function getStatusBadge(waitingListCount, ratio) {
    if (waitingListCount >= 10 || ratio >= 50) {
        return '<span class="badge bg-danger">Kritisch</span>';
    } else if (waitingListCount >= 5 || ratio >= 25) {
        return '<span class="badge bg-warning">Hoch</span>';
    } else if (waitingListCount >= 2) {
        return '<span class="badge bg-info">Mittel</span>';
    } else {
        return '<span class="badge bg-success">Niedrig</span>';
    }
}

function refreshData() {
    loadWaitingListData();
}

function exportAnalysis() {
    // TODO: Implement export functionality
    alert('Export-Funktion wird implementiert...');
}

function showError(message) {
    const alert = document.createElement('div');
    alert.className = 'alert alert-danger alert-dismissible fade show';
    alert.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.querySelector('.container-fluid').insertBefore(alert, document.querySelector('.container-fluid').firstChild);
}
</script>
{% endblock %}