{% extends "base.html" %}

{% block title %}Résultats - {{ assessment.title }} - Gestion Scolaire{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="flex justify-between items-center">
        <div>
            <a href="{{ url_for('assessments.detail', id=assessment.id) }}" class="text-blue-600 hover:text-blue-800 text-sm font-medium mb-2 inline-block">
                ← Retour à l'évaluation
            </a>
            <h1 class="text-2xl font-bold text-gray-900">Résultats - {{ assessment.title }}</h1>
            <p class="text-gray-600">{{ assessment.class_group.name }} - {{ assessment.date.strftime('%d/%m/%Y') }} - Trimestre {{ assessment.trimester }}</p>
        </div>
    </div>
    
    <!-- Statistiques générales -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Statistiques de l'évaluation</h2>
        </div>
        <div class="px-6 py-4">
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
                <div class="text-center">
                    <div class="text-2xl font-bold text-blue-600">{{ statistics.count }}</div>
                    <div class="text-sm text-gray-500">Élèves</div>
                </div>
                <div class="text-center">
                    <div class="text-2xl font-bold text-green-600">{{ statistics.mean }}</div>
                    <div class="text-sm text-gray-500">Moyenne</div>
                </div>
                <div class="text-center">
                    <div class="text-2xl font-bold text-purple-600">{{ statistics.median }}</div>
                    <div class="text-sm text-gray-500">Médiane</div>
                </div>
                <div class="text-center">
                    <div class="text-2xl font-bold text-red-600">{{ statistics.min }}</div>
                    <div class="text-sm text-gray-500">Minimum</div>
                </div>
                <div class="text-center">
                    <div class="text-2xl font-bold text-green-600">{{ statistics.max }}</div>
                    <div class="text-sm text-gray-500">Maximum</div>
                </div>
                <div class="text-center">
                    <div class="text-2xl font-bold text-orange-600">{{ statistics.std_dev }}</div>
                    <div class="text-sm text-gray-500">Écart-type</div>
                </div>
            </div>
            <div class="mt-4 text-sm text-gray-600 text-center">
                Total des points de l'évaluation : {{ "%.1f"|format(total_max_points) }}
            </div>
        </div>
    </div>
    
    <!-- Bouton d'envoi des bilans -->
    <div class="flex justify-end mb-6">
        <button id="sendReportsBtn" onclick="openSendReportsModal()" 
                class="inline-flex items-center px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
            </svg>
            📧 Envoyer les bilans par email
        </button>
    </div>
    
    <!-- Histogramme des notes -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Distribution des notes</h2>
        </div>
        <div class="px-6 py-4">
            <canvas id="scoresChart" width="400" height="200"></canvas>
        </div>
    </div>
    
    <!-- Heatmap par compétences -->
    {% if heatmap_competences %}
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Performance par compétence</h2>
            <p class="text-sm text-gray-600 mt-1">Heatmap des scores moyens de chaque élève par compétence</p>
        </div>
        <div class="px-6 py-4">
            <div class="overflow-x-auto">
                <canvas id="competencesHeatmap" width="800" height="400"></canvas>
            </div>
        </div>
    </div>
    {% endif %}
    
    <!-- Heatmap par domaines -->
    {% if heatmap_domains %}
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Performance par domaine</h2>
            <p class="text-sm text-gray-600 mt-1">Heatmap des scores moyens de chaque élève par domaine</p>
        </div>
        <div class="px-6 py-4">
            <div class="overflow-x-auto">
                <canvas id="domainsHeatmap" width="800" height="400"></canvas>
            </div>
        </div>
    </div>
    {% endif %}
    
    <!-- Heatmap par éléments de notation -->
    {% if heatmap_grading_elements %}
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Performance par élément de notation</h2>
            <p class="text-sm text-gray-600 mt-1">Heatmap détaillée des scores de chaque élève sur chaque question/compétence</p>
        </div>
        <div class="px-6 py-4">
            <div class="overflow-x-auto">
                <canvas id="gradingElementsHeatmap" width="1200" height="600"></canvas>
            </div>
        </div>
    </div>
    {% endif %}
    
    <!-- Tableau des résultats -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Résultats par élève</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Élève
                        </th>
                        <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Note totale
                        </th>
                        {% for exercise in assessment.exercises|sort(attribute='order') %}
                        <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                            {{ exercise.title }}
                        </th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for student_data in students_scores %}
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">
                                {{ student_data.student.last_name }} {{ student_data.student.first_name }}
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-center">
                            <div class="text-sm font-bold text-gray-900">
                                {{ "%.1f"|format(student_data.total_score) }} / {{ "%.1f"|format(student_data.total_max_points) }}
                            </div>
                        </td>
                        {% for exercise in assessment.exercises|sort(attribute='order') %}
                        <td class="px-6 py-4 whitespace-nowrap text-center">
                            <div class="text-sm text-gray-900">
                                {% if exercise.id in student_data.exercises %}
                                    {{ "%.1f"|format(student_data.exercises[exercise.id].score) }} / {{ "%.1f"|format(student_data.exercises[exercise.id].max_points) }}
                                {% else %}
                                    -
                                {% endif %}
                            </div>
                        </td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('scoresChart').getContext('2d');
    const scores = {{ scores_json | tojson }};
    
    // Récupérer les données des élèves avec leurs noms et scores
    const studentsData = [
        {% for student_data in students_scores %}
        {
            name: "{{ student_data.student.last_name }} {{ student_data.student.first_name }}",
            score: {{ student_data.total_score }}
        }{% if not loop.last %},{% endif %}
        {% endfor %}
    ];
    
    // Créer les intervalles pour l'histogramme
    const totalMaxPoints = {{ total_max_points }};
    const minScore = 0;
    const maxScore = totalMaxPoints;
    const binWidth = 1; // Groupes de 1 point
    const numBins = Math.ceil(maxScore - minScore); // Nombre de bins basé sur le total des points
    
    const bins = [];
    const labels = [];
    const studentsInBins = []; // Nouveau: stocker les élèves pour chaque bin
    
    for (let i = 0; i < numBins; i++) {
        const binStart = minScore + i * binWidth;
        const binEnd = minScore + (i + 1) * binWidth;
        bins.push(0);
        labels.push(`${binStart.toFixed(0)} - ${binEnd.toFixed(0)}`);
        studentsInBins.push([]); // Initialiser la liste d'élèves pour ce bin
    }
    
    // Compter les scores dans chaque intervalle et stocker les noms des élèves
    studentsData.forEach(student => {
        let binIndex = Math.floor((student.score - minScore) / binWidth);
        if (binIndex >= numBins) binIndex = numBins - 1; // Pour le score maximum
        if (binIndex >= 0) {
            bins[binIndex]++;
            studentsInBins[binIndex].push(`${student.name} (${student.score.toFixed(1)})`);
        }
    });
    
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: 'Nombre d\'élèves',
                data: bins,
                backgroundColor: 'rgba(59, 130, 246, 0.5)',
                borderColor: 'rgba(59, 130, 246, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: 'Distribution des notes'
                },
                legend: {
                    display: false
                },
                tooltip: {
                    callbacks: {
                        title: function(tooltipItems) {
                            const binIndex = tooltipItems[0].dataIndex;
                            return labels[binIndex];
                        },
                        label: function(tooltipItem) {
                            const binIndex = tooltipItem.dataIndex;
                            const count = bins[binIndex];
                            const students = studentsInBins[binIndex];
                            
                            if (count === 0) {
                                return 'Aucun élève';
                            } else if (count === 1) {
                                return '1 élève : ' + students[0];
                            } else {
                                return `${count} élèves : ${students.join(', ')}`;
                            }
                        }
                    },
                    maxWidth: 400,
                    bodyFont: {
                        size: 12
                    },
                    titleFont: {
                        size: 13,
                        weight: 'bold'
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    },
                    title: {
                        display: true,
                        text: 'Nombre d\'élèves'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Intervalles de notes'
                    }
                }
            }
        }
    });
    
    // === HEATMAPS ===
    
    // === HEATMAPS DATA ===
    {% if heatmap_competences %}
    const competencesData = {{ heatmap_competences | tojson }};
    {% endif %}
    
    {% if heatmap_domains %}
    const domainsData = {{ heatmap_domains | tojson }};
    {% endif %}
    
    {% if heatmap_grading_elements %}
    const gradingElementsData = {{ heatmap_grading_elements | tojson }};
    {% endif %}
    
    // Fonctions utilitaires pour l'interpolation HSL (globales pour être réutilisables)
    function hexToRgb(hex) {
            const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
            return result ? {
                r: parseInt(result[1], 16),
                g: parseInt(result[2], 16),
                b: parseInt(result[3], 16)
            } : null;
        }

        function rgbToHex(r, g, b) {
            return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
        }

        function rgbToHsl(r, g, b) {
            r /= 255;
            g /= 255;
            b /= 255;

            const max = Math.max(r, g, b);
            const min = Math.min(r, g, b);
            let h, s, l = (max + min) / 2;

            if (max === min) {
                h = s = 0; // achromatic
            } else {
                const d = max - min;
                s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

                switch (max) {
                    case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                    case g: h = (b - r) / d + 2; break;
                    case b: h = (r - g) / d + 4; break;
                }
                h /= 6;
            }

            return { h: h * 360, s: s * 100, l: l * 100 };
        }

        function hslToRgb(h, s, l) {
            h /= 360;
            s /= 100;
            l /= 100;

            const hue2rgb = (p, q, t) => {
                if (t < 0) t += 1;
                if (t > 1) t -= 1;
                if (t < 1/6) return p + (q - p) * 6 * t;
                if (t < 1/2) return q;
                if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
                return p;
            };

            let r, g, b;

            if (s === 0) {
                r = g = b = l; // achromatic
            } else {
                const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
                const p = 2 * l - q;
                r = hue2rgb(p, q, h + 1/3);
                g = hue2rgb(p, q, h);
                b = hue2rgb(p, q, h - 1/3);
            }

            return {
                r: Math.round(r * 255),
                g: Math.round(g * 255),
                b: Math.round(b * 255)
            };
        }

        function interpolateColorHSL(color1, color2, factor) {
            const rgb1 = hexToRgb(color1);
            const rgb2 = hexToRgb(color2);
            
            if (!rgb1 || !rgb2) return color1;
            
            const hsl1 = rgbToHsl(rgb1.r, rgb1.g, rgb1.b);
            const hsl2 = rgbToHsl(rgb2.r, rgb2.g, rgb2.b);
            
            // Interpolation en HSL
            let h1 = hsl1.h;
            let h2 = hsl2.h;
            
            // Gérer la transition des teintes (éviter le long chemin autour du cercle)
            let deltaH = h2 - h1;
            if (deltaH > 180) {
                h2 -= 360;
            } else if (deltaH < -180) {
                h2 += 360;
            }
            
            const h = h1 + (h2 - h1) * factor;
            const s = hsl1.s + (hsl2.s - hsl1.s) * factor;
            const l = hsl1.l + (hsl2.l - hsl1.l) * factor;
            
            // Normaliser la teinte
            const normalizedH = ((h % 360) + 360) % 360;
            
            const rgb = hslToRgb(normalizedH, s, l);
            return rgbToHex(rgb.r, rgb.g, rgb.b);
        }
    
    function createHeatmap(canvasId, data, type) {
        const canvas = document.getElementById(canvasId);
        const ctx = canvas.getContext('2d');
        
        const students = data.students;
        const categories = type === 'compétence' ? data.competences : 
                          (type === 'domaine' ? data.domains : data.elements);
        const scores = data.scores;
        const colors = data.colors;
        
        if (!categories || categories.length === 0) return;
        
        // Dimensions adaptées selon le type
        const padding = type === 'élément' ? 120 : 80;  // Plus d'espace pour les libellés longs
        const minCellWidth = type === 'élément' ? 50 : 60;
        const minCellHeight = type === 'élément' ? 30 : 40;  // Plus compact pour les éléments
        
        const cellWidth = Math.max(minCellWidth, (canvas.width - padding * 2) / students.length);
        const cellHeight = Math.max(minCellHeight, (canvas.height - padding * 2) / categories.length);
        
        // Ajuster la taille du canvas si nécessaire
        canvas.width = cellWidth * students.length + padding * 2;
        canvas.height = cellHeight * categories.length + padding * 2;
        
        // Effacer le canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.font = '12px Arial';

        // Fonction pour convertir un score en couleur avec dégradé continu HSL
        function getScoreColor(score) {
            if (score === null || score === undefined) {
                return '#f3f4f6'; // Gris clair pour les données manquantes
            }
            
            // Dégradé continu du rouge (0%) au vert (100%) en utilisant l'interpolation HSL
            const percentage = Math.max(0, Math.min(100, score));
            const factor = percentage / 100;
            
            // Couleurs de début et fin (rouge vers vert)
            const redColor = '#ef4444';   // Rouge (même que dans la config)
            const greenColor = '#22c55e'; // Vert (même que dans la config)
            
            return interpolateColorHSL(redColor, greenColor, factor);
        }
        
        // Dessiner les cellules
        for (let studentIndex = 0; studentIndex < students.length; studentIndex++) {
            for (let categoryIndex = 0; categoryIndex < categories.length; categoryIndex++) {
                const score = scores[studentIndex][categoryIndex];
                const x = padding + studentIndex * cellWidth;
                const y = padding + categoryIndex * cellHeight;
                
                // Couleur de fond basée sur le score
                ctx.fillStyle = getScoreColor(score);
                ctx.fillRect(x, y, cellWidth - 1, cellHeight - 1);
                
                // Bordure
                ctx.strokeStyle = '#d1d5db';
                ctx.strokeRect(x, y, cellWidth - 1, cellHeight - 1);
                
                // Texte du score
                ctx.font = type === 'élément' ? '10px Arial' : '12px Arial';  // Police adaptée
                if (score !== null && score !== undefined) {
                    ctx.fillStyle = score > 60 ? '#ffffff' : '#000000'; // Blanc sur foncé, noir sur clair
                    ctx.textAlign = 'center';
                    // Affichage simplifié pour les éléments (sans %)
                    const displayText = type === 'élément' ? score.toFixed(0) : score.toFixed(1) + '%';
                    ctx.fillText(displayText, x + cellWidth/2, y + cellHeight/2 + 4);
                } else {
                    ctx.fillStyle = '#6b7280';
                    ctx.textAlign = 'center';
                    ctx.fillText('-', x + cellWidth/2, y + cellHeight/2 + 4);
                }
                
                // Remettre la police normale après
                ctx.font = '12px Arial';
            }
        }
        
        // Labels des étudiants (vertical, en haut)
        ctx.fillStyle = '#374151';
        ctx.textAlign = 'left';
        for (let i = 0; i < students.length; i++) {
            const x = padding + i * cellWidth + cellWidth/2;
            const y = padding - 10;
            
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate(-Math.PI/4); // Rotation de -45 degrés
            ctx.fillText(students[i], 0, 0);
            ctx.restore();
        }
        
        // Labels des catégories (à gauche)
        ctx.textAlign = 'right';
        ctx.font = type === 'élément' ? '10px Arial' : '12px Arial';  // Police plus petite pour les éléments
        
        for (let i = 0; i < categories.length; i++) {
            const x = padding - 10;
            const y = padding + i * cellHeight + cellHeight/2 + 4;
            
            // Utiliser la couleur de la catégorie si disponible
            const category = categories[i];
            ctx.fillStyle = colors[category] || '#374151';
            
            // Tronquer le texte si trop long pour les éléments
            let displayText = category;
            if (type === 'élément' && category.length > 25) {
                displayText = category.substring(0, 22) + '...';
            }
            
            ctx.fillText(displayText, x, y);
        }
        
        // Légende (échelle de couleur continue)
        const legendY = canvas.height - 40;
        const legendHeight = 20;
        const legendWidth = 200;
        const legendX = (canvas.width - legendWidth) / 2;
        
        // Dessiner la barre de légende avec dégradé continu
        for (let i = 0; i <= 100; i++) {
            const x = legendX + (i / 100) * legendWidth;
            ctx.fillStyle = getScoreColor(i);
            ctx.fillRect(x, legendY, 2, legendHeight);
        }
        
        // Bordure de la légende
        ctx.strokeStyle = '#d1d5db';
        ctx.strokeRect(legendX, legendY, legendWidth, legendHeight);
        
        // Labels de la légende
        ctx.fillStyle = '#374151';
        ctx.textAlign = 'center';
        ctx.fillText('0%', legendX, legendY + legendHeight + 15);
        ctx.fillText('50%', legendX + legendWidth/2, legendY + legendHeight + 15);
        ctx.fillText('100%', legendX + legendWidth, legendY + legendHeight + 15);
        
        // Titre de la légende
        ctx.fillText('Score moyen (%)', legendX + legendWidth/2, legendY - 10);
    }
    
    function createGradingElementsHeatmap(canvasId, data) {
        const canvas = document.getElementById(canvasId);
        const ctx = canvas.getContext('2d');
        
        const students = data.students;
        const elements = data.elements;
        const detailedScores = data.detailed_scores;
        const colors = data.colors;
        const scaleColors = data.scale_colors;
        
        if (!elements || elements.length === 0) return;
        
        // Dimensions adaptées pour les éléments
        const padding = 120;
        const minCellWidth = 50;
        const minCellHeight = 30;
        
        const cellWidth = Math.max(minCellWidth, (canvas.width - padding * 2) / students.length);
        const cellHeight = Math.max(minCellHeight, (canvas.height - padding * 2) / elements.length);
        
        // Ajuster la taille du canvas si nécessaire
        canvas.width = cellWidth * students.length + padding * 2;
        canvas.height = cellHeight * elements.length + padding * 2;
        
        // Effacer le canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.font = '10px Arial';
        
        // Fonction pour obtenir la couleur selon le type et la valeur
        function getGradeColor(gradeData) {
            if (!gradeData) {
                return '#f3f4f6'; // Gris clair pour les données manquantes
            }
            
            const { value, grading_type, max_points } = gradeData;
            
            // Pour les valeurs spéciales définies en base (., d, a, etc.)
            if (scaleColors[value]) {
                return scaleColors[value].color;
            }
            
            if (grading_type === 'score') {
                // Pour les scores (0-3), utiliser directement les couleurs de base
                if (scaleColors[value]) {
                    return scaleColors[value].color;
                }
                // Fallback si la valeur n'existe pas dans l'échelle
                return '#6b7280';
            } else if (grading_type === 'notes') {
                // Pour les notes numériques, calculer le pourcentage et utiliser un dégradé
                try {
                    const numericValue = parseFloat(value.toString().replace(',', '.'));
                    const percentage = (numericValue / max_points) * 100;
                    
                    // Utiliser le même dégradé HSL que les autres heatmaps pour les notes
                    const factor = Math.max(0, Math.min(100, percentage)) / 100;
                    return interpolateColorHSL('#ef4444', '#22c55e', factor);
                } catch (e) {
                    return '#6b7280'; // Gris si erreur de parsing
                }
            }
            
            return '#6b7280'; // Couleur par défaut
        }
        
        // Dessiner les cellules
        for (let studentIndex = 0; studentIndex < students.length; studentIndex++) {
            for (let elementIndex = 0; elementIndex < elements.length; elementIndex++) {
                const gradeData = detailedScores[studentIndex][elementIndex];
                const x = padding + studentIndex * cellWidth;
                const y = padding + elementIndex * cellHeight;
                
                // Couleur de fond basée sur la vraie valeur et le type
                ctx.fillStyle = getGradeColor(gradeData);
                ctx.fillRect(x, y, cellWidth - 1, cellHeight - 1);
                
                // Bordure
                ctx.strokeStyle = '#d1d5db';
                ctx.strokeRect(x, y, cellWidth - 1, cellHeight - 1);
                
                // Texte de la valeur originale
                ctx.font = '10px Arial';
                if (gradeData) {
                    // Déterminer la couleur du texte selon la luminosité du fond
                    const bgColor = getGradeColor(gradeData);
                    const isLightBackground = isColorLight(bgColor);
                    ctx.fillStyle = isLightBackground ? '#000000' : '#ffffff';
                    ctx.textAlign = 'center';
                    
                    // Afficher la valeur originale (pas de conversion en %)
                    ctx.fillText(gradeData.value.toString(), x + cellWidth/2, y + cellHeight/2 + 4);
                } else {
                    ctx.fillStyle = '#6b7280';
                    ctx.textAlign = 'center';
                    ctx.fillText('-', x + cellWidth/2, y + cellHeight/2 + 4);
                }
            }
        }
        
        // Labels des étudiants (vertical, en haut)
        ctx.fillStyle = '#374151';
        ctx.textAlign = 'left';
        ctx.font = '12px Arial';
        for (let i = 0; i < students.length; i++) {
            const x = padding + i * cellWidth + cellWidth/2;
            const y = padding - 10;
            
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate(-Math.PI/4);
            ctx.fillText(students[i], 0, 0);
            ctx.restore();
        }
        
        // Labels des éléments (à gauche)
        ctx.textAlign = 'right';
        ctx.font = '10px Arial';
        
        for (let i = 0; i < elements.length; i++) {
            const x = padding - 10;
            const y = padding + i * cellHeight + cellHeight/2 + 4;
            
            // Utiliser la couleur de l'élément si disponible
            const element = elements[i];
            ctx.fillStyle = colors[element] || '#374151';
            
            // Tronquer le texte si trop long
            let displayText = element;
            if (element.length > 25) {
                displayText = element.substring(0, 22) + '...';
            }
            
            ctx.fillText(displayText, x, y);
        }
        
        // Légende spéciale pour les éléments de notation
        drawGradingElementsLegend(ctx, canvas, scaleColors);
    }
    
    // Fonction pour déterminer si une couleur est claire ou foncée
    function isColorLight(hexColor) {
        const rgb = hexToRgb(hexColor);
        if (!rgb) return true;
        
        // Calcul de la luminance relative
        const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
        return luminance > 0.5;
    }
    
    // Fonction pour dessiner la légende spécialisée
    function drawGradingElementsLegend(ctx, canvas, scaleColors) {
        const legendY = canvas.height - 80;
        const legendItemHeight = 15;
        const legendItemWidth = 15;
        const legendSpacing = 5;
        
        ctx.font = '11px Arial';
        ctx.textAlign = 'left';
        
        // Titre de la légende
        ctx.fillStyle = '#374151';
        ctx.fillText('Échelle de notation :', 20, legendY - 10);
        
        let currentX = 20;
        let currentY = legendY;
        
        // Afficher les valeurs de l'échelle configurée
        const sortedScaleItems = Object.entries(scaleColors).sort((a, b) => {
            // Trier les valeurs numériques avant les valeurs spéciales
            const aIsNum = !isNaN(parseInt(a[0]));
            const bIsNum = !isNaN(parseInt(b[0]));
            
            if (aIsNum && bIsNum) return parseInt(a[0]) - parseInt(b[0]);
            if (aIsNum && !bIsNum) return -1;
            if (!aIsNum && bIsNum) return 1;
            return a[0].localeCompare(b[0]);
        });
        
        for (const [value, config] of sortedScaleItems) {
            // Rectangle de couleur
            ctx.fillStyle = config.color;
            ctx.fillRect(currentX, currentY, legendItemWidth, legendItemHeight);
            
            // Bordure
            ctx.strokeStyle = '#d1d5db';
            ctx.strokeRect(currentX, currentY, legendItemWidth, legendItemHeight);
            
            // Texte
            ctx.fillStyle = '#374151';
            ctx.fillText(`${value}: ${config.label}`, currentX + legendItemWidth + legendSpacing, currentY + legendItemHeight - 3);
            
            // Passer à la ligne après quelques éléments pour éviter le débordement
            currentX += 120;
            if (currentX > canvas.width - 150) {
                currentX = 20;
                currentY += legendItemHeight + legendSpacing;
            }
        }
        
        // Note explicative pour les notes numériques
        ctx.fillStyle = '#6b7280';
        ctx.font = '10px Arial';
        ctx.fillText('Notes numériques : dégradé rouge (0%) → vert (100%)', 20, currentY + 25);
    }
    
    // === APPELS AUX HEATMAPS (après toutes les définitions de fonctions) ===
    
    {% if heatmap_competences %}
    // Heatmap des compétences
    createHeatmap('competencesHeatmap', competencesData, 'compétence');
    {% endif %}
    
    {% if heatmap_domains %}
    // Heatmap des domaines
    createHeatmap('domainsHeatmap', domainsData, 'domaine');
    {% endif %}
    
    {% if heatmap_grading_elements %}
    // Heatmap des éléments de notation avec couleurs de base
    createGradingElementsHeatmap('gradingElementsHeatmap', gradingElementsData);
    {% endif %}
});

