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

{% block title %}Member Slider - Design System - Bubul{% endblock %}

{% block body %}
<div class="min-h-screen bg-gray-50">

    <header class="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div class="max-w-7xl mx-auto px-6 py-4">
            <div class="flex items-center gap-4">
                <a href="{{ path('admin_design_system') }}" class="text-gray-400 hover:text-gray-600 transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                    </svg>
                </a>
                <div>
                    <div class="flex items-center gap-2">
                        <span class="text-sm text-gray-500">Molécules</span>
                        <span class="text-gray-300">/</span>
                        <h1 class="text-xl font-bold text-gray-900 font-[Poppins]">Member Slider</h1>
                    </div>
                    <p class="text-sm text-gray-500">Slider de contrôle avec input numérique synchronisé</p>
                </div>
            </div>
        </div>
    </header>

    <div class="max-w-7xl mx-auto px-6 py-8">

        {# ===== USAGE ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Usage</h2>
            </div>
            <div class="p-6">
                <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto mb-4">
                    <pre class="text-sm text-gray-100"><code>{% verbatim %}{% include '_molecules/member-slider/member-slider.html.twig' with {
    value: 50000,
    min: 0,
    max: 500000,
    step: 1000,
    unit: 'tokens/mois'
} %}{% endverbatim %}</code></pre>
                </div>
            </div>
        </section>

        {# ===== APERÇU INTERACTIF ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Aperçu interactif</h2>
                <p class="text-sm text-gray-500 mt-1">Déplacez le slider ou modifiez l'input - ils sont synchronisés</p>
            </div>
            <div class="p-6 space-y-6">
                <div class="max-w-xl">
                    <p class="text-xs text-gray-400 mb-2">Allocation de tokens</p>
                    {% include '_molecules/member-slider/member-slider.html.twig' with {
                        value: 150000,
                        min: 0,
                        max: 500000,
                        step: 1000,
                        unit: 'tokens/mois'
                    } %}
                </div>
                <div class="max-w-xl">
                    <p class="text-xs text-gray-400 mb-2">Pourcentage de quota</p>
                    {% include '_molecules/member-slider/member-slider.html.twig' with {
                        value: 75,
                        min: 0,
                        max: 100,
                        step: 5,
                        unit: '%'
                    } %}
                </div>
            </div>
        </section>

        {# ===== VARIANTES ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Variantes de couleur</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">variant</code></p>
            </div>
            <div class="p-6 space-y-6">
                <div class="max-w-xl">
                    <p class="text-xs text-gray-400 mb-2">primary (défaut)</p>
                    {% include '_molecules/member-slider/member-slider.html.twig' with {
                        value: 60,
                        max: 100,
                        variant: 'primary'
                    } %}
                </div>
                <div class="max-w-xl">
                    <p class="text-xs text-gray-400 mb-2">success</p>
                    {% include '_molecules/member-slider/member-slider.html.twig' with {
                        value: 80,
                        max: 100,
                        variant: 'success'
                    } %}
                </div>
                <div class="max-w-xl">
                    <p class="text-xs text-gray-400 mb-2">warning</p>
                    {% include '_molecules/member-slider/member-slider.html.twig' with {
                        value: 45,
                        max: 100,
                        variant: 'warning'
                    } %}
                </div>
            </div>
        </section>

        {# ===== ÉTAT DÉSACTIVÉ ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">État désactivé</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">disabled: true</code></p>
            </div>
            <div class="p-6">
                <div class="max-w-xl">
                    {% include '_molecules/member-slider/member-slider.html.twig' with {
                        value: 50,
                        max: 100,
                        unit: '%',
                        disabled: true
                    } %}
                </div>
            </div>
        </section>

        {# ===== ÉCOUTER LES CHANGEMENTS ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Écouter les changements</h2>
                <p class="text-sm text-gray-500 mt-1">Événement : <code class="bg-gray-200 px-1 rounded">shared--member-slider:change</code></p>
            </div>
            <div class="p-6">
                <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto">
                    <pre class="text-sm text-gray-100"><code>{% verbatim %}// JavaScript
document.addEventListener('shared--member-slider:change', (event) => {
    console.log('Nouvelle valeur:', event.detail.value);
    console.log('Pourcentage:', event.detail.percentage);
    console.log('Min/Max:', event.detail.min, event.detail.max);
});

// Ou avec Stimulus (dans un autre controller)
// data-action="shared--member-slider:change->myController#onSliderChange"{% endverbatim %}</code></pre>
                </div>
            </div>
        </section>

        {# ===== INTÉGRATION AVEC USER-CARD ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Intégration avec User Card</h2>
                <p class="text-sm text-gray-500 mt-1">Utilisation dans le block <code class="bg-gray-200 px-1 rounded">controls</code></p>
            </div>
            <div class="p-6">
                <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto mb-6">
                    <pre class="text-sm text-gray-100"><code>{% verbatim %}{% embed '_molecules/user-card/user-card.html.twig' with {
    name: 'Jean Dupont',
    subtitle: 'Solde : 250 000 tokens',
    variant: 'bordered'
} %}
    {% block controls %}
        {% include '_molecules/member-slider/member-slider.html.twig' with {
            value: user.monthlyAllocation,
            max: 500000,
            step: 1000,
            unit: 'tokens/mois',
            name: 'allocation[' ~ user.id ~ ']'
        } %}
    {% endblock %}
{% endembed %}{% endverbatim %}</code></pre>
                </div>

                {# Exemple live #}
                <div class="flex items-center gap-4 p-4 bg-white border border-gray-200 rounded-xl">
                    <div class="flex items-center gap-3 min-w-[180px]">
                        <div class="w-9 h-9 rounded-full bg-gradient-to-br from-primary to-primary-light flex items-center justify-center text-white font-semibold text-sm flex-shrink-0">
                            JD
                        </div>
                        <div class="flex flex-col min-w-0">
                            <span class="font-medium text-sm text-gray-900 truncate">Jean Dupont</span>
                            <span class="text-xs text-gray-500">Solde : <strong class="text-primary">250 000</strong> tokens</span>
                        </div>
                    </div>

                    {% include '_molecules/member-slider/member-slider.html.twig' with {
                        value: 125000,
                        min: 0,
                        max: 500000,
                        step: 1000,
                        unit: 'tokens/mois'
                    } %}
                </div>
            </div>
        </section>

        {# ===== PARAMÈTRES ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Paramètres</h2>
            </div>
            <div class="p-6 overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-200">
                            <th class="text-left py-2 px-3 font-medium text-gray-700">Paramètre</th>
                            <th class="text-left py-2 px-3 font-medium text-gray-700">Type</th>
                            <th class="text-left py-2 px-3 font-medium text-gray-700">Défaut</th>
                            <th class="text-left py-2 px-3 font-medium text-gray-700">Description</th>
                        </tr>
                    </thead>
                    <tbody class="text-gray-600">
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>value</code></td><td class="py-2 px-3">number</td><td class="py-2 px-3">0</td><td class="py-2 px-3">Valeur actuelle</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>min</code></td><td class="py-2 px-3">number</td><td class="py-2 px-3">0</td><td class="py-2 px-3">Valeur minimum</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>max</code></td><td class="py-2 px-3">number</td><td class="py-2 px-3">100</td><td class="py-2 px-3">Valeur maximum</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>step</code></td><td class="py-2 px-3">number</td><td class="py-2 px-3">1</td><td class="py-2 px-3">Pas d'incrémentation</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>unit</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">null</td><td class="py-2 px-3">Unité affichée (ex: 'tokens/mois', '%')</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>name</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">null</td><td class="py-2 px-3">Nom du champ pour formulaire</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>disabled</code></td><td class="py-2 px-3">bool</td><td class="py-2 px-3">false</td><td class="py-2 px-3">Désactiver le slider</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>variant</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">primary</td><td class="py-2 px-3">primary, success, warning</td></tr>
                        <tr><td class="py-2 px-3"><code>class</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">''</td><td class="py-2 px-3">Classes CSS additionnelles</td></tr>
                    </tbody>
                </table>
            </div>
        </section>

    </div>
</div>
{% endblock %}