{% extends 'layout.twig' %}
{% import 'partials/icons.twig' as icons %}
{% block title %}Dashboard{% endblock %}
{% block heading %}Bonjour {{ auth.firstname|default(auth.username|default('')) }}{% endblock %}
{% block subheading %}Vue d'ensemble de l'instance Hydrogen{% endblock %}

{% set userKpis = {
  'totalUsers':     { 'label': 'Utilisateurs inscrits', 'icon': 'users' },
  'totalConfirmed': { 'label': 'Comptes validés',       'icon': 'badge' },
  'reg30':          { 'label': 'Inscrits · 30 j',        'icon': 'up' },
  'cnf30':          { 'label': 'Validés · 30 j',         'icon': 'shield' }
} %}

{% set mediaKpis = {
  'total':     { 'label': 'Médias au total', 'icon': 'image' },
  'published': { 'label': 'Médias publiés',  'icon': 'badge' },
  'pending':   { 'label': 'En attente',      'icon': 'bolt' },
  'upload30':  { 'label': 'Ajoutés · 30 j',  'icon': 'up' }
} %}

{% 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 data-dashboard data-stats-url="{{ statsUrl }}" data-health-url="{{ healthUrl }}">
    <div class="alert alert--error" data-stats-error hidden>
      Le service Hydrogen est injoignable — impossible de charger les compteurs.
    </div>

    {# ── État des systèmes ────────────────────────────────────────── #}
    <div class="section-head" data-animate>
      <span class="section-head__icon">{{ icons.i('cog') }}</span>
      <h2>État des systèmes</h2>
      <span class="health-pill health-pill--unknown" data-health-status>
        <span class="health-pill__dot"></span>
        <span class="skeleton skeleton--text" style="width:84px;height:14px"></span>
      </span>
    </div>

    <div class="alert alert--error" data-health-error hidden>
      Le service Hydrogen est injoignable — impossible de récupérer l'état de santé.
    </div>

    <article class="card glass health-api" data-animate data-health-api>
      <span class="health__dot health__dot--unknown" data-health-api-dot></span>
      <div class="health-api__body">
        <span class="health-api__name">API Hydrogen</span>
        <span class="health-api__state muted" data-health-api-state>
          <span class="skeleton skeleton--text" style="width:120px"></span>
        </span>
      </div>
      <span class="health-api__version" data-health-api-version></span>
    </article>

    <section class="grid grid--split grid--even">
      <article class="card glass" data-animate>
        <div class="card__head"><h2>Bases de données</h2></div>
        <ul class="health" data-health-dbs>
          {% for i in 1..4 %}
            <li class="health__row">
              <span class="skeleton skeleton--text" style="flex:1;height:18px"></span>
            </li>
          {% endfor %}
        </ul>
      </article>

      <article class="card glass" data-animate>
        <div class="card__head">
          <h2>Moteur de recherche</h2>
          <span class="muted" data-health-search-summary></span>
        </div>
        <ul class="health" data-health-indexes>
          {% for i in 1..5 %}
            <li class="health__row">
              <span class="skeleton skeleton--text" style="flex:1;height:18px"></span>
            </li>
          {% endfor %}
        </ul>
      </article>
    </section>

    {# ── Utilisateurs ─────────────────────────────────────────────── #}
    <div class="section-head" data-animate>
      <span class="section-head__icon">{{ icons.i('users') }}</span>
      <h2>Utilisateurs</h2>
    </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="users">
          <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>

    {# ── Médias ───────────────────────────────────────────────────── #}
    <div class="section-head" data-animate>
      <span class="section-head__icon">{{ icons.i('image') }}</span>
      <h2>Médias</h2>
    </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="media">
          <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 5 pays</h2></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>

    <section class="grid grid--split">
      <article class="card glass" data-animate>
        <div class="card__head"><h2>Répartition mondiale</h2></div>
        <div class="worldmap" data-map>
          <div class="worldmap__loader skeleton" data-map-loader></div>
          <div class="worldmap__el" data-map-el hidden></div>
        </div>
      </article>

      <article class="card glass" data-animate>
        <div class="card__head"><h2>5 derniers médias</h2></div>
        <ul class="recent" data-recent>
          {% for i in 1..5 %}
            <li class="recent__row">
              <span class="skeleton recent__thumb"></span>
              <span class="skeleton skeleton--text" style="flex:1;height:18px"></span>
            </li>
          {% endfor %}
        </ul>
      </article>
    </section>
  </div>
{% endblock %}