{#
 # ============================================================================
 # MOLECULE: STEPPER
 # ============================================================================
 #
 # Composant de progression par étapes pour les wizards et formulaires multi-step.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre     | Type    | Défaut    | Description                        |
 # |---------------|---------|-----------|-------------------------------------|
 # | steps         | array   | []        | Liste des étapes {label, icon?}    |
 # | currentStep   | int     | 1         | Étape active (1-indexed)           |
 # | size          | string  | 'md'      | Taille: sm, md, lg                 |
 # | variant       | string  | 'default' | default, compact, minimal          |
 # | clickable     | bool    | false     | Étapes précédentes cliquables      |
 # | baseUrl       | string  | null      | URL de base pour les liens         |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Basique:
 # {% include '_molecules/stepper/stepper.html.twig' with {
 #     steps: [
 #         { label: 'Source' },
 #         { label: 'Configuration' },
 #         { label: 'Génération' }
 #     ],
 #     currentStep: 2
 # } only %}
 #
 # Avec icônes:
 # {% include '_molecules/stepper/stepper.html.twig' with {
 #     steps: [
 #         { label: 'Source', icon: 'document' },
 #         { label: 'Config', icon: 'settings' },
 #         { label: 'Preview', icon: 'eye' },
 #         { label: 'Générer', icon: 'rocket' }
 #     ],
 #     currentStep: 2,
 #     size: 'lg'
 # } only %}
 #
 # ============================================================================
 #}

{% set steps = steps ?? [] %}
{% set currentStep = currentStep ?? 1 %}
{% set size = size ?? 'md' %}
{% set variant = variant ?? 'default' %}
{% set clickable = clickable ?? false %}
{% set baseUrl = baseUrl ?? null %}

{# Configuration des tailles #}
{% set sizeConfig = {
    'sm': {
        'dot': 'w-6 h-6 text-xs',
        'dotActive': 'w-7 h-7',
        'icon': 'xs',
        'line': 'h-0.5',
        'label': 'text-[10px]',
        'gap': 'gap-1'
    },
    'md': {
        'dot': 'w-8 h-8 text-sm',
        'dotActive': 'w-9 h-9',
        'icon': 'sm',
        'line': 'h-0.5',
        'label': 'text-xs',
        'gap': 'gap-1.5'
    },
    'lg': {
        'dot': 'w-10 h-10 text-base',
        'dotActive': 'w-11 h-11',
        'icon': 'md',
        'line': 'h-1',
        'label': 'text-sm',
        'gap': 'gap-2'
    }
} %}

{% set cfg = sizeConfig[size] ?? sizeConfig['md'] %}

<nav class="w-full" aria-label="Progression">
    <ol class="flex items-center justify-between">
        {% for index, step in steps %}
            {% set stepNum = index + 1 %}
            {% set isCompleted = stepNum < currentStep %}
            {% set isActive = stepNum == currentStep %}
            {% set isPending = stepNum > currentStep %}
            {% set isLast = loop.last %}

            <li class="flex items-center {{ not isLast ? 'flex-1' : '' }}">
                {# Step indicator #}
                <div class="flex flex-col items-center {{ cfg.gap }}">
                    {# Cercle/Dot #}
                    {% if clickable and isCompleted and baseUrl %}
                        <a href="{{ baseUrl }}?step={{ stepNum }}"
                           class="relative flex items-center justify-center rounded-full font-semibold
                                  transition-all duration-300 ease-out
                                  {{ isCompleted ? cfg.dot ~ ' bg-primary text-white shadow-sm hover:bg-primary-dark hover:scale-105' : '' }}
                                  {{ isActive ? cfg.dotActive ~ ' bg-primary text-white shadow-md ring-4 ring-primary/20' : '' }}
                                  {{ isPending ? cfg.dot ~ ' bg-gray-100 text-gray-400 border-2 border-gray-200' : '' }}">
                            {% if isCompleted %}
                                {% include '_atoms/icon/icon.html.twig' with { name: 'check', size: cfg.icon, color: 'white' } only %}
                            {% elseif step.icon is defined and isActive %}
                                {% include '_atoms/icon/icon.html.twig' with { name: step.icon, size: cfg.icon, color: 'white' } only %}
                            {% else %}
                                {{ stepNum }}
                            {% endif %}
                        </a>
                    {% else %}
                        <span class="relative flex items-center justify-center rounded-full font-semibold
                                     transition-all duration-300 ease-out
                                     {{ isCompleted ? cfg.dot ~ ' bg-primary text-white shadow-sm' : '' }}
                                     {{ isActive ? cfg.dotActive ~ ' bg-primary text-white shadow-md ring-4 ring-primary/20' : '' }}
                                     {{ isPending ? cfg.dot ~ ' bg-gray-100 text-gray-400 border-2 border-gray-200' : '' }}">
                            {% if isCompleted %}
                                {% include '_atoms/icon/icon.html.twig' with { name: 'check', size: cfg.icon, color: 'white' } only %}
                            {% elseif step.icon is defined and isActive %}
                                {% include '_atoms/icon/icon.html.twig' with { name: step.icon, size: cfg.icon, color: 'white' } only %}
                            {% else %}
                                {{ stepNum }}
                            {% endif %}
                        </span>
                    {% endif %}

                    {# Label (visible sauf variant minimal) #}
                    {% if variant != 'minimal' %}
                        <span class="{{ cfg.label }} font-medium transition-colors duration-200
                                     {{ isCompleted ? 'text-primary' : '' }}
                                     {{ isActive ? 'text-gray-900' : '' }}
                                     {{ isPending ? 'text-gray-400' : '' }}
                                     {{ variant == 'compact' ? 'hidden sm:block' : '' }}">
                            {{ step.label }}
                        </span>
                    {% endif %}
                </div>

                {# Ligne de connexion (sauf dernier) #}
                {% if not isLast %}
                    <div class="flex-1 mx-3 sm:mx-4 {{ variant == 'compact' ? 'mx-2 sm:mx-3' : '' }}">
                        <div class="relative {{ cfg.line }} bg-gray-200 rounded-full overflow-hidden">
                            {# Progression animée #}
                            <div class="{{ cfg.line }} bg-primary rounded-full transition-all duration-500 ease-out
                                        {{ isCompleted ? 'w-full' : 'w-0' }}"></div>
                        </div>
                    </div>
                {% endif %}
            </li>
        {% endfor %}
    </ol>
</nav>