// === FONCTIONNALITÉ D'ENVOI DE BILANS ===

let eligibleStudents = [];
let selectedStudents = [];

// Charger les élèves éligibles au chargement de la page
document.addEventListener('DOMContentLoaded', function() {
    loadEligibleStudents();
});

function loadEligibleStudents() {
    fetch(`/assessments/{{ assessment.id }}/eligible-students`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                eligibleStudents = data.students;
                updateSendReportsButton(data.with_email_count, data.total_count);
            } else {
                console.error('Erreur lors du chargement des élèves:', data.error);
            }
        })
        .catch(error => {
            console.error('Erreur réseau:', error);
        });
}

function updateSendReportsButton(withEmailCount, totalCount) {
    const btn = document.getElementById('sendReportsBtn');
    if (withEmailCount === 0) {
        btn.disabled = true;
        btn.classList.add('opacity-50', 'cursor-not-allowed');
        btn.classList.remove('hover:bg-blue-700');
        btn.innerHTML = `
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            Aucune adresse email configurée
        `;
    } else {
        btn.innerHTML = `
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
            </svg>
            📧 Envoyer les bilans (${withEmailCount}/${totalCount} avec email)
        `;
    }
}

function openSendReportsModal() {
    if (eligibleStudents.length === 0) {
        alert('Aucun élève éligible trouvé');
        return;
    }
    
    document.getElementById('sendReportsModal').classList.remove('hidden');
    populateStudentsList();
}

