{% extends 'layout.twig' %}
{% import 'partials/icons.twig' as icons %}
{% block title %}Statistiques{% endblock %}
{% block heading %}Statistiques{% endblock %}
{% block subheading %}Indicateurs de la plateforme{% endblock %}

{% set userKpis = {
  'totalUsers':     { 'label': 'Utilisateurs inscrits', 'icon': 'users' },
  'totalConfirmed': { 'label': 'Comptes validés',       'icon': 'badge' },
  'verified':       { 'label': 'Profils vérifiés',      'icon': 'shield' },
  'banned':         { 'label': 'Comptes bannis',        'icon': 'flag' }
} %}

{% set mediaKpis = {
  'totalMedia': { 'label': 'Médias au total', 'icon': 'image' },
  'published':  { 'label': 'Publiés',         'icon': 'check' },
  'pending':    { 'label': 'En attente',      'icon': 'bolt' },
  'rejected':   { 'label': 'Rejetés',         'icon': 'ban' }
} %}

{% set engagementKpis = {
  'totalComments':   { 'label': 'Commentaires',        'icon': 'chart' },
  'activeComments':  { 'label': 'Actifs',              'icon': 'check' },
  'replies':         { 'label': 'Réponses',            'icon': 'refresh' },
  'deletedComments': { 'label': 'Supprimés',           'icon': 'trash' }
} %}

{% macro kpiCard(key, def, icons) %}
  <article class="kpi glass" data-kpi="{{ key }}" data-animate>
    <div class="kpi__top">
      <div class="kpi__icon">{{ icons.i(def.icon) }}</div>
      <span class="kpi__delta flat" data-kpi-delta hidden></span>
    </div>
    <div class="kpi__value" data-kpi-value>
      <span class="skeleton skeleton--text" style="width:90px;height:24px"></span>
    </div>
    <div class="kpi__label">{{ def.label }}</div>
  </article>
{% endmacro %}
{% import _self as self %}

{% block content %}
  <div class="page" data-stats data-stats-url="{{ usersStatsUrl }}" data-media-stats-url="{{ mediaStatsUrl }}" data-engagement-stats-url="{{ engagementStatsUrl }}">
    {# ── Onglets ──────────────────────────────────────────────────── #}
    <div class="tabs" role="tablist" data-animate>
      <button class="tab is-active" type="button" role="tab" aria-selected="true"
              data-tab="users" id="tab-users" aria-controls="panel-users">
        Utilisateurs
      </button>
      <button class="tab" type="button" role="tab" aria-selected="false"
              data-tab="media" id="tab-media" aria-controls="panel-media">
        Médias
      </button>
      <button class="tab" type="button" role="tab" aria-selected="false"
              data-tab="engagement" id="tab-engagement" aria-controls="panel-engagement">
        Engagement
      </button>
      <button class="tab" type="button" role="tab" aria-selected="false"
              data-tab="geography" id="tab-geography" aria-controls="panel-geography">
        Géographie
      </button>
    </div>

    {# ── Onglet : Utilisateurs ────────────────────────────────────── #}
    <div class="tabpanel" id="panel-users" role="tabpanel" aria-labelledby="tab-users" data-panel="users">
      <div class="alert alert--error" data-users-error hidden>
        Le service Hydrogen est injoignable — impossible de charger les statistiques utilisateurs.
      </div>

      <section class="grid grid--kpi">
        {% for key, def in userKpis %}{{ self.kpiCard(key, def, icons) }}{% endfor %}
      </section>

      <section class="grid grid--split">
        <article class="card glass" data-animate>
          <div class="card__head">
            <h2>Inscriptions · 30 derniers jours</h2>
            <div class="legend">
              <span class="legend__item"><span class="legend__dot legend__dot--reg"></span>Inscrits</span>
              <span class="legend__item"><span class="legend__dot legend__dot--cnf"></span>Validés</span>
            </div>
          </div>
          <div class="chart" data-chart="registrations">
            <div class="chart__loader skeleton" data-chart-loader></div>
            <canvas data-chart-canvas hidden></canvas>
          </div>
          <p class="chart__foot muted" data-chart-foot></p>
        </article>

        <article class="card glass" data-animate>
          <div class="card__head"><h2>Month on month</h2></div>
          <div class="mom">
            {% for key in ['registered', 'confirmed'] %}
              <div class="mom__row" data-mom="{{ key }}">
                <div class="mom__head">
                  <span class="mom__label" data-mom-label>
                    <span class="skeleton skeleton--text" style="width:90px"></span>
                  </span>
                  <span class="kpi__delta flat" data-mom-delta hidden></span>
                </div>
                <div class="mom__values">
                  <div class="mom__cur">
                    <span class="mom__num" data-mom-current>
                      <span class="skeleton skeleton--text" style="width:48px;height:22px"></span>
                    </span>
                    <span class="mom__cap">ce mois</span>
                  </div>
                  <div class="mom__prev">
                    <span class="mom__num" data-mom-previous>
                      <span class="skeleton skeleton--text" style="width:48px;height:22px"></span>
                    </span>
                    <span class="mom__cap">mois précédent</span>
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
        </article>
      </section>

      <section class="grid grid--split">
        <article class="card glass" data-animate>
          <div class="card__head"><h2>Répartition des comptes</h2></div>
          <div class="donut" data-chart="composition">
            <div class="donut__loader skeleton" data-chart-loader></div>
            <canvas data-chart-canvas hidden></canvas>
            <div class="donut__center" data-composition-center hidden>
              <span class="donut__rate" data-composition-rate></span>
              <span class="donut__cap">validés</span>
            </div>
          </div>
        </article>

        <article class="card glass" data-animate>
          <div class="card__head"><h2>Indicateurs</h2></div>
          <ul class="meters" data-breakdown>
            {% for i in 1..3 %}
              <li class="meter">
                <span class="skeleton skeleton--text" style="width:100%;height:18px"></span>
              </li>
            {% endfor %}
          </ul>
        </article>
      </section>
    </div>

    {# ── Onglet : Médias ──────────────────────────────────────────── #}
    <div class="tabpanel" id="panel-media" role="tabpanel" aria-labelledby="tab-media" data-panel="media" hidden>
      <div class="alert alert--error" data-media-error hidden>
        Le service Hydrogen est injoignable — impossible de charger les statistiques des médias.
      </div>

      <section class="grid grid--kpi">
        {% for key, def in mediaKpis %}{{ self.kpiCard(key, def, icons) }}{% endfor %}
      </section>

      <section class="grid grid--split">
        <article class="card glass" data-animate>
          <div class="card__head">
            <h2>Ajouts de médias · 30 derniers jours</h2>
            <div class="legend">
              <span class="legend__item"><span class="legend__dot legend__dot--reg"></span>Médias ajoutés</span>
            </div>
          </div>
          <div class="chart" data-chart="uploads">
            <div class="chart__loader skeleton" data-chart-loader></div>
            <canvas data-chart-canvas hidden></canvas>
          </div>
          <p class="chart__foot muted" data-chart-foot></p>
        </article>

        <article class="card glass" data-animate>
          <div class="card__head">
            <h2>Top pays</h2>
            <span class="muted" data-media-without-country hidden></span>
          </div>
          <ol class="ranking" data-top-countries>
            {% for i in 1..5 %}
              <li class="ranking__row">
                <span class="skeleton skeleton--text" style="width:100%;height:18px"></span>
              </li>
            {% endfor %}
          </ol>
        </article>
      </section>
    </div>

    {# ── Onglet : Engagement ──────────────────────────────────────── #}
    <div class="tabpanel" id="panel-engagement" role="tabpanel" aria-labelledby="tab-engagement" data-panel="engagement" hidden>
      <div class="alert alert--error" data-engagement-error hidden>
        Le service Hydrogen est injoignable — impossible de charger les statistiques d'engagement.
      </div>

      <section class="grid grid--kpi">
        {% for key, def in engagementKpis %}{{ self.kpiCard(key, def, icons) }}{% endfor %}
      </section>

      <section class="grid grid--split">
        <article class="card glass" data-animate>
          <div class="card__head">
            <h2>Commentaires · 30 derniers jours</h2>
            <div class="legend">
              <span class="legend__item"><span class="legend__dot legend__dot--reg"></span>Commentaires</span>
            </div>
          </div>
          <div class="chart" data-chart="comments">
            <div class="chart__loader skeleton" data-chart-loader></div>
            <canvas data-chart-canvas hidden></canvas>
          </div>
          <p class="chart__foot muted" data-chart-foot></p>
        </article>

        <article class="card glass" data-animate>
          <div class="card__head"><h2>Médias les plus commentés</h2></div>
          <ol class="ranking" data-top-media>
            {% for i in 1..5 %}
              <li class="ranking__row">
                <span class="skeleton skeleton--text" style="width:100%;height:18px"></span>
              </li>
            {% endfor %}
          </ol>
        </article>
      </section>

      <section class="grid grid--split">
        <article class="card glass" data-animate>
          <div class="card__head"><h2>Contributeurs les plus actifs</h2></div>
          <ol class="ranking" data-top-commenters>
            {% for i in 1..5 %}
              <li class="ranking__row">
                <span class="skeleton skeleton--text" style="width:100%;height:18px"></span>
              </li>
            {% endfor %}
          </ol>
        </article>
      </section>
    </div>

    {# ── Onglet : Géographie ──────────────────────────────────────── #}
    <div class="tabpanel" id="panel-geography" role="tabpanel" aria-labelledby="tab-geography" data-panel="geography" hidden>
      {# Les cartes seront ajoutées ici. #}
    </div>
  </div>
{% endblock %}