{% extends 'base.html.twig' %}
{% block title %}Abonnement en cours d'activation — CSI World{% endblock %}

{% block body %}
<div style="max-width:500px;margin:60px auto;padding:0 20px;text-align:center;flex:1;color:var(--text)">

  {% if activeSub %}
    <div style="font-size:2rem;margin-bottom:12px">✓</div>
    <h2 style="margin-bottom:8px">Abonnement actif !</h2>
    <p style="color:var(--muted);font-size:.88rem;margin-bottom:24px">
      Votre abonnement est confirmé jusqu'au {{ activeSub.currentPeriodEnd|date('d/m/Y') }}.
    </p>
    <a href="{{ path('map_index') }}" style="display:inline-block;padding:10px 24px;background:var(--accent);color:#000;border-radius:8px;font-weight:700;text-decoration:none">Retour à la carte</a>
  {% else %}
    <div id="waiting-spinner" style="margin-bottom:16px">
      <div style="width:36px;height:36px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto"></div>
    </div>
    <h2 style="margin-bottom:8px">Activation en cours…</h2>
    <p style="color:var(--muted);font-size:.88rem;margin-bottom:24px">
      PayPal est en train de confirmer votre abonnement. Cela prend généralement quelques secondes.
    </p>
    <div id="sub-status-msg" style="font-size:.8rem;color:var(--muted)">Vérification…</div>
  {% endif %}

  <style>
    @keyframes spin { to { transform: rotate(360deg); } }
  </style>

  {% if not activeSub %}
  <script>
  (function () {
    var attempts = 0;
    var maxAttempts = 20;

    function check() {
      attempts++;
      fetch('{{ path("subscribe_status") }}')
        .then(function (r) { return r.json(); })
        .then(function (d) {
          if (d.active) {
            document.getElementById('waiting-spinner').innerHTML = '<div style="font-size:2rem">✓</div>';
            document.getElementById('sub-status-msg').innerHTML =
              'Abonnement actif ! <a href="{{ path("map_index") }}" style="color:var(--accent)">Retour à la carte →</a>';
          } else if (attempts < maxAttempts) {
            setTimeout(check, 3000);
          } else {
            document.getElementById('sub-status-msg').textContent =
              'Activation en attente — consultez votre page abonnement dans quelques minutes.';
          }
        })
        .catch(function () {
          if (attempts < maxAttempts) setTimeout(check, 3000);
        });
    }

    setTimeout(check, 2000);
  })();
  </script>
  {% endif %}
</div>
{% endblock %}