{% extends 'layout.twig' %}
{% import 'partials/icons.twig' as icons %}
{% block title %}Notifications{% endblock %}
{% block heading %}Notifications{% endblock %}
{% block subheading %}Envoi des notifications push en attente{% endblock %}

{% block content %}
  <div data-notifications data-flush-url="{{ flushUrl }}" data-send-url="{{ sendUrl }}">
    <section class="card glass ops" data-animate>
      <div class="ops__head">
        <span class="ops__icon">{{ icons.i('bell') }}</span>
        <div class="ops__intro">
          <h2>Lancer l'envoi des notifications</h2>
          <p class="muted">
            Force le drain immédiat du tampon de notifications (digest OneSignal),
            habituellement vidé automatiquement par tâche planifiée. Équivaut à lancer
            le cron <code>notifications-flush</code>. À utiliser pour dépiler les
            notifications en attente sans attendre le prochain tick. L'opération est
            idempotente : un tampon déjà vide n'envoie rien.
          </p>
          <p class="muted"><strong>Action sortante :</strong> les notifications sont réellement poussées à leurs destinataires. L'action est confirmée avant lancement.</p>
        </div>
        <button class="btn" type="button" data-notif-flush>
          {{ icons.i('bell') }}<span>Lancer l'envoi</span>
        </button>
      </div>

      {# Résumé du dernier envoi. #}
      <div class="ntf-result" data-notif-result hidden>
        <div class="ntf-stats">
          <div class="ntf-stat"><span class="ntf-stat__val" data-notif-recipients>0</span><span class="ntf-stat__cap">Destinataires</span></div>
          <div class="ntf-stat ntf-stat--ok"><span class="ntf-stat__val" data-notif-pushed>0</span><span class="ntf-stat__cap">Poussées</span></div>
          <div class="ntf-stat"><span class="ntf-stat__val" data-notif-skipped>0</span><span class="ntf-stat__cap">Ignorées</span></div>
          <div class="ntf-stat ntf-stat--err"><span class="ntf-stat__val" data-notif-failed>0</span><span class="ntf-stat__cap">Échouées</span></div>
        </div>
      </div>

      <p class="alert alert--error" data-notif-error hidden></p>
    </section>

    {# ── Composer et envoyer une annonce ──────────────────────────────── #}
    <section class="card glass ops" data-notif-compose data-animate>
      <div class="ops__head">
        <span class="ops__icon">{{ icons.i('mail') }}</span>
        <div class="ops__intro">
          <h2>Envoyer une notification</h2>
          <p class="muted">
            Rédige une annonce (par langue) et choisis sa cible. Chaque destinataire
            la reçoit dans sa langue (repli sur le français). Les comptes ayant désactivé
            le push sont ignorés ; seuls les appareils abonnés reçoivent réellement le push.
          </p>
        </div>
      </div>

      <form class="ntf-form" data-notif-form novalidate>
        {# Rédaction par langue. #}
        <div class="ntf-form__locales">
          <div class="ntf-loc">
            <h3 class="ntf-loc__title">Français <span class="ntf-loc__req">(obligatoire)</span></h3>
            <div class="field">
              <label for="ntf-fr-title">Titre</label>
              <input id="ntf-fr-title" type="text" data-ntf-title="fr-FR" maxlength="120" autocomplete="off">
            </div>
            <div class="field">
              <label for="ntf-fr-body">Message</label>
              <textarea id="ntf-fr-body" data-ntf-body="fr-FR" rows="3" maxlength="500"></textarea>
            </div>
          </div>
          <div class="ntf-loc">
            <h3 class="ntf-loc__title">Anglais <span class="muted">(optionnel)</span></h3>
            <div class="field">
              <label for="ntf-en-title">Titre</label>
              <input id="ntf-en-title" type="text" data-ntf-title="en-US" maxlength="120" autocomplete="off">
            </div>
            <div class="field">
              <label for="ntf-en-body">Message</label>
              <textarea id="ntf-en-body" data-ntf-body="en-US" rows="3" maxlength="500"></textarea>
            </div>
          </div>
        </div>

        <div class="field">
          <label for="ntf-url">Lien (optionnel)</label>
          <input id="ntf-url" type="url" data-ntf-url autocomplete="off" placeholder="https://…">
          <p class="field__hint muted">Ouvre ce lien au clic sur la notification.</p>
        </div>

        {# Ciblage. #}
        <div class="field">
          <label>Destinataires</label>
          <div class="mm-period ntf-target" role="group" aria-label="Cible">
            <button class="mm-period__btn is-active" type="button" data-ntf-mode="targeted">Utilisateurs ciblés</button>
            <button class="mm-period__btn" type="button" data-ntf-mode="broadcast">Tous les utilisateurs</button>
          </div>
        </div>

        <div class="field" data-ntf-targeted>
          <label for="ntf-ids">Identifiants utilisateurs</label>
          <textarea id="ntf-ids" data-ntf-ids rows="3" autocomplete="off"
                    placeholder="Un identifiant hex (32 caractères) par ligne, ou séparés par une virgule/espace."></textarea>
          <p class="field__hint muted" data-ntf-ids-count>Jusqu'à 1000 identifiants par envoi.</p>
        </div>

        <div class="alert alert--danger ntf-broadcast-warn" data-ntf-broadcast-warn hidden>
          <strong>Diffusion à tous les utilisateurs.</strong> L'annonce sera envoyée à l'ensemble de la base, par lots. Action à confirmer.
        </div>

        <p class="cpnform__error" data-notif-send-error hidden></p>

        <div class="ntf-form__foot">
          <div class="ops__progress ntf-progress" data-ntf-progress hidden>
            <div class="ops__bar"><span data-ntf-bar style="width:0%"></span></div>
            <div class="ops__meta"><span data-ntf-progress-label></span></div>
          </div>
          <button class="btn" type="button" data-notif-send>
            {{ icons.i('mail') }}<span data-notif-send-label>Envoyer</span>
          </button>
        </div>

        {# Récap de l'envoi. #}
        <div class="ntf-result" data-notif-send-result hidden>
          <div class="ntf-stats">
            <div class="ntf-stat ntf-stat--ok"><span class="ntf-stat__val" data-nsend-dispatched>0</span><span class="ntf-stat__cap">Envoyées</span></div>
            <div class="ntf-stat"><span class="ntf-stat__val" data-nsend-skipped>0</span><span class="ntf-stat__cap">Ignorées</span></div>
            <div class="ntf-stat ntf-stat--err"><span class="ntf-stat__val" data-nsend-failed>0</span><span class="ntf-stat__cap">Échouées</span></div>
          </div>
        </div>
      </form>
    </section>
  </div>
{% endblock %}