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

{% block title %}Statistiques de complétion{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .chart-container {
            position: relative;
            height: 60vh;
            width: 100%;
            margin-bottom: 30px;
        }
        .filters {
            margin-bottom: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 5px;
        }
        .data-table {
            margin-top: 30px;
        }
        .level-selector .btn {
            margin-right: 5px;
            margin-bottom: 5px;
        }
        .theme-selector {
            margin-top: 15px;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="container mt-4">
        <h1>Statistiques de complétion</h1>
        
        <div class="filters">
            <form method="get" action="{{ path('app_admin_completion_statistics') }}" class="row">
                <div class="col-md-12">
                    <h5>Niveau géographique</h5>
                    <div class="level-selector">
                        <a href="{{ path('app_admin_completion_statistics', {'level': 'department', 'theme': theme}) }}" 
                           class="btn btn-sm {{ level == 'department' ? 'btn-primary' : 'btn-outline-primary' }}">
                            Par département
                        </a>
                        <a href="{{ path('app_admin_completion_statistics', {'level': 'region', 'theme': theme}) }}" 
                           class="btn btn-sm {{ level == 'region' ? 'btn-primary' : 'btn-outline-primary' }}">
                            Par région
                        </a>
                        <a href="{{ path('app_admin_completion_statistics', {'level': 'country', 'theme': theme}) }}" 
                           class="btn btn-sm {{ level == 'country' ? 'btn-primary' : 'btn-outline-primary' }}">
                            France entière
                        </a>
                        <a href="{{ path('app_admin_completion_statistics', {'level': 'city', 'theme': theme}) }}" 
                           class="btn btn-sm {{ level == 'city' ? 'btn-primary' : 'btn-outline-primary' }}">
                            Par ville
                        </a>
                    </div>
                </div>
                
                <div class="col-md-12 theme-selector">
                    <h5>Thématique</h5>
                    <select name="theme" class="form-select" onchange="this.form.submit()">
                        {% for themeKey, themeLabel in themes %}
                            <option value="{{ themeKey }}" {{ theme == themeKey ? 'selected' : '' }}>
                                {{ themeLabel }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
            </form>
        </div>
        
        <div class="chart-container">
            <canvas id="completionChart"></canvas>
        </div>
        
        <div class="data-table">
            <h3>Données détaillées</h3>
            <table class="table table-striped">
                <thead>
                    <tr>
                        {% if level == 'department' %}
                            <th>Code département</th>
                        {% elseif level == 'region' %}
                            <th>Région</th>
                        {% elseif level == 'country' %}
                            <th>Pays</th>
                        {% else %}
                            <th>Ville</th>
                        {% endif %}
                        <th>Taux de complétion (%)</th>
                    </tr>
                </thead>
                <tbody>
                    {% for key, value in completionData %}
                        <tr>
                            <td>{{ key }}</td>
                            <td>{{ value }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('completionChart').getContext('2d');
            
            // Définir les couleurs en fonction du niveau géographique
            let backgroundColor = 'rgba(54, 162, 235, 0.5)';
            let borderColor = 'rgba(54, 162, 235, 1)';
            
            {% if level == 'department' %}
                backgroundColor = 'rgba(54, 162, 235, 0.5)';
                borderColor = 'rgba(54, 162, 235, 1)';
            {% elseif level == 'region' %}
                backgroundColor = 'rgba(255, 159, 64, 0.5)';
                borderColor = 'rgba(255, 159, 64, 1)';
            {% elseif level == 'country' %}
                backgroundColor = 'rgba(75, 192, 192, 0.5)';
                borderColor = 'rgba(75, 192, 192, 1)';
            {% else %}
                backgroundColor = 'rgba(153, 102, 255, 0.5)';
                borderColor = 'rgba(153, 102, 255, 1)';
            {% endif %}
            
            // Créer le graphique
            const completionChart = new Chart(ctx, {
                type: {% if level == 'country' %}'bar'{% else %}'bar'{% endif %},
                data: {
                    labels: {{ chartLabels|raw }},
                    datasets: [{
                        label: 'Taux de complétion (%)',
                        data: {{ chartData|raw }},
                        backgroundColor: backgroundColor,
                        borderColor: borderColor,
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100,
                            title: {
                                display: true,
                                text: 'Taux de complétion (%)'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: {% if level == 'department' %}
                                    'Départements'
                                {% elseif level == 'region' %}
                                    'Régions'
                                {% elseif level == 'country' %}
                                    'Pays'
                                {% else %}
                                    'Villes'
                                {% endif %}
                            }
                        }
                    },
                    plugins: {
                        title: {
                            display: true,
                            text: 'Taux de complétion par {{ level == "department" ? "département" : (level == "region" ? "région" : (level == "country" ? "pays" : "ville")) }} pour {{ themes[theme] }}',
                            font: {
                                size: 16
                            }
                        },
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return context.dataset.label + ': ' + context.raw + '%';
                                }
                            }
                        }
                    }
                }
            });
        });
    </script>
{% endblock %}