{#
 # ============================================================================
 # MOLECULE: STEP-INDICATOR
 # ============================================================================
 #
 # Indicateur de progression par etapes pour wizards et processus multi-etapes.
 # Affiche les etapes avec leur etat (completed, active, pending).
 #
 # ============================================================================
 # COMPOSITION (Atomes utilises)
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 #
 # ============================================================================
 # PARAMETRES
 # ============================================================================
 #
 # | Parametre     | Type    | Defaut       | Description                         |
 # |---------------|---------|--------------|-------------------------------------|
 # | steps         | array   | (requis)     | Liste des etapes                    |
 # |   - id        | string  | (requis)     | ID unique de l'etape                |
 # |   - label     | string  | (requis)     | Label de l'etape                    |
 # |   - icon      | string  | null         | Icone de l'etape                    |
 # | currentStep   | number  | 1            | Numero de l'etape active (1-based)  |
 # | variant       | string  | 'horizontal' | Layout: horizontal, vertical        |
 # | size          | string  | 'md'         | Taille: sm, md, lg                  |
 # | showLabels    | bool    | true         | Afficher les labels                 |
 # | clickable     | bool    | false        | Etapes cliquables (navigation)      |
 # | class         | string  | ''           | Classes additionnelles              |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Wizard horizontal:
 # {% include '_molecules/step-indicator/step-indicator.html.twig' with {
 #     steps: [
 #         { id: 'upload', label: 'Document', icon: 'document' },
 #         { id: 'config', label: 'Configuration', icon: 'settings' },
 #         { id: 'generate', label: 'Generation', icon: 'rocket' },
 #         { id: 'preview', label: 'Apercu', icon: 'eye' },
 #         { id: 'deploy', label: 'Deploiement', icon: 'cloud' }
 #     ],
 #     currentStep: 2
 # } %}
 #
 # Vertical avec navigation:
 # {% include '_molecules/step-indicator/step-indicator.html.twig' with {
 #     steps: [
 #         { id: 'info', label: 'Informations' },
 #         { id: 'payment', label: 'Paiement' },
 #         { id: 'confirm', label: 'Confirmation' }
 #     ],
 #     currentStep: 1,
 #     variant: 'vertical',
 #     clickable: true
 # } %}
 #
 # ============================================================================
 #}

{# ============================================================================
   CONFIGURATION DES VALEURS PAR DEFAUT
   ============================================================================ #}

{% set steps = steps ?? [] %}
{% set currentStep = currentStep ?? 1 %}
{% set variant = variant ?? 'horizontal' %}
{% set size = size ?? 'md' %}
{% set showLabels = showLabels ?? true %}
{% set clickable = clickable ?? false %}
{% set class = class ?? '' %}

{% set isHorizontal = variant == 'horizontal' %}
{% set totalSteps = steps|length %}

{# ============================================================================
   CLASSES TAILWIND
   ============================================================================ #}

{% set sizeConfig = {
    'sm': {
        'circle': 'w-8 h-8',
        'icon': 'sm',
        'text': 'text-xs',
        'connector': isHorizontal ? 'h-0.5' : 'w-0.5',
        'gap': 'gap-1'
    },
    'md': {
        'circle': 'w-10 h-10',
        'icon': 'md',
        'text': 'text-sm',
        'connector': isHorizontal ? 'h-0.5' : 'w-0.5',
        'gap': 'gap-2'
    },
    'lg': {
        'circle': 'w-12 h-12',
        'icon': 'lg',
        'text': 'text-base',
        'connector': isHorizontal ? 'h-1' : 'w-1',
        'gap': 'gap-3'
    }
} %}

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

{# Container classes #}
{% set containerClasses = [
    isHorizontal ? 'flex items-center justify-between' : 'flex flex-col',
    class
]|join(' ')|trim %}

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

<div class="{{ containerClasses }}" role="navigation" aria-label="Etapes">
    {% for index, step in steps %}
        {% set stepNumber = index + 1 %}
        {% set isCompleted = stepNumber < currentStep %}
        {% set isActive = stepNumber == currentStep %}
        {% set isPending = stepNumber > currentStep %}
        {% set isLast = stepNumber == totalSteps %}

        {# Step item #}
        <div class="flex {{ isHorizontal ? 'flex-col items-center' : 'items-start' }} {{ sConfig.gap }} {{ isHorizontal and not isLast ? 'flex-1' : '' }}">

            {# Circle + Connector wrapper #}
            <div class="flex {{ isHorizontal ? 'items-center w-full' : 'flex-col items-center' }}">

                {# Step circle #}
                {% set circleTag = clickable and isCompleted ? 'button' : 'div' %}
                {% set circleClasses = [
                    sConfig.circle,
                    'rounded-full flex items-center justify-center font-semibold transition-all duration-300 flex-shrink-0',
                    isCompleted ? 'bg-primary text-white' : '',
                    isActive ? 'bg-primary text-white ring-4 ring-primary/20' : '',
                    isPending ? 'bg-gray-100 text-gray-400 border-2 border-gray-200' : '',
                    clickable and isCompleted ? 'cursor-pointer hover:bg-primary-dark' : ''
                ]|join(' ')|trim %}

                <{{ circleTag }}
                    class="{{ circleClasses }}"
                    {% if clickable and isCompleted %}
                        type="button"
                        onclick="document.dispatchEvent(new CustomEvent('step-indicator:click', { detail: { step: '{{ step.id }}', number: {{ stepNumber }} } }))"
                    {% endif %}
                    {% if isActive %}aria-current="step"{% endif %}
                >
                    {% if isCompleted %}
                        {% include '_atoms/icon/icon.html.twig' with {
                            name: 'check',
                            size: sConfig.icon,
                            color: 'white'
                        } only %}
                    {% elseif step.icon is defined and step.icon %}
                        {% include '_atoms/icon/icon.html.twig' with {
                            name: step.icon,
                            size: sConfig.icon,
                            color: isActive ? 'white' : 'gray'
                        } only %}
                    {% else %}
                        <span class="{{ sConfig.text }}">{{ stepNumber }}</span>
                    {% endif %}
                </{{ circleTag }}>

                {# Connector line (not for last step) #}
                {% if not isLast %}
                    {% if isHorizontal %}
                        <div class="flex-1 mx-2 {{ sConfig.connector }} rounded-full transition-colors duration-300 {{ isCompleted ? 'bg-primary' : 'bg-gray-200' }}"></div>
                    {% else %}
                        <div class="my-2 h-8 {{ sConfig.connector }} rounded-full transition-colors duration-300 {{ isCompleted ? 'bg-primary' : 'bg-gray-200' }}"></div>
                    {% endif %}
                {% endif %}
            </div>

            {# Label #}
            {% if showLabels %}
                <span class="{{ sConfig.text }} font-medium transition-colors duration-300 {{ isHorizontal ? 'text-center mt-2' : 'ml-3' }} {{ isCompleted or isActive ? 'text-gray-900' : 'text-gray-400' }}">
                    {{ step.label }}
                </span>
            {% endif %}
        </div>
    {% endfor %}
</div>