{#
 # ============================================================================
 # MOLECULE: MEMBER SLIDER
 # ============================================================================
 #
 # Slider de contrôle avec input numérique synchronisé.
 # Utilisé pour l'allocation de tokens, quotas, etc.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - Aucun atome direct (composant autonome)
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre     | Type    | Défaut      | Description                        |
 # |---------------|---------|-------------|-----------------------------------|
 # | value         | number  | 0           | Valeur actuelle                   |
 # | min           | number  | 0           | Valeur minimum                    |
 # | max           | number  | 100         | Valeur maximum                    |
 # | step          | number  | 1           | Pas d'incrémentation              |
 # | unit          | string  | null        | Unité affichée (ex: 'tokens/mois')|
 # | name          | string  | null        | Nom du champ pour formulaire      |
 # | disabled      | bool    | false       | Désactiver le slider              |
 # | variant       | string  | 'primary'   | Couleur: primary, success, warning|
 # | class         | string  | ''          | Classes additionnelles            |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Simple:
 # {% include '_molecules/member-slider/member-slider.html.twig' with {
 #     value: 50000,
 #     max: 500000,
 #     unit: 'tokens/mois'
 # } %}
 #
 # Avec nom de champ:
 # {% include '_molecules/member-slider/member-slider.html.twig' with {
 #     value: 75,
 #     max: 100,
 #     step: 5,
 #     unit: '%',
 #     name: 'quota'
 # } %}
 #
 # ============================================================================
 #}

{# ============================================================================
   CONFIGURATION DES VALEURS PAR DÉFAUT
   ============================================================================ #}

{% set value = value ?? 0 %}
{% set min = min ?? 0 %}
{% set max = max ?? 100 %}
{% set step = step ?? 1 %}
{% set unit = unit ?? null %}
{% set name = name ?? null %}
{% set disabled = disabled ?? false %}
{% set variant = variant ?? 'primary' %}
{% set class = class ?? '' %}

{# Calcul du pourcentage pour le fill #}
{% set percentage = max > 0 ? ((value - min) / (max - min)) * 100 : 0 %}

{# Configuration des variantes de couleur #}
{% set variantConfig = {
    'primary': {
        'gradient': 'from-[#0A6BC4] via-primary to-[#3D9EEB]',
        'border': 'border-primary',
        'focus': 'focus:border-primary focus:ring-primary/15'
    },
    'success': {
        'gradient': 'from-success-dark via-success to-success-light',
        'border': 'border-success',
        'focus': 'focus:border-success focus:ring-success/15'
    },
    'warning': {
        'gradient': 'from-warning-dark via-warning to-warning-light',
        'border': 'border-warning',
        'focus': 'focus:border-warning focus:ring-warning/15'
    }
} %}

{% set vConfig = variantConfig[variant] ?? variantConfig['primary'] %}

{# ============================================================================
   RENDU HTML
   ============================================================================ #}

<div class="flex-1 flex items-center gap-4 {{ class }}"
     data-controller="shared--member-slider"
     data-shared--member-slider-min-value="{{ min }}"
     data-shared--member-slider-max-value="{{ max }}">

    {# Slider custom #}
    <div class="flex-1 relative h-8 flex items-center group">
        {# Input range invisible mais interactif #}
        <input type="range"
               min="{{ min }}"
               max="{{ max }}"
               step="{{ step }}"
               value="{{ value }}"
               {% if name %}name="{{ name }}"{% endif %}
               {% if disabled %}disabled{% endif %}
               class="absolute w-full h-full opacity-0 cursor-grab active:cursor-grabbing z-10 disabled:cursor-not-allowed"
               data-shared--member-slider-target="range"
               data-action="input->shared--member-slider#sync">

        {# Track (fond gris) #}
        <div class="absolute left-0 right-0 h-2 bg-gray-200 rounded-full overflow-visible">
            {# Fill (progression colorée) #}
            <div class="h-full bg-gradient-to-r {{ vConfig.gradient }} rounded-full relative transition-[width] duration-75"
                 data-shared--member-slider-target="fill"
                 style="width: {{ percentage }}%;">
                {# Thumb (curseur) #}
                <div class="absolute -right-[9px] top-1/2 -translate-y-1/2 w-[18px] h-[18px] bg-white border-[3px] {{ vConfig.border }} rounded-full shadow-md transition-transform group-hover:scale-110"></div>
            </div>
        </div>
    </div>

    {# Input numérique + Unité #}
    <div class="flex items-center gap-2 flex-shrink-0">
        <input type="number"
               min="{{ min }}"
               max="{{ max }}"
               step="{{ step }}"
               value="{{ value }}"
               {% if disabled %}disabled{% endif %}
               class="w-20 px-2 py-1.5 bg-gray-50 border border-gray-200 rounded-lg text-sm font-semibold text-gray-900 text-right hover:border-primary {{ vConfig.focus }} focus:ring-2 focus:bg-white outline-none transition-all [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:cursor-not-allowed"
               data-shared--member-slider-target="input"
               data-action="input->shared--member-slider#syncFromInput">

        {% if unit %}
            <span class="text-[11px] text-gray-500 whitespace-nowrap">{{ unit }}</span>
        {% endif %}
    </div>
</div>