{% extends 'base.html.twig' %}
{% block title %}Choisissez votre offre — Bubul{% endblock %}
{% block show_sidebar %}false{% endblock %}
{% block meta_robots %}noindex, nofollow{% endblock %}

{% block body %}

{%- 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 canChangePlan       = (isActiveStripe or isCanceledButActive) and not subscription.isInAnnualCommitment() %}

<div class="min-h-screen flex flex-col items-center px-4 py-6 sm:py-10 bg-gray-50 relative overflow-hidden" data-turbo="false">

    {# Orbes décoratifs #}
    <div style="position:absolute;width:700px;height:700px;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;background:radial-gradient(circle,color-mix(in srgb, var(--color-primary) 28%, transparent) 0%,transparent 70%);top:-250px;right:-200px;"></div>
    <div style="position:absolute;width:600px;height:600px;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;background:radial-gradient(circle,color-mix(in srgb, var(--color-primary) 22%, transparent) 0%,transparent 70%);top:-180px;left:-200px;"></div>
    <div style="position:absolute;width:500px;height:500px;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;background:radial-gradient(circle,color-mix(in srgb, var(--color-primary) 12%, transparent) 0%,transparent 70%);bottom:-120px;left:50%;transform:translateX(-50%);"></div>

    {# Logo — absolu en haut #}
    <div class="absolute top-6 sm:top-8 inset-x-0 flex justify-center z-10">
        <a href="{{ path('app_landing') }}" class="inline-flex scale-90 sm:scale-100">
            {% include '_atoms/logo/logo-with-text.html.twig' with { showBadge: false, size: 'lg' } only %}
        </a>
    </div>

    {# Contenu principal #}
    <div class="flex flex-col items-center w-full relative z-10 pt-20 sm:pt-24 pb-10">

        {# Heading #}
        <div class="w-full max-w-5xl text-center mb-6 sm:mb-8 px-2">
            <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-700 mb-2 sm:mb-3 leading-tight">Choisissez votre offre</h1>
            <p class="text-sm sm:text-base text-gray-500">2 mois offerts avec l'engagement annuel.</p>
        </div>

        {# Section plans #}
        <div class="w-full max-w-5xl">

            {% if isActiveStripe and subscription.isInAnnualCommitment() %}
                <div class="flex items-center gap-4 p-4 bg-gray-50 rounded-2xl border border-gray-200 mb-6">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'lock', size: 'sm', color: 'default' } only %}
                    <p class="text-sm text-gray-600">
                        Modification impossible — engagement annuel jusqu'au <strong>{{ subscription.commitmentEnd ? subscription.commitmentEnd|date('d/m/Y') : '—' }}</strong>.
                    </p>
                    {% if subscription.isNearCommitmentEnd() %}
                        {% include '_atoms/button/button.html.twig' with {
                            label: 'Annuler le renouvellement',
                            variant: 'ghost',
                            size: 'sm',
                            attr: { type: 'button', onclick: "openModal('modal-cancel')" }
                        } only %}
                    {% endif %}
                </div>
            {% endif %}

            <div class="flex justify-center mb-8 sm:mb-10 px-4 sm:px-0">
                <div class="flex flex-col sm:flex-row sm:items-center w-full sm:w-auto p-1.5 bg-gray-100 rounded-2xl shadow-inner gap-1 sm:gap-0" id="billing-toggle">
                    <button type="button" id="toggle-monthly" onclick="setBilling('monthly')"
                            class="w-full sm:w-auto px-8 py-2.5 rounded-xl text-sm font-semibold transition-all duration-200 bg-white text-gray-900 shadow-sm cursor-pointer">
                        Mensuel
                    </button>
                    <button type="button" id="toggle-annual" onclick="setBilling('annual')"
                            class="w-full sm:w-auto px-8 py-2.5 rounded-xl text-sm font-semibold transition-all duration-200 text-gray-500 hover:text-gray-700 inline-flex items-center justify-center gap-2 cursor-pointer">
                        Annuel
                        <span class="text-[10px] font-bold text-white bg-success px-1.5 py-0.5 rounded-full leading-none">−17%</span>
                    </button>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">

                {% for plan in plans %}
                    {% if not plan.isFree() and not plan.isCustomPrice() %}
                        {% set isCurrentMonthly = (isActiveStripe or isCanceledButActive) and subscription.plan and subscription.plan.id == plan.id and subscription.billingCycle == 'monthly' %}
                        {% set isCurrentAnnual  = (isActiveStripe or isCanceledButActive) and subscription.plan and subscription.plan.id == plan.id and subscription.billingCycle == 'annual' %}
                        {% set isCurrentPlan    = isCurrentMonthly or isCurrentAnnual %}
                        <div class="relative flex flex-col rounded-2xl overflow-hidden transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl hover:brightness-110"
                             style="{{ plan.gradientStyle }}">

                            <div class="absolute inset-0 pointer-events-none"
                                 style="background-image: radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1px); background-size: 20px 20px; mask-image: linear-gradient(to bottom, black 0%, transparent 55%); -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 55%);"></div>

                            <div class="relative flex flex-col h-full p-5 gap-4">

                                <div class="flex items-center justify-between gap-2">
                                    <h3 class="text-xl font-bold text-white font-[Poppins] leading-none">{{ plan.name }}</h3>
                                    {% if isCurrentPlan %}
                                        <span class="text-xs font-semibold text-white/80 bg-white/15 px-2 py-0.5 rounded-full whitespace-nowrap">Actuel</span>
                                    {% elseif plan.isRecommended() %}
                                        <span class="text-xs font-semibold text-white/80 bg-white/15 px-2 py-0.5 rounded-full whitespace-nowrap">Populaire</span>
                                    {% endif %}
                                </div>

                                {% if plan.tagline %}
                                    <p class="text-xs text-white/60 leading-relaxed -mt-1">{{ plan.tagline }}</p>
                                {% endif %}

                                <div class="border-t border-white/10 pt-4">
                                    <div class="billing-price-monthly">
                                        <p class="text-3xl font-bold text-white leading-none">
                                            {{ plan.priceMonthly|number_format(0) }}€<span class="text-sm font-normal text-white/60">/mois</span>
                                        </p>
                                    </div>
                                    <div class="billing-price-annual hidden">
                                        <p class="text-3xl font-bold text-white leading-none">
                                            {{ plan.priceAnnual|number_format(0) }}€<span class="text-sm font-normal text-white/60">/mois</span>
                                        </p>
                                        <p class="text-xs text-white/50 mt-1">{{ plan.priceAnnualTotal }}€/an · 2 mois offerts</p>
                                    </div>
                                </div>

                                <ul class="space-y-2 flex-1 border-t border-white/10 pt-4">
                                    <li class="flex items-center gap-2">
                                        <svg class="w-3.5 h-3.5 text-white/70 flex-shrink-0" viewBox="0 0 24 24" fill="none"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                        <span class="text-xs font-semibold text-white">{{ plan.monthlyTokens|number_format(0, ',', ' ') }}</span>
                                        <span class="text-xs text-white/55">tokens / mois</span>
                                    </li>
                                    {% if plan.slug in ['pro', 'expert', 'enterprise'] %}
                                    <li class="flex items-center gap-2">
                                        <svg class="w-3.5 h-3.5 text-white/70 flex-shrink-0" viewBox="0 0 24 24" fill="none"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                        <span class="text-xs text-white/70"><strong class="text-white/90">Scormia</strong> — modules SCORM</span>
                                    </li>
                                    {% endif %}
                                    {% if plan.tokenStorageMonths > 0 %}
                                    <li class="flex items-center gap-2">
                                        <svg class="w-3.5 h-3.5 text-white/70 flex-shrink-0" viewBox="0 0 24 24" fill="none"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                        <span class="text-xs text-white/70">Cumulables <strong class="text-white/90">{{ plan.tokenStorageMonths }} mois</strong></span>
                                    </li>
                                    {% endif %}
                                    {% if plan.hasPrioritySupport %}
                                    <li class="flex items-center gap-2">
                                        <svg class="w-3.5 h-3.5 text-white/70 flex-shrink-0" viewBox="0 0 24 24" fill="none"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                        <span class="text-xs text-white/70">Support prioritaire</span>
                                    </li>
                                    {% endif %}
                                    {% if plan.hasDedicatedTraining %}
                                    <li class="flex items-center gap-2">
                                        <svg class="w-3.5 h-3.5 text-white/70 flex-shrink-0" viewBox="0 0 24 24" fill="none"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                        <span class="text-xs text-white/70">Formation & onboarding</span>
                                    </li>
                                    {% endif %}
                                    {% if plan.hasSamAccess %}
                                    <li class="flex items-center gap-2">
                                        <svg class="w-3.5 h-3.5 text-white/70 flex-shrink-0" viewBox="0 0 24 24" fill="none"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                        <span class="text-xs text-white/70">SAM Analytics</span>
                                    </li>
                                    {% endif %}
                                </ul>

                                {# Bouton mensuel #}
                                <div class="billing-form-monthly">
                                    {% if isCurrentMonthly %}
                                        <button type="button" disabled
                                                class="w-full py-2.5 rounded-xl text-xs font-semibold text-white/50 bg-white/10 cursor-default">
                                            Plan actuel
                                        </button>
                                    {% elseif canChangePlan %}
                                        <form method="post" action="{{ path('app_subscription_change') }}" data-turbo="false">
                                            <input type="hidden" name="_token" value="{{ csrf_token('subscription-change') }}">
                                            <input type="hidden" name="plan_id" value="{{ plan.id }}">
                                            <input type="hidden" name="billing_cycle" value="monthly">
                                            <button type="submit"
                                                    class="w-full py-2.5 rounded-xl text-xs font-semibold text-white bg-white/20 hover:bg-white/30 transition-colors cursor-pointer">
                                                Choisir {{ plan.name }}
                                            </button>
                                        </form>
                                    {% else %}
                                        <form method="post" action="{{ path('app_subscription_checkout') }}" data-turbo="false">
                                            <input type="hidden" name="_token" value="{{ csrf_token('subscription-checkout') }}">
                                            <input type="hidden" name="plan_id" value="{{ plan.id }}">
                                            <input type="hidden" name="billing_cycle" value="monthly">
                                            <button type="submit"
                                                    class="w-full py-2.5 rounded-xl text-xs font-semibold text-white bg-white/20 hover:bg-white/30 transition-colors cursor-pointer">
                                                Choisir {{ plan.name }}
                                            </button>
                                        </form>
                                    {% endif %}
                                </div>

                                {# Bouton annuel #}
                                <div class="billing-form-annual hidden">
                                    {% if isCurrentAnnual %}
                                        <button type="button" disabled
                                                class="w-full py-2.5 rounded-xl text-xs font-semibold text-white/50 bg-white/10 cursor-default">
                                            Plan actuel
                                        </button>
                                    {% elseif canChangePlan %}
                                        <form method="post" action="{{ path('app_subscription_change') }}" data-turbo="false">
                                            <input type="hidden" name="_token" value="{{ csrf_token('subscription-change') }}">
                                            <input type="hidden" name="plan_id" value="{{ plan.id }}">
                                            <input type="hidden" name="billing_cycle" value="annual">
                                            <button type="submit"
                                                    class="w-full py-2.5 rounded-xl text-xs font-semibold text-white bg-white/20 hover:bg-white/30 transition-colors cursor-pointer">
                                                Choisir {{ plan.name }}
                                            </button>
                                        </form>
                                    {% else %}
                                        <form method="post" action="{{ path('app_subscription_checkout') }}" data-turbo="false">
                                            <input type="hidden" name="_token" value="{{ csrf_token('subscription-checkout') }}">
                                            <input type="hidden" name="plan_id" value="{{ plan.id }}">
                                            <input type="hidden" name="billing_cycle" value="annual">
                                            <button type="submit"
                                                    class="w-full py-2.5 rounded-xl text-xs font-semibold text-white bg-white/20 hover:bg-white/30 transition-colors cursor-pointer">
                                                Choisir {{ plan.name }}
                                            </button>
                                        </form>
                                    {% endif %}
                                </div>

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

            </div>

            {# Action contextuelle sous la grille #}
            <div class="mt-8 flex justify-center">
                {% if context == 'onboarding' %}
                    <form method="post" action="{{ path('app_welcome') }}" data-turbo="false">
                        <input type="hidden" name="step" value="plans">
                        <input type="hidden" name="_token" value="{{ csrf_token('welcome') }}">
                        {% include '_atoms/button/button.html.twig' with {
                            label: 'Continuer avec le plan gratuit',
                            variant: 'ghost',
                            size: 'md',
                            type: 'submit'
                        } only %}
                    </form>
                {% else %}
                    <a href="{{ path('app_settings_subscription') }}" class="text-sm text-gray-500 hover:text-gray-700 transition-colors">
                        ← Mon abonnement
                    </a>
                {% endif %}
            </div>

        </div>

    </div>

</div>


<script>
window.openModal = 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 = 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 setBilling(cycle) {
    document.querySelectorAll('.billing-price-monthly, .billing-price-annual').forEach(function(el) {
        el.classList.toggle('hidden', !el.classList.contains('billing-price-' + cycle));
    });
    document.querySelectorAll('.billing-form-monthly, .billing-form-annual').forEach(function(el) {
        el.classList.toggle('hidden', !el.classList.contains('billing-form-' + cycle));
    });
    var monthly = document.getElementById('toggle-monthly');
    var annual  = document.getElementById('toggle-annual');
    if (!monthly || !annual) return;
    var base         = 'px-8 py-2.5 rounded-xl text-sm font-semibold transition-all duration-200 cursor-pointer';
    var activeBase   = base + ' bg-white text-gray-900 shadow-sm';
    var inactiveBase = base + ' text-gray-500 hover:text-gray-700';
    monthly.className = cycle === 'monthly' ? activeBase   : inactiveBase;
    annual.className  = cycle === 'annual'  ? activeBase + ' inline-flex items-center gap-2' : inactiveBase + ' inline-flex items-center gap-2';
}

</script>

{% endblock %}