{% extends 'layout.twig' %}
{% import 'partials/icons.twig' as icons %}
{% block title %}Coupons{% endblock %}
{% block heading %}Coupons{% endblock %}
{% block subheading %}Administration des codes promotionnels{% endblock %}

{% block content %}
  <div data-coupons
       data-list-url="{{ listUrl }}"
       data-item-base="{{ itemBase }}"
       data-users-url="{{ usersUrl }}">

    {# ── Barre d'outils : recherche, filtre de statut, création ────────── #}
    <div class="cpn-toolbar" data-animate>
      <label class="mfilter__search">
        {{ icons.i('search') }}
        <input type="search" data-coupon-search placeholder="Filtrer par code…" autocomplete="off">
      </label>
      <div class="mfilter__status" role="group" aria-label="Filtrer par statut">
        <button class="mm-period__btn is-active" type="button" data-coupon-filter-status="">Tous</button>
        <button class="mm-period__btn" type="button" data-coupon-filter-status="active">Actifs</button>
        <button class="mm-period__btn" type="button" data-coupon-filter-status="scheduled">Programmés</button>
        <button class="mm-period__btn" type="button" data-coupon-filter-status="expired">Expirés</button>
        <button class="mm-period__btn" type="button" data-coupon-filter-status="exhausted">Épuisés</button>
      </div>
      <button class="btn cpn-toolbar__new" type="button" data-coupon-new>
        {{ icons.i('plus') }} Nouveau coupon
      </button>
    </div>

    {# ── Alerte d'indisponibilité ──────────────────────────────────────── #}
    <div class="alert alert--danger" data-coupons-error hidden>
      Le service Hydrogen est injoignable. Réessaie dans un instant.
    </div>

    {# ── Liste des coupons ─────────────────────────────────────────────── #}
    <article class="card glass" data-animate>
      <div class="cpn-list" data-coupons-list>
        {% for i in 1..4 %}
          <div class="cpn-row cpn-row--skeleton">
            <span class="skeleton cpn-skel"></span>
          </div>
        {% endfor %}
      </div>
      <p class="muted cpn-empty" data-coupons-empty hidden>Aucun coupon ne correspond.</p>
      <div class="cpn-more">
        <button class="btn-ghost" type="button" data-coupons-more hidden>Charger plus</button>
      </div>
    </article>

    {# ── Modale création / édition ─────────────────────────────────────── #}
    <div class="modal modal--form" data-coupon-modal hidden>
      <div class="cpnmodal" role="dialog" aria-modal="true" aria-labelledby="coupon-modal-title">
        <button class="modal__close" type="button" data-coupon-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('ticket') }}</span>
          <div>
            <h2 class="cpnmodal__title" id="coupon-modal-title" data-coupon-modal-title>Nouveau coupon</h2>
            <p class="cpnmodal__sub muted">Code, quota, fenêtre de validité et récompenses.</p>
          </div>
        </div>

        <form class="cpnmodal__body" data-coupon-form>
          <div class="cpnform__grid">
            <div class="field">
              <label for="cf-id">Code du coupon</label>
              <input id="cf-id" type="text" data-cf-id maxlength="32" autocomplete="off"
                     placeholder="WELCOME2026" pattern="[A-Za-z0-9._-]{1,32}">
              <p class="field__hint muted">1 à 32 caractères : lettres, chiffres, <code>. _ -</code>. Sensible à la casse.</p>
            </div>

            <div class="field">
              <label for="cf-limit">Quota d'utilisations</label>
              <input id="cf-limit" type="number" data-cf-limit min="0" step="1" placeholder="0">
              <label class="cpn-check">
                <input type="checkbox" data-cf-unlimited> Illimité (quota = 0)
              </label>
            </div>

            <div class="field">
              <label for="cf-start">Début <span class="muted">(facultatif)</span></label>
              <input id="cf-start" type="datetime-local" data-cf-start>
            </div>

            <div class="field">
              <label for="cf-end">Fin <span class="muted">(facultatif)</span></label>
              <input id="cf-end" type="datetime-local" data-cf-end>
            </div>
          </div>

          <div class="cpnform__rewards">
            <div class="cpnform__rewards-head">
              <span class="cpnform__label">{{ icons.i('gift') }} Récompenses</span>
              <button class="btn-ghost btn-ghost--sm" type="button" data-cf-add-reward>
                {{ icons.i('plus') }} Ajouter
              </button>
            </div>
            <p class="field__hint muted">
              Chaque récompense référence un <code>rewardId</code> du catalogue Hydrogen
              (type <em>expérience</em> ou <em>points</em>). La liste remplace intégralement
              les récompenses existantes lors d'une édition.
            </p>
            <div class="cpn-rewards" data-cf-rewards></div>
            <p class="muted cpn-rewards__empty" data-cf-rewards-empty>Aucune récompense — simple compteur d'usages.</p>
          </div>

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

        <div class="cpnmodal__foot">
          <button class="btn-ghost" type="button" data-coupon-cancel>Annuler</button>
          <button class="btn" type="button" data-coupon-save>Enregistrer</button>
        </div>
      </div>
    </div>

    {# Gabarit d'une ligne de récompense (cloné côté client). #}
    <template data-cf-reward-template>
      <div class="cpn-reward">
        <div class="field field--tight">
          <label>rewardId</label>
          <input type="number" data-cr-reward-id min="1" step="1" placeholder="1">
        </div>
        <div class="field field--tight">
          <label>Valeur</label>
          <input type="number" data-cr-value min="1" step="1" placeholder="500">
        </div>
        <div class="field field--tight">
          <label>badgeId <span class="muted">(opt.)</span></label>
          <input type="text" data-cr-badge maxlength="6" placeholder="—" autocomplete="off">
        </div>
        <button class="icon-btn icon-btn--danger cpn-reward__del" type="button" data-cr-remove aria-label="Retirer">
          {{ icons.i('trash') }}
        </button>
      </div>
    </template>

    {# ── Tiroir des rédemptions ────────────────────────────────────────── #}
    <div class="modal modal--form" data-coupon-redemptions hidden>
      <div class="cpnmodal cpnmodal--redemptions" role="dialog" aria-modal="true" aria-labelledby="coupon-redemptions-title">
        <button class="modal__close" type="button" data-cr-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>

        <div class="cpnmodal__head">
          <span class="cpnmodal__icon">{{ icons.i('users') }}</span>
          <div>
            <h2 class="cpnmodal__title" id="coupon-redemptions-title">Rédemptions</h2>
            <p class="cpnmodal__sub muted" data-cr-subtitle></p>
          </div>
        </div>

        <div class="cpnmodal__body">
          <ul class="cpn-redemptions" data-cr-list></ul>
          <p class="muted" data-cr-empty hidden>Aucune rédemption pour ce coupon.</p>
          <div class="cpn-more">
            <button class="btn-ghost" type="button" data-cr-more hidden>Charger plus</button>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}