{#
 # ============================================================================
 # MOLECULE: MINI STAT
 # ============================================================================
 #
 # Affichage compact d'une statistique avec icône.
 # Utilisé pour tokens, énergie (Wh), compteurs inline.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre     | Type    | Défaut    | Description                        |
 # |---------------|---------|-----------|-----------------------------------|
 # | value         | string  | (requis)  | Valeur à afficher                 |
 # | label         | string  | null      | Label optionnel (ex: 'tokens')    |
 # | icon          | string  | null      | Nom de l'icône                    |
 # | variant       | string  | 'default' | primary-muted, warning-muted, primary, success, warning, muted, default |
 # | size          | string  | 'md'      | sm, md, lg                        |
 # | appearance    | string  | 'pill'    | pill (avec fond), inline (sans)   |
 # | animated      | bool    | false     | Animation de compteur             |
 # | progress      | number  | null      | Barre de progression (0-100)      |
 # | class         | string  | ''        | Classes additionnelles            |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Tokens:
 # {% include '_molecules/mini-stat/mini-stat.html.twig' with {
 #     value: '1,234',
 #     label: 'tokens',
 #     icon: 'token',
 #     variant: 'primary'
 # } %}
 #
 # Énergie:
 # {% include '_molecules/mini-stat/mini-stat.html.twig' with {
 #     value: '0.42',
 #     label: 'Wh',
 #     icon: 'lightbulb-bolt',
 #     variant: 'success'
 # } %}
 #
 # ============================================================================
 #}

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

{% set value = value ?? '0' %}
{% set label = label ?? null %}
{% set icon = icon ?? null %}
{% set variant = variant ?? 'default' %}
{% set size = size ?? 'md' %}
{% set appearance = appearance ?? 'pill' %}
{% set animated = animated ?? false %}
{% set progress = progress ?? null %}
{% set class = class ?? '' %}

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

{% set sizeConfig = {
    'sm': {
        'text': 'text-xs',
        'valueText': 'text-sm',
        'iconSize': 'sm',
        'gap': 'gap-1',
        'padding': 'px-2 py-1',
        'inlinePadding': ''
    },
    'md': {
        'text': 'text-sm',
        'valueText': 'text-base',
        'iconSize': 'md',
        'gap': 'gap-1.5',
        'padding': 'px-3 py-1.5',
        'inlinePadding': ''
    },
    'lg': {
        'text': 'text-base',
        'valueText': 'text-lg',
        'iconSize': 'lg',
        'gap': 'gap-2',
        'padding': 'px-4 py-2',
        'inlinePadding': ''
    }
} %}

{% set variantConfig = {
    'default': {
        'bg': 'bg-gray-100',
        'text': 'text-gray-700',
        'valueText': 'text-gray-900',
        'iconColor': 'gray'
    },
    'primary': {
        'bg': 'bg-primary/10',
        'text': 'text-primary',
        'valueText': 'text-primary',
        'iconColor': 'primary'
    },
    'primary-muted': {
        'bg': 'container-primary-muted',
        'text': 'text-primary',
        'valueText': 'text-primary',
        'iconColor': 'primary'
    },
    'warning-muted': {
        'bg': 'container-warning-muted',
        'text': 'text-warning',
        'valueText': 'text-warning',
        'iconColor': 'warning'
    },
    'success': {
        'bg': 'bg-success/10',
        'text': 'text-success',
        'valueText': 'text-success-dark',
        'iconColor': 'success'
    },
    'warning': {
        'bg': 'bg-warning/10',
        'text': 'text-warning',
        'valueText': 'text-warning-dark',
        'iconColor': 'warning'
    },
    'muted': {
        'bg': 'bg-gray-50',
        'text': 'text-gray-500',
        'valueText': 'text-gray-600',
        'iconColor': 'gray'
    }
} %}

{% set sConfig = sizeConfig[size] ?? sizeConfig['md'] %}
{% set vConfig = variantConfig[variant] ?? variantConfig['default'] %}

{# Classes de conteneur selon l'apparence #}
{% if appearance == 'inline' %}
    {% set containerClasses = [
        'inline-flex items-center',
        sConfig.gap,
        class
    ]|join(' ')|trim %}
{% else %}
    {% set containerClasses = [
        'inline-flex items-center rounded-full',
        sConfig.gap,
        sConfig.padding,
        vConfig.bg,
        class
    ]|join(' ')|trim %}
{% endif %}

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

<div class="{{ progress is not null ? 'flex flex-col gap-1' : '' }} {{ class }}">
    <div class="{{ containerClasses }}"{% if animated %} data-mini-stat-animated{% endif %}>
        {% if icon %}
            {% include '_atoms/icon/icon.html.twig' with {
                name: icon,
                size: sConfig.iconSize,
                color: vConfig.iconColor
            } only %}
        {% endif %}

        <span class="{{ sConfig.valueText }} font-semibold {{ vConfig.valueText }} tabular-nums">
            {{ value }}
        </span>

        {% if label %}
            <span class="{{ sConfig.text }} {{ vConfig.text }}">
                {{ label }}
            </span>
        {% endif %}
    </div>

    {# Progress bar #}
    {% if progress is not null %}
        <div class="w-full h-1.5 bg-gray-200 rounded-full overflow-hidden">
            <div class="h-full rounded-full transition-all duration-300 {% if variant == 'success' %}bg-success{% elseif variant == 'warning' %}bg-warning{% elseif variant == 'primary' or variant == 'primary-muted' %}bg-primary{% else %}bg-gray-400{% endif %}"
                 style="width: {{ max(0, min(100, progress)) }}%"></div>
        </div>
    {% endif %}
</div>