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

{% block title %}Rapports et Analyses - Clinique Les Genêts{% endblock %}

{% block page_title %}Rapports et Analyses{% endblock %}

{% block body %}
<div class="space-y-6">
    <!-- Header avec actions -->
    <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
            <h2 class="text-xl font-semibold text-gray-800">Tableaux de bord et rapports</h2>
        </div>
        <div class="flex items-center space-x-3">
            <button onclick="previewReport('general')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
                <i class="fas fa-eye mr-2"></i>
                Prévisualiser
            </button>
            <button class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg flex items-center">
                <i class="fas fa-download mr-2"></i>
                Exporter
            </button>
        </div>
    </div>

    <!-- Sélection de période -->
    <div class="bg-white rounded-lg border border-gray-200 p-4">
        <div class="flex flex-wrap items-center gap-4">
            <div class="flex items-center space-x-2">
                <label class="text-sm font-medium text-gray-700">Période :</label>
                <select class="border border-gray-300 rounded-md px-3 py-1 text-sm">
                    <option value="today">Aujourd'hui</option>
                    <option value="week" selected>Cette semaine</option>
                    <option value="month">Ce mois</option>
                    <option value="quarter">Ce trimestre</option>
                    <option value="year">Cette année</option>
                    <option value="custom">Personnalisée</option>
                </select>
            </div>
            <div class="flex items-center space-x-2">
                <label class="text-sm font-medium text-gray-700">Du :</label>
                <input type="date" class="border border-gray-300 rounded-md px-3 py-1 text-sm" value="{{ 'now'|date('Y-01-01') }}">
            </div>
            <div class="flex items-center space-x-2">
                <label class="text-sm font-medium text-gray-700">Au :</label>
                <input type="date" class="border border-gray-300 rounded-md px-3 py-1 text-sm" value="{{ 'now'|date('Y-m-d') }}">
            </div>
            <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-1 rounded-md text-sm">
                Actualiser
            </button>
        </div>
    </div>

    <!-- Indicateurs clés -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="bg-white rounded-lg p-6 border border-gray-200 card-hover">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Tâches complétées</p>
                    <p class="text-2xl font-bold text-green-600">{{ stats.tasks_completed }}</p>
                    <p class="text-xs {% if stats.completion_improvement >= 0 %}text-green-600{% else %}text-red-600{% endif %}">
                        {% if stats.completion_improvement >= 0 %}+{% endif %}{{ stats.completion_improvement }}% vs mois précédent
                    </p>
                </div>
                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-check-circle text-green-600 text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg p-6 border border-gray-200 card-hover">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Projets en cours</p>
                    <p class="text-2xl font-bold text-blue-600">{{ stats.projects_in_progress }}</p>
                    <p class="text-xs text-blue-600">{{ stats.projects_new_this_month }} nouveaux ce mois</p>
                </div>
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-project-diagram text-blue-600 text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg p-6 border border-gray-200 card-hover">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Satisfaction moyenne</p>
                    <p class="text-2xl font-bold text-yellow-600">{{ stats.satisfaction_average }}/5</p>
                    <p class="text-xs text-yellow-600">{{ stats.satisfaction_responses }} réponses</p>
                </div>
                <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-star text-yellow-600 text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg p-6 border border-gray-200 card-hover">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Taux de completion</p>
                    <p class="text-2xl font-bold text-purple-600">{{ stats.completion_rate }}%</p>
                    <p class="text-xs {% if stats.completion_improvement >= 0 %}text-purple-600{% else %}text-red-600{% endif %}">
                        {% if stats.completion_improvement >= 0 %}+{% endif %}{{ stats.completion_improvement }}% ce mois
                    </p>
                </div>
                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-chart-line text-purple-600 text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Types de rapports -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Rapports opérationnels -->
        <div class="bg-white rounded-lg border border-gray-200">
            <div class="p-6 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-800 flex items-center">
                    <i class="fas fa-chart-bar text-blue-600 mr-2"></i>
                    Rapports Opérationnels
                </h3>
            </div>
            <div class="p-6 space-y-4">
                <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-tasks text-green-600 mr-3"></i>
                        <div>
                            <h4 class="font-medium text-gray-800">Suivi des Tâches</h4>
                            <p class="text-sm text-gray-500">Performance par équipe et service</p>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>

                <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-project-diagram text-blue-600 mr-3"></i>
                        <div>
                            <h4 class="font-medium text-gray-800">Avancement Projets</h4>
                            <p class="text-sm text-gray-500">Statut et progression détaillée</p>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>

                <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-clock text-orange-600 mr-3"></i>
                        <div>
                            <h4 class="font-medium text-gray-800">Temps de Réalisation</h4>
                            <p class="text-sm text-gray-500">Analyse des délais et efficacité</p>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>

                <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-exclamation-triangle text-red-600 mr-3"></i>
                        <div>
                            <h4 class="font-medium text-gray-800">Tâches en Retard</h4>
                            <p class="text-sm text-gray-500">Identification des blocages</p>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
            </div>
        </div>

        <!-- Rapports qualité -->
        <div class="bg-white rounded-lg border border-gray-200">
            <div class="p-6 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-800 flex items-center">
                    <i class="fas fa-star text-yellow-600 mr-2"></i>
                    Rapports Qualité
                </h3>
            </div>
            <div class="p-6 space-y-4">
                <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-poll text-purple-600 mr-3"></i>
                        <div>
                            <h4 class="font-medium text-gray-800">Satisfaction Patients</h4>
                            <p class="text-sm text-gray-500">Analyse des enquêtes par service</p>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>

                <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-award text-green-600 mr-3"></i>
                        <div>
                            <h4 class="font-medium text-gray-800">Indicateurs Qualité</h4>
                            <p class="text-sm text-gray-500">KPI et standards HAS</p>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>

                <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-comments text-blue-600 mr-3"></i>
                        <div>
                            <h4 class="font-medium text-gray-800">Retours Patients</h4>
                            <p class="text-sm text-gray-500">Commentaires et suggestions</p>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>

                <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-trending-up text-green-600 mr-3"></i>
                        <div>
                            <h4 class="font-medium text-gray-800">Évolution Qualité</h4>
                            <p class="text-sm text-gray-500">Tendances et améliorations</p>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Rapports pré-générés -->
    <div class="bg-white rounded-lg border border-gray-200">
        <div class="p-6 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-800 flex items-center">
                <i class="fas fa-file-alt text-gray-600 mr-2"></i>
                Rapports Pré-générés
            </h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 cursor-pointer">
                    <div class="flex items-center justify-between mb-3">
                        <h4 class="font-medium text-gray-800">Rapport Hebdomadaire</h4>
                        <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded">Nouveau</span>
                    </div>
                    <p class="text-sm text-gray-600 mb-3">Synthèse des activités de la semaine</p>
                    <div class="flex items-center justify-between text-xs text-gray-500">
                        <span>{{ 'now'|date('d/m/Y H:i') }}</span>
                        <div class="flex items-center space-x-2">
                            <button onclick="previewReport('weekly')" class="text-blue-600 hover:text-blue-800" title="Prévisualiser">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button onclick="downloadReport('weekly', 'pdf')" class="text-green-600 hover:text-green-800" title="Télécharger PDF">
                                <i class="fas fa-download"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 cursor-pointer">
                    <div class="flex items-center justify-between mb-3">
                        <h4 class="font-medium text-gray-800">Rapport Mensuel</h4>
                        <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">Récent</span>
                    </div>
                    <p class="text-sm text-gray-600 mb-3">Bilan mensuel des performances</p>
                    <div class="flex items-center justify-between text-xs text-gray-500">
                        <span>{{ 'now'|date_modify('-1 week')|date('d/m/Y') }}</span>
                        <div class="flex items-center space-x-2">
                            <button onclick="previewReport('monthly')" class="text-blue-600 hover:text-blue-800" title="Prévisualiser">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button onclick="downloadReport('monthly', 'pdf')" class="text-green-600 hover:text-green-800" title="Télécharger PDF">
                                <i class="fas fa-download"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 cursor-pointer">
                    <div class="flex items-center justify-between mb-3">
                        <h4 class="font-medium text-gray-800">Rapport Annuel</h4>
                        <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded">Archivé</span>
                    </div>
                    <p class="text-sm text-gray-600 mb-3">Synthèse annuelle complète</p>
                    <div class="flex items-center justify-between text-xs text-gray-500">
                        <span>{{ 'now'|date_modify('-1 month')|date('d/m/Y') }}</span>
                        <div class="flex items-center space-x-2">
                            <button onclick="previewReport('annual')" class="text-blue-600 hover:text-blue-800" title="Prévisualiser">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button onclick="downloadReport('annual', 'pdf')" class="text-green-600 hover:text-green-800" title="Télécharger PDF">
                                <i class="fas fa-download"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Graphiques de synthèse -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Évolution des Tâches -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 hover:shadow-lg transition-shadow duration-300">
            <div class="p-6 border-b border-gray-100">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
                            <i class="fas fa-chart-line text-white text-lg"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-gray-800">Évolution des Tâches</h3>
                            <p class="text-sm text-gray-500">7 derniers jours</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                            <i class="fas fa-arrow-up mr-1"></i>
                            +12%
                        </span>
                    </div>
                </div>
            </div>
            <div class="p-6">
                <div class="h-64 relative">
                    <canvas id="tasksEvolutionChart" class="w-full h-full"></canvas>
                </div>
                <div class="mt-4 flex items-center justify-between text-sm text-gray-600">
                    <span>Tendance: Croissante</span>
                    <span class="flex items-center">
                        <div class="w-3 h-3 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-full mr-2"></div>
                        Tâches complétées
                    </span>
                </div>
            </div>
        </div>

        <!-- Répartition par Statut -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 hover:shadow-lg transition-shadow duration-300">
            <div class="p-6 border-b border-gray-100">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-600 rounded-lg flex items-center justify-center">
                            <i class="fas fa-chart-pie text-white text-lg"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-gray-800">Répartition par Statut</h3>
                            <p class="text-sm text-gray-500">État actuel des tâches</p>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-2xl font-bold text-gray-800" id="totalTasksCount">0</div>
                        <div class="text-xs text-gray-500">Total tâches</div>
                    </div>
                </div>
            </div>
            <div class="p-6">
                <div class="h-64 relative flex items-center justify-center">
                    <canvas id="statusDistributionChart" class="w-full h-full"></canvas>
                </div>
                <div class="mt-6 grid grid-cols-2 gap-4">
                    <div class="flex items-center space-x-2">
                        <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                        <span class="text-sm text-gray-600">Complétées</span>
                        <span class="text-sm font-medium text-gray-800" id="completedCount">0</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="w-3 h-3 bg-blue-500 rounded-full"></div>
                        <span class="text-sm text-gray-600">En cours</span>
                        <span class="text-sm font-medium text-gray-800" id="inProgressCount">0</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="w-3 h-3 bg-gray-500 rounded-full"></div>
                        <span class="text-sm text-gray-600">À faire</span>
                        <span class="text-sm font-medium text-gray-800" id="todoCount">0</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="w-3 h-3 bg-orange-500 rounded-full"></div>
                        <span class="text-sm text-gray-600">En révision</span>
                        <span class="text-sm font-medium text-gray-800" id="reviewCount">0</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de prévisualisation des rapports -->
