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

{% block title %}Tableau de bord - Wiki OSM{% endblock %}

{% block body %}
    <div class="container mt-4">
        <h1>Tableau de bord - Wiki OSM</h1>
        <p class="lead">Suivi de l'évolution des métriques du wiki OpenStreetMap</p>

        <div class="row mb-4">
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header bg-primary text-white">
                        <h2>Évolution du score moyen de décrépitude</h2>
                    </div>
                    <div class="card-body">
                        <canvas id="averageScoreChart" height="300"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header bg-success text-white">
                        <h2>Évolution du nombre de pages suivies</h2>
                    </div>
                    <div class="card-body">
                        <canvas id="trackedPagesChart" height="300"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header bg-danger text-white">
                        <h2>Évolution des pages sans catégorie</h2>
                    </div>
                    <div class="card-body">
                        <canvas id="uncategorizedPagesChart" height="300"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header bg-info text-white">
                        <h2>Statistiques actuelles</h2>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="card bg-light">
                                    <div class="card-body text-center">
                                        <h3 class="card-title">Score moyen</h3>
                                        <p class="display-4">
                                            {% if metrics.average_scores|length > 0 %}
                                                {{ metrics.average_scores|last|number_format(1) }}
                                            {% else %}
                                                0
                                            {% endif %}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="card bg-light">
                                    <div class="card-body text-center">
                                        <h3 class="card-title">Pages suivies</h3>
                                        <p class="display-4">
                                            {% if metrics.tracked_pages|length > 0 %}
                                                {{ metrics.tracked_pages|last }}
                                            {% else %}
                                                0
                                            {% endif %}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="card bg-light">
                                    <div class="card-body text-center">
                                        <h3 class="card-title">Pages sans catégorie</h3>
                                        <p class="display-4">
                                            {% if metrics.uncategorized_pages|length > 0 %}
                                                {{ metrics.uncategorized_pages|last }}
                                            {% else %}
                                                0
                                            {% endif %}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="card bg-light">
                                    <div class="card-body text-center">
                                        <h3 class="card-title">Dernière mise à jour</h3>
                                        <p class="display-4">
                                            {% if metrics.dates|length > 0 %}
                                                {{ metrics.dates|last }}
                                            {% else %}
                                                -
                                            {% endif %}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-secondary text-white">
                        <h2>Données brutes</h2>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>Score moyen</th>
                                        <th>Pages suivies</th>
                                        <th>Pages sans catégorie</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for i in 0..(metrics.dates|length - 1) %}
                                        <tr>
                                            <td>{{ metrics.dates[i] }}</td>
                                            <td>{{ metrics.average_scores[i]|default(0)|number_format(1) }}</td>
                                            <td>{{ metrics.tracked_pages[i]|default(0) }}</td>
                                            <td>{{ metrics.uncategorized_pages[i]|default(0) }}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Data from PHP
            const dates = {{ metrics.dates|json_encode|raw }};
            const averageScores = {{ metrics.average_scores|json_encode|raw }};
            const trackedPages = {{ metrics.tracked_pages|json_encode|raw }};
            const uncategorizedPages = {{ metrics.uncategorized_pages|json_encode|raw }};

            // Average Score Chart
            const averageScoreCtx = document.getElementById('averageScoreChart').getContext('2d');
            new Chart(averageScoreCtx, {
                type: 'line',
                data: {
                    labels: dates,
                    datasets: [{
                        label: 'Score moyen de décrépitude',
                        data: averageScores,
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 2,
                        tension: 0.1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                    plugins: {
                        title: {
                            display: true,
                            text: 'Évolution du score moyen de décrépitude au fil du temps'
                        }
                    }
                }
            });

            // Tracked Pages Chart
            const trackedPagesCtx = document.getElementById('trackedPagesChart').getContext('2d');
            new Chart(trackedPagesCtx, {
                type: 'line',
                data: {
                    labels: dates,
                    datasets: [{
                        label: 'Nombre de pages suivies',
                        data: trackedPages,
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 2,
                        tension: 0.1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                    plugins: {
                        title: {
                            display: true,
                            text: 'Évolution du nombre de pages suivies au fil du temps'
                        }
                    }
                }
            });

            // Uncategorized Pages Chart
            const uncategorizedPagesCtx = document.getElementById('uncategorizedPagesChart').getContext('2d');
            new Chart(uncategorizedPagesCtx, {
                type: 'line',
                data: {
                    labels: dates,
                    datasets: [{
                        label: 'Nombre de pages sans catégorie',
                        data: uncategorizedPages,
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 2,
                        tension: 0.1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                    plugins: {
                        title: {
                            display: true,
                            text: 'Évolution du nombre de pages sans catégorie au fil du temps'
                        }
                    }
                }
            });
        });
    </script>
{% endblock %}