function closeSendReportsModal() {
    document.getElementById('sendReportsModal').classList.add('hidden');
    selectedStudents = [];
}

function populateStudentsList() {
    const container = document.getElementById('studentsList');
    const studentsWithEmail = eligibleStudents.filter(s => s.has_email);
    
    if (studentsWithEmail.length === 0) {
        container.innerHTML = '<p class="text-gray-500 text-center py-4">Aucun élève avec adresse email configurée</p>';
        return;
    }
    
    container.innerHTML = studentsWithEmail.map(student => `
        <label class="flex items-center p-3 hover:bg-gray-50 rounded-lg cursor-pointer">
            <input type="checkbox" 
                   value="${student.id}" 
                   onchange="updateSelectedStudents()"
                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded mr-3">
            <div class="flex-1">
                <div class="font-medium text-gray-900">${student.full_name}</div>
                <div class="text-sm text-gray-500">${student.email}</div>
            </div>
        </label>
    `).join('');
    
    // Sélectionner tous par défaut
    selectAllStudents();
}

function selectAllStudents() {
    const checkboxes = document.querySelectorAll('#studentsList input[type="checkbox"]');
    checkboxes.forEach(cb => cb.checked = true);
    updateSelectedStudents();
}

function unselectAllStudents() {
    const checkboxes = document.querySelectorAll('#studentsList input[type="checkbox"]');
    checkboxes.forEach(cb => cb.checked = false);
    updateSelectedStudents();
}

