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

{% block title %}Histogramme de fraîcheur OSM{% endblock %}

{% block body %}
<div class="container mt-4">
    <h1>Histogramme de fraîcheur des données OSM</h1>
    <h2>Par année</h2>
    <canvas id="fraicheurHistogrammeAnnee" width="800" height="400" style="max-width:100%; margin: 20px 0;"></canvas>
    <h2>Par trimestre</h2>
    <canvas id="fraicheurHistogrammeTrimestre" width="800" height="400" style="max-width:100%; margin: 20px 0;"></canvas>
    
    <h2>Par mois</h2>
    <canvas id="fraicheurHistogramme" width="800" height="400" style="max-width:100%; margin: 20px 0;"></canvas>
    
    <h2>Distribution des villes selon le nombre d'habitants par lieu (par pas de 10)</h2>
    <canvas id="distributionHabitantsParLieu" width="800" height="400" style="max-width:100%; margin: 20px 0;"></canvas>
    <div id="fraicheurMeta" class="mb-3"></div>
    <a href="{{ path('admin_fraicheur_calculate') }}" class="btn btn-primary">Régénérer les statistiques</a>
    <a href="{{ path('admin_fraicheur_download') }}" class="btn btn-secondary">Télécharger le JSON des lieux</a>
    <a href="{{ path('admin_distribution_villes_lieux_par_habitant_download') }}" class="btn btn-secondary">Télécharger le JSON villes/lieux/habitant</a>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    fetch('/admin/fraicheur/download')
        .then(r => r.json())
        .then(data => {
            if(data.error){
                document.getElementById('fraicheurMeta').innerHTML = '<div class="alert alert-danger">'+data.error+'</div>';
                return;
            }
            const ctx = document.getElementById('fraicheurHistogramme').getContext('2d');
            const labels = Object.keys(data.histogram);
            const values = Object.values(data.histogram);
            document.getElementById('fraicheurMeta').innerHTML =
                '<b>Date de génération :</b> ' + data.generated_at + '<br>' +
                '<b>Total lieux :</b> ' + data.total;
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Nombre de lieux modifiés ce mois',
                        data: values,
                        backgroundColor: 'rgba(54, 162, 235, 0.7)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    plugins: {
                        legend: { display: false },
                        title: { display: true, text: 'Fraîcheur des données OSM (par mois)' }
                    },
                    scales: {
                        y: { beginAtZero: true, title: { display: true, text: 'Nombre de lieux' } },
                        x: { title: { display: true, text: 'Mois' } }
                    }
                }
            });

            // Agrégation par trimestre
            const trimestreAgg = {};
            for(const key in data.histogram){
                // key = YYYY-MM
                const [year, month] = key.split('-');
                const m = parseInt(month, 10);
                let trimestre = 1;
                if(m >= 4 && m <= 6) trimestre = 2;
                else if(m >= 7 && m <= 9) trimestre = 3;
                else if(m >= 10 && m <= 12) trimestre = 4;
                const trimestreKey = `${year}-T${trimestre}`;
                if(!trimestreAgg[trimestreKey]) trimestreAgg[trimestreKey] = 0;
                trimestreAgg[trimestreKey] += data.histogram[key];
            }
            const trimestreLabels = Object.keys(trimestreAgg).sort();
            const trimestreValues = trimestreLabels.map(k => trimestreAgg[k]);
            const ctxTrim = document.getElementById('fraicheurHistogrammeTrimestre').getContext('2d');
            new Chart(ctxTrim, {
                type: 'bar',
                data: {
                    labels: trimestreLabels,
                    datasets: [{
                        label: 'Nombre de lieux modifiés ce trimestre',
                        data: trimestreValues,
                        backgroundColor: 'rgba(255, 159, 64, 0.7)',
                        borderColor: 'rgba(255, 159, 64, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    plugins: {
                        legend: { display: false },
                        title: { display: true, text: 'Fraîcheur des données OSM (par trimestre)' }
                    },
                    scales: {
                        y: { beginAtZero: true, title: { display: true, text: 'Nombre de lieux' } },
                        x: { title: { display: true, text: 'Trimestre' } }
                    }
                }
            });

            // Agrégation par année
            const anneeAgg = {};
            for(const key in data.histogram){
                // key = YYYY-MM
                const [year] = key.split('-');
                if(!anneeAgg[year]) anneeAgg[year] = 0;
                anneeAgg[year] += data.histogram[key];
            }
            const anneeLabels = Object.keys(anneeAgg).sort();
            const anneeValues = anneeLabels.map(k => anneeAgg[k]);
            const ctxAnnee = document.getElementById('fraicheurHistogrammeAnnee').getContext('2d');
            new Chart(ctxAnnee, {
                type: 'bar',
                data: {
                    labels: anneeLabels,
                    datasets: [{
                        label: 'Nombre de lieux modifiés cette année',
                        data: anneeValues,
                        backgroundColor: 'rgba(75, 192, 192, 0.7)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    plugins: {
                        legend: { display: false },
                        title: { display: true, text: 'Fraîcheur des données OSM (par année)' }
                    },
                    scales: {
                        y: { beginAtZero: true, title: { display: true, text: 'Nombre de lieux' } },
                        x: { title: { display: true, text: 'Année' } }
                    }
                }
            });

            // Histogramme distribution villes/lieux/habitant
            fetch('/admin/distribution_villes_lieux_par_habitant_download')
                .then(r => r.json())
                .then(data => {
                    if(data.error){
                        document.getElementById('distributionVillesLieuxParHabitant').insertAdjacentHTML('afterend', '<div class="alert alert-danger">Erreur de chargement des données : '+data.error+'</div>');
                        return;
                    }
                    // Histogramme habitants par lieu (pas de 10)
                    fetch('/admin/distribution_villes_lieux_par_habitant_villes')
                        .then(r2 => r2.json())
                        .then(villesData => {
                            // Histogramme habitants par lieu
                            if(!data.histogram_10){
                                document.getElementById('distributionHabitantsParLieu').insertAdjacentHTML('afterend', '<div class="alert alert-danger">Erreur : données histogram_10 absentes. Cliquez sur "Régénérer les statistiques".</div>');
                                return;
                            }
                            const ctxHPL = document.getElementById('distributionHabitantsParLieu').getContext('2d');
                            const labelsHPL = Object.keys(data.histogram_10);
                            const valuesHPL = Object.values(data.histogram_10);
                            const villesByBin10 = villesData.villes_by_bin_10 || {};
                            console.log('HPL', labelsHPL, villesByBin10);
                            new Chart(ctxHPL, {
                                type: 'bar',
                                data: {
                                    labels: labelsHPL,
                                    datasets: [{
                                        label: "Nombre de villes",
                                        data: valuesHPL,
                                        backgroundColor: 'rgba(255, 99, 132, 0.7)',
                                        borderColor: 'rgba(255, 99, 132, 1)',
                                        borderWidth: 1
                                    }]
                                },
                                options: {
                                    responsive: true,
                                    maintainAspectRatio: true,
                                    plugins: {
                                        legend: { display: false },
                                        title: { display: true, text: "Distribution des villes par habitants/lieu (par pas de 10)" },
                                        tooltip: {
                                            callbacks: {
                                                afterBody: function(context) {
                                                    const bin = context[0].label;
                                                    const villes = villesByBin10[bin] || [];
                                                    if(villes.length > 0){
                                                        return ['Villes :'].concat(villes.map(v => '• ' + v));
                                                    }
                                                    return [];
                                                }
                                            }
                                        }
                                    },
                                    scales: {
                                        y: { beginAtZero: true, title: { display: true, text: 'Nombre de villes' } },
                                        x: { title: { display: true, text: 'Habitants par lieu (arrondi à 10)' } }
                                    }
                                }
                            });
                            // Histogramme lieux/habitant (pas de 0.01)
                            if(!data.histogram_001){
                                document.getElementById('distributionVillesLieuxParHabitant').insertAdjacentHTML('afterend', '<div class="alert alert-danger">Erreur : données histogram_001 absentes. Cliquez sur "Régénérer les statistiques".</div>');
                                return;
                            }
                            const ctx = document.getElementById('distributionVillesLieuxParHabitant').getContext('2d');
                            const labels = Object.keys(data.histogram_001);
                            const values = Object.values(data.histogram_001);
                            const villesByBin001 = villesData.villes_by_bin_001 || {};
                            console.log('LPH', labels, villesByBin001);
                            new Chart(ctx, {
                                type: 'bar',
                                data: {
                                    labels: labels,
                                    datasets: [{
                                        label: "Nombre de villes",
                                        data: values,
                                        backgroundColor: 'rgba(153, 102, 255, 0.7)',
                                        borderColor: 'rgba(153, 102, 255, 1)',
                                        borderWidth: 1
                                    }]
                                },
                                options: {
                                    responsive: true,
                                    maintainAspectRatio: true,
                                    plugins: {
                                        legend: { display: false },
                                        title: { display: true, text: "Distribution des villes par lieux/habitant (par pas de 0,01)" },
                                        tooltip: {
                                            callbacks: {
                                                afterBody: function(context) {
                                                    const bin = context[0].label;
                                                    const villes = villesByBin001[bin] || [];
                                                    if(villes.length > 0){
                                                        return ['Villes :'].concat(villes.map(v => '• ' + v));
                                                    }
                                                    return [];
                                                }
                                            }
                                        }
                                    },
                                    scales: {
                                        y: { beginAtZero: true, title: { display: true, text: 'Nombre de villes' } },
                                        x: { title: { display: true, text: 'Lieux par habitant (arrondi à 0,01)' } }
                                    }
                                }
                            });
                        });
                });
        });
});
</script>
{% endblock %}