{% extends 'base.html.twig' %}
{% block title %}Abonnement Premium — CSI World{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
  .sub-page {
    max-width: 680px; margin: 32px auto; padding: 0 20px 48px;
    flex: 1; display: flex; flex-direction: column; gap: 20px;
    color: var(--text);
  }
  .back-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 600; color: var(--muted);
    text-decoration: none; transition: color .15s; margin-bottom: 4px;
  }
  .back-link:hover { color: var(--accent2); }

  .sub-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 24px 28px;
  }
  .sub-card-title {
    font-size: 1rem; font-weight: 700; margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
  }

  /* Badge statut */
  .sub-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 20px;
    font-size: .8rem; font-weight: 700;
  }
  .sub-badge.active   { background: rgba(42,199,105,.15); color: #2ac769; border: 1px solid rgba(42,199,105,.35); }
  .sub-badge.inactive { background: rgba(200,200,200,.1); color: var(--muted); border: 1px solid rgba(200,200,200,.2); }
  .sub-badge.warning  { background: rgba(240,136,62,.12); color: #f0883e; border: 1px solid rgba(240,136,62,.3); }

  /* Plan card */
  .plan-card {
    border: 1px solid rgba(var(--accent-rgb, 100,200,255),.3);
    border-radius: 10px; padding: 18px 20px;
    background: rgba(var(--accent-rgb, 100,200,255),.05);
    margin-bottom: 16px;
  }
  .plan-price {
    font-size: 2rem; font-weight: 800; color: var(--accent);
    display: flex; align-items: baseline; gap: 6px;
  }
  .plan-price span { font-size: .9rem; font-weight: 400; color: var(--muted); }
  .plan-name  { font-size: .9rem; font-weight: 600; margin-bottom: 6px; }
  .plan-desc  { font-size: .8rem; color: var(--muted); margin-top: 6px; }

  /* Liste d'avantages */
  .plan-perks {
    list-style: none; padding: 0; margin: 12px 0 6px;
    display: flex; flex-direction: column; gap: 8px;
    font-size: .82rem; color: var(--text);
    line-height: 1.4;
  }
  .plan-perks li {
    display: flex; align-items: flex-start; gap: 9px;
  }
  .plan-perks li::before {
    content: '✓'; flex-shrink: 0;
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(63,185,80,.18); color: #3fb950;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .74rem; font-weight: 800;
    margin-top: 1px;
  }
  .plan-card-tier.tier-platine .plan-perks li::before {
    background: rgba(99,84,214,.22); color: #b9a4ff;
  }
  .plan-perks .perk-emph { color: var(--premium-color, var(--text)); font-weight: 700; }

  /* Multi-plans grid */
  .plans-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-bottom: 16px;
  }
  .plan-card-tier {
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 0;
    border-color: var(--premium-color, var(--border));
    background: linear-gradient(160deg,
      color-mix(in srgb, var(--premium-color, var(--accent2)) 10%, transparent),
      transparent);
  }
  .plan-card-tier.tier-bronze   { --premium-color: var(--premium-bronze-color); }
  .plan-card-tier.tier-argent   { --premium-color: var(--premium-argent-color); }
  .plan-card-tier.tier-gold     { --premium-color: var(--premium-gold-color); }
  .plan-tier-badge {
    display: flex; align-items: center; gap: 6px;
    font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: 4px;
  }
  .plan-card-tier .plan-price { color: var(--premium-color, var(--accent)); font-size: 1.6rem; }
  .paypal-button-container { margin-top: 10px; }

  /* Toggle mensuel/annuel */
  .billing-toggle {
    display: inline-flex; gap: 0; margin-bottom: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    border-radius: 10px; padding: 4px;
  }
  .bt-option {
    background: transparent; border: none; color: var(--muted);
    padding: 7px 16px; border-radius: 7px;
    font-size: .82rem; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .15s, color .15s;
  }
  .bt-option:hover { color: var(--text); }
  .bt-option.active {
    background: var(--accent); color: #0d1117;
  }
  .bt-savings {
    font-size: .68rem; font-weight: 700; padding: 1px 6px;
    border-radius: 9px; background: rgba(63,185,80,.18); color: #3fb950;
  }
  .bt-option.active .bt-savings { background: rgba(0,0,0,.18); color: #0d1117; }

  /* Badge économie sur cartes annuelles */
  .plan-savings {
    display: inline-block; margin-top: 4px;
    font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 10px;
    background: rgba(63,185,80,.14); color: #3fb950;
    border: 1px solid rgba(63,185,80,.32);
  }

  .plan-card[data-billing-period].hidden { display: none; }
  .btn-change-plan {
    margin-top: 10px; padding: 8px 14px; width: 100%;
    background: var(--premium-color, var(--accent)); color: #0d1117;
    border: none; border-radius: 7px;
    font-weight: 700; font-size: .85rem; cursor: pointer;
    transition: filter .15s;
  }
  .btn-change-plan:hover:not(:disabled) { filter: brightness(1.1); }
  .btn-change-plan:disabled { opacity: .55; cursor: wait; }

  /* Boutons */
  .btn-subscribe {
    display: inline-block; padding: 11px 28px;
    background: var(--accent); color: #000; border: none; border-radius: 8px;
    font-weight: 700; font-size: .9rem; cursor: pointer; text-decoration: none;
    transition: filter .15s;
  }
  .btn-subscribe:hover { filter: brightness(1.12); }
  .btn-cancel-sub {
    background: transparent; border: 1px solid rgba(200,80,80,.5);
    color: #e06060; padding: 8px 18px; border-radius: 7px;
    font-size: .82rem; font-weight: 600; cursor: pointer; transition: background .15s;
  }
  .btn-cancel-sub:hover { background: rgba(200,80,80,.1); }
  .btn-buy-credits {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; margin-top: 10px; padding: 9px 14px;
    background: rgba(163,113,247,.14); border: 1px solid rgba(163,113,247,.4);
    color: #a371f7; border-radius: 7px;
    font-weight: 700; font-size: .84rem; cursor: pointer;
    transition: background .15s;
  }
  .btn-buy-credits:hover:not(:disabled) { background: rgba(163,113,247,.22); }
  .btn-buy-credits:disabled { opacity: .5; cursor: not-allowed; }

  /* Bannière "changement de plan en cours" */
  #plan-change-banner {
    display: none;
    background: var(--surface);
    border: 1px solid var(--premium-color, var(--accent2));
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 16px;
    display: none;
    align-items: center;
    gap: 12px;
    box-shadow: 0 0 18px var(--premium-glow, rgba(88,166,255,.25));
  }
  #plan-change-banner.tier-bronze { --premium-color: var(--premium-bronze-color); --premium-glow: var(--premium-bronze-glow); }
  #plan-change-banner.tier-argent { --premium-color: var(--premium-argent-color); --premium-glow: var(--premium-argent-glow); }
  #plan-change-banner.tier-gold   { --premium-color: var(--premium-gold-color);   --premium-glow: var(--premium-gold-glow); }
  #plan-change-banner.visible { display: flex; }
  #plan-change-banner .spinner {
    width: 22px; height: 22px; flex-shrink: 0;
    border: 3px solid rgba(255,255,255,.15);
    border-top-color: var(--premium-color, var(--accent2));
    border-radius: 50%;
    animation: spin .8s linear infinite;
  }
  #plan-change-banner.done .spinner {
    border: none;
    background: var(--premium-color, #2ac769);
    color: #0d1117;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900;
    animation: none;
  }
  #plan-change-banner.done .spinner::before { content: '✓'; font-size: .9rem; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Tableau historique */
  .history-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
  .history-table th { text-align: left; padding: 8px 10px; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); }
  .history-table td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.05); }

  #cancel-confirm { display: none; }

  /* Bloc claim hebdomadaire */
  .weekly-claim-card {
    margin-top: 20px;
    padding: 18px 22px;
    background: linear-gradient(135deg, rgba(245,197,66,.06), rgba(99,84,214,.06));
    border: 1px solid rgba(245,197,66,.25);
    border-radius: 10px;
  }
  .weekly-claim-title {
    font-size: .92rem; font-weight: 700; margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
  }
  .weekly-claim-rewards {
    display: flex; gap: 16px; flex-wrap: wrap;
    font-size: .94rem; font-weight: 700; margin: 10px 0 14px;
    align-items: center;
  }
  .weekly-claim-rewards .reward-line {
    display: inline-flex; align-items: center; gap: 6px;
  }
  .weekly-claim-rewards img { width: 22px; height: 22px; image-rendering: pixelated; }
  .btn-claim {
    padding: 10px 22px; border: none; border-radius: 7px;
    background: linear-gradient(135deg, #f5c542, #d49b1c);
    color: #1c1300; font-weight: 800; font-size: .9rem;
    cursor: pointer; transition: filter .15s, transform .08s;
  }
  .btn-claim:hover:not(:disabled) { filter: brightness(1.1); }
  .btn-claim:active:not(:disabled) { transform: translateY(1px); }
  .btn-claim:disabled {
    background: rgba(255,255,255,.05); color: var(--muted);
    border: 1px solid var(--border); cursor: not-allowed;
    font-weight: 600;
  }
  .weekly-claim-cooldown { font-size: .78rem; color: var(--muted); margin-top: 4px; }
  .weekly-claim-toast {
    display: none; margin-top: 12px;
    padding: 10px 14px; border-radius: 7px;
    background: rgba(42,199,105,.12); border: 1px solid rgba(42,199,105,.35);
    color: #2ac769; font-size: .84rem; font-weight: 600;
  }
  .weekly-claim-toast.visible { display: block; }
  .weekly-claim-error {
    display: none; margin-top: 12px;
    padding: 10px 14px; border-radius: 7px;
    background: rgba(200,80,80,.12); border: 1px solid rgba(200,80,80,.35);
    color: #e06060; font-size: .82rem;
  }
  .weekly-claim-error.visible { display: block; }
</style>
{% endblock %}

{% macro planPerks(plan) %}
  {% set tierLabel = plan.tier|capitalize %}
  {% set zoneAccess = {
    bronze:  'Zones Bronze ou plus',
    argent:  'Zones Argent ou plus',
    gold:    'Zones Gold ou plus',
    platine: 'Toutes les zones Premium',
  } %}
  <ul class="plan-perks">
    {% if plan.tier == 'platine' %}
      <li>Pseudo & avatar <span class="perk-emph">holographiques</span></li>
    {% else %}
      <li>Pseudo & avatar couleur <span class="perk-emph">{{ tierLabel }}</span></li>
    {% endif %}

    {% if plan.weeklyMoney > 0 %}
      <li><span class="perk-emph">+{{ plan.weeklyMoney|number_format(0, ',', ' ') }}</span> Dollawrs / semaine</li>
    {% endif %}
    {% if plan.weeklyPremium > 0 %}
      <li><span class="perk-emph">+{{ plan.weeklyPremium|number_format(0, ',', ' ') }}</span> Crédits MM / semaine</li>
    {% endif %}

    {% if plan.cloudSavesQuota > 0 %}
      <li><span class="perk-emph">{{ plan.cloudSavesQuota }}</span> sauvegardes cloud</li>
      {% if plan.tier == 'platine' %}
        <li><span class="perk-emph">Historique 5 versions</span> par jeu</li>
      {% endif %}
    {% endif %}

    {% if plan.bankInterestBonusPct > 0 %}
      <li>Intérêts banque <span class="perk-emph">+{{ plan.bankInterestBonusPct }}%</span> <span style="opacity:.7;font-size:.85em">(soit {{ 10 + plan.bankInterestBonusPct }}% / mois)</span></li>
    {% endif %}
    {% if plan.extraDailyQuests > 0 %}
      <li><span class="perk-emph">+{{ plan.extraDailyQuests }}</span> quête{{ plan.extraDailyQuests > 1 ? 's' }} journalière{{ plan.extraDailyQuests > 1 ? 's' }} bonus</li>
    {% endif %}

    <li>{{ zoneAccess[plan.tier] ?? 'Zones Premium' }}</li>
  </ul>
{% endmacro %}

{% block body %}
{% import _self as perks %}
<div class="sub-page">
  <a href="{{ path('map_index') }}" class="back-link">← Retour à la carte</a>

  <div id="plan-change-banner">
    <div class="spinner"></div>
    <div style="flex:1;font-size:.86rem">
      <strong id="plan-change-title">Changement de plan en cours…</strong>
      <div id="plan-change-subtitle" style="color:var(--muted);font-size:.78rem;margin-top:3px">
        PayPal confirme l'opération, cela prend quelques secondes.
      </div>
    </div>
  </div>

  <script>
  (function () {
    var params  = new URLSearchParams(window.location.search);
    var pending = params.get('planChange');
    if (!pending) return;

    var banner   = document.getElementById('plan-change-banner');
    var title    = document.getElementById('plan-change-title');
    var subtitle = document.getElementById('plan-change-subtitle');
    var statusUrl = {{ path('subscribe_status')|json_encode|raw }};
    var labels = { bronze: 'Bronze', argent: 'Argent', gold: 'Gold' };
    var targetLabel = labels[pending] || pending;

    banner.classList.add('visible', 'tier-' + pending);
    title.textContent = 'Passage à ' + targetLabel + ' en cours…';

    var attempts    = 0;
    var maxAttempts = 25;

    function poll() {
      attempts++;
      fetch(statusUrl, { credentials: 'same-origin' })
        .then(function (r) { return r.json(); })
        .then(function (d) {
          if (d && d.tier === pending) {
            banner.classList.add('done');
            title.textContent = 'Plan ' + targetLabel + ' activé !';
            subtitle.textContent = 'La page va se rafraîchir…';
            setTimeout(function () {
              window.location.href = {{ path('subscribe_index')|json_encode|raw }};
            }, 1500);
            return;
          }
          if (attempts >= maxAttempts) {
            subtitle.innerHTML = 'Activation plus longue que prévu. <a href="{{ path('subscribe_index') }}" style="color:var(--accent)">Rafraîchir manuellement</a>';
            return;
          }
          setTimeout(poll, 3000);
        })
        .catch(function () {
          if (attempts < maxAttempts) setTimeout(poll, 3000);
        });
    }

    setTimeout(poll, 2500);
  })();
  </script>

  <div class="sub-card">
    <div class="sub-card-title">
      Abonnement Premium CSI World Online
    </div>

    {% if activeSub %}
      {% set isCancelled = activeSub.status == 'cancelled' %}
      <div style="margin-bottom:16px">
        {% if isCancelled %}
          <span class="sub-badge warning">● Abonnement annulé — accès jusqu'au {{ activeSub.currentPeriodEnd|date('d/m/Y') }}</span>
        {% else %}
          <span class="sub-badge active">● Abonné</span>
        {% endif %}
      </div>
      {% set isCreditsSub = activeSub.paymentMethod == 'credits' %}
      <div style="font-size:.85rem;color:var(--muted);margin-bottom:20px">
        {% if isCancelled %}
          Votre abonnement a été annulé. Vous conservez l'accès Premium jusqu'au
          <strong style="color:var(--text)">{{ activeSub.currentPeriodEnd|date('d/m/Y') }}</strong>,
          puis votre compte redeviendra gratuit (aucun prélèvement futur).
        {% elseif isCreditsSub %}
          Abonnement payé en Crédits MasterMoney — expire le
          <strong style="color:var(--text)">{{ activeSub.currentPeriodEnd|date('d/m/Y') }}</strong>
          (pas de renouvellement automatique).
        {% else %}
          Renouvellement automatique le
          <strong style="color:var(--text)">{{ activeSub.currentPeriodEnd|date('d/m/Y') }}</strong>.
        {% endif %}
        <br>Plan : {{ activeSub.plan.name }}
        {% if isCreditsSub %}
          — {{ activeSub.plan.creditsPrice|number_format(0, ',', ' ') }} Crédits MM
        {% else %}
          — {{ (activeSub.plan.priceCents / 100)|number_format(2, ',', ' ') }} € / mois
        {% endif %}
      </div>

      {% if not isCancelled and isCreditsSub %}
        <div style="font-size:.78rem;color:var(--muted);margin-bottom:16px;padding:10px 12px;border-radius:7px;background:rgba(255,255,255,.03);border:1px solid var(--border)">
          Les abonnements payés en Crédits MasterMoney ne donnent pas droit aux récompenses hebdomadaires (Dollawrs/Crédits).
        </div>
      {% endif %}

      {% if not isCancelled and not isCreditsSub and weeklyClaim and weeklyClaim.money + weeklyClaim.premium > 0 %}
        <div class="weekly-claim-card">
          <div class="weekly-claim-title">Récompenses hebdomadaires</div>
          <div style="font-size:.8rem;color:var(--muted);margin-bottom:6px">
            Tu peux réclamer une fois par semaine tant que ton abonnement est actif.
          </div>
          <div class="weekly-claim-rewards">
            {% if weeklyClaim.money > 0 %}
              <span class="reward-line">
                <img src="{{ asset('images/money.png') }}" alt="">
                +{{ weeklyClaim.money|number_format(0, ',', ' ') }} Dollawrs
              </span>
            {% endif %}
            {% if weeklyClaim.premium > 0 %}
              <span class="reward-line">
                <img src="{{ asset('images/premium_money.png') }}" alt="">
                +{{ weeklyClaim.premium|number_format(0, ',', ' ') }} Crédits MM
              </span>
            {% endif %}
          </div>
          <button type="button" id="btn-claim-weekly" class="btn-claim" {{ weeklyClaim.available ? '' : 'disabled' }}>
            {{ weeklyClaim.available ? 'Réclamer' : 'Déjà réclamé cette semaine' }}
          </button>
          {% if not weeklyClaim.available and weeklyClaim.nextClaimAt %}
            <div class="weekly-claim-cooldown" data-next-claim="{{ weeklyClaim.nextClaimAt|date('c') }}">
              Prochaine récompense dans <span class="cd-text">…</span>
            </div>
          {% endif %}
          <div id="weekly-claim-toast" class="weekly-claim-toast"></div>
          <div id="weekly-claim-error" class="weekly-claim-error"></div>
        </div>
        <script>
          (function () {
            var btn       = document.getElementById('btn-claim-weekly');
            var toast     = document.getElementById('weekly-claim-toast');
            var errBox    = document.getElementById('weekly-claim-error');
            var cdEl      = document.querySelector('.weekly-claim-cooldown');
            var claimUrl  = {{ path('subscribe_claim_weekly')|json_encode|raw }};

            function fmtDuration(secs) {
              if (secs <= 0) return 'maintenant';
              var d = Math.floor(secs / 86400);
              var h = Math.floor((secs % 86400) / 3600);
              var m = Math.floor((secs % 3600) / 60);
              var s = secs % 60;
              if (d > 0) return d + 'j ' + h + 'h';
              if (h > 0) return h + 'h ' + m + 'min';
              if (m > 0) return m + 'min ' + s + 's';
              return s + 's';
            }

            function startCountdown(iso) {
              if (!cdEl) return;
              var cdText = cdEl.querySelector('.cd-text');
              function tick() {
                var diff = Math.round((new Date(iso) - Date.now()) / 1000);
                if (diff <= 0) {
                  cdEl.textContent = 'Récompenses disponibles ! Rafraîchis la page.';
                  return;
                }
                if (cdText) cdText.textContent = fmtDuration(diff);
                setTimeout(tick, 1000);
              }
              tick();
            }
            if (cdEl) startCountdown(cdEl.dataset.nextClaim);

            if (!btn || btn.disabled) return;
            btn.addEventListener('click', function () {
              btn.disabled = true;
              btn.textContent = 'Réclamation…';
              errBox.classList.remove('visible');
              fetch(claimUrl, { method: 'POST', credentials: 'same-origin' })
                .then(function (r) { return r.json(); })
                .then(function (d) {
                  if (d && d.success) {
                    var parts = [];
                    if (d.money   > 0) parts.push('+' + d.money.toLocaleString('fr-FR') + ' Dollawrs');
                    if (d.premium > 0) parts.push('+' + d.premium.toLocaleString('fr-FR') + ' Crédits MM');
                    toast.textContent = 'Reçu : ' + parts.join(' · ') + ' !';
                    toast.classList.add('visible');
                    btn.textContent = 'Déjà réclamé cette semaine';
                    // Met à jour les compteurs du header s'ils sont présents
                    document.querySelectorAll('[data-money-display]').forEach(function (el) {
                      el.textContent = d.newMoney.toLocaleString('fr-FR');
                    });
                    document.querySelectorAll('[data-premium-display]').forEach(function (el) {
                      el.textContent = d.newPremium.toLocaleString('fr-FR');
                    });
                    return;
                  }
                  errBox.textContent = (d && d.error) ? d.error : 'Erreur lors de la réclamation.';
                  errBox.classList.add('visible');
                  btn.disabled = false;
                  btn.textContent = 'Réclamer';
                })
                .catch(function () {
                  errBox.textContent = 'Erreur réseau.';
                  errBox.classList.add('visible');
                  btn.disabled = false;
                  btn.textContent = 'Réclamer';
                });
            });
          })();
        </script>
      {% endif %}

      {% if not isCancelled %}
      <form id="cancel-form" method="POST" action="{{ path('subscribe_cancel_sub') }}">
        <button type="button" class="btn-cancel-sub" onclick="document.getElementById('cancel-confirm').style.display='block';this.style.display='none'">
          Annuler mon abonnement
        </button>
        <div id="cancel-confirm" style="margin-top:10px;padding:14px;border-radius:8px;border:1px solid rgba(200,80,80,.3);background:rgba(200,80,80,.07);font-size:.84rem">
          Vous conserverez l'accès jusqu'au <strong>{{ activeSub.currentPeriodEnd|date('d/m/Y') }}</strong>, aucun remboursement ne sera effectué.
          <div style="margin-top:10px;display:flex;gap:10px">
            <button type="submit" class="btn-cancel-sub">Confirmer l'annulation</button>
            <button type="button" style="background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:.82rem" onclick="document.getElementById('cancel-confirm').style.display='none';document.querySelector('.btn-cancel-sub').style.display='inline-block'">Annuler</button>
          </div>
        </div>
      </form>

      {# Le changement de plan passe par l'API PayPal "revise" — indisponible pour un abonnement payé en crédits (pas d'ID PayPal). #}
      {# Si l'abonné est annuel, on ne propose que des plans annuels (règle métier : annual → annual seulement) #}
      {% set otherPlans = isCreditsSub ? [] : plans|filter(p =>
        p.id != activeSub.plan.id
        and p.paypalPlanId
        and (not activeSub.plan.isAnnual or p.isAnnual)
      ) %}
      {% if otherPlans|length > 0 %}
        <div class="sub-card" style="margin-top:20px;padding:18px 22px">
          <div class="sub-card-title" style="font-size:.92rem">Changer de plan</div>
          <p style="font-size:.8rem;color:var(--muted);margin-top:0;margin-bottom:14px">
            Le changement prend effet au prochain cycle de facturation ({{ activeSub.currentPeriodEnd|date('d/m/Y') }}).
            Aucune double facturation ni remboursement pour la période déjà payée.
          </p>
          {% if activeSub.plan.isAnnual %}
            <p style="font-size:.78rem;color:var(--premium-platine-color);margin-top:0;margin-bottom:14px;padding:8px 12px;border-radius:6px;background:rgba(99,84,214,.08);border:1px solid rgba(99,84,214,.25)">
              Votre engagement annuel vous donne accès aux autres plans annuels uniquement. Une bascule vers le mensuel n'est pas possible.
            </p>
          {% endif %}
          <div class="plans-grid">
            {% for otherPlan in otherPlans %}
              <div class="plan-card plan-card-tier tier-{{ otherPlan.tier }}">
                <div class="plan-tier-badge">
                  <img src="{{ asset('images/premium_tier_' ~ otherPlan.tier ~ '.png') }}" alt="" style="image-rendering:pixelated">
                  <span class="premium-name tier-{{ otherPlan.tier }}">{{ otherPlan.tier|capitalize }}</span>
                  <span style="margin-left:auto;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:9px;background:rgba(255,255,255,.06);color:var(--muted)">{{ otherPlan.isAnnual ? 'Annuel' : 'Mensuel' }}</span>
                </div>
                <div class="plan-name">{{ otherPlan.name }}</div>
                <div class="plan-price">
                  {{ (otherPlan.priceCents / 100)|number_format(2, ',', ' ') }} €
                  <span>/ {{ otherPlan.isAnnual ? 'an' : 'mois' }}</span>
                </div>
                {{ perks.planPerks(otherPlan) }}
                <button type="button" class="btn-change-plan" data-plan-id="{{ otherPlan.id }}" data-plan-name="{{ otherPlan.name }}">
                  Passer à {{ otherPlan.tier|capitalize }}{{ otherPlan.isAnnual ? ' (annuel)' : '' }}
                </button>
              </div>
            {% endfor %}
          </div>
          <div id="change-plan-error" style="display:none;margin-top:12px;padding:10px 14px;border-radius:7px;background:rgba(200,80,80,.12);border:1px solid rgba(200,80,80,.35);color:#e06060;font-size:.82rem"></div>
        </div>
        <script>
          (function () {
            var errBox    = document.getElementById('change-plan-error');
            var changeUrl = {{ path('subscribe_change_plan')|json_encode|raw }};
            document.querySelectorAll('.btn-change-plan').forEach(function (btn) {
              btn.addEventListener('click', function () {
                if (!confirm('Confirmer le passage à ' + btn.dataset.planName + ' ?')) return;
                btn.disabled = true;
                btn.textContent = 'Redirection vers PayPal…';
                fetch(changeUrl, {
                  method: 'POST',
                  headers: { 'Content-Type': 'application/json' },
                  body: JSON.stringify({ planId: parseInt(btn.dataset.planId, 10) })
                })
                  .then(function (r) { return r.json(); })
                  .then(function (d) {
                    if (d && d.success) {
                      if (d.approvalUrl) {
                        window.location.href = d.approvalUrl;
                      } else {
                        window.location.reload();
                      }
                      return;
                    }
                    errBox.textContent = (d && d.error) ? d.error : 'Erreur lors du changement de plan.';
                    errBox.style.display = 'block';
                    btn.disabled = false;
                    btn.textContent = 'Passer à ' + btn.dataset.planName;
                  })
                  .catch(function () {
                    errBox.textContent = 'Erreur réseau lors du changement de plan.';
                    errBox.style.display = 'block';
                    btn.disabled = false;
                    btn.textContent = 'Passer à ' + btn.dataset.planName;
                  });
              });
            });
          })();
        </script>
      {% endif %}
      {% endif %}

    {% else %}
      <div style="margin-bottom:16px">
        <span class="sub-badge inactive">● Non abonné</span>
      </div>

      {% set readyPlans = plans|filter(p => p.paypalPlanId or p.creditsPrice > 0) %}
      {% if readyPlans|length > 0 %}
        {# Pré-calcule un map tier → priceCents mensuel pour les économies des cartes annuelles #}
        {% set monthlyByTier = {} %}
        {% for p in readyPlans|filter(p => p.billingPeriod == 'monthly') %}
          {% set monthlyByTier = monthlyByTier|merge({(p.tier): p.priceCents}) %}
        {% endfor %}

        <div class="billing-toggle" role="tablist" aria-label="Période de facturation">
          <button type="button" class="bt-option active" data-period="monthly">Mensuel</button>
          <button type="button" class="bt-option" data-period="annual">
            Annuel <span class="bt-savings">−17 %</span>
          </button>
        </div>

        <div class="plans-grid">
          {% for plan in readyPlans %}
            {% set monthlyPrice = monthlyByTier[plan.tier] ?? 0 %}
            {% set annualSavings = plan.billingPeriod == 'annual' and monthlyPrice > 0 ? (monthlyPrice * 12 - plan.priceCents) : 0 %}
            <div class="plan-card plan-card-tier tier-{{ plan.tier }}{{ plan.billingPeriod == 'annual' ? ' hidden' : '' }}"
                 data-billing-period="{{ plan.billingPeriod }}">
              <div class="plan-tier-badge">
                <img src="{{ asset('images/premium_tier_' ~ plan.tier ~ '.png') }}" alt="" style="image-rendering:pixelated">
                <span class="premium-name tier-{{ plan.tier }}">{{ plan.tier|capitalize }}</span>
              </div>
              <div class="plan-name">{{ plan.name }}</div>
              <div class="plan-price">
                {{ (plan.priceCents / 100)|number_format(2, ',', ' ') }} €
                <span>/ {{ plan.billingPeriod == 'annual' ? 'an' : 'mois' }}</span>
              </div>
              {% if annualSavings > 0 %}
                <span class="plan-savings">Économisez {{ (annualSavings / 100)|number_format(2, ',', ' ') }} €</span>
              {% endif %}
              {% if plan.description %}
                <div class="plan-desc">{{ plan.description }}</div>
              {% endif %}
              {{ perks.planPerks(plan) }}
              {% if plan.creditsPrice > 0 %}
                <button type="button" class="btn-buy-credits" data-plan-id="{{ plan.id }}" data-plan-name="{{ plan.name }}"
                        {{ app.user.premiumMoney < plan.creditsPrice ? 'disabled' }}>
                  <img src="{{ asset('images/premium_money.png') }}" alt="" style="width:16px;height:16px;image-rendering:pixelated;vertical-align:middle;margin-right:4px">
                  Payer {{ plan.creditsPrice|number_format(0, ',', ' ') }} Crédits MM
                </button>
                {% if app.user.premiumMoney < plan.creditsPrice %}
                  <div style="font-size:.72rem;color:var(--muted);margin-top:4px">Crédits insuffisants ({{ app.user.premiumMoney|number_format(0, ',', ' ') }} disponibles)</div>
                {% else %}
                  <div style="font-size:.72rem;color:var(--muted);margin-top:4px">Achat unique, sans renouvellement automatique.</div>
                {% endif %}
              {% endif %}
              {% if plan.creditsPrice > 0 and plan.paypalPlanId %}
                <div style="display:flex;align-items:center;gap:10px;margin:12px 0;font-size:.72rem;color:var(--muted)">
                  <div style="flex:1;height:1px;background:var(--border)"></div>
                  ou payer par carte
                  <div style="flex:1;height:1px;background:var(--border)"></div>
                </div>
              {% endif %}
              {% if plan.paypalPlanId %}
                <div class="paypal-button-container" data-plan-id="{{ plan.id }}" data-paypal-plan-id="{{ plan.paypalPlanId }}"></div>
              {% endif %}
            </div>
          {% endfor %}
        </div>
        <div id="sub-error" style="display:none;margin-top:12px;padding:10px 14px;border-radius:7px;background:rgba(200,80,80,.12);border:1px solid rgba(200,80,80,.35);color:#e06060;font-size:.82rem"></div>
        <script src="https://www.paypal.com/sdk/js?client-id={{ paypalClientId|e('html_attr') }}&vault=true&intent=subscription" data-sdk-integration-source="button-factory"></script>
        <script>
          (function () {
            // Toggle Mensuel/Annuel
            document.querySelectorAll('.bt-option').forEach(function (btn) {
              btn.addEventListener('click', function () {
                var period = btn.dataset.period;
                document.querySelectorAll('.bt-option').forEach(function (b) {
                  b.classList.toggle('active', b === btn);
                });
                document.querySelectorAll('.plan-card[data-billing-period]').forEach(function (card) {
                  card.classList.toggle('hidden', card.dataset.billingPeriod !== period);
                });
              });
            });
          })();
          (function () {
            var errBox = document.getElementById('sub-error');
            function showError(msg) { errBox.textContent = msg; errBox.style.display = 'block'; }

            if (typeof paypal === 'undefined') {
              showError('Le SDK PayPal n\'a pas pu être chargé.');
              return;
            }

            var confirmUrl = {{ path('subscribe_confirm')|json_encode|raw }};
            var successUrl = {{ path('subscribe_success')|json_encode|raw }};

            document.querySelectorAll('.paypal-button-container').forEach(function (container) {
              var planId       = parseInt(container.dataset.planId, 10);
              var paypalPlanId = container.dataset.paypalPlanId;

              paypal.Buttons({
                style: { shape: 'rect', color: 'gold', layout: 'vertical', label: 'subscribe' },
                createSubscription: function (data, actions) {
                  return actions.subscription.create({ plan_id: paypalPlanId });
                },
                onApprove: function (data) {
                  return fetch(confirmUrl, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ subscriptionId: data.subscriptionID, planId: planId })
                  })
                    .then(function (r) { return r.json(); })
                    .then(function (d) {
                      if (d && d.success) {
                        window.location.href = d.successUrl || successUrl;
                      } else {
                        showError((d && d.error) ? d.error : 'Erreur lors de la confirmation.');
                      }
                    })
                    .catch(function () { showError('Erreur réseau lors de la confirmation.'); });
                },
                onError: function () { showError('Une erreur est survenue avec PayPal. Réessaie dans un instant.'); }
              }).render(container);
            });
          })();
          (function () {
            var errBox   = document.getElementById('sub-error');
            var buyUrl   = {{ path('subscribe_buy_with_credits')|json_encode|raw }};
            function showError(msg) { errBox.textContent = msg; errBox.style.display = 'block'; }

            document.querySelectorAll('.btn-buy-credits').forEach(function (btn) {
              btn.addEventListener('click', function () {
                if (!confirm('Confirmer l\'achat de ' + btn.dataset.planName + ' avec tes Crédits MasterMoney ?\nAucun renouvellement automatique : l\'abonnement expirera à la fin de la période.')) return;
                btn.disabled = true;
                var originalText = btn.textContent;
                btn.textContent = 'Achat en cours…';
                fetch(buyUrl, {
                  method: 'POST',
                  headers: { 'Content-Type': 'application/json' },
                  body: JSON.stringify({ planId: parseInt(btn.dataset.planId, 10) })
                })
                  .then(function (r) { return r.json(); })
                  .then(function (d) {
                    if (d && d.success) {
                      window.location.reload();
                      return;
                    }
                    showError((d && d.error) ? d.error : 'Erreur lors de l\'achat.');
                    btn.disabled = false;
                    btn.textContent = originalText;
                  })
                  .catch(function () {
                    showError('Erreur réseau lors de l\'achat.');
                    btn.disabled = false;
                    btn.textContent = originalText;
                  });
              });
            });
          })();
        </script>
      {% else %}
        <div style="padding:14px 16px;border-radius:8px;background:rgba(240,136,62,.1);border:1px solid rgba(240,136,62,.3);color:#f0883e;font-size:.86rem">
          Les plans d'abonnement ne sont pas encore configurés. Reviens plus tard !
        </div>
      {% endif %}
    {% endif %}
  </div>

  {% if history|length > 0 %}
  <div class="sub-card">
    <div class="sub-card-title" style="font-size:.88rem">Historique</div>
    <table class="history-table">
      <thead>
        <tr>
          <th>Plan</th>
          <th>Statut</th>
          <th>Début</th>
          <th>Fin de période</th>
        </tr>
      </thead>
      <tbody>
        {% for sub in history %}
        <tr>
          <td>{{ sub.plan.name }}</td>
          <td>
            {% if sub.status == 'active' %}
              <span class="sub-badge active" style="font-size:.72rem;padding:2px 8px">Actif</span>
            {% elseif sub.status == 'cancelled' %}
              <span class="sub-badge warning" style="font-size:.72rem;padding:2px 8px">Annulé</span>
            {% else %}
              <span class="sub-badge inactive" style="font-size:.72rem;padding:2px 8px">{{ sub.status }}</span>
            {% endif %}
          </td>
          <td>{{ sub.startsAt ? sub.startsAt|date('d/m/Y') : '—' }}</td>
          <td>{{ sub.currentPeriodEnd ? sub.currentPeriodEnd|date('d/m/Y') : '—' }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}

</div>
{% endblock %}