function updateSelectedStudents() {
    const checkboxes = document.querySelectorAll('#studentsList input[type="checkbox"]:checked');
    selectedStudents = Array.from(checkboxes).map(cb => parseInt(cb.value));
    
    const count = selectedStudents.length;
    document.getElementById('selectedCount').textContent = count;
    document.getElementById('sendReportsSubmitBtn').disabled = count === 0;
}

function sendReports() {
    if (selectedStudents.length === 0) {
        alert('Veuillez sélectionner au moins un élève');
        return;
    }
    
    const customMessage = document.getElementById('customMessage').value.trim();
    const submitBtn = document.getElementById('sendReportsSubmitBtn');
    const originalText = submitBtn.innerHTML;
    
    // Désactiver le bouton et afficher le loading
    submitBtn.disabled = true;
    submitBtn.innerHTML = `
        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
        Envoi en cours...
    `;
    
    // Envoyer la requête
    fetch(`/assessments/{{ assessment.id }}/send-reports`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            student_ids: selectedStudents,
            custom_message: customMessage
        })
    })
    .then(response => response.json())
    .then(data => {
        // Restaurer le bouton
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalText;
        
        if (data.success) {
            // Afficher le résultat
            showSendResult(data);
            // Fermer la modal après un délai
            setTimeout(() => {
                closeSendReportsModal();
            }, 3000);
        } else {
            alert(`Erreur lors de l'envoi: ${data.error}`);
        }
    })
    .catch(error => {
        // Restaurer le bouton en cas d'erreur
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalText;
        console.error('Erreur:', error);
        alert('Erreur réseau lors de l\'envoi des bilans');
    });
}

