{% extends 'layout.twig' %}
{% import 'partials/icons.twig' as icons %}
{% block title %}Ledger{% endblock %}
{% block heading %}Ledger{% endblock %}
{% block subheading %}Grand livre de valeurs — monnaies et journal des écritures{% endblock %}

{% block content %}
  <div data-ledger
       data-currencies-url="{{ currenciesUrl }}"
       data-journal-url="{{ journalUrl }}"
       data-users-base="{{ usersBase }}">

    {# ── Onglets ──────────────────────────────────────────────────── #}
    <div class="tabs" role="tablist" data-animate>
      <button class="tab is-active" type="button" role="tab" aria-selected="true"
              data-tab="currencies" id="tab-currencies" aria-controls="panel-currencies">
        Monnaies
      </button>
      <button class="tab" type="button" role="tab" aria-selected="false"
              data-tab="journal" id="tab-journal" aria-controls="panel-journal">
        Journal
      </button>
    </div>

    {# ── Onglet : Monnaies ────────────────────────────────────────── #}
    <div class="tabpanel" id="panel-currencies" role="tabpanel" aria-labelledby="tab-currencies" data-panel="currencies">
      <div class="cpn-toolbar" data-animate>
        <p class="muted lgc-intro">Catalogue des monnaies de la plateforme. Les monnaies système (XP, POINTS, EUR) ne sont ni supprimables ni désactivables.</p>
        <button class="btn cpn-toolbar__new" type="button" data-currency-new>
          {{ icons.i('plus') }} Nouvelle monnaie
        </button>
      </div>

      <div class="alert alert--danger" data-currency-error hidden>
        Le service Hydrogen est injoignable. Réessaie dans un instant.
      </div>

      <article class="card glass" data-animate>
        <div class="lgc-table-wrap">
          <table class="lgc-table" data-currencies-table>
            <thead>
              <tr>
                <th>Code</th><th>Libellé</th><th>Famille</th>
                <th class="lgc-num">Décimales</th><th>Symbole</th>
                <th class="lgc-num">Plancher</th><th>État</th><th></th>
              </tr>
            </thead>
            <tbody data-currencies-body>
              {% for i in 1..3 %}
                <tr class="lgc-row lgc-row--skeleton">
                  <td colspan="8"><span class="skeleton skeleton--text" style="width:100%;height:20px"></span></td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        <p class="muted lgc-empty" data-currencies-empty hidden>Aucune monnaie déclarée.</p>
      </article>
    </div>

    {# ── Onglet : Journal ─────────────────────────────────────────── #}
    <div class="tabpanel" id="panel-journal" role="tabpanel" aria-labelledby="tab-journal" data-panel="journal" hidden>
      <div class="alert alert--danger" data-journal-error hidden>
        Le service Hydrogen est injoignable — impossible de charger le journal.
      </div>

      <article class="card glass" data-animate>
        <div class="lgj-filters" data-journal-filters>
          <label class="field lgj-filter">
            <span>Compte (id hex)</span>
            <input type="search" data-journal-user maxlength="32" autocomplete="off"
                   placeholder="32 caractères hexadécimaux" pattern="[0-9a-fA-F]{32}">
          </label>
          <label class="field lgj-filter">
            <span>Monnaie</span>
            <select data-journal-currency>
              <option value="">Toutes</option>
            </select>
          </label>
          <label class="field lgj-filter">
            <span>Type</span>
            <select data-journal-type>
              <option value="">Tous</option>
              <option value="experience">Expérience</option>
              <option value="points">Points</option>
              <option value="money">Argent</option>
            </select>
          </label>
          <label class="field lgj-filter">
            <span>Événement</span>
            <select data-journal-event>
              <option value="">Tous</option>
              <option value="media_upload">Publication d'un média</option>
              <option value="coupon_reward">Récompense de coupon</option>
              <option value="badge_reward">Récompense de badge</option>
              <option value="opening_balance">Solde d'ouverture</option>
              <option value="adjustment">Ajustement manuel</option>
            </select>
          </label>
          <label class="field lgj-filter lgj-filter--date">
            <span>Du</span>
            <input type="date" data-journal-from autocomplete="off">
          </label>
          <label class="field lgj-filter lgj-filter--date">
            <span>Au</span>
            <input type="date" data-journal-to autocomplete="off">
          </label>
          <div class="lgj-filter__actions">
            <button class="btn" type="button" data-journal-apply>Filtrer</button>
            <button class="btn-ghost" type="button" data-journal-reset>Réinitialiser</button>
          </div>
        </div>

        <p class="muted lg-list__empty" data-journal-empty hidden>Aucune écriture pour ces filtres.</p>
        <ul class="lg-list lgj-list" data-journal-list>
          {% for i in 1..6 %}
            <li class="lg-item">
              <span class="skeleton skeleton--text" style="width:100%;height:40px"></span>
            </li>
          {% endfor %}
        </ul>
        <div class="lg-list__foot" data-journal-more hidden>
          <button class="btn-ghost" type="button" data-journal-more-btn>Voir plus</button>
        </div>
      </article>
    </div>

    {# ── Modale création / édition d'une monnaie ──────────────────── #}
    <div class="modal modal--form" data-currency-modal hidden>
      <div class="cpnmodal" role="dialog" aria-modal="true" aria-labelledby="currency-modal-title">
        <button class="modal__close" type="button" data-currency-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="cpnmodal__head">
          <span class="cpnmodal__icon">{{ icons.i('coins') }}</span>
          <div>
            <h2 class="cpnmodal__title" id="currency-modal-title" data-currency-modal-title>Nouvelle monnaie</h2>
            <p class="cpnmodal__sub muted">Code, famille, libellés et paramètres de valeur.</p>
          </div>
        </div>

        <form class="cpnmodal__body" data-currency-form>
          <div class="cpnform__grid">
            <div class="field">
              <label for="cur-code">Code</label>
              <input id="cur-code" type="text" data-cur-code maxlength="12" autocomplete="off"
                     placeholder="GEMS" pattern="[A-Za-z0-9_]{2,12}">
              <p class="field__hint muted" data-cur-code-hint>2 à 12 caractères (A-Z, 0-9, _). <strong>Immuable</strong> après création.</p>
            </div>

            <div class="field">
              <label for="cur-kind">Famille</label>
              <select id="cur-kind" data-cur-kind>
                <option value="experience">Expérience</option>
                <option value="points">Points</option>
                <option value="money">Argent</option>
              </select>
              <p class="field__hint muted" data-cur-kind-hint>Immuable après création.</p>
            </div>

            <div class="field">
              <label for="cur-scale">Décimales</label>
              <input id="cur-scale" type="number" data-cur-scale min="0" max="4" step="1" value="0">
              <p class="field__hint muted">Nombre de décimales d'usage (0 pour XP, 2 pour EUR).</p>
            </div>

            <div class="field">
              <label for="cur-symbol">Symbole <span class="muted">(optionnel)</span></label>
              <input id="cur-symbol" type="text" data-cur-symbol maxlength="8" autocomplete="off" placeholder="✦">
            </div>

            <div class="field">
              <label for="cur-floor">Plancher de découvert</label>
              <input id="cur-floor" type="text" data-cur-floor autocomplete="off" value="0" placeholder="0">
              <p class="field__hint muted">Solde minimum autorisé (≤ 0). 0 interdit le découvert.</p>
            </div>

            <div class="field">
              <label>&nbsp;</label>
              <label class="cpn-check">
                <input type="checkbox" data-cur-active checked> Monnaie active
              </label>
              <p class="field__hint muted" data-cur-active-hint></p>
            </div>

            <div class="field field--wide">
              <label for="cur-label-fr">Libellé FR</label>
              <input id="cur-label-fr" type="text" data-cur-label-fr maxlength="80" autocomplete="off" placeholder="Gemmes">
            </div>
            <div class="field field--wide">
              <label for="cur-label-en">Libellé EN <span class="muted">(optionnel)</span></label>
              <input id="cur-label-en" type="text" data-cur-label-en maxlength="80" autocomplete="off" placeholder="Gems">
            </div>
          </div>

          <p class="cpnform__error" data-currency-form-error hidden></p>
        </form>

        <div class="cpnmodal__foot">
          <span class="lgc-sys-note muted" data-currency-sys-note hidden>Monnaie système : code, famille et activation verrouillés.</span>
          <button class="btn-ghost" type="button" data-currency-cancel>Annuler</button>
          <button class="btn" type="button" data-currency-save>Enregistrer</button>
        </div>
      </div>
    </div>
  </div>
{% endblock %}