<div id="reportModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
    <div class="relative top-20 mx-auto p-5 border w-11/12 max-w-4xl shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <!-- Header du modal -->
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">Prévisualisation du Rapport</h3>
                <div class="flex items-center space-x-2">
                    <button id="downloadFromModal" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm">
                        <i class="fas fa-download mr-2"></i>Télécharger PDF
                    </button>
                    <button onclick="closeReportModal()" class="text-gray-400 hover:text-gray-600">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            
            <!-- Contenu du rapport -->
            <div id="reportContent" class="border border-gray-200 rounded-lg p-4 max-h-96 overflow-y-auto bg-gray-50">
                <div class="text-center py-8">
                    <i class="fas fa-spinner fa-spin text-3xl text-gray-400 mb-2"></i>
                    <p class="text-gray-500">Chargement du rapport...</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Chart.js Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js" integrity="sha512-6HrPqAvK+lZElIZ4mZ64fyxIBTsaX5zAFZg2V/2WT+iKPrFzTzvx6QAsLW2OaLwobhMYBog/+bvmIEEGXi0p1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
// Fallback si Chart.js ne se charge pas
if (typeof Chart === 'undefined') {
    // Créer un fallback simple pour Chart
    window.Chart = function(canvas, config) {
        const container = canvas.parentElement;
        let html = '<div class="text-center text-gray-500 py-8">';
        html += '<i class="fas fa-chart-line text-4xl mb-2"></i>';
        html += '<p>Graphique temporairement indisponible</p>';
        html += '</div>';
        container.innerHTML = html;
    };
}
</script>

<script>
// Variables globales
window.reportFunctions = {};

document.addEventListener('DOMContentLoaded', function() {
    // Vérifier si Chart.js est chargé
    if (typeof Chart === 'undefined') {
        console.error('Chart.js n\'est pas chargé');
        return;
    }
    
    // Données des graphiques depuis le contrôleur
    const tasksEvolution = {{ charts.tasks_evolution|default('{}')|json_encode|raw }};
    const statusDistribution = {{ charts.status_distribution|default('{}')|json_encode|raw }};
    
    console.log('Données tasksEvolution:', tasksEvolution);
    console.log('Données statusDistribution:', statusDistribution);
    
    // Créer les graphiques avec des styles améliorés
    if (tasksEvolution && tasksEvolution.labels && tasksEvolution.data && tasksEvolution.labels.length > 0) {
        const tasksCanvas = document.getElementById('tasksEvolutionChart');
        if (tasksCanvas) {
            new Chart(tasksCanvas, {
                type: 'line',
                data: {
                    labels: tasksEvolution.labels,
                    datasets: [{
                        label: 'Tâches complétées',
                        data: tasksEvolution.data,
                        borderColor: '#3B82F6',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        borderWidth: 3,
                        fill: true,
                        tension: 0.4,
                        pointBackgroundColor: '#3B82F6',
                        pointBorderColor: '#ffffff',
                        pointBorderWidth: 2,
                        pointRadius: 6,
                        pointHoverRadius: 8,
                        pointHoverBackgroundColor: '#1E40AF',
                        pointHoverBorderColor: '#ffffff',
                        pointHoverBorderWidth: 3
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: 'rgba(17, 24, 39, 0.9)',
                            titleColor: '#ffffff',
                            bodyColor: '#ffffff',
                            borderColor: '#3B82F6',
                            borderWidth: 1,
                            cornerRadius: 8,
                            displayColors: false
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: '#6b7280',
                                font: {
                                    size: 12
                                }
                            }
                        },
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(107, 114, 128, 0.1)',
                                drawBorder: false
                            },
                            ticks: {
                                color: '#6b7280',
                                font: {
                                    size: 12
                                }
                            }
                        }
                    },
                    interaction: {
                        intersect: false,
                        mode: 'index'
                    }
                }
            });
        }
    }
    
    } else {
        // Afficher un message si pas de données pour tasksEvolution
        const tasksCanvas = document.getElementById('tasksEvolutionChart');
        if (tasksCanvas) {
            const container = tasksCanvas.parentElement;
            container.innerHTML = '<div class="text-center text-gray-500 py-8"><i class="fas fa-chart-line text-4xl mb-2"></i><p>Aucune donnée d\'évolution des tâches disponible</p></div>';
        }
    }
    
    if (statusDistribution && statusDistribution.labels && statusDistribution.data && statusDistribution.labels.length > 0) {
        const statusCanvas = document.getElementById('statusDistributionChart');
        if (statusCanvas) {
            // Mettre à jour les compteurs
            const totalTasks = statusDistribution.data.reduce((sum, value) => sum + value, 0);
            document.getElementById('totalTasksCount').textContent = totalTasks;
            
            // Mapper les labels aux compteurs
            statusDistribution.labels.forEach((label, index) => {
                const count = statusDistribution.data[index];
                if (label === 'Complétées') {
                    document.getElementById('completedCount').textContent = count;
                } else if (label === 'En cours') {
                    document.getElementById('inProgressCount').textContent = count;
                } else if (label === 'À faire') {
                    document.getElementById('todoCount').textContent = count;
                } else if (label === 'En révision') {
                    document.getElementById('reviewCount').textContent = count;
                }
            });
            
            new Chart(statusCanvas, {
                type: 'doughnut',
                data: {
                    labels: statusDistribution.labels,
                    datasets: [{
                        data: statusDistribution.data,
                        backgroundColor: [
                            '#10B981', // Vert pour complétées
                            '#3B82F6', // Bleu pour en cours
                            '#6B7280', // Gris pour à faire
                            '#F59E0B'  // Orange pour en révision
                        ],
                        borderColor: '#ffffff',
                        borderWidth: 3,
                        hoverBorderWidth: 4,
                        hoverOffset: 8
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '65%',
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: 'rgba(17, 24, 39, 0.9)',
                            titleColor: '#ffffff',
                            bodyColor: '#ffffff',
                            borderColor: 'rgba(59, 130, 246, 0.3)',
                            borderWidth: 1,
                            cornerRadius: 8,
                            callbacks: {
                                label: function(context) {
                                    const total = context.dataset.data.reduce((sum, value) => sum + value, 0);
                                    const percentage = ((context.parsed / total) * 100).toFixed(1);
                                    return `${context.label}: ${context.parsed} (${percentage}%)`;
                                }
                            }
                        }
                    },
                    onHover: (event, elements) => {
                        event.native.target.style.cursor = elements.length > 0 ? 'pointer' : 'default';
                    }
                }
            });
        }
    } else {
        // Afficher un message si pas de données pour statusDistribution
        const statusCanvas = document.getElementById('statusDistributionChart');
        if (statusCanvas) {
            const container = statusCanvas.parentElement;
JAVASCRIPT_MARKER_END

// Variables globales pour le modal
window.currentReportType = '';
window.currentReportPeriod = '';

// Fonction de téléchargement générique (globale)
window.downloadReport = function(reportType, format = 'pdf') {
    const period = document.querySelector('select')?.value || 'month';
    let startDate = document.querySelectorAll('input[type="date"]')[0]?.value || '';
    let endDate = document.querySelectorAll('input[type="date"]')[1]?.value || '';
    
    // Si pas de dates, utiliser des valeurs par défaut larges
    if (!startDate || startDate === '') {
        startDate = '2025-01-01';
    }
    if (!endDate || endDate === '') {
        const today = new Date();
        endDate = today.toISOString().split('T')[0];
    }
    
    const params = new URLSearchParams({
        type: reportType,
        format: format,
        period: period,
        start_date: startDate,
        end_date: endDate
    });
    
    // Construire l'URL en utilisant HTTPS si on est sur 127.0.0.1
    let baseUrl = window.location.origin;
    if (window.location.hostname === '127.0.0.1' || window.location.hostname === 'localhost') {
        baseUrl = 'https://127.0.0.1:8000';
    }
    
    const downloadUrl = `${baseUrl}/reports/download?${params.toString()}`;
    console.log('Téléchargement rapport:', downloadUrl);
    
    window.location.href = downloadUrl;
};

// Fonction de prévisualisation des rapports (globale)
window.previewReport = function(reportType) {
        console.log('Prévisualisation du rapport:', reportType);
        
        window.currentReportType = reportType;
        window.currentReportPeriod = document.querySelector('select').value || 'month';
        let startDate = document.querySelectorAll('input[type="date"]')[0]?.value || '';
        let endDate = document.querySelectorAll('input[type="date"]')[1]?.value || '';
        
        const params = new URLSearchParams({
            type: reportType,
            period: window.currentReportPeriod
        });
        
        // Ajouter les dates seulement si elles sont spécifiées
        if (startDate && endDate && startDate !== '' && endDate !== '') {
            params.append('start_date', startDate);
            params.append('end_date', endDate);
        }
        
        // Construire l'URL en utilisant HTTPS si on est sur 127.0.0.1
        let baseUrl = window.location.origin;
        if (window.location.hostname === '127.0.0.1' || window.location.hostname === 'localhost') {
            baseUrl = 'https://127.0.0.1:8000';
        }
        
        const previewUrl = `${baseUrl}/reports/preview?${params.toString()}`;
        console.log('URL de prévisualisation:', previewUrl);
        
        // Ouvrir le modal
        const modal = document.getElementById('reportModal');
        if (modal) {
            modal.classList.remove('hidden');
        } else {
            console.error('Modal non trouvé');
            return;
        }
        
        // Réinitialiser le contenu
        document.getElementById('reportContent').innerHTML = `
            <div class="text-center py-8">
                <i class="fas fa-spinner fa-spin text-3xl text-gray-400 mb-2"></i>
                <p class="text-gray-500">Chargement du rapport...</p>
            </div>
        `;
        
        // Charger le contenu du rapport
        fetch(previewUrl, {
            method: 'GET',
            headers: {
                'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => {
            console.log('Statut de la réponse:', response.status);
            console.log('Headers:', [...response.headers.entries()]);
            
            if (!response.ok) {
                throw new Error(`Erreur HTTP: ${response.status} ${response.statusText}`);
            }
            return response.text();
        })
        .then(html => {
            console.log('Contenu reçu (premiers 500 chars):', html.substring(0, 500));
            const contentDiv = document.getElementById('reportContent');
            if (contentDiv) {
                contentDiv.innerHTML = html;
            }
        })
        .catch(error => {
            console.error('Erreur complète:', error);
            const contentDiv = document.getElementById('reportContent');
            if (contentDiv) {
                contentDiv.innerHTML = 
                    `<div class="text-red-600 text-center py-8">
                        <i class="fas fa-exclamation-triangle text-3xl mb-2"></i>
                        <p class="font-medium">Erreur lors du chargement du rapport</p>
                        <p class="text-sm mt-2">${error.message}</p>
                        <button onclick="previewReport('${reportType}')" class="mt-4 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
                            Réessayer
                        </button>
                    </div>`;
            }
        });
};

// Fonction pour fermer le modal (globale)
window.closeReportModal = function() {
        document.getElementById('reportModal').classList.add('hidden');
        document.getElementById('reportContent').innerHTML = `
            <div class="text-center py-8">
                <i class="fas fa-spinner fa-spin text-3xl text-gray-400 mb-2"></i>
                <p class="text-gray-500">Chargement du rapport...</p>
            </div>
        `;
};

// Initialiser les événements après le chargement DOM
document.addEventListener('DOMContentLoaded', function() {
    // Téléchargement depuis le modal
    const downloadFromModalBtn = document.getElementById('downloadFromModal');
    if (downloadFromModalBtn) {
        downloadFromModalBtn.addEventListener('click', function() {
            if (window.currentReportType) {
                window.downloadReport(window.currentReportType, 'pdf');
                window.closeReportModal();
            }
        });
    }
    
    // Fermer le modal en cliquant à l'extérieur
    const reportModal = document.getElementById('reportModal');
    if (reportModal) {
        reportModal.addEventListener('click', function(e) {
            if (e.target === this) {
                window.closeReportModal();
            }
        });
    }
    
    // Bouton Exporter principal
    const mainExportBtn = document.querySelector('.bg-orange-600');
    if (mainExportBtn) {
        mainExportBtn.addEventListener('click', function() {
            window.downloadReport('general', 'pdf');
        });
    }
    
    // Boutons de téléchargement des rapports pré-générés
    const downloadButtons = document.querySelectorAll('.fa-download');
    downloadButtons.forEach((btn, index) => {
        btn.parentElement.addEventListener('click', function(e) {
            e.preventDefault();
            const reportTypes = ['weekly', 'monthly', 'annual'];
            if (index < reportTypes.length) {
                window.downloadReport(reportTypes[index], 'pdf');
            }
        });
    });
    
    // Gestionnaire pour les types de rapports (clic sur les cartes)
    const reportCards = document.querySelectorAll('.cursor-pointer');
    reportCards.forEach(card => {
        const title = card.querySelector('h4')?.textContent;
        if (title && !card.querySelector('.fa-download')) {
            card.addEventListener('click', function() {
                let reportType = '';
                if (title.includes('Tâches')) reportType = 'tasks';
                else if (title.includes('Projets')) reportType = 'projects';
                else if (title.includes('Temps')) reportType = 'time';
                else if (title.includes('Retard')) reportType = 'delays';
                else if (title.includes('Satisfaction')) reportType = 'satisfaction';
                else if (title.includes('Indicateurs')) reportType = 'kpi';
                else if (title.includes('Retours')) reportType = 'feedback';
                else if (title.includes('Évolution')) reportType = 'evolution';
                
                if (reportType) {
                    window.previewReport(reportType);
                }
            });
        }
    });
});
</script>
{% endblock %}