function showSendResult(result) {
    const resultDiv = document.getElementById('sendResult');
    
    let content = `<div class="mb-4">
        <h3 class="text-lg font-medium ${result.success ? 'text-green-600' : 'text-red-600'} mb-2">
            ${result.message}
        </h3>
    </div>`;
    
    if (result.sent_count > 0) {
        content += `<div class="mb-3">
            <p class="text-green-600">✅ ${result.sent_count} bilan(s) envoyé(s) avec succès</p>
        </div>`;
    }
    
    if (result.error_count > 0) {
        content += `<div class="mb-3">
            <p class="text-red-600 font-medium">❌ ${result.error_count} erreur(s):</p>
            <ul class="text-sm text-red-600 mt-2 max-h-32 overflow-y-auto">`;
        
        result.errors.forEach(error => {
            content += `<li class="py-1">• ${error}</li>`;
        });
        
        content += `</ul></div>`;
    }
    
    resultDiv.innerHTML = content;
    resultDiv.classList.remove('hidden');
    
    // Cacher les autres sections
    document.getElementById('studentsSelection').classList.add('hidden');
    document.getElementById('modalActions').classList.add('hidden');
}

// Fermer la modal en cliquant à côté
document.addEventListener('click', function(e) {
    const modal = document.getElementById('sendReportsModal');
    if (e.target === modal) {
        closeSendReportsModal();
    }
});
</script>

<!-- Modal d'envoi des bilans -->
<div id="sendReportsModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-11/12 max-w-2xl shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <!-- En-tête -->
            <div class="flex justify-between items-center pb-4 border-b">
                <h3 class="text-lg font-medium text-gray-900">📧 Envoyer les bilans par email</h3>
                <button onclick="closeSendReportsModal()" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            
            <!-- Sélection des élèves -->
            <div id="studentsSelection" class="py-4">
                <div class="flex justify-between items-center mb-4">
                    <h4 class="font-medium text-gray-900">Sélectionner les élèves</h4>
                    <div class="flex space-x-2">
                        <button onclick="selectAllStudents()" 
                                class="text-sm text-blue-600 hover:text-blue-800">Tout sélectionner</button>
                        <span class="text-gray-300">|</span>
                        <button onclick="unselectAllStudents()" 
                                class="text-sm text-blue-600 hover:text-blue-800">Tout désélectionner</button>
                    </div>
                </div>
                
                <div id="studentsList" class="max-h-64 overflow-y-auto border border-gray-200 rounded-lg p-2 space-y-1">
                    <!-- Les élèves seront ajoutés ici par JavaScript -->
                </div>
                
                <p class="text-sm text-gray-600 mt-2">
                    <span id="selectedCount">0</span> élève(s) sélectionné(s)
                </p>
            </div>
            
            <!-- Message personnalisé -->
            <div class="py-4 border-t">
                <label for="customMessage" class="block text-sm font-medium text-gray-700 mb-2">
                    Message personnalisé (optionnel)
                </label>
                <textarea id="customMessage" 
                          rows="3" 
                          placeholder="Message du professeur à ajouter dans les bilans..."
                          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
            </div>
            
            <!-- Résultat de l'envoi -->
            <div id="sendResult" class="hidden py-4 border-t">
                <!-- Le résultat sera affiché ici -->
            </div>
            
            <!-- Actions -->
            <div id="modalActions" class="flex justify-end space-x-3 pt-4 border-t">
                <button onclick="closeSendReportsModal()" 
                        class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                    Annuler
                </button>
                <button id="sendReportsSubmitBtn" onclick="sendReports()" 
                        class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                        disabled>
                    📧 Envoyer les bilans
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}