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

{% block title %}Estadísticas{% endblock %}
{% block page_title %}Estadísticas{% endblock %}

{% block body %}
<div class="admin-stats-grid">

    <div class="admin-card admin-card--full">
        <div class="admin-card-header">
            <h2 class="admin-card-title">Actividad — últimos 12 meses</h2>
        </div>
        <div class="admin-chart-wrap">
            <canvas id="chart-actividad" height="80"></canvas>
        </div>
    </div>

    <div class="admin-card">
        <div class="admin-card-header">
            <h2 class="admin-card-title">Grupos más activos</h2>
        </div>
        <div class="admin-chart-wrap">
            <canvas id="chart-grupos-eventos"></canvas>
        </div>
    </div>

    <div class="admin-card">
        <div class="admin-card-header">
            <h2 class="admin-card-title">Grupos con más miembros</h2>
        </div>
        <div class="admin-chart-wrap">
            <canvas id="chart-grupos-miembros"></canvas>
        </div>
    </div>

    <div class="admin-card">
        <div class="admin-card-header">
            <h2 class="admin-card-title">Juegos más populares en colecciones</h2>
        </div>
        <div class="admin-chart-wrap">
            <canvas id="chart-juegos"></canvas>
        </div>
    </div>

    <div class="admin-card">
        <div class="admin-card-header">
            <h2 class="admin-card-title">Juegos mejor valorados</h2>
        </div>
        {% if topJuegosPuntuacion is not empty %}
        <table class="admin-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Juego</th>
                    <th>Media</th>
                    <th>Votos</th>
                </tr>
            </thead>
            <tbody>
            {% for i, row in topJuegosPuntuacion %}
                <tr>
                    <td class="text-muted">{{ i + 1 }}</td>
                    <td>{{ row.nombre }}</td>
                    <td><span class="admin-badge admin-badge--success">{{ row.media|number_format(1) }} / 5</span></td>
                    <td class="text-muted">{{ row.votos }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        {% else %}
            <p class="admin-danger-text">No hay suficientes valoraciones aún (mínimo 2 votos por juego).</p>
        {% endif %}
    </div>

</div>
{% endblock %}

{% block javascripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
Chart.defaults.color = '#94a3b8';
Chart.defaults.borderColor = 'rgba(255,255,255,0.06)';
const gridColor = 'rgba(255,255,255,0.05)';

new Chart(document.getElementById('chart-actividad'), {
    type: 'line',
    data: {
        labels: {{ mesesLabel|json_encode|raw }},
        datasets: [
            {
                label: 'Nuevos usuarios',
                data: {{ registrosMeses|json_encode|raw }},
                borderColor: '#818cf8',
                backgroundColor: 'rgba(129,140,248,.12)',
                tension: 0.3, fill: true, pointRadius: 3,
            },
            {
                label: 'Eventos creados',
                data: {{ eventosMeses|json_encode|raw }},
                borderColor: '#22d3ee',
                backgroundColor: 'rgba(34,211,238,.08)',
                tension: 0.3, fill: true, pointRadius: 3,
            }
        ]
    },
    options: {
        responsive: true,
        plugins: { legend: { labels: { color: '#94a3b8', boxWidth: 12 } } },
        scales: {
            x: { grid: { color: gridColor } },
            y: { beginAtZero: true, grid: { color: gridColor }, ticks: { stepSize: 1 } }
        }
    }
});

(function () {
    const hBarOpts = { responsive: true, indexAxis: 'y', plugins: { legend: { display: false } },
        scales: { x: { beginAtZero: true, grid: { color: gridColor }, ticks: { stepSize: 1 } }, y: { grid: { color: gridColor } } } };

    const gruposEventos = {{ topGruposPorEventos|json_encode|raw }};
    new Chart(document.getElementById('chart-grupos-eventos'), {
        type: 'bar',
        data: { labels: gruposEventos.map(r => r.nombre),
                datasets: [{ data: gruposEventos.map(r => Number(r.total)), backgroundColor: 'rgba(129,140,248,.55)', borderColor: '#818cf8', borderWidth: 1 }] },
        options: hBarOpts
    });

    const gruposMiembros = {{ topGruposPorMiembros|json_encode|raw }};
    new Chart(document.getElementById('chart-grupos-miembros'), {
        type: 'bar',
        data: { labels: gruposMiembros.map(r => r.nombre),
                datasets: [{ data: gruposMiembros.map(r => Number(r.total)), backgroundColor: 'rgba(167,139,250,.55)', borderColor: '#a78bfa', borderWidth: 1 }] },
        options: hBarOpts
    });

    const juegos = {{ topJuegos|json_encode|raw }};
    new Chart(document.getElementById('chart-juegos'), {
        type: 'bar',
        data: { labels: juegos.map(r => r.nombre),
                datasets: [{ data: juegos.map(r => Number(r.total)), backgroundColor: 'rgba(52,211,153,.55)', borderColor: '#34d399', borderWidth: 1 }] },
        options: hBarOpts
    });
})();
</script>
{% endblock %}