{% extends 'base.html.twig' %}

{% block title %}Abonnement - Bubul{% endblock %}

{% block body %}
<div class="max-w-[1300px] mx-auto">

    {# ================================================================
       LAYOUT : sidebar gauche + contenu
       ================================================================ #}
    <div class="flex flex-col lg:flex-row gap-6 lg:gap-10">

    {# ================================================================
       SIDEBAR NAVIGATION
       ================================================================ #}
    {% include '_molecules/settings-nav/settings-nav.html.twig' with { user: user, activePage: 'subscription' } only %}

    {# ================================================================
       CONTENU PRINCIPAL
       ================================================================ #}
    <div class="flex-1 min-w-0">

        {# Titre de page #}
        <div class="">
            {% include '_molecules/page-header/page-header.html.twig' with {
                title: 'Abonnement',
                subtitle: 'Gérez votre plan et votre facturation',
                icon: 'wallet',
                variant: 'default',
                class: 'pt-0'
            } only %}
        </div>

    {# ================================================================
       B2B — accès géré par l'entreprise
       ================================================================ #}
    {% if user.isB2B() %}

        {% set tokenAlloc  = user.userToken ? (user.userToken.monthlyAllocation ?? 0) : 0 %}
        {% set tokenLeft   = tokenBalance.remaining %}
        {% set tokenMax    = tokenBalance.max %}
        {% set tokenPct    = tokenBalance.pct %}

        {# Date de fin : contrat expirant le plus tôt parmi les contrats actifs #}
        {% set contractEnd = null %}
        {% for contract in activeContracts %}
            {% if contractEnd is null or contract.endDate < contractEnd %}
                {% set contractEnd = contract.endDate %}
            {% endif %}
        {% endfor %}

        <div class="bg-white rounded-2xl border border-gray-100 shadow-sm px-6 lg:px-8">

        {# Section 1 — Plan actuel #}
        <div class="py-8 space-y-3">
            <div class="relative overflow-hidden rounded-2xl text-white"
                 style="{{ plan_gradients['system-b2b'] }}">
                {% include '_atoms/dot-texture/dot-texture.html.twig' only %}

                <div class="relative px-8 py-7 flex flex-col gap-5">
                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                        <div>
                            <p class="text-white/50 text-xs font-semibold uppercase tracking-[0.18em] mb-2">Plan actuel</p>
                            <h3 class="text-4xl sm:text-6xl font-bold font-[Poppins] leading-none">Entreprise</h3>
                            <p class="text-white/60 text-base font-medium mt-3 tracking-wide">{{ user.company.name }}</p>
                        </div>
                        {% if contractEnd %}
                            <div class="sm:text-right flex-shrink-0">
                                <p class="text-xs text-white/50 uppercase tracking-[0.18em] font-semibold mb-2">Fin du contrat</p>
                                <p class="text-4xl font-bold font-[Poppins] text-white leading-none">{{ contractEnd|date('d/m/Y') }}</p>
                            </div>
                        {% endif %}
                    </div>
                    <p class="text-white/60 text-sm">
                        Votre accès est géré par Bubul. Contactez <a href="mailto:contact@bubul.app" class="underline hover:opacity-80">contact@bubul.app</a> pour toute demande.
                    </p>
                </div>
            </div>

            {# Bandeau abonnement personnel en transition #}
            {% if subscription and subscription.plan and not subscription.plan.isFree() %}

                {% if subscription.isPaused() %}
                    {% include '_molecules/inline-alert/inline-alert.html.twig' with {
                        variant: 'primary',
                        message: 'Votre abonnement <strong>' ~ subscription.plan.name ~ '</strong> est en pause pendant votre appartenance à ' ~ user.company.name ~ '. Il reprendra automatiquement si vous quittez l\'entreprise.'
                    } only %}

                {% elseif subscription.status == 'canceled' and subscription.effectivePeriodEnd and subscription.effectivePeriodEnd > date() %}
                    {% include '_molecules/inline-alert/inline-alert.html.twig' with {
                        variant: 'warning',
                        message: 'Votre abonnement <strong>' ~ subscription.plan.name ~ '</strong> reste actif jusqu\'au <strong>' ~ subscription.effectivePeriodEnd|date('d/m/Y') ~ '</strong>. Vous bénéficiez de tous vos avantages jusqu\'à cette date, en plus des tokens de votre entreprise.'
                    } only %}

                {% endif %}
            {% endif %}
        </div>

        <hr class="border-gray-100">

        {# Section 2 — Tokens #}
        <div class="py-8">
            {% include '_molecules/token-widget/token-widget.html.twig' with {
                description: 'Les tokens alimentent toutes les fonctionnalités IA de Bubul. Votre entreprise vous alloue <strong class="text-gray-700">' ~ tokenAlloc|number_format(0, ',', ' ') ~ '</strong> tokens par mois.',
                balance: tokenLeft,
                max: tokenMax,
                pct: tokenPct
            } only %}
        </div>

        </div>

    {% else %}

        {% set tokenUsable = user.userToken ? user.userToken.tokenUsable : 0 %}

        {% set isActiveStripe      = subscription and subscription.isActive() and subscription.stripeSubscriptionId %}
        {% set isCanceledButActive = subscription and subscription.status == 'canceled' and subscription.plan and not subscription.plan.isFree() and (not subscription.accessUntil or subscription.accessUntil > date()) %}
        {% set isPastDue           = subscription and subscription.status == 'past_due' %}
        {% set hasStripe           = isActiveStripe or isCanceledButActive or isPastDue %}
        {% set canChangePlan       = (isActiveStripe or isCanceledButActive) and not subscription.isInAnnualCommitment() %}
        {% set canSubscribe        = not isActiveStripe and not isCanceledButActive and not isPastDue %}

        <div class="bg-white rounded-2xl border border-gray-100 shadow-sm px-6 lg:px-8">

        {# ================================================================
           SECTION 1 — PLAN ACTUEL
           ================================================================ #}
        <div class="py-8 space-y-3">

                {% if isActiveStripe %}

                    <div class="relative overflow-hidden rounded-2xl text-white"
                         style="{{ subscription.plan.gradientStyle }}">
                        {% include '_atoms/dot-texture/dot-texture.html.twig' only %}

                        <div class="relative px-8 py-7 flex flex-col gap-5">
                            {# Ligne 1 : nom du plan + billing #}
                            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                                <div>
                                    <p class="text-white/50 text-xs font-semibold uppercase tracking-[0.18em] mb-2">Plan actuel</p>
                                    <h3 class="text-4xl sm:text-6xl font-bold font-[Poppins] leading-none">{{ subscription.plan.name }}</h3>
                                    <p class="text-white/60 text-base font-medium mt-3 tracking-wide">
                                        {{ subscription.isAnnual() ? 'Annuel' : 'Mensuel' }}
                                        · {{ subscription.isAnnual() ? subscription.plan.priceAnnual|number_format(2, '.', '') : subscription.plan.priceMonthly|number_format(2, '.', '') }}€/mois
                                    </p>
                                </div>
                                {% if subscription.effectivePeriodEnd %}
                                    <div class="sm:text-right flex-shrink-0">
                                        <p class="text-xs text-white/50 uppercase tracking-[0.18em] font-semibold mb-2">Expire le</p>
                                        <p class="text-4xl font-bold font-[Poppins] text-white leading-none">{{ subscription.effectivePeriodEnd|date('d/m/Y') }}</p>
                                    </div>
                                {% endif %}
                            </div>

                            {# Pending plan change #}
                            {% if subscription.pendingPlan %}
                                <div class="border-t border-white/10 pt-4 mt-1 flex items-center justify-between gap-4">
                                    <span class="text-xs text-white/50 tracking-wide">Changement planifié au prochain renouvellement</span>
                                    <span class="text-base font-bold text-white flex-shrink-0">{{ subscription.pendingPlan.name }}</span>
                                </div>
                            {% endif %}
                        </div>
                    </div>

                    {% if subscription.isNearCommitmentEnd() %}
                        {% include '_molecules/inline-alert/inline-alert.html.twig' with {
                            variant: 'warning',
                            message: 'Votre engagement annuel se termine bientôt. Vous pouvez désormais annuler le renouvellement automatique.'
                        } only %}
                    {% endif %}

                    {# Bouton annuler :
                       - Mensuel  : toujours visible
                       - Annuel   : uniquement dans les 30 derniers jours de l'engagement #}
                    {% if isActiveStripe and (not subscription.isAnnual() or subscription.isNearCommitmentEnd()) %}
                        <div class="flex justify-end">
                            <button type="button" onclick="openModal('modal-cancel')"
                                    class="text-xs text-gray-400 hover:text-error transition-colors cursor-pointer">
                                {{ subscription.isAnnual() ? 'Annuler le renouvellement' : 'Annuler l\'abonnement' }}
                            </button>
                        </div>
                    {% endif %}

                {% elseif isCanceledButActive %}

                    <div class="relative overflow-hidden rounded-2xl text-white"
                         style="{{ plan_gradients['system-canceled'] }}">
                        {% include '_atoms/dot-texture/dot-texture.html.twig' only %}

                        <div class="relative px-8 py-9 flex flex-col gap-6">
                            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                                <div>
                                    <p class="text-white/50 text-xs font-semibold uppercase tracking-[0.18em] mb-3">Plan actuel</p>
                                    <h3 class="text-5xl sm:text-7xl font-bold font-[Poppins] leading-none">{{ subscription.plan.name }}</h3>
                                    <p class="text-amber-200/70 text-base font-medium mt-4 tracking-wide">
                                        {{ subscription.isAnnual() ? 'Annuel' : 'Mensuel' }}
                                        · {{ subscription.isAnnual() ? subscription.plan.priceAnnual|number_format(2, '.', '') : subscription.plan.priceMonthly|number_format(2, '.', '') }}€/mois
                                    </p>
                                </div>
                                {% if subscription.effectivePeriodEnd %}
                                    <div class="sm:text-right flex-shrink-0">
                                        <p class="text-xs text-white/50 uppercase tracking-[0.18em] font-semibold mb-2">Accès jusqu'au</p>
                                        <p class="text-4xl sm:text-5xl font-bold font-[Poppins] text-white leading-none">{{ subscription.effectivePeriodEnd|date('d/m/Y') }}</p>
                                    </div>
                                {% endif %}
                            </div>

                            <div class="border-t border-white/10 pt-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                                <span class="text-xs font-semibold text-amber-200 bg-amber-500/20 px-2.5 py-1 rounded-full self-start">
                                    Renouvellement annulé
                                </span>
                                <form id="form-reactivate" method="post" action="{{ path('app_subscription_reactivate') }}" data-turbo="false">
                                    <input type="hidden" name="_token" value="{{ csrf_token('subscription-reactivate') }}">
                                    <button type="button"
                                            id="btn-reactivate"
                                            onclick="submitReactivateForm()"
                                            class="flex items-center justify-center gap-2 bg-white/90 hover:bg-white text-gray-900 text-sm font-semibold px-5 py-3 rounded-xl transition-all cursor-pointer whitespace-nowrap">
                                        {% include '_atoms/icon/icon.html.twig' with { name: 'refresh', size: 'sm', color: 'primary' } only %}
                                        Réactiver mon abonnement
                                    </button>
                                </form>
                                <script>
                                function submitReactivateForm() {
                                    const btn = document.getElementById('btn-reactivate');
                                    btn.disabled = true;
                                    btn.classList.remove('hover:bg-white', 'cursor-pointer');
                                    btn.classList.add('opacity-70', 'cursor-not-allowed');
                                    btn.innerHTML = '<svg class="animate-spin w-4 h-4 flex-shrink-0" viewBox="0 0 24 24" fill="none"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg><span>Réactivation en cours…</span>';
                                    document.getElementById('form-reactivate').submit();
                                }
                                </script>
                            </div>
                        </div>
                    </div>

                {% elseif isPastDue %}

                    <div class="relative overflow-hidden rounded-2xl p-6 text-white"
                         style="{{ plan_gradients['system-admin'] }}">
                        {% include '_atoms/dot-texture/dot-texture.html.twig' with { opacity: 0.12 } only %}
                        <div class="relative text-center">
                            <h3 class="text-3xl sm:text-4xl font-bold font-[Poppins] mb-1">{{ subscription.plan ? subscription.plan.name : 'Abonnement' }}</h3>
                            <p class="text-red-200 text-sm font-medium">Paiement en échec</p>
                        </div>
                    </div>

                {% else %}

                    <div class="relative overflow-hidden rounded-2xl px-10 py-9 text-white"
                         style="{{ plan_gradients['freemium'] }}">
                        {% include '_atoms/dot-texture/dot-texture.html.twig' with { opacity: 0.12 } only %}
                        <div class="relative flex items-center justify-between gap-6">
                            <div>
                                <h3 class="text-3xl sm:text-4xl font-bold font-[Poppins] mb-1">Freemium</h3>
                                <p class="text-gray-300 text-sm font-medium">Plan gratuit · {{ freemiumPlan ? freemiumPlan.monthlyTokens|number_format(0, ',', ' ') : '0' }} tokens/mois</p>
                            </div>
                            <a href="{{ path('app_upgrade') }}"
                               style="background: linear-gradient(135deg, #0d1b3e 0%, #0C81E4 100%);"
                               class="inline-flex items-center justify-center gap-2 px-8 py-3.5 rounded-xl text-sm font-bold text-white hover:brightness-110 transition-all whitespace-nowrap flex-shrink-0 shadow-sm">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'crown', size: 'sm', color: 'white' } only %}
                                Passer en Pro
                            </a>
                        </div>
                    </div>

                {% endif %}

        </div>

        <hr class="border-gray-100">

        {# ================================================================
           SECTION 2 — TOKENS
           ================================================================ #}
        {% set activePlan    = (hasStripe and subscription.plan) ? subscription.plan : freemiumPlan %}
        {% set monthlyTokens = activePlan ? activePlan.monthlyTokens : 0 %}
        {% set storageMonths = (activePlan and activePlan.tokenStorageMonths > 0) ? activePlan.tokenStorageMonths : 1 %}
        {% set maxStorable   = tokenMaxStorage %}
        {% set storePct      = tokenBalance.pct %}

        {% set tokenDesc %}Les tokens alimentent toutes les fonctionnalités IA de Bubul. Votre abonnement <strong class="text-gray-700">{{ (subscription and subscription.plan) ? subscription.plan.name : 'Freemium' }}</strong> inclut {{ monthlyTokens|number_format(0, ',', ' ') }} tokens par mois.{% if storageMonths > 1 %} Les tokens non utilisés sont reportés au mois suivant, jusqu'à un maximum de {{ maxStorable|number_format(0, ',', ' ') }} tokens.{% endif %}{% endset %}

        <div class="py-8 space-y-5">
            {% include '_molecules/token-widget/token-widget.html.twig' with {
                description: tokenDesc,
                balance: user.userToken ? user.userToken.tokensRemaining : 0,
                max: maxStorable,
                pct: storePct,
                barVariant: isCanceledButActive ? 'warning' : 'primary'
            } only %}

            {# CTA gestion abonnement — vers la liste de tous les plans #}
            {% if not user.isB2B %}
                <div class="pt-1">
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Modifier mon abonnement',
                        variant: 'primary',
                        size: 'md',
                        href: path('app_upgrade')
                    } only %}
                </div>
            {% endif %}

            {# Alerte expiration tokens #}
            {% if isCanceledButActive %}
                {% include '_molecules/inline-alert/inline-alert.html.twig' with {
                    variant: 'warning',
                    icon: 'warning',
                    message: 'Ces tokens expireront le <strong>' ~ (subscription.effectivePeriodEnd ? subscription.effectivePeriodEnd|date('d/m/Y') : '—') ~ '</strong>, sauf en cas de réactivation.'
                } only %}
            {% endif %}
        </div>



        {# ================================================================
           SECTION 4 — GÉRER L'ABONNEMENT
           ================================================================ #}
        <hr class="border-gray-100">

            <div class="grid grid-cols-1 lg:grid-cols-5 gap-8 py-8">

                {# LEFT: description #}
                <div class="lg:col-span-2 flex flex-col justify-center">
                    <h2 class="text-xl font-bold text-gray-900 mb-2">Factures & paiement</h2>
                    <p class="text-sm text-gray-400 leading-relaxed mb-4">
                        Consultez vos factures, mettez à jour votre moyen de paiement et annulez votre abonnement depuis le portail dédié.
                    </p>
                    <ul class="space-y-2">
                        <li class="flex items-center gap-2 text-xs text-gray-500">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'check', size: 'xs', color: 'success' } only %}
                            Télécharger vos factures
                        </li>
                        <li class="flex items-center gap-2 text-xs text-gray-500">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'check', size: 'xs', color: 'success' } only %}
                            Mettre à jour votre carte bancaire
                        </li>
                    </ul>
                </div>

                {# RIGHT: Stripe card + actions #}
                <div class="lg:col-span-3 flex flex-col justify-center gap-3">

                    {# Stripe portal #}
                    {% if subscription and subscription.stripeCustomerId %}
                        <form method="post" action="{{ path('app_subscription_portal') }}" data-turbo="false" target="_blank">
                            <input type="hidden" name="_token" value="{{ csrf_token('subscription-portal') }}">
                            <button type="submit"
                                    class="w-full group flex flex-col items-center gap-4 border border-[#635BFF]/20 rounded-2xl px-6 py-6 bg-[#635BFF]/5
                                           hover:bg-[#635BFF]/10 hover:border-[#635BFF]/40 hover:shadow-sm transition-all duration-200 text-center cursor-pointer">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="36" aria-label="Stripe" class="shrink-0" role="img">
                                    <path fill="#635BFF" d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z"/>
                                </svg>
                                <div>
                                    <p class="text-sm font-semibold text-gray-800">Stripe gère votre facturation</p>
                                    <p class="text-xs text-[#635BFF] mt-1 font-medium">Accéder au portail →</p>
                                </div>
                            </button>
                        </form>
                    {% else %}
                        <div class="w-full flex flex-col items-center gap-3 border border-gray-100 rounded-2xl px-6 py-6 bg-gray-50 text-center">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="36" aria-label="Stripe" class="shrink-0 opacity-20" role="img">
                                <path fill="#635BFF" d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z"/>
                            </svg>
                            <p class="text-sm text-gray-400">Aucune facture pour le moment</p>
                        </div>
                    {% endif %}

{# Mettre à jour le paiement (past_due) #}
                {% if isPastDue and subscription.stripeCustomerId %}
                    <div class="flex items-center gap-3 px-4 py-3 bg-warning/5 border border-warning/20 rounded-xl">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'info', size: 'xs', color: 'warning' } only %}
                        <p class="text-xs text-warning-dark">Utilisez le portail Stripe ci-dessus pour mettre à jour votre moyen de paiement.</p>
                    </div>
                {% endif %}

                </div>{# /col-span-3 #}
            </div>{# /grid #}

        </div>{# /white card #}

    {% endif %}

    </div>{# /flex-1 contenu principal #}
    </div>{# /flex layout #}
</div>

<script>
if (typeof window.openModal === 'undefined') {
    window.openModal = function(id) {
        const modal = document.getElementById(id);
        if (modal) {
            modal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
            setTimeout(() => {
                const input = modal.querySelector('input:not([type="hidden"]), textarea, select');
                if (input) input.focus();
            }, 100);
        }
    };
    window.closeModal = function(id) {
        const modal = document.getElementById(id);
        if (modal) {
            modal.classList.add('hidden');
            document.body.style.overflow = '';
        }
    };
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            document.querySelectorAll('[role="dialog"]:not(.hidden)').forEach(function(m) { closeModal(m.id); });
        }
    });
}

function setButtonLoading(btn, text) {
    if (!btn) return;
    btn.disabled = true;
    btn.classList.add('opacity-70', 'cursor-not-allowed', 'flex', 'items-center', 'justify-center', 'gap-2');
    btn.classList.remove('cursor-pointer');
    btn.innerHTML = '<svg class="animate-spin w-4 h-4 flex-shrink-0" viewBox="0 0 24 24" fill="none"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg><span>' + (text || 'Chargement…') + '</span>';
}

let pendingCheckoutForm = null;

function openAnnualCommitmentModal(form) {
    pendingCheckoutForm = form;
    document.getElementById('mac-plan-name').textContent  = form.dataset.planName;
    document.getElementById('mac-plan-price').textContent = form.dataset.planPrice + '€/mois';
    openModal('modal-annual-commitment');
}

function confirmAnnualCheckout(btn) {
    if (btn) setButtonLoading(btn, 'Redirection vers Stripe…');
    if (pendingCheckoutForm) {
        pendingCheckoutForm.onsubmit = null;
        pendingCheckoutForm.submit();
    }
}
</script>

{# ================================================================
   MODAL : ANNULATION
   ================================================================ #}
{% if subscription and subscription.stripeSubscriptionId and subscription.isActive() %}
    {% embed '_molecules/modal/modal.html.twig' with {
        id: 'modal-cancel',
        title: subscription.isAnnual() ? 'Annuler le renouvellement' : 'Annuler l\'abonnement',
        subtitle: 'Cette action mettra fin à votre abonnement ' ~ subscription.plan.name ~ '.',
        icon: 'trash',
        iconColor: 'error',
        size: '2xl'
    } %}
        {% block body %}
            {# Avant / Après — même design que les cartes plan #}
            <div class="flex gap-3 mb-4">

                {# Maintenant — gradient du plan actuel #}
                <div class="relative flex-1 overflow-hidden rounded-2xl text-white" style="{{ subscription.plan.gradientStyle }}">
                    {% include '_atoms/dot-texture/dot-texture.html.twig' with { size: 20 } only %}
                    <div class="relative px-5 py-5 flex flex-col gap-3">
                        <p class="text-[10px] text-white/50 uppercase tracking-widest font-semibold">Maintenant</p>
                        <div>
                            <p class="text-2xl font-bold text-white font-[Poppins] leading-none">{{ subscription.plan.name }}</p>
                            <p class="text-sm text-white/60 mt-1.5">{{ (subscription.isAnnual() ? subscription.plan.priceAnnual : subscription.plan.priceMonthly)|number_format(0) }}€ / mois</p>
                        </div>
                        <div class="flex items-center gap-1.5">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'zap', size: 'xs', color: 'white' } only %}
                            <p class="text-xs text-white/70 font-semibold">{{ subscription.plan.monthlyTokens|number_format(0, ',', ' ') }} tokens / mois</p>
                        </div>
                        <p class="text-xs text-white/50 leading-relaxed">
                            Accès jusqu'au<br>
                            <strong class="text-white/80 font-semibold">{{ subscription.effectivePeriodEnd ? subscription.effectivePeriodEnd|date('d/m/Y') : '—' }}</strong>
                        </p>
                    </div>
                </div>

                {# Flèche #}
                <div class="flex items-center flex-shrink-0 text-gray-300">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'chevron-right', size: 'sm', color: 'gray' } only %}
                </div>

                {# Ensuite — gradient freemium (gris) #}
                <div class="relative flex-1 overflow-hidden rounded-2xl text-white"
                     style="{{ plan_gradients['freemium'] }}">
                    {% include '_atoms/dot-texture/dot-texture.html.twig' with { size: 20 } only %}
                    <div class="relative px-5 py-5 flex flex-col gap-3">
                        <p class="text-[10px] text-white/50 uppercase tracking-widest font-semibold">Ensuite</p>
                        <div>
                            <p class="text-2xl font-bold text-white font-[Poppins] leading-none">Freemium</p>
                            <p class="text-sm text-white/60 mt-1.5">Gratuit</p>
                        </div>
                        <div class="flex items-center gap-1.5">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'zap', size: 'xs', color: 'white' } only %}
                            <p class="text-xs text-white/70 font-semibold">{{ freemiumPlan ? freemiumPlan.monthlyTokens|number_format(0, ',', ' ') : '0' }} tokens / mois</p>
                        </div>
                        <p class="text-xs text-white/50 leading-relaxed">
                            À partir du {{ subscription.effectivePeriodEnd ? subscription.effectivePeriodEnd|date('d/m/Y') : '—' }}
                        </p>
                    </div>
                </div>

            </div>

            {# Notice annuel si applicable #}
            {% if subscription.isAnnual() %}
                {% include '_molecules/inline-alert/inline-alert.html.twig' with {
                    variant: 'warning',
                    message: 'Seul le <strong>renouvellement automatique</strong> est annulé. Votre accès reste actif jusqu\'à la date ci-dessus.'
                } only %}
            {% endif %}
        {% endblock %}
        {% block footer %}
            {% include '_atoms/button/button.html.twig' with {
                label: 'Garder mon abonnement',
                variant: 'ghost',
                size: 'lg',
                attr: { type: 'button', onclick: "closeModal('modal-cancel')" }
            } only %}
            {% include '_atoms/button/button.html.twig' with {
                label: 'Continuer',
                variant: 'error',
                size: 'lg',
                attr: { type: 'button', onclick: "closeModal('modal-cancel'); openModal('modal-cancel-step2')" }
            } only %}
        {% endblock %}
    {% endembed %}
{% endif %}

{# ================================================================
   MODAL : ANNULATION — ÉTAPE 2 (confirmation par frappe)
   ================================================================ #}
{% if subscription and subscription.stripeSubscriptionId and subscription.isActive() %}
    {% embed '_molecules/modal/modal.html.twig' with {
        id: 'modal-cancel-step2',
        title: 'Confirmer l\'annulation',
        subtitle: 'Vous pourrez réactiver votre abonnement tant que la période payée n\'est pas terminée.',
        icon: 'trash',
        iconColor: 'error',
        size: 'md'
    } %}
        {% block body %}
            <form id="modal-cancel-form" method="post" action="{{ path('app_subscription_cancel') }}" data-turbo="false">
                <input type="hidden" name="_token" value="{{ csrf_token('subscription-cancel') }}">
            </form>

            {# Aucun encart sur le sort des tokens : l'étape 1 montre déjà le plan
               actuel, la date de fin d'accès et l'offre Freemium qui prend le relais.
               Le solde, lui, n'est pas affecté par l'annulation — il n'y a donc rien
               à annoncer ici. #}

            {# Input de confirmation #}
            <div class="space-y-2 mt-1">
                <label for="cancel-confirm-input" class="text-sm font-medium text-gray-700">
                    Tapez <span class="font-mono font-bold tracking-widest text-gray-900 bg-gray-100 px-1.5 py-0.5 rounded">ANNULER</span> pour confirmer
                </label>
                <input type="text"
                       id="cancel-confirm-input"
                       autocomplete="off"
                       placeholder="ANNULER"
                       oninput="checkCancelWord(this)"
                       class="w-full h-10 px-3 rounded-xl border border-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-error/30 focus:border-error/50 transition-all font-mono tracking-widest">
            </div>

            <script>
            function checkCancelWord(input) {
                const btn = document.getElementById('btn-cancel-final');
                const match = input.value === 'ANNULER';
                btn.disabled = !match;
                btn.classList.toggle('opacity-40', !match);
                btn.classList.toggle('cursor-not-allowed', !match);
                btn.classList.toggle('cursor-pointer', match);
            }
            </script>
        {% endblock %}
        {% block footer %}
            {% include '_atoms/button/button.html.twig' with {
                label: 'Retour',
                variant: 'ghost',
                size: 'lg',
                attr: { type: 'button', onclick: "closeModal('modal-cancel-step2'); openModal('modal-cancel')" }
            } only %}
            <button id="btn-cancel-final"
                    type="button"
                    disabled
                    onclick="submitCancelForm()"
                    class="opacity-40 cursor-not-allowed inline-flex items-center justify-center gap-2 px-5 h-11 rounded-xl text-sm font-semibold bg-error text-white transition-all">
                <span id="btn-cancel-spinner" class="hidden items-center">
                    <svg class="animate-spin h-4 w-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                </span>
                Annuler l'abonnement
            </button>
            <script>
            function submitCancelForm() {
                const btn = document.getElementById('btn-cancel-final');
                btn.disabled = true;
                btn.classList.remove('opacity-40');
                btn.classList.add('opacity-60', 'pointer-events-none');
                document.getElementById('btn-cancel-spinner').classList.remove('hidden');
                document.getElementById('btn-cancel-spinner').classList.add('inline-flex');
                requestAnimationFrame(() => requestAnimationFrame(() => document.getElementById('modal-cancel-form').submit()));
            }
            </script>
        {% endblock %}
    {% endembed %}
{% endif %}

{# ================================================================
   MODAL : CHANGEMENT DE PLAN (contenu peuplé par JS)
   ================================================================ #}
{% if not user.isB2B() %}
<div id="modal-plan-change" class="fixed inset-0 z-50 hidden" role="dialog" aria-modal="true" aria-labelledby="mpc-title">
    <div class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity" onclick="closeModal('modal-plan-change')"></div>
    <div class="fixed inset-0 overflow-y-auto">
        <div class="flex min-h-full items-center justify-center p-4">
            <div class="w-full max-w-2xl bg-white rounded-2xl shadow-xl overflow-hidden" onclick="event.stopPropagation()">

                {# Header #}
                <div class="px-6 py-4 border-b border-gray-100 flex items-start justify-between gap-4">
                    <div class="flex items-start gap-3">
                        <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'refresh', size: 'md', color: 'primary' } only %}
                        </div>
                        <div>
                            <h2 id="mpc-title" class="text-lg font-semibold text-gray-900">Changement de plan</h2>
                            <p class="text-sm text-gray-500 mt-0.5" id="mpc-billing-label"></p>
                        </div>
                    </div>
                    {% include '_atoms/close-button/close-button.html.twig' with {
                        attr: { onclick: "closeModal('modal-plan-change')" }
                    } only %}
                </div>

                <div class="px-6 py-5 space-y-4">

                    {# ── ACTUEL → NOUVEAU ── #}
                    <div class="flex items-center gap-3">

                        {# Card ACTUEL (opacité réduite — plan passé) #}
                        <div id="mpc-current-card" class="relative flex-1 overflow-hidden rounded-2xl text-white opacity-60"
                             style="{{ plan_gradients['freemium'] }}">
                            {% include '_atoms/dot-texture/dot-texture.html.twig' with { size: 20 } only %}
                            <div class="relative px-5 py-5 flex flex-col gap-2.5">
                                <span class="self-start text-[9px] text-white/60 uppercase tracking-[0.16em] font-bold bg-white/10 rounded-full px-2.5 py-0.5">Plan actuel</span>
                                <div>
                                    <p class="text-2xl font-bold text-white font-[Poppins] leading-none" id="mpc-current-plan-name">—</p>
                                    <p class="text-sm text-white/60 mt-1" id="mpc-current-price">—</p>
                                </div>
                                <p class="text-xs text-white/60 font-semibold" id="mpc-current-tokens-display">—</p>
                            </div>
                        </div>

                        {# Flèche centrale #}
                        <div class="shrink-0 flex flex-col items-center gap-1.5">
                            <div class="w-11 h-11 rounded-full bg-white shadow-md border border-gray-100 flex items-center justify-center">
                                <svg class="w-5 h-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M5 12h14M13 6l6 6-6 6"/>
                                </svg>
                            </div>
                        </div>

                        {# Card NOUVEAU (mise en avant — ring + shadow) #}
                        <div id="mpc-new-card" class="relative flex-1 overflow-hidden rounded-2xl text-white shadow-xl ring-2 ring-primary/30 ring-offset-2"
                             style="{{ plan_gradients['freemium'] }}">
                            {% include '_atoms/dot-texture/dot-texture.html.twig' with { size: 20 } only %}
                            <div class="relative px-5 py-5 flex flex-col gap-2.5">
                                <span class="self-start text-[9px] text-white uppercase tracking-[0.16em] font-bold bg-white/25 rounded-full px-2.5 py-0.5">✦ Nouveau plan</span>
                                <div>
                                    <p class="text-2xl font-bold text-white font-[Poppins] leading-none" id="mpc-plan-name-summary">—</p>
                                    <p class="text-sm text-white/70 mt-1" id="mpc-new-price">—</p>
                                </div>
                                <p class="text-xs text-white/80 font-semibold" id="mpc-new-tokens-display">—</p>
                            </div>
                        </div>

                    </div>

                    {# ── Avertissement engagement annuel ── #}
                    <div id="mpc-annual-warning" class="hidden flex items-start gap-1.5">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'lock', size: 'xs', color: 'gray' } only %}
                        <p class="text-xs text-gray-400"><strong class="text-gray-500">Engagement 12 mois</strong> — <strong class="text-gray-500" id="mpc-annual-price"></strong>/mois · <strong class="text-gray-500" id="mpc-annual-total"></strong> au total. Aucune annulation avant la fin de la période.</p>
                    </div>

                    {# ── Infos upgrade / downgrade ── #}
                    <div id="mpc-upgrade-content" class="hidden flex items-center gap-1.5">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'check', size: 'xs', color: 'success' } only %}
                        <p class="text-xs text-gray-400">Nouveau plan <strong class="text-gray-600">actif immédiatement</strong>. Un nouveau cycle de facturation démarre aujourd'hui.</p>
                    </div>
                    <div id="mpc-downgrade-content" class="hidden flex items-center gap-1.5">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'info', size: 'xs', color: 'warning' } only %}
                        <p class="text-xs text-gray-400">Changement effectif le <strong class="text-gray-600" id="mpc-period-end"></strong>. Votre plan actuel reste actif jusqu'à cette date.</p>
                    </div>

                </div>

                <div class="px-6 py-4 border-t border-gray-100 bg-gray-50 flex items-center justify-between gap-3">
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Annuler',
                        variant: 'ghost',
                        size: 'lg',
                        attr: { type: 'button', onclick: "closeModal('modal-plan-change')" }
                    } only %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Confirmer le changement',
                        variant: 'primary',
                        size: 'lg',
                        attr: { type: 'button', onclick: 'confirmPlanChange(this)' }
                    } only %}
                </div>

            </div>
        </div>
    </div>
</div>

<script>
    let pendingPlanChangeForm = null;
    function openPlanChangeModal(form) {
        const planName        = form.dataset.planName;
        const planTokens      = parseInt(form.dataset.planTokens);
        const planPrice       = parseFloat(form.dataset.planPrice || 0);
        const planPriceTotal  = form.dataset.planPriceTotal || null;
        const curPlanName     = form.dataset.currentPlanName;
        const curTokens       = parseInt(form.dataset.currentTokens);
        const curPrice        = parseFloat(form.dataset.currentPrice || 0);
        const cycle           = form.dataset.billingCycle;
        const periodEnd       = form.dataset.periodEnd;
        const currentGradient = form.dataset.currentGradient || null;
        const planGradient    = form.dataset.planGradient || null;
        const isUpgrade       = planTokens >= curTokens;
        const fmtPrice        = v => new Intl.NumberFormat('fr-FR', { minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(v) + '€ / mois';
        const fmtTokens       = v => new Intl.NumberFormat('fr-FR').format(v) + ' tokens / mois';
        const cycleLabel      = cycle === 'annual' ? 'Engagement annuel · facturé mensuellement' : 'Facturation mensuelle · sans engagement';

        pendingPlanChangeForm = form;

        document.getElementById('mpc-billing-label').textContent          = cycleLabel;
        document.getElementById('mpc-current-plan-name').textContent      = curPlanName || '—';
        document.getElementById('mpc-current-price').textContent          = fmtPrice(curPrice);
        document.getElementById('mpc-current-tokens-display').textContent = fmtTokens(curTokens);
        document.getElementById('mpc-plan-name-summary').textContent      = planName || '—';
        document.getElementById('mpc-new-price').textContent              = fmtPrice(planPrice);
        document.getElementById('mpc-new-tokens-display').textContent     = fmtTokens(planTokens);
        document.getElementById('mpc-period-end').textContent             = periodEnd || 'la fin de votre période en cours';
        document.getElementById('mpc-upgrade-content').classList.toggle('hidden', !isUpgrade);
        document.getElementById('mpc-downgrade-content').classList.toggle('hidden', isUpgrade);
        document.getElementById('mpc-annual-warning').classList.toggle('hidden', cycle !== 'annual');
        if (planPriceTotal) document.getElementById('mpc-annual-total').textContent = planPriceTotal + '€';
        document.getElementById('mpc-annual-price').textContent = new Intl.NumberFormat('fr-FR').format(planPrice) + '€';

        // Applique le gradient du plan sur chaque carte
        const applyGradient = (id, gradient) => {
            const card = document.getElementById(id);
            if (!card || !gradient) return;
            card.style.background = gradient.replace(/^background:\s*/, '');
        };
        applyGradient('mpc-current-card', currentGradient);
        applyGradient('mpc-new-card', planGradient);

        if (typeof openModal === 'function') openModal('modal-plan-change');
    }

    function confirmPlanChange(btn) {
        const form = pendingPlanChangeForm;
        const isCheckout = form && form.action && form.action.includes('checkout');
        if (btn) setButtonLoading(btn, isCheckout ? 'Redirection vers Stripe…' : 'Changement en cours…');
        if (form) {
            form.onsubmit = null;
            form.submit();
        }
    }
</script>
{% endif %}

{# ================================================================
   MODAL : ENGAGEMENT ANNUEL (freemium → checkout annuel)
   ================================================================ #}
<div id="modal-annual-commitment" class="fixed inset-0 z-50 hidden" role="dialog" aria-modal="true" aria-labelledby="mac-title">
    <div class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity" onclick="closeModal('modal-annual-commitment')"></div>
    <div class="fixed inset-0 overflow-y-auto">
        <div class="flex min-h-full items-center justify-center p-4">
            <div class="w-full max-w-lg bg-white rounded-2xl shadow-xl overflow-hidden" onclick="event.stopPropagation()">

                <div class="px-6 py-4 border-b border-gray-100 flex items-start justify-between gap-4">
                    <div class="flex items-start gap-3">
                        <div class="w-10 h-10 rounded-xl bg-orange-50 flex items-center justify-center flex-shrink-0">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'lock', size: 'md', color: 'default' } only %}
                        </div>
                        <div>
                            <h2 id="mac-title" class="text-lg font-semibold text-gray-900">Engagement annuel</h2>
                            <p class="text-sm text-gray-500 mt-0.5">Veuillez lire avant de confirmer</p>
                        </div>
                    </div>
                    {% include '_atoms/close-button/close-button.html.twig' with {
                        attr: { onclick: "closeModal('modal-annual-commitment')" }
                    } only %}
                </div>

                <div class="px-6 py-5 space-y-4">
                    <div class="flex items-start gap-3 p-4 bg-orange-50 rounded-xl border border-orange-200">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'info', size: 'sm', color: 'default' } only %}
                        <p class="text-sm text-gray-700">
                            En choisissant la facturation annuelle, vous vous engagez pour <strong>12 mois</strong>.
                            Aucune modification ni annulation ne sera possible avant la fin de cette période.
                        </p>
                    </div>
                    <div class="bg-gray-50 rounded-xl p-4 space-y-2">
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-500">Plan</span>
                            <span class="font-semibold text-gray-900" id="mac-plan-name"></span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-500">Tarif</span>
                            <span class="font-semibold text-gray-900" id="mac-plan-price"></span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-500">Durée d'engagement</span>
                            <span class="font-semibold text-gray-900">12 mois</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-500">Facturation</span>
                            <span class="font-semibold text-gray-900">Mensuelle · 12 prélèvements</span>
                        </div>
                    </div>
                </div>

                <div class="px-6 py-4 border-t border-gray-100 bg-gray-50 flex items-center justify-between">
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Annuler',
                        variant: 'ghost',
                        size: 'lg',
                        attr: { type: 'button', onclick: "closeModal('modal-annual-commitment')" }
                    } only %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Je comprends, continuer',
                        variant: 'primary',
                        size: 'lg',
                        icon: 'check',
                        attr: { type: 'button', onclick: 'confirmAnnualCheckout(this)' }
                    } only %}
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}