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

{% block title %}{{ is_edit ? 'Modifier' : 'Nouvelle' }} offre - Admin{% endblock %}

{% set inputClass = 'w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all bg-gray-50 focus:bg-white' %}
{% set labelClass = 'block text-sm font-medium text-gray-700 mb-2' %}
{% set helpClass = 'mt-1.5 text-xs text-gray-400' %}
{% set toggleClass = 'flex items-center gap-3 p-4 bg-gray-50 border-2 border-gray-200 rounded-xl cursor-pointer transition-all hover:border-primary/30 hover:bg-primary/5 has-[:checked]:border-primary has-[:checked]:bg-primary/5' %}
{% set toggleKnob = 'w-10 h-6 bg-gray-300 peer-checked:bg-primary rounded-full relative transition-colors after:content-[\'\'] after:absolute after:top-0.5 after:left-0.5 after:w-5 after:h-5 after:bg-white after:rounded-full after:transition-transform peer-checked:after:translate-x-4 flex-shrink-0' %}

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

    {# Header #}
    <div class="mb-8">
        {% include '_molecules/page-header/page-header.html.twig' with {
            title: is_edit ? 'Modifier « ' ~ plan.name ~ ' »' : 'Nouvelle offre',
            icon: is_edit ? 'edit' : 'plus',
            backHref: path('admin_plan_list'),
            backLabel: 'Retour aux offres'
        } only %}
    </div>

    {{ form_start(form, {'attr': {'class': 'space-y-6', 'data-turbo': 'false'}}) }}

        {# ── Card 1 : Identité ── #}
        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'tag', size: 'md', color: 'primary' } only %}
                </div>
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">Identité</h2>
                    <p class="text-xs text-gray-400">Nom, slug et accroche</p>
                </div>
            </div>
            <div class="p-6 space-y-5">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                        {{ form_label(form.name, null, {'label_attr': {'class': labelClass}}) }}
                        {{ form_widget(form.name, {'attr': {'class': inputClass}}) }}
                        {{ form_errors(form.name) }}
                    </div>
                    <div>
                        {{ form_label(form.slug, null, {'label_attr': {'class': labelClass}}) }}
                        {{ form_widget(form.slug, {'attr': {'class': inputClass ~ ' font-mono text-sm'}}) }}
                        {% if form.slug.vars.help %}<p class="{{ helpClass }}">{{ form.slug.vars.help }}</p>{% endif %}
                        {{ form_errors(form.slug) }}
                    </div>
                </div>
                <div>
                    {{ form_label(form.tagline, null, {'label_attr': {'class': labelClass}}) }}
                    {{ form_widget(form.tagline, {'attr': {'class': inputClass ~ ' resize-none', 'rows': 3}}) }}
                    {% if form.tagline.vars.help %}<p class="{{ helpClass }}">{{ form.tagline.vars.help }}</p>{% endif %}
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                        {{ form_label(form.sortOrder, null, {'label_attr': {'class': labelClass}}) }}
                        {{ form_widget(form.sortOrder, {'attr': {'class': inputClass}}) }}
                    </div>
                    <div class="flex items-end pb-1 gap-6">
                        <label class="{{ toggleClass }}">
                            {{ form_widget(form.isRecommended, {'attr': {'class': 'sr-only peer'}}) }}
                            <div class="{{ toggleKnob }}"></div>
                            <span class="text-sm font-medium text-gray-700">Offre recommandée</span>
                        </label>
                        <label class="{{ toggleClass }}">
                            {{ form_widget(form.isActive, {'attr': {'class': 'sr-only peer'}}) }}
                            <div class="{{ toggleKnob }}"></div>
                            <span class="text-sm font-medium text-gray-700">Active (visible)</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        {# ── Card 2 : Prix & Tokens ── #}
        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'token', size: 'md', color: 'primary' } only %}
                </div>
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">Prix & Tokens</h2>
                    <p class="text-xs text-gray-400">Prix mensuel / annuel, engagement et tokens alloués</p>
                </div>
            </div>
            <div class="p-6 space-y-5">

                {# Prix #}
                <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
                    <div>
                        {{ form_label(form.priceMonthly, null, {'label_attr': {'class': labelClass}}) }}
                        {{ form_widget(form.priceMonthly, {'attr': {'class': inputClass ~ ' tabular-nums'}}) }}
                        {% if form.priceMonthly.vars.help %}<p class="{{ helpClass }}">{{ form.priceMonthly.vars.help }}</p>{% endif %}
                    </div>
                    <div>
                        {{ form_label(form.priceAnnual, null, {'label_attr': {'class': labelClass}}) }}
                        {{ form_widget(form.priceAnnual, {'attr': {'class': inputClass ~ ' tabular-nums'}}) }}
                        {% if form.priceAnnual.vars.help %}<p class="{{ helpClass }}">{{ form.priceAnnual.vars.help }}</p>{% endif %}
                    </div>
                    <div>
                        {{ form_label(form.commitmentLabel, null, {'label_attr': {'class': labelClass}}) }}
                        {{ form_widget(form.commitmentLabel, {'attr': {'class': inputClass}}) }}
                        {% if form.commitmentLabel.vars.help %}<p class="{{ helpClass }}">{{ form.commitmentLabel.vars.help }}</p>{% endif %}
                    </div>
                </div>

                {# Tokens #}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                        {{ form_label(form.monthlyTokens, null, {'label_attr': {'class': labelClass}}) }}
                        {{ form_widget(form.monthlyTokens, {'attr': {'class': inputClass ~ ' tabular-nums'}}) }}
                        {% if form.monthlyTokens.vars.help %}<p class="{{ helpClass }}">{{ form.monthlyTokens.vars.help }}</p>{% endif %}
                    </div>
                    <div>
                        {{ form_label(form.tokensLabel, null, {'label_attr': {'class': labelClass}}) }}
                        {{ form_widget(form.tokensLabel, {'attr': {'class': inputClass}}) }}
                        {% if form.tokensLabel.vars.help %}<p class="{{ helpClass }}">{{ form.tokensLabel.vars.help }}</p>{% endif %}
                    </div>
                </div>
            </div>
        </div>

        {# ── Card 4 : Fonctionnalités ── #}
        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'check', size: 'md', color: 'primary' } only %}
                </div>
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">Fonctionnalités incluses</h2>
                    <p class="text-xs text-gray-400">Cochez les fonctionnalités disponibles dans cette offre</p>
                </div>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                    {% for field in [
                        form.hasSamAccess,
                        form.hasPrioritySupport,
                        form.hasMultiAccountDashboard,
                        form.hasFlexibleTokens,
                        form.hasDegressivePricing,
                        form.hasDedicatedTraining
                    ] %}
                        <label class="{{ toggleClass }}">
                            {{ form_widget(field, {'attr': {'class': 'sr-only peer'}}) }}
                            <div class="{{ toggleKnob }}"></div>
                            <span class="text-sm font-medium text-gray-700">{{ field.vars.label }}</span>
                        </label>
                    {% endfor %}
                </div>
                <div class="mt-4">
                    {{ form_label(form.tokenStorageMonths, null, {'label_attr': {'class': labelClass}}) }}
                    {{ form_widget(form.tokenStorageMonths, {'attr': {'class': inputClass ~ ' max-w-[180px] tabular-nums'}}) }}
                    <p class="{{ helpClass }}">0 = pas d'accumulation &nbsp;·&nbsp; 3 = jusqu'à 3 mois &nbsp;·&nbsp; 6 = jusqu'à 6 mois</p>
                </div>
            </div>
        </div>

        {# ── Card 5 : CTA ── #}
        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'arrow-right', size: 'md', color: 'primary' } only %}
                </div>
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">Bouton CTA</h2>
                    <p class="text-xs text-gray-400">Label et destination du bouton d'appel à l'action</p>
                </div>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                        {{ form_label(form.ctaLabel, null, {'label_attr': {'class': labelClass}}) }}
                        {{ form_widget(form.ctaLabel, {'attr': {'class': inputClass}}) }}
                        {% if form.ctaLabel.vars.help %}<p class="{{ helpClass }}">{{ form.ctaLabel.vars.help }}</p>{% endif %}
                    </div>
                    <div>
                        {{ form_label(form.ctaUrl, null, {'label_attr': {'class': labelClass}}) }}
                        {{ form_widget(form.ctaUrl, {'attr': {'class': inputClass}}) }}
                        {% if form.ctaUrl.vars.help %}<p class="{{ helpClass }}">{{ form.ctaUrl.vars.help }}</p>{% endif %}
                    </div>
                </div>
            </div>
        </div>

        {# ── Card 6 : Apparence ── #}
        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'palette-2', size: 'md', color: 'primary' } only %}
                </div>
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">Apparence</h2>
                    <p class="text-xs text-gray-400">Dégradé appliqué au prix du plan (couleur gauche → couleur droite)</p>
                </div>
            </div>
            <div class="p-6 space-y-5">

                {# Deux color pickers + preview #}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">

                    {# Pickers #}
                    <div class="space-y-5">
                        <div class="flex gap-5">
                            <div class="flex-1">
                                <label class="{{ labelClass }}">Couleur gauche</label>
                                <div class="flex items-center gap-3 mt-1">
                                    <input type="color" id="gradient-color-left" value="#0d1b3e"
                                           class="w-12 h-12 rounded-xl border-2 border-gray-200 cursor-pointer p-0.5 bg-white">
                                    <span id="gradient-color-left-hex" class="text-sm font-mono text-gray-500">#0d1b3e</span>
                                </div>
                            </div>
                            <div class="flex-1">
                                <label class="{{ labelClass }}">Couleur droite</label>
                                <div class="flex items-center gap-3 mt-1">
                                    <input type="color" id="gradient-color-right" value="#0C81E4"
                                           class="w-12 h-12 rounded-xl border-2 border-gray-200 cursor-pointer p-0.5 bg-white">
                                    <span id="gradient-color-right-hex" class="text-sm font-mono text-gray-500">#0C81E4</span>
                                </div>
                            </div>
                        </div>

                        {# Préréglages #}
                        <div>
                            <p class="{{ labelClass }}">Préréglages</p>
                            <div class="flex flex-wrap gap-2">
                                {% set presets = [
                                    { label: 'Gris',    left: '#1f2937', right: '#6b7280' },
                                    { label: 'Bleu',    left: '#0d1b3e', right: '#0C81E4' },
                                    { label: 'Violet',  left: '#2e1065', right: '#7c3aed' },
                                    { label: 'Vert',    left: '#064e3b', right: '#10b981' },
                                    { label: 'Orange',  left: '#78350f', right: '#f59e0b' },
                                ] %}
                                {% for preset in presets %}
                                    <button type="button"
                                            onclick="applyPreset('{{ preset.left }}', '{{ preset.right }}')"
                                            class="flex items-center gap-2 px-3 py-1.5 rounded-lg border border-gray-200 text-xs font-medium text-gray-700 hover:border-primary/40 transition-colors">
                                        <span class="w-4 h-4 rounded-full flex-shrink-0"
                                              style="background: linear-gradient(135deg, {{ preset.left }}, {{ preset.right }})"></span>
                                        {{ preset.label }}
                                    </button>
                                {% endfor %}
                            </div>
                        </div>

                        {# Champ hidden géré par le form Symfony #}
                        <div>
                            <p class="{{ labelClass }}">Valeur CSS générée</p>
                            {{ form_widget(form.gradientCss, {'attr': {
                                'class': inputClass ~ ' font-mono text-xs text-gray-500',
                                'id': 'gradient-css-input',
                                'readonly': 'readonly'
                            }}) }}
                        </div>
                    </div>

                    {# Aperçu #}
                    <div>
                        <p class="{{ labelClass }}">Aperçu</p>
                        <div class="rounded-xl overflow-hidden border border-gray-100 shadow-sm">
                            <div class="p-6" id="gradient-preview-bg"
                                 style="background: {{ plan.gradientCss ?? 'linear-gradient(135deg, #0d1b3e 0%, #0C81E4 100%)' }}">
                                <p class="text-xs font-semibold uppercase tracking-widest text-white/50 mb-1">{{ plan.name }}</p>
                                <p class="text-4xl font-bold font-[Poppins] text-white leading-none">30€<span class="text-base font-normal opacity-70">/mois</span></p>
                            </div>
                            <div class="bg-gray-50 px-6 py-4 border-t border-gray-100">
                                <p class="text-xs text-gray-400 mb-1">Prix avec dégradé texte</p>
                                <p class="text-3xl font-bold font-[Poppins] leading-none" id="gradient-price-preview"
                                   style="background: {{ plan.gradientCss ?? 'linear-gradient(135deg, #0d1b3e 0%, #0C81E4 100%)' }}; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
                                    30€<span class="text-base font-normal">/mois</span>
                                </p>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>

        {# Actions #}
        <div class="flex items-center justify-between pt-2">
            {% include '_atoms/button/button.html.twig' with {
                label: 'Annuler',
                variant: 'ghost',
                size: 'lg',
                icon: 'arrow-left',
                href: path('admin_plan_list')
            } only %}
            {% include '_atoms/button/button.html.twig' with {
                label: is_edit ? 'Enregistrer' : 'Créer l\'offre',
                variant: 'primary',
                size: 'lg',
                icon: 'check',
                type: 'submit'
            } only %}
        </div>

    {{ form_end(form) }}
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // ── Gradient color pickers ──────────────────────────────────────────
    const leftPicker  = document.getElementById('gradient-color-left');
    const rightPicker = document.getElementById('gradient-color-right');
    const cssInput    = document.getElementById('gradient-css-input');

    if (leftPicker && rightPicker && cssInput) {
        // Sync pickers depuis la valeur actuelle en base
        const colors = cssInput.value.match(/#[0-9a-fA-F]{3,8}/gi);
        if (colors && colors.length >= 2) {
            leftPicker.value  = colors[0];
            rightPicker.value = colors[1];
            document.getElementById('gradient-color-left-hex').textContent  = colors[0];
            document.getElementById('gradient-color-right-hex').textContent = colors[1];
        }
        // Appliquer l'aperçu initial
        gradientApplyPreview(cssInput.value);

        // Écouter les changements
        leftPicker.addEventListener('input',  gradientRebuild);
        rightPicker.addEventListener('input', gradientRebuild);
    }
});

function gradientBuild(left, right) {
    return 'linear-gradient(135deg, ' + left + ' 0%, ' + right + ' 100%)';
}

function gradientRebuild() {
    const left  = document.getElementById('gradient-color-left').value;
    const right = document.getElementById('gradient-color-right').value;
    document.getElementById('gradient-color-left-hex').textContent  = left;
    document.getElementById('gradient-color-right-hex').textContent = right;
    const gradient = gradientBuild(left, right);
    const cssInput = document.getElementById('gradient-css-input');
    if (cssInput) cssInput.value = gradient;
    gradientApplyPreview(gradient);
}

function applyPreset(left, right) {
    document.getElementById('gradient-color-left').value  = left;
    document.getElementById('gradient-color-right').value = right;
    gradientRebuild();
}

function gradientApplyPreview(gradient) {
    const bg    = document.getElementById('gradient-preview-bg');
    const price = document.getElementById('gradient-price-preview');
    if (bg)    bg.style.background = gradient;
    if (price) {
        price.style.background           = gradient;
        price.style.webkitBackgroundClip = 'text';
        price.style.webkitTextFillColor  = 'transparent';
        price.style.backgroundClip       = 'text';
    }
}
</script>
{% endblock %}