{% extends 'base.html.twig' %}
{% from 'coleccion/_macros.html.twig' import renderTabla, renderFiltros %}

{% block title %}Catálogo del grupo{% endblock %}

{% block body %}
<div class="container">

    <div class="page-header">
        <div>
            <h1 class="page-title">🎲 Catálogo del grupo</h1>
            {% if grupo %}
                <p class="page-subtitle">{{ grupo.nombre }}</p>
            {% endif %}
        </div>
    </div>

    {% if not grupo %}
    <div class="empty-state">
        <span class="empty-icon" aria-hidden="true">👥</span>
        <h3>Sin grupo activo</h3>
        <p>Únete o crea un grupo para ver el catálogo compartido.</p>
    </div>
    {% else %}

    <section class="dashboard-section ranking-section" id="ranking-section"{% if rankingPonderado|length == 0 %} hidden{% endif %}>
        <h2 class="section-title">
            🏆 Ranking del grupo
            <button class="ranking-info-btn" id="btnRankingInfo" type="button" aria-label="¿Cómo se calcula?">?</button>
        </h2>
        <div class="ranking-lista" id="ranking-lista">
            {% for item in rankingPonderado %}
            <div class="ranking-item glass-card">
                <span class="ranking-pos">#{{ loop.index }}</span>
                <span class="ranking-nombre">{{ item.nombre }}</span>
                <span class="ranking-stars" aria-label="{{ item.media_real|number_format(1) }} de 5 estrellas">
                    {% set filled = item.media_real|round(0, 'floor') %}
                    {% for i in 1..5 %}{% if i <= filled %}★{% else %}☆{% endif %}{% endfor %}
                </span>
                <span class="ranking-score" title="Puntuación ponderada">{{ item.puntuacion_ponderada|number_format(2) }}</span>
                <span class="ranking-meta">
                    media {{ item.media_real|number_format(1) }}
                    · {{ item.total_votos }} voto{{ item.total_votos != 1 ? 's' : '' }}
                </span>
                {% if item.max_jugadores is not null and item.max_jugadores < numMiembros %}
                <span class="ranking-aviso-jug" title="No caben todos: admite máx. {{ item.max_jugadores }} jugadores y el grupo tiene {{ numMiembros }} miembros">
                    ⚠ No caben todos · máx. {{ item.max_jugadores }}
                </span>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </section>

    <div class="ranking-info-overlay" id="rankingInfoOverlay" hidden>
        <div class="ranking-info-modal glass-card" role="dialog" aria-modal="true" aria-labelledby="rankingInfoTitle">
            <button class="ranking-info-close" id="btnRankingInfoClose" type="button" aria-label="Cerrar">✕</button>
            <h3 id="rankingInfoTitle">¿Cómo se calcula el ranking?</h3>
            <p>Usamos una <strong>media bayesiana</strong>, el mismo sistema que usa BoardGameGeek:</p>
            <div class="ranking-formula">puntuación = (C × M + Σvotos) / (C + n)</div>
            <ul class="ranking-formula-legend">
                <li><strong>n</strong> — total de votos del juego en el grupo</li>
                <li><strong>Σvotos</strong> — suma de todas sus puntuaciones</li>
                <li><strong>M</strong> — media global del grupo (todos los votos, todos los juegos)</li>
                <li><strong>C</strong> — constante de confianza (media de votos por juego)</li>
            </ul>
            <p class="ranking-formula-note">Así, un juego con un solo 5★ no aparece primero. Los juegos con pocos votos se acercan a la media del grupo hasta acumular más opiniones.</p>
        </div>
    </div>

    {% if catalogoGrupo|length > 0 %}
        {{ renderFiltros('filtros-grupo', 'tabla-grupo') }}
        {{ renderTabla(catalogoGrupo, 'tabla-grupo', true, misPuntuaciones, path('app_coleccion_puntuar')) }}
    {% else %}
    <div class="empty-state">
        <span class="empty-icon" aria-hidden="true">📦</span>
        <h3>Catálogo vacío</h3>
        <p>Ningún miembro ha sincronizado su colección de BGG aún.</p>
    </div>
    {% endif %}

    {% endif %}

</div>

{% include 'coleccion/_juego_modal.html.twig' %}
<div id="js-coleccion-data" hidden data-num-miembros="{{ numMiembros|default(0) }}"></div>
{% endblock %}

{% block javascripts %}
<script src="{{ asset('js/coleccion.js') }}" defer></script>
{# inline JS extraído a public/js/coleccion.js — DT-026 #}
{% endblock %}