{% extends 'layout.twig' %}
{% import 'partials/icons.twig' as icons %}
{% block title %}Commentaires{% endblock %}
{% block heading %}Commentaires{% endblock %}
{% block subheading %}Modération et statistiques des commentaires{% endblock %}

{% set kpis = {
  'total':    { 'label': 'Commentaires',   'icon': 'comment' },
  'active':   { 'label': 'Actifs',         'icon': 'check' },
  'deleted':  { 'label': 'Supprimés',      'icon': 'trash' },
  'topLevel': { 'label': 'Racines',        'icon': 'flag' },
  'replies':  { 'label': 'Réponses',       'icon': 'refresh' },
  'edited':   { 'label': 'Édités',         'icon': 'pencil' }
} %}

{% block content %}
  <div data-comments
       data-stats-url="{{ statsUrl }}"
       data-recent-url="{{ recentUrl }}"
       data-item-base="{{ itemBase }}"
       data-users-url="{{ usersUrl }}"
       data-media-url="{{ mediaUrl }}"
       data-user-api="{{ userApiBase }}"
       data-media-api="{{ mediaApiBase }}">

    {# ── Alerte d'indisponibilité des stats ────────────────────────────── #}
    <div class="alert alert--error" data-comments-error hidden>
      Le service Hydrogen est injoignable — impossible de charger les statistiques.
    </div>

    {# ── Statistiques ──────────────────────────────────────────────────── #}
    <section class="grid grid--kpi">
      {% for key, def in kpis %}
        <article class="kpi glass" data-cm-kpi="{{ key }}" data-animate>
          <div class="kpi__top">
            <div class="kpi__icon">{{ icons.i(def.icon) }}</div>
          </div>
          <div class="kpi__value" data-cm-kpi-value>
            <span class="skeleton skeleton--text" style="width:70px;height:24px"></span>
          </div>
          <div class="kpi__label">{{ def.label }}</div>
        </article>
      {% endfor %}
    </section>

    <section class="grid grid--split grid--even">
      {# ── Taux de modération ──────────────────────────────────────────── #}
      <article class="card glass" data-animate>
        <div class="card__head"><h2>Taux de modération</h2></div>
        <ul class="cm-rates">
          <li class="cm-rate" data-cm-rate="deletionRate">
            <span class="cm-rate__label">Suppression</span>
            <div class="cm-rate__bar"><span class="cm-rate__fill" data-cm-rate-fill></span></div>
            <b class="cm-rate__value" data-cm-rate-value>—</b>
          </li>
          <li class="cm-rate" data-cm-rate="editRate">
            <span class="cm-rate__label">Édition</span>
            <div class="cm-rate__bar"><span class="cm-rate__fill" data-cm-rate-fill></span></div>
            <b class="cm-rate__value" data-cm-rate-value>—</b>
          </li>
          <li class="cm-rate" data-cm-rate="replyRatio">
            <span class="cm-rate__label">Part de réponses</span>
            <div class="cm-rate__bar"><span class="cm-rate__fill" data-cm-rate-fill></span></div>
            <b class="cm-rate__value" data-cm-rate-value>—</b>
          </li>
        </ul>
        <div class="cm-facts">
          <div class="cm-fact">
            <span class="cm-fact__label">Profondeur moyenne</span>
            <b class="cm-fact__value" data-cm-depth>—</b>
          </div>
          <div class="cm-fact">
            <span class="cm-fact__label">Délai médian de réponse</span>
            <b class="cm-fact__value" data-cm-latency>—</b>
          </div>
        </div>
      </article>

      {# ── Activité sur la période ─────────────────────────────────────── #}
      <article class="card glass" data-animate>
        <div class="card__head">
          <h2>Nouveaux commentaires</h2>
          <span class="muted cm-spark__total" data-cm-spark-total></span>
        </div>
        <div class="cm-spark" data-cm-spark>
          <span class="skeleton skeleton--text" style="width:100%;height:120px"></span>
        </div>
      </article>
    </section>

    <section class="grid grid--split grid--even">
      {# ── Top médias ──────────────────────────────────────────────────── #}
      <article class="card glass" data-animate>
        <div class="card__head"><h2>Médias les plus commentés</h2></div>
        <ol class="cm-top" data-cm-top="media">
          <li class="cm-top__row cm-top__row--skeleton">
            <span class="skeleton skeleton--text" style="width:100%;height:20px"></span>
          </li>
        </ol>
        <p class="muted cm-top__empty" data-cm-top-empty="media" hidden>Aucune donnée sur la période.</p>
      </article>

      {# ── Top contributeurs ───────────────────────────────────────────── #}
      <article class="card glass" data-animate>
        <div class="card__head"><h2>Contributeurs les plus actifs</h2></div>
        <ol class="cm-top" data-cm-top="commenters">
          <li class="cm-top__row cm-top__row--skeleton">
            <span class="skeleton skeleton--text" style="width:100%;height:20px"></span>
          </li>
        </ol>
        <p class="muted cm-top__empty" data-cm-top-empty="commenters" hidden>Aucune donnée sur la période.</p>
      </article>
    </section>

    {# ── Derniers commentaires ─────────────────────────────────────────── #}
    <article class="card glass" data-animate>
      <div class="card__head">
        <h2>Derniers commentaires</h2>
        <span class="muted">Tous médias et comptes confondus, soft-deleted inclus.</span>
      </div>

      <div class="alert alert--error" data-cm-recent-error hidden>
        Le service Hydrogen est injoignable — impossible de charger les commentaires.
      </div>

      <div class="cm-recent" data-cm-recent>
        {% for i in 1..6 %}
          <div class="cm-recent__row cm-recent__row--skeleton">
            <span class="skeleton skeleton--text" style="width:100%;height:44px"></span>
          </div>
        {% endfor %}
      </div>
      <p class="muted cm-recent__empty" data-cm-recent-empty hidden>Aucun commentaire pour le moment.</p>
      <div class="cm-recent__more">
        <button class="btn-ghost" type="button" data-cm-recent-more hidden>Charger plus</button>
      </div>
    </article>

    {# ── Outil de modération par identifiant ───────────────────────────── #}
    <article class="card glass cm-tool" data-animate>
      <div class="card__head">
        <h2>Modération par identifiant</h2>
        <span class="muted">Aucune liste globale — collez l'ID d'un commentaire.</span>
      </div>

      <form class="cm-lookup" data-cm-lookup>
        <label class="mfilter__search cm-lookup__field">
          {{ icons.i('search') }}
          <input type="search" data-cm-lookup-input
                 placeholder="Identifiant (32 caractères hexadécimaux)…"
                 autocomplete="off" spellcheck="false">
        </label>
        <button class="btn-ghost cm-lookup__btn" type="submit" data-cm-lookup-btn>
          {{ icons.i('search') }} Rechercher
        </button>
      </form>

      <p class="alert alert--error cm-lookup__error" data-cm-lookup-error hidden></p>
      <p class="muted cm-lookup__hint">La recherche ouvre une fenêtre de modération avec la fiche de l'auteur et l'aperçu du média.</p>
    </article>

    {# ── Modal de modération ───────────────────────────────────────────── #}
    <div class="modal modal--comment" data-cm-modal hidden>
      <div class="modal__panel cm-modal__panel" role="dialog" aria-modal="true" aria-labelledby="cm-modal-title">
        <button class="modal__close" type="button" data-cm-close aria-label="Fermer">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M18 6L6 18M6 6l12 12"/>
          </svg>
        </button>

        <header class="cm-modal__head">
          <span class="badge" data-cm-card-badge></span>
          <h2 class="cm-modal__title" id="cm-modal-title">Commentaire</h2>
          <span class="muted cm-card__id" data-cm-card-id></span>
        </header>

        <div class="cm-modal__grid">
          {# ── Commentaire + actions ─────────────────────────────────── #}
          <section class="cm-card" data-cm-card>
            <blockquote class="cm-card__body" data-cm-card-body></blockquote>

            <dl class="cm-card__meta">
              <div><dt>Fil</dt><dd data-cm-card-thread>—</dd></div>
              <div><dt>Réponses</dt><dd data-cm-card-replies>—</dd></div>
              <div><dt>Créé le</dt><dd data-cm-card-created>—</dd></div>
              <div><dt>Édité le</dt><dd data-cm-card-edited>—</dd></div>
              <div><dt>Supprimé le</dt><dd data-cm-card-deleted>—</dd></div>
            </dl>

            <div class="cm-card__actions">
              <button class="btn-ghost" type="button" data-cm-action="delete">
                {{ icons.i('trash') }} Supprimer
              </button>
              <button class="btn-ghost" type="button" data-cm-action="restore">
                {{ icons.i('refresh') }} Restaurer
              </button>
              <button class="btn-ghost icon-btn--danger cm-card__censor" type="button" data-cm-action="censor">
                {{ icons.i('ban') }} Censurer
              </button>
            </div>
          </section>

          {# ── Auteur + média ────────────────────────────────────────── #}
          <aside class="cm-modal__aside">
            <div class="cm-usercard" data-cm-usercard aria-busy="true">
              <div class="cm-usercard__head">
                <span class="cm-usercard__avatar skeleton"></span>
                <div class="cm-usercard__ident">
                  <span class="skeleton skeleton--text" style="width:120px;height:16px"></span>
                  <span class="skeleton skeleton--text" style="width:80px;height:12px"></span>
                </div>
              </div>
            </div>

            <div class="cm-mediacard" data-cm-mediacard aria-busy="true">
              <span class="cm-mediacard__thumb skeleton"></span>
              <div class="cm-mediacard__ident">
                <span class="skeleton skeleton--text" style="width:140px;height:16px"></span>
                <span class="skeleton skeleton--text" style="width:90px;height:12px"></span>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </div>
  </div>
{% endblock %}