{#
 # ============================================================================
 # MOLECULE: LEVEL INDICATOR
 # ============================================================================
 #
 # Indicateur de niveau avec barres ou points visuels (difficulté, priorité, etc.).
 # Supporte 3 styles : barres égales, progressives ou points.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - Aucun (composant autonome)
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre     | Type    | Défaut    | Description                        |
 # |---------------|---------|-----------|-----------------------------------|
 # | level         | number  | 1         | Niveau actuel (1 à maxLevel)      |
 # | maxLevel      | number  | 3         | Nombre total de barres/points     |
 # | size          | string  | 'md'      | sm, md, lg                        |
 # | variant       | string  | 'auto'    | auto, primary, success, warning, muted |
 # | style         | string  | 'equal'   | equal, progressive, dots          |
 # | barWidth      | string  | null      | Largeur personnalisée (ex: 'w-1') |
 # | gap           | string  | null      | Espacement personnalisé (ex: 'gap-px') |
 # | showLabel     | bool    | false     | Afficher le label de niveau       |
 # | labels        | array   | null      | Labels personnalisés par niveau   |
 # | class         | string  | ''        | Classes additionnelles            |
 #
 # ============================================================================
 # STYLES DISPONIBLES
 # ============================================================================
 #
 # | Style       | Description                              | Visuel         |
 # |-------------|------------------------------------------|----------------|
 # | equal       | Barres de même hauteur (défaut)          | ▮▮▯▯           |
 # | progressive | Barres de hauteur croissante             | ▂▄▆█           |
 # | dots        | Points circulaires alignés               | ●●○○           |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Difficulté simple (barres égales):
 # {% include '_molecules/level-indicator/level-indicator.html.twig' with {
 #     level: 2,
 #     maxLevel: 3
 # } %}
 #
 # Style progressif avec labels:
 # {% include '_molecules/level-indicator/level-indicator.html.twig' with {
 #     level: 2,
 #     maxLevel: 4,
 #     style: 'progressive',
 #     variant: 'auto',
 #     showLabel: true,
 #     labels: ['Débutant', 'Intermédiaire', 'Avancé', 'Expert']
 # } %}
 #
 # Style dots (points) avec variante muted:
 # {% include '_molecules/level-indicator/level-indicator.html.twig' with {
 #     level: 3,
 #     maxLevel: 4,
 #     style: 'dots',
 #     variant: 'muted',
 #     showLabel: true,
 #     labels: ['Débutant', 'Intermédiaire', 'Avancé', 'Expert']
 # } %}
 #
 # ============================================================================
 #}

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

{% set level = level ?? 1 %}
{% set maxLevel = maxLevel ?? 3 %}
{% set size = size ?? 'md' %}
{% set variant = variant ?? 'auto' %}
{% set style = style ?? 'equal' %}
{% set barWidth = barWidth ?? null %}
{% set gap = gap ?? null %}
{% set showLabel = showLabel ?? false %}
{% set labels = labels ?? null %}
{% set class = class ?? '' %}

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

{% set sizeConfig = {
    'sm': {
        'barWidth': 'w-3',
        'barHeight': 'h-2',
        'gap': 'gap-0.5',
        'text': 'text-xs',
        'containerGap': 'gap-1.5',
        'progressiveHeights': ['h-1', 'h-1.5', 'h-2', 'h-2.5'],
        'dotSize': 'w-1.5 h-1.5',
        'dotGap': 'gap-1'
    },
    'md': {
        'barWidth': 'w-4',
        'barHeight': 'h-2.5',
        'gap': 'gap-1',
        'text': 'text-sm',
        'containerGap': 'gap-2',
        'progressiveHeights': ['h-1', 'h-[7px]', 'h-2.5', 'h-3.5'],
        'dotSize': 'w-2 h-2',
        'dotGap': 'gap-1.5'
    },
    'lg': {
        'barWidth': 'w-5',
        'barHeight': 'h-3',
        'gap': 'gap-1',
        'text': 'text-base',
        'containerGap': 'gap-2.5',
        'progressiveHeights': ['h-1.5', 'h-2.5', 'h-3.5', 'h-4'],
        'dotSize': 'w-2.5 h-2.5',
        'dotGap': 'gap-2'
    }
} %}

{# Couleurs automatiques basées sur le niveau #}
{% set autoColors = {
    1: 'success',
    2: 'warning',
    3: 'error'
} %}

{% set variantConfig = {
    'primary': { 'active': 'bg-primary', 'inactive': 'bg-primary/20' },
    'success': { 'active': 'bg-success', 'inactive': 'bg-success/20' },
    'warning': { 'active': 'bg-warning', 'inactive': 'bg-warning/20' },
    'error': { 'active': 'bg-error', 'inactive': 'bg-error/20' },
    'info': { 'active': 'bg-info', 'inactive': 'bg-info/20' },
    'cohorts': { 'active': 'bg-cohorts', 'inactive': 'bg-cohorts/20' },
    'muted': { 'active': 'bg-gray-500', 'inactive': 'bg-gray-200' }
} %}

{# Labels par défaut #}
{% set defaultLabels = ['Facile', 'Moyen', 'Difficile'] %}

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

{# Override avec les paramètres personnalisés si fournis #}
{% set resolvedBarWidth = barWidth ?? sConfig.barWidth %}
{% set resolvedGap = gap ?? sConfig.gap %}

{# Déterminer la variante de couleur #}
{% if variant == 'auto' %}
    {% set resolvedVariant = autoColors[level] ?? 'primary' %}
{% else %}
    {% set resolvedVariant = variant %}
{% endif %}

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

{# Déterminer le label #}
{% set resolvedLabels = labels ?? defaultLabels %}
{% set currentLabel = resolvedLabels[level - 1] ?? ('Niveau ' ~ level) %}

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

<div class="inline-flex items-center {{ sConfig.containerGap }} {{ class }}">
    {% if style == 'dots' %}
        {# Style dots : cercles alignés #}
        <div class="flex items-center {{ sConfig.dotGap }}">
            {% for i in 1..maxLevel %}
                <span class="{{ sConfig.dotSize }} rounded-full {{ i <= level ? vConfig.active : vConfig.inactive }} transition-colors duration-200"></span>
            {% endfor %}
        </div>
    {% else %}
        {# Barres de niveau (equal ou progressive) #}
        <div class="flex items-end {{ resolvedGap }}">
            {% for i in 1..maxLevel %}
                {% if style == 'progressive' %}
                    {# Barres progressives avec hauteurs croissantes #}
                    {% set barHeight = sConfig.progressiveHeights[i - 1] ?? sConfig.barHeight %}
                {% else %}
                    {# Barres égales (style par défaut) #}
                    {% set barHeight = sConfig.barHeight %}
                {% endif %}
                <div class="{{ resolvedBarWidth }} {{ barHeight }} rounded-sm {{ i <= level ? vConfig.active : vConfig.inactive }} transition-colors duration-200"></div>
            {% endfor %}
        </div>
    {% endif %}

    {# Label optionnel #}
    {% if showLabel %}
        <span class="{{ sConfig.text }} text-gray-600 font-medium">
            {{ currentLabel }}
        </span>
    {% endif %}
</div>