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

{% block title %}Stats détaillées - {{ stats.name }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href='{{ asset('css/city-sidebar.css') }}' rel='stylesheet'/>
{% endblock %}

{% block body %}
    <div class="container-fluid">
        <div class="row">
            <!-- Sidebar de navigation -->
            <div class="col-12">
                {% include 'admin/_city_sidebar.html.twig' with {'stats': stats, 'active_menu': 'followup_detailed_stats'} %}
            </div>

            <!-- Contenu principal -->
            <div class="col-md-9 col-lg-10 main-content">
                <div class="p-4">
                    <h1>Stats détaillées - {{ stats.name }} ({{ stats.zone }})</h1>
                    <p class="text-muted">Sélectionnez les thématiques à afficher pour comparer les courbes de décompte et complétion.</p>

                    <!-- Sélection des thématiques -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="bi bi-check2-square"></i> Sélection des thématiques</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                {% for theme, label in followup_labels %}
                                    <div class="col-md-4 col-lg-3 mb-2">
                                        <div class="form-check">
                                            <input class="form-check-input theme-checkbox" type="checkbox" 
                                                   value="{{ theme }}" id="theme_{{ theme }}"
                                                   data-label="{{ label }}"
                                                   data-icon="{{ followup_icons[theme]|default('bi-question-circle') }}">
                                            <label class="form-check-label" for="theme_{{ theme }}">
                                                <i class="bi {{ followup_icons[theme]|default('bi-question-circle') }}"></i> {{ label }}
                                            </label>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                            <div class="mt-3">
                                <button type="button" class="btn btn-sm btn-outline-primary" id="selectAll">Tout sélectionner</button>
                                <button type="button" class="btn btn-sm btn-outline-secondary" id="deselectAll">Tout désélectionner</button>
                            </div>
                        </div>
                    </div>

                    <!-- Options d'affichage -->
                    <div class="card mb-3">
                        <div class="card-body">
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="showCount" checked>
                                    <label class="form-check-label" for="showCount">
                                        Afficher les décomptes
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="showCompletion" checked>
                                    <label class="form-check-label" for="showCompletion">
                                        Afficher les complétions
                                    </label>
                                </div>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="separateCharts" checked>
                                <label class="form-check-label" for="separateCharts">
                                    Afficher deux graphiques séparés (décomptes et complétions)
                                </label>
                            </div>
                            <small class="text-muted">Décochez pour afficher un seul graphique combiné avec deux axes Y</small>
                        </div>
                    </div>

                    <!-- Graphique combiné (un seul) -->
                    <div class="card mb-4" id="combinedChartCard" style="display: none;">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="bi bi-graph-up"></i> Graphique combiné</h5>
                        </div>
                        <div class="card-body">
                            <div id="combinedChartContainer">
                                <canvas id="combinedChart" style="max-height: 500px;"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- Graphique des décomptes -->
                    <div class="card mb-4" id="countChartCard">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="bi bi-bar-chart"></i> Graphique des décomptes</h5>
                        </div>
                        <div class="card-body">
                            <div id="countChartContainer">
                                <canvas id="countChart" style="max-height: 500px;"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- Graphique des complétions -->
                    <div class="card" id="completionChartCard">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="bi bi-percent"></i> Graphique des complétions (%)</h5>
                        </div>
                        <div class="card-body">
                            <div id="completionChartContainer">
                                <canvas id="completionChart" style="max-height: 500px;"></canvas>
                            </div>
                        </div>
                    </div>

                    <div class="mt-3">
                        <a href="{{ path('app_admin_stats', {'insee_code': stats.zone}) }}"
                           class="btn btn-secondary"><i class="bi bi-arrow-left"></i> Retour à la fiche ville</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="/js/chartjs/chart.umd.js"></script>
    <script src="/js/chartjs/chartjs-adapter-date-fns.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
    <script>
        const inseeCode = '{{ stats.zone }}';
        const apiUrl = '{{ path('api_stats_followup_by_insee', {'insee': stats.zone}) }}';
        let countChartInstance = null;
        let completionChartInstance = null;
        let combinedChartInstance = null;
        let allData = null;

        // Couleurs pour les différentes thématiques
        const colors = [
            { count: 'rgba(54, 162, 235, 1)', completion: 'rgba(75, 192, 192, 1)' },
            { count: 'rgba(255, 99, 132, 1)', completion: 'rgba(255, 159, 64, 1)' },
            { count: 'rgba(153, 102, 255, 1)', completion: 'rgba(201, 203, 207, 1)' },
            { count: 'rgba(255, 205, 86, 1)', completion: 'rgba(54, 162, 235, 0.5)' },
            { count: 'rgba(75, 192, 192, 1)', completion: 'rgba(255, 99, 132, 0.5)' },
            { count: 'rgba(255, 159, 64, 1)', completion: 'rgba(153, 102, 255, 0.5)' },
            { count: 'rgba(201, 203, 207, 1)', completion: 'rgba(255, 205, 86, 0.5)' },
            { count: 'rgba(255, 99, 132, 0.5)', completion: 'rgba(75, 192, 192, 0.5)' },
        ];

        // Charger les données depuis l'API
        async function loadData() {
            try {
                console.log('Chargement des données depuis:', apiUrl);
                const response = await fetch(apiUrl);
                if (!response.ok) {
                    const errorText = await response.text();
                    console.error('Erreur HTTP:', response.status, errorText);
                    throw new Error(`Erreur ${response.status}: ${errorText}`);
                }
                allData = await response.json();
                console.log('Données chargées:', allData);
                updateChart();
            } catch (error) {
                console.error('Erreur:', error);
                const countContainer = document.getElementById('countChartContainer');
                const completionContainer = document.getElementById('completionChartContainer');
                if (countContainer) {
                    countContainer.innerHTML = '<p class="text-danger">Erreur lors du chargement des données: ' + error.message + '</p>';
                }
                if (completionContainer) {
                    completionContainer.innerHTML = '<p class="text-danger">Erreur lors du chargement des données: ' + error.message + '</p>';
                }
            }
        }

        // Mettre à jour les graphiques
        function updateChart() {
            if (!allData) {
                console.warn('Aucune donnée chargée');
                return;
            }

            const showCount = document.getElementById('showCount').checked;
            const showCompletion = document.getElementById('showCompletion').checked;
            const separateCharts = document.getElementById('separateCharts').checked;
            const selectedThemes = Array.from(document.querySelectorAll('.theme-checkbox:checked'))
                .map(cb => cb.value);

            // Afficher/masquer les conteneurs selon le mode
            const combinedCard = document.getElementById('combinedChartCard');
            const countCard = document.getElementById('countChartCard');
            const completionCard = document.getElementById('completionChartCard');
            
            if (separateCharts) {
                combinedCard.style.display = 'none';
                countCard.style.display = showCount ? 'block' : 'none';
                completionCard.style.display = showCompletion ? 'block' : 'none';
            } else {
                combinedCard.style.display = (showCount || showCompletion) ? 'block' : 'none';
                countCard.style.display = 'none';
                completionCard.style.display = 'none';
            }

            if (selectedThemes.length === 0) {
                // Détruire les graphiques existants
                if (countChartInstance) {
                    countChartInstance.destroy();
                    countChartInstance = null;
                }
                if (completionChartInstance) {
                    completionChartInstance.destroy();
                    completionChartInstance = null;
                }
                if (combinedChartInstance) {
                    combinedChartInstance.destroy();
                    combinedChartInstance = null;
                }
                document.getElementById('countChartContainer').innerHTML = '<p class="text-muted">Sélectionnez au moins une thématique pour afficher le graphique.</p>';
                document.getElementById('completionChartContainer').innerHTML = '<p class="text-muted">Sélectionnez au moins une thématique pour afficher le graphique.</p>';
                document.getElementById('combinedChartContainer').innerHTML = '<p class="text-muted">Sélectionnez au moins une thématique pour afficher le graphique.</p>';
                return;
            }

            // Préparer les données pour les décomptes
            const countDatasets = [];
            const completionDatasets = [];
            let colorIndex = 0;

            selectedThemes.forEach(theme => {
                const themeData = allData.themes[theme];
                if (!themeData) {
                    console.warn(`Pas de données pour le thème: ${theme}`);
                    return;
                }

                const checkbox = document.getElementById('theme_' + theme);
                const label = checkbox ? checkbox.dataset.label : theme;
                const color = colors[colorIndex % colors.length];

                // Graphique des décomptes (seulement si showCount est coché)
                if (showCount && themeData.count && themeData.count.length > 0) {
                    countDatasets.push({
                        label: label,
                        data: themeData.count.map(d => ({ x: d.date, y: d.value })),
                        borderColor: color.count,
                        backgroundColor: color.count.replace('1)', '0.1)'),
                        fill: false,
                        tension: 0.3,
                    });
                }

                // Graphique des complétions (seulement si showCompletion est coché)
                if (showCompletion && themeData.completion && themeData.completion.length > 0) {
                    completionDatasets.push({
                        label: label,
                        data: themeData.completion.map(d => ({ x: d.date, y: d.value })),
                        borderColor: color.completion,
                        backgroundColor: color.completion.replace('1)', '0.1)'),
                        fill: false,
                        tension: 0.3,
                    });
                }

                colorIndex++;
            });

            if (separateCharts) {
                // Créer/mettre à jour les graphiques séparés selon les cases cochées
                if (showCount) {
                    updateCountChart(countDatasets);
                } else {
                    if (countChartInstance) {
                        countChartInstance.destroy();
                        countChartInstance = null;
                    }
                }
                
                if (showCompletion) {
                    updateCompletionChart(completionDatasets);
                } else {
                    if (completionChartInstance) {
                        completionChartInstance.destroy();
                        completionChartInstance = null;
                    }
                }
                
                // Détruire le graphique combiné s'il existe
                if (combinedChartInstance) {
                    combinedChartInstance.destroy();
                    combinedChartInstance = null;
                }
            } else {
                // Créer/mettre à jour le graphique combiné
                if (showCount || showCompletion) {
                    updateCombinedChart(countDatasets, completionDatasets);
                } else {
                    if (combinedChartInstance) {
                        combinedChartInstance.destroy();
                        combinedChartInstance = null;
                    }
                }
                
                // Détruire les graphiques séparés s'ils existent
                if (countChartInstance) {
                    countChartInstance.destroy();
                    countChartInstance = null;
                }
                if (completionChartInstance) {
                    completionChartInstance.destroy();
                    completionChartInstance = null;
                }
            }
        }

        // Mettre à jour le graphique des décomptes
        function updateCountChart(datasets) {
            const container = document.getElementById('countChartContainer');
            if (!container) return;

            if (datasets.length === 0) {
                if (countChartInstance) {
                    countChartInstance.destroy();
                    countChartInstance = null;
                }
                container.innerHTML = '<p class="text-muted">Aucune donnée de décompte disponible pour les thématiques sélectionnées.</p>';
                return;
            }

            // Restaurer le canvas si nécessaire
            if (container.innerHTML.includes('<p')) {
                container.innerHTML = '<canvas id="countChart" style="max-height: 500px;"></canvas>';
            }

            const canvas = document.getElementById('countChart');
            if (!canvas) {
                console.error('Impossible de trouver le canvas des décomptes');
                return;
            }

            const ctx = canvas.getContext('2d');
            if (!ctx) {
                console.error('Impossible d\'obtenir le contexte 2D pour les décomptes');
                return;
            }

            if (countChartInstance) {
                countChartInstance.destroy();
            }

            try {
                countChartInstance = new Chart(ctx, {
                    type: 'line',
                    data: { datasets },
                    options: {
                        responsive: true,
                        maintainAspectRatio: true,
                        parsing: {
                            xAxisKey: 'x',
                            yAxisKey: 'y'
                        },
                        plugins: {
                            legend: {
                                display: true,
                                position: 'top',
                            },
                            tooltip: {
                                mode: 'index',
                                intersect: false,
                                callbacks: {
                                    title: function(context) {
                                        if (context && context.length > 0 && context[0].parsed && context[0].parsed.x) {
                                            return new Date(context[0].parsed.x).toLocaleDateString('fr-FR');
                                        }
                                        return '';
                                    }
                                }
                            }
                        },
                        scales: {
                            x: {
                                type: 'time',
                                time: {
                                    unit: 'day',
                                    displayFormats: {
                                        day: 'dd/MM/yyyy'
                                    }
                                },
                                title: {
                                    display: true,
                                    text: 'Date'
                                }
                            },
                            y: {
                                type: 'linear',
                                position: 'left',
                                title: {
                                    display: true,
                                    text: "Nombre d'objets"
                                },
                                beginAtZero: true
                            }
                        }
                    }
                });
                console.log('Graphique des décomptes créé avec succès', datasets.length, 'datasets');
            } catch (error) {
                console.error('Erreur lors de la création du graphique des décomptes:', error);
            }
        }

        // Mettre à jour le graphique des complétions
        function updateCompletionChart(datasets) {
            const container = document.getElementById('completionChartContainer');
            if (!container) return;

            if (datasets.length === 0) {
                if (completionChartInstance) {
                    completionChartInstance.destroy();
                    completionChartInstance = null;
                }
                container.innerHTML = '<p class="text-muted">Aucune donnée de complétion disponible pour les thématiques sélectionnées.</p>';
                return;
            }

            // Restaurer le canvas si nécessaire
            if (container.innerHTML.includes('<p')) {
                container.innerHTML = '<canvas id="completionChart" style="max-height: 500px;"></canvas>';
            }

            const canvas = document.getElementById('completionChart');
            if (!canvas) {
                console.error('Impossible de trouver le canvas des complétions');
                return;
            }

            const ctx = canvas.getContext('2d');
            if (!ctx) {
                console.error('Impossible d\'obtenir le contexte 2D pour les complétions');
                return;
            }

            if (completionChartInstance) {
                completionChartInstance.destroy();
            }

            try {
                completionChartInstance = new Chart(ctx, {
                    type: 'line',
                    data: { datasets },
                    options: {
                        responsive: true,
                        maintainAspectRatio: true,
                        parsing: {
                            xAxisKey: 'x',
                            yAxisKey: 'y'
                        },
                        plugins: {
                            legend: {
                                display: true,
                                position: 'top',
                            },
                            tooltip: {
                                mode: 'index',
                                intersect: false,
                                callbacks: {
                                    title: function(context) {
                                        if (context && context.length > 0 && context[0].parsed && context[0].parsed.x) {
                                            return new Date(context[0].parsed.x).toLocaleDateString('fr-FR');
                                        }
                                        return '';
                                    },
                                    label: function(context) {
                                        return context.dataset.label + ': ' + context.parsed.y.toFixed(1) + '%';
                                    }
                                }
                            }
                        },
                        scales: {
                            x: {
                                type: 'time',
                                time: {
                                    unit: 'day',
                                    displayFormats: {
                                        day: 'dd/MM/yyyy'
                                    }
                                },
                                title: {
                                    display: true,
                                    text: 'Date'
                                }
                            },
                            y: {
                                type: 'linear',
                                position: 'left',
                                title: {
                                    display: true,
                                    text: 'Complétion (%)'
                                },
                                min: 0,
                                max: 100,
                                ticks: {
                                    callback: function(value) {
                                        return value + '%';
                                    }
                                }
                            }
                        }
                    }
                });
                console.log('Graphique des complétions créé avec succès', datasets.length, 'datasets');
            } catch (error) {
                console.error('Erreur lors de la création du graphique des complétions:', error);
            }
        }

        // Mettre à jour le graphique combiné
        function updateCombinedChart(countDatasets, completionDatasets) {
            const container = document.getElementById('combinedChartContainer');
            if (!container) return;

            const showCount = document.getElementById('showCount').checked;
            const showCompletion = document.getElementById('showCompletion').checked;

            // Combiner les datasets
            const allDatasets = [];
            let colorIndex = 0;

            // Ajouter les datasets de décompte (seulement si showCount est coché)
            if (showCount) {
                countDatasets.forEach(dataset => {
                    allDatasets.push({
                        ...dataset,
                        borderColor: colors[colorIndex % colors.length].count,
                        backgroundColor: colors[colorIndex % colors.length].count.replace('1)', '0.1)'),
                        yAxisID: 'y',
                    });
                    colorIndex++;
                });
            }

            // Réinitialiser l'index pour les complétions si on a des décomptes
            if (!showCount) {
                colorIndex = 0;
            }
            
            // Ajouter les datasets de complétion (seulement si showCompletion est coché)
            if (showCompletion) {
                completionDatasets.forEach(dataset => {
                    allDatasets.push({
                        ...dataset,
                        borderColor: colors[colorIndex % colors.length].completion,
                        backgroundColor: colors[colorIndex % colors.length].completion.replace('1)', '0.1)'),
                        yAxisID: showCount ? 'y1' : 'y', // Utiliser y1 seulement si on a aussi des décomptes
                        borderDash: showCount ? [5, 5] : [], // Pointillés seulement si on a aussi des décomptes
                    });
                    colorIndex++;
                });
            }

            if (allDatasets.length === 0) {
                if (combinedChartInstance) {
                    combinedChartInstance.destroy();
                    combinedChartInstance = null;
                }
                container.innerHTML = '<p class="text-muted">Aucune donnée disponible pour les thématiques sélectionnées.</p>';
                return;
            }

            // Restaurer le canvas si nécessaire
            if (container.innerHTML.includes('<p')) {
                container.innerHTML = '<canvas id="combinedChart" style="max-height: 500px;"></canvas>';
            }

            const canvas = document.getElementById('combinedChart');
            if (!canvas) {
                console.error('Impossible de trouver le canvas combiné');
                return;
            }

            const ctx = canvas.getContext('2d');
            if (!ctx) {
                console.error('Impossible d\'obtenir le contexte 2D pour le graphique combiné');
                return;
            }

            if (combinedChartInstance) {
                combinedChartInstance.destroy();
            }

            try {
                combinedChartInstance = new Chart(ctx, {
                    type: 'line',
                    data: { datasets: allDatasets },
                    options: {
                        responsive: true,
                        maintainAspectRatio: true,
                        parsing: {
                            xAxisKey: 'x',
                            yAxisKey: 'y'
                        },
                        plugins: {
                            legend: {
                                display: true,
                                position: 'top',
                            },
                            tooltip: {
                                mode: 'index',
                                intersect: false,
                                callbacks: {
                                    title: function(context) {
                                        if (context && context.length > 0 && context[0].parsed && context[0].parsed.x) {
                                            return new Date(context[0].parsed.x).toLocaleDateString('fr-FR');
                                        }
                                        return '';
                                    },
                                    label: function(context) {
                                        let label = context.dataset.label || '';
                                        if (context.parsed.y !== null) {
                                            // Si c'est une complétion (axe y1), ajouter le %
                                            if (context.dataset.yAxisID === 'y1') {
                                                label += ': ' + context.parsed.y.toFixed(1) + '%';
                                            } else {
                                                label += ': ' + context.parsed.y;
                                            }
                                        }
                                        return label;
                                    }
                                }
                            }
                        },
                        scales: {
                            x: {
                                type: 'time',
                                time: {
                                    unit: 'day',
                                    displayFormats: {
                                        day: 'dd/MM/yyyy'
                                    }
                                },
                                title: {
                                    display: true,
                                    text: 'Date'
                                }
                            },
                            y: {
                                type: 'linear',
                                position: 'left',
                                title: {
                                    display: true,
                                    text: showCount && showCompletion ? "Nombre d'objets" : (showCount ? "Nombre d'objets" : 'Complétion (%)')
                                },
                                beginAtZero: showCount || !showCompletion,
                                ...(showCompletion && !showCount ? {
                                    min: 0,
                                    max: 100,
                                    ticks: {
                                        callback: function(value) {
                                            return value + '%';
                                        }
                                    }
                                } : {})
                            },
                            ...(showCount && showCompletion ? {
                                y1: {
                                    type: 'linear',
                                    position: 'right',
                                    title: {
                                        display: true,
                                        text: 'Complétion (%)'
                                    },
                                    min: 0,
                                    max: 100,
                                    grid: {
                                        drawOnChartArea: false
                                    },
                                    ticks: {
                                        callback: function(value) {
                                            return value + '%';
                                        }
                                    }
                                }
                            } : {})
                        }
                    }
                });
                console.log('Graphique combiné créé avec succès', allDatasets.length, 'datasets');
            } catch (error) {
                console.error('Erreur lors de la création du graphique combiné:', error);
            }
        }

        // Événements
        document.addEventListener('DOMContentLoaded', function() {
            loadData();

            // Écouter les changements de sélection
            document.querySelectorAll('.theme-checkbox').forEach(cb => {
                cb.addEventListener('change', updateChart);
            });

            // Écouter les changements d'options d'affichage
            document.getElementById('showCount').addEventListener('change', updateChart);
            document.getElementById('showCompletion').addEventListener('change', updateChart);
            document.getElementById('separateCharts').addEventListener('change', updateChart);

            // Boutons sélection/désélection
            document.getElementById('selectAll').addEventListener('click', function() {
                document.querySelectorAll('.theme-checkbox').forEach(cb => cb.checked = true);
                updateChart();
            });

            document.getElementById('deselectAll').addEventListener('click', function() {
                document.querySelectorAll('.theme-checkbox').forEach(cb => cb.checked = false);
                updateChart();
            });
        });
    </script>
{% endblock %}