{% extends 'layout.twig' %}
{% import 'partials/icons.twig' as icons %}
{% block title %}Fiche utilisateur{% endblock %}
{% block heading %}Fiche utilisateur{% endblock %}
{% block subheading %}Consulter et administrer un compte{% endblock %}

{% block content %}
  <div data-user data-detail-url="{{ detailUrl }}" data-media-url="{{ mediaUrl }}" data-history-url="{{ historyUrl }}"
       data-comments-url="{{ commentsUrl }}" data-comment-base="{{ commentBase }}">

    <div class="section-head" data-animate>
      <a class="section-head__back" href="{{ usersUrl }}" aria-label="Retour aux utilisateurs">
        {{ icons.i('back') }}
      </a>
      <h2>Retour aux utilisateurs</h2>
    </div>

    <div class="alert alert--error" data-user-error hidden>
      Le service Hydrogen est injoignable — impossible de charger la fiche utilisateur.
    </div>
    <div class="alert alert--error" data-user-missing hidden>
      Cet utilisateur est introuvable.
    </div>

    {# ── Identité ─────────────────────────────────────────────────── #}
    <article class="card glass uhead" data-animate>
      <div class="ucover" data-user-cover hidden>
        <img data-user-cover-img alt="Couverture" loading="lazy">
      </div>
      <div class="uimg-ctl uimg-ctl--cover" data-cover-controls hidden>
        <label class="uimgbtn" title="Changer la couverture">
          {{ icons.i('image') }}<span>Couverture</span>
          <input type="file" accept="image/jpeg,image/png,image/webp,image/gif,image/heic,image/heif"
                 data-cover-input hidden>
        </label>
        <button class="uimgbtn uimgbtn--danger" type="button" data-cover-remove
                title="Retirer la couverture" aria-label="Retirer la couverture">
          {{ icons.i('trash') }}
        </button>
      </div>
      <div class="uhead__body">
        <div class="uavatar-wrap">
          <span class="uhead__avatar uavatar" data-user-avatar>
            <span class="skeleton" style="width:100%;height:100%;border-radius:50%"></span>
          </span>
          <span class="uverif" data-user-verified title="Compte vérifié" aria-label="Compte vérifié" hidden>
            {{ icons.i('check') }}
          </span>
          <div class="uimg-ctl uimg-ctl--avatar" data-avatar-controls hidden>
            <label class="uimgbtn uimgbtn--icon" title="Changer l'avatar" aria-label="Changer l'avatar">
              {{ icons.i('image') }}
              <input type="file" accept="image/jpeg,image/png,image/webp,image/gif,image/heic,image/heif"
                     data-avatar-input hidden>
            </label>
            <button class="uimgbtn uimgbtn--icon uimgbtn--danger" type="button" data-avatar-remove
                    title="Retirer l'avatar" aria-label="Retirer l'avatar">
              {{ icons.i('trash') }}
            </button>
          </div>
        </div>
        <div class="uhead__id">
          <div class="uhead__top">
            <h2 class="uhead__name" data-user-name>
              <span class="skeleton skeleton--text" style="width:180px;height:22px"></span>
            </h2>
            <span class="badge" data-user-badge hidden></span>
          </div>
          <div class="uhead__meta">
            <span class="uhead__handle" data-user-handle hidden></span>
            <span class="uhead__email" data-user-email hidden></span>
          </div>
        </div>
      </div>
    </article>

    {# ── Onglets ──────────────────────────────────────────────────── #}
    <div class="tabs" role="tablist" data-animate>
      <button class="tab is-active" type="button" role="tab" aria-selected="true"
              data-tab="infos" id="tab-infos" aria-controls="panel-infos">
        Informations
      </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="comments" id="tab-comments" aria-controls="panel-comments">
        Commentaires
      </button>
      <button class="tab" type="button" role="tab" aria-selected="false"
              data-tab="audit" id="tab-audit" aria-controls="panel-audit">
        Audit
      </button>
    </div>

    {# ── Onglet : Informations ────────────────────────────────────── #}
    <div class="tabpanel" id="panel-infos" role="tabpanel" aria-labelledby="tab-infos" data-panel="infos">
      <section class="grid grid--split">
        {# ── Informations ───────────────────────────────────────────── #}
        <article class="card glass" data-animate>
          <div class="card__head"><h2>Informations</h2></div>
          <dl class="ufields" data-user-fields>
            {% for i in 1..4 %}
              <div class="ufield">
                <dt><span class="skeleton skeleton--text" style="width:80px"></span></dt>
                <dd><span class="skeleton skeleton--text" style="width:120px"></span></dd>
              </div>
            {% endfor %}
          </dl>
          <ul class="ustates" data-user-states></ul>
          <div class="uqr" data-user-qr hidden>
            <a class="uqr__link" data-user-qr-link href="#" target="_blank" rel="noopener" title="Ouvrir le QR du profil public">
              <img class="uqr__img" data-user-qr-img alt="QR code du profil public" loading="lazy">
            </a>
            <span class="uqr__label muted">QR du profil public</span>
          </div>
        </article>

        {# ── Administration ─────────────────────────────────────────── #}
        <article class="card glass" data-animate>
          <div class="card__head"><h2>Administration</h2></div>

          {# Bandeau de bannissement actif : temps restant en évidence + motif. #}
          <div class="uban-notice" data-ban-notice hidden>
            <span class="uban-notice__icon">{{ icons.i('ban') }}</span>
            <div class="uban-notice__body">
              <strong class="uban-notice__title" data-ban-notice-title>Compte banni</strong>
              <div class="uban-notice__countdown" data-ban-notice-countdown hidden>
                <span class="uban-notice__remaining" data-ban-notice-remaining></span>
                <span class="uban-notice__until muted" data-ban-notice-until></span>
              </div>
              <p class="uban-notice__reason" data-ban-notice-reason hidden></p>
            </div>
          </div>

          <div class="uactions" data-user-actions hidden>
            <button class="btn-ghost uact" type="button" data-action="confirm" data-user-confirm hidden>
              {{ icons.i('check') }}<span>Confirmer le compte</span>
            </button>

            <button class="btn-ghost uact" type="button" data-action="verify">
              <span data-action-label>Vérifier</span>
            </button>

            <button class="btn-ghost uact" type="button" data-action="ban">
              {{ icons.i('ban') }}<span data-action-label>Bannir</span>
            </button>

            <button class="btn-ghost uact" type="button" data-action="reindex">
              {{ icons.i('refresh') }}<span>Réindexer la recherche</span>
            </button>

            <button class="btn-ghost uact uact--danger" type="button" data-action="anonymize">
              {{ icons.i('trash') }}<span>Anonymiser (RGPD)</span>
            </button>
            <p class="uactions__note muted">L'anonymisation est définitive et irréversible.</p>
          </div>
          <div class="uactions__loading" data-user-actions-loading>
            {% for i in 1..3 %}
              <span class="skeleton" style="width:100%;height:40px;border-radius:10px;display:block;margin-bottom:10px"></span>
            {% endfor %}
          </div>
        </article>
      </section>

      {# ── Édition du profil ────────────────────────────────────────── #}
      <div class="section-head" data-animate>
        <span class="section-head__icon">{{ icons.i('cog') }}</span>
        <h2>Modifier le profil</h2>
      </div>
      <article class="card glass" data-animate>
        <form class="uform" data-user-form hidden novalidate>
          <div class="uform__grid">
            <div class="field uform__field">
              <label for="uf-firstname">Prénom</label>
              <input id="uf-firstname" type="text" name="firstname" data-field="firstname" maxlength="255" autocomplete="off">
              <p class="uform__err" data-error="firstname" hidden></p>
            </div>
            <div class="field uform__field">
              <label for="uf-name">Nom</label>
              <input id="uf-name" type="text" name="name" data-field="name" maxlength="255" autocomplete="off">
              <p class="uform__err" data-error="name" hidden></p>
            </div>
            <div class="field uform__field">
              <label for="uf-username">Nom d'utilisateur</label>
              <input id="uf-username" type="text" name="username" data-field="username" maxlength="32" autocomplete="off">
              <p class="uform__err" data-error="username" hidden></p>
            </div>
            <div class="field uform__field">
              <label for="uf-nickname">Pseudo</label>
              <input id="uf-nickname" type="text" name="nickname" data-field="nickname" maxlength="32" autocomplete="off">
              <p class="uform__err" data-error="nickname" hidden></p>
            </div>
            <div class="field uform__field uform__field--full">
              <label for="uf-email">Email</label>
              <input id="uf-email" type="email" name="email" data-field="email" maxlength="255" autocomplete="off">
              <p class="uform__err" data-error="email" hidden></p>
            </div>
            <div class="field uform__field uform__field--full">
              <label for="uf-bio">Biographie</label>
              <textarea id="uf-bio" name="bio" data-field="bio" rows="3"></textarea>
              <p class="uform__err" data-error="bio" hidden></p>
            </div>
            <div class="field uform__field uform__field--full">
              <label for="uf-reason">Motif (journalisé)</label>
              <input id="uf-reason" type="text" name="reason" data-field="reason" maxlength="255"
                     autocomplete="off" placeholder="Raison de la modification (audit)">
            </div>
          </div>
          <div class="uform__foot">
            <button class="btn uform__submit" type="submit" data-user-form-submit>Enregistrer les modifications</button>
          </div>
        </form>
        <div class="uform__loading" data-user-form-loading>
          {% for i in 1..4 %}
            <span class="skeleton" style="width:100%;height:44px;border-radius:10px;display:block;margin-bottom:12px"></span>
          {% endfor %}
        </div>
      </article>

      {# ── Chronologie ──────────────────────────────────────────────── #}
      <div class="section-head" data-animate>
        <span class="section-head__icon">{{ icons.i('calendar') }}</span>
        <h2>Chronologie</h2>
      </div>
      <article class="card glass" data-animate>
        <ul class="utimeline" data-user-timeline>
          {% for i in 1..4 %}
            <li class="utl"><span class="skeleton skeleton--text" style="width:100%;height:16px"></span></li>
          {% endfor %}
        </ul>
      </article>
    </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 médias.
      </div>
      <p class="umedia__empty muted" data-media-empty hidden>Cet utilisateur n'a aucun média public.</p>
      <div class="mgrid" data-user-media>
        {% for i in 1..6 %}
          <span class="skeleton" style="aspect-ratio:1;border-radius:14px;display:block"></span>
        {% endfor %}
      </div>
    </div>

    {# ── Onglet : Commentaires ────────────────────────────────────── #}
    <div class="tabpanel" id="panel-comments" role="tabpanel" aria-labelledby="tab-comments" data-panel="comments" hidden>
      <div class="alert alert--error" data-comments-error hidden>
        Le service Hydrogen est injoignable — impossible de charger les commentaires.
      </div>
      <p class="comments__empty muted" data-comments-empty hidden>Cet utilisateur n'a rédigé aucun commentaire.</p>
      <article class="card glass" data-animate>
        <ol class="comments" data-user-comments>
          {% for i in 1..4 %}
            <li class="comment">
              <span class="skeleton skeleton--text" style="width:100%;height:18px"></span>
            </li>
          {% endfor %}
        </ol>
        <div class="comments__foot" data-comments-more hidden>
          <button class="btn-ghost" type="button" data-comments-more-btn>Voir plus</button>
        </div>
      </article>
    </div>

    {# ── Onglet : Audit ───────────────────────────────────────────── #}
    <div class="tabpanel" id="panel-audit" role="tabpanel" aria-labelledby="tab-audit" data-panel="audit" hidden>
      <div class="alert alert--error" data-audit-error hidden>
        Le service Hydrogen est injoignable — impossible de charger le journal d'audit.
      </div>
      <p class="audit__empty muted" data-audit-empty hidden>Aucune action n'a été enregistrée sur ce compte.</p>
      <article class="card glass" data-animate>
        <ol class="audit" data-user-audit>
          {% for i in 1..4 %}
            <li class="audit__row">
              <span class="skeleton skeleton--text" style="width:100%;height:18px"></span>
            </li>
          {% endfor %}
        </ol>
        <div class="audit__foot" data-audit-more hidden>
          <button class="btn-ghost" type="button" data-audit-more-btn>Voir plus</button>
        </div>
      </article>
    </div>

    {# ── Modale de bannissement ───────────────────────────────────── #}
    <div class="modal modal--form" data-ban-modal hidden>
      <div class="banmodal" role="dialog" aria-modal="true" aria-labelledby="ban-modal-title">
        <button class="modal__close" type="button" data-ban-cancel 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>

        <div class="banmodal__head">
          <span class="banmodal__icon">{{ icons.i('ban') }}</span>
          <div>
            <h2 class="banmodal__title" id="ban-modal-title">Bannir le compte</h2>
            <p class="banmodal__sub muted" data-ban-modal-name></p>
          </div>
        </div>

        <div class="banmodal__body">
          <span class="banmodal__label">Durée</span>
          <div class="banpresets" data-ban-presets>
            <button class="banpreset" type="button" data-preset="1">24 h</button>
            <button class="banpreset" type="button" data-preset="3">3 jours</button>
            <button class="banpreset" type="button" data-preset="7">7 jours</button>
            <button class="banpreset" type="button" data-preset="30">30 jours</button>
            <button class="banpreset" type="button" data-preset="90">90 jours</button>
            <button class="banpreset banpreset--permanent" type="button" data-preset="permanent">Permanent</button>
          </div>

          <label class="banmodal__label" for="ban-until">Ou une date précise</label>
          <input id="ban-until" class="uban__until" type="datetime-local" data-ban-until
                 aria-label="Bannir jusqu'au (laisser vide pour permanent)">
          <p class="banmodal__hint muted" data-ban-summary>Aucune durée choisie — bannissement permanent.</p>

          <label class="banmodal__label" for="ban-reason">Motif interne <span class="muted">(facultatif)</span></label>
          <input id="ban-reason" class="uban__reason" type="text" maxlength="500" data-ban-reason
                 placeholder="Note de modération…" autocomplete="off">
        </div>

        <div class="banmodal__foot">
          <button class="btn-ghost" type="button" data-ban-cancel>Annuler</button>
          <button class="btn btn--danger" type="button" data-ban-confirm>Confirmer le bannissement</button>
        </div>
      </div>
    </div>
  </div>
{% endblock %}