{#
 # ============================================================================
 # ATOM: PROGRESS
 # ============================================================================
 #
 # Barre de progression paramétrable utilisant 100% Tailwind CSS.
 # Affiche visuellement l'avancement d'une tâche ou d'un quota.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre      | Type    | Défaut    | Description                              |
 # |----------------|---------|-----------|------------------------------------------|
 # | value          | number  | 0         | Valeur actuelle (0-100 ou custom max)    |
 # | max            | number  | 100       | Valeur maximale                          |
 # | size           | string  | 'md'      | Taille: xs, sm, md, lg                   |
 # | color          | string  | 'primary' | Couleur: primary, success, warning, etc. |
 # | showLabel      | bool    | false     | Afficher le pourcentage                  |
 # | labelPosition  | string  | 'right'   | Position du label: right, inside, top    |
 # | label          | string  | null      | Label personnalisé (remplace %)          |
 # | striped        | bool    | false     | Effet rayé animé                         |
 # | rounded        | bool    | true      | Coins arrondis                           |
 # | class          | string  | ''        | Classes additionnelles                   |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Progress simple:
 # {% include '_atoms/progress/progress.html.twig' with {
 #     value: 65
 # } %}
 #
 # Avec label et couleur:
 # {% include '_atoms/progress/progress.html.twig' with {
 #     value: 75,
 #     color: 'success',
 #     showLabel: true
 # } %}
 #
 # Progress pour tokens:
 # {% include '_atoms/progress/progress.html.twig' with {
 #     value: 2500,
 #     max: 10000,
 #     color: 'primary',
 #     showLabel: true,
 #     label: '2 500 / 10 000 tokens'
 # } %}
 #
 # ============================================================================
 #}

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

{% set value = value ?? 0 %}
{% set max = max ?? 100 %}
{% set size = size ?? 'md' %}
{% set color = color ?? 'primary' %}
{% set showLabel = showLabel ?? false %}
{% set labelPosition = labelPosition ?? 'right' %}
{% set label = label ?? null %}
{% set striped = striped ?? false %}
{% set rounded = rounded ?? true %}
{% set class = class ?? '' %}

{# Calculer le pourcentage #}
{% set percentage = max > 0 ? ((value / max) * 100)|round : 0 %}
{% set percentage = percentage > 100 ? 100 : percentage %}

{# ============================================================================
   CLASSES TAILWIND - TAILLES
   ============================================================================ #}

{% set sizeClasses = {
    'xs': 'h-1',
    'sm': 'h-2',
    'md': 'h-3',
    'lg': 'h-4'
} %}

{% set labelSizeClasses = {
    'xs': 'text-xs',
    'sm': 'text-xs',
    'md': 'text-sm',
    'lg': 'text-sm'
} %}

{# ============================================================================
   CLASSES TAILWIND - COULEURS
   ============================================================================ #}

{% set colorClasses = {
    'primary': 'bg-primary',
    'secondary': 'bg-secondary',
    'success': 'bg-success',
    'warning': 'bg-warning',
    'error': 'bg-error',
    'info': 'bg-info',
    'moodia': 'bg-[var(--color-moodia)]',
    'serenia': 'bg-[var(--color-serenia)]',
    'slidia': 'bg-[var(--color-slidia)]',
    'sam': 'bg-[var(--color-sam)]',
    'gray': 'bg-gray-300'
} %}

{# ============================================================================
   CLASSES TAILWIND - ARRONDIS
   ============================================================================ #}

{% set roundedClasses = rounded ? 'rounded-full' : 'rounded-none' %}

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

<div class="w-full {{ class }}">

    {# ----- Label en haut ----- #}
    {% if showLabel and labelPosition == 'top' %}
        <div class="flex justify-between items-center mb-1.5">
            <span class="text-gray-700 {{ labelSizeClasses[size] ?? 'text-sm' }}">
                {{ label ?? percentage ~ '%' }}
            </span>
        </div>
    {% endif %}

    {# ----- Container avec label à droite ----- #}
    <div class="flex items-center gap-3">

        {# ----- Barre de progression ----- #}
        <div class="flex-1 bg-gray-200 {{ roundedClasses }} overflow-hidden {{ sizeClasses[size] ?? sizeClasses['md'] }}"
             role="progressbar"
             aria-valuenow="{{ value }}"
             aria-valuemin="0"
             aria-valuemax="{{ max }}">

            <div class="{{ colorClasses[color] ?? colorClasses['primary'] }} {{ roundedClasses }} h-full transition-all duration-500 ease-out {{ striped ? 'bg-stripes animate-stripes' : '' }} {% if labelPosition == 'inside' and showLabel %}flex items-center justify-center{% endif %}"
                 style="width: {{ percentage }}%">

                {# ----- Label à l'intérieur ----- #}
                {% if showLabel and labelPosition == 'inside' and percentage > 10 %}
                    <span class="text-white text-xs font-medium px-2 truncate">
                        {{ label ?? percentage ~ '%' }}
                    </span>
                {% endif %}

            </div>
        </div>

        {# ----- Label à droite ----- #}
        {% if showLabel and labelPosition == 'right' %}
            <span class="text-gray-600 {{ labelSizeClasses[size] ?? 'text-sm' }} shrink-0 min-w-[3rem] text-right">
                {{ label ?? percentage ~ '%' }}
            </span>
        {% endif %}

    </div>

</div>

{# ============================================================================
   STYLES POUR L'EFFET RAYÉ (à ajouter dans le CSS global si utilisé souvent)
   ============================================================================ #}
{% if striped %}
<style>
    .bg-stripes {
        background-image: linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.15) 75%,
            transparent 75%,
            transparent
        );
        background-size: 1rem 1rem;
    }
    .animate-stripes {
        animation: stripes 1s linear infinite;
    }
    @keyframes stripes {
        from { background-position: 1rem 0; }
        to { background-position: 0 0; }
    }
</style>
{% endif %}