{#
 # ============================================================================
 # MOLECULE: STAT CARD
 # ============================================================================
 #
 # Carte de statistique pour dashboards et tableaux de bord.
 # Affiche une valeur clé avec icône, label et progression optionnelle.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 # - _atoms/typography/typography.html.twig
 # - _atoms/progress/progress.html.twig
 #
 # ============================================================================
 # PARAMETRES
 # ============================================================================
 #
 # | Paramètre      | Type    | Défaut    | Description                              |
 # |----------------|---------|-----------|------------------------------------------|
 # | label          | string  | (requis)  | Titre/label de la statistique            |
 # | value          | string  | (requis)  | Valeur principale                        |
 # | icon           | string  | null      | Nom de l'icone                           |
 # | detail         | string  | null      | Texte secondaire                         |
 # | variant        | string  | 'default' | default, primary, success, warning, error|
 # | trend          | string  | null      | up, down, neutral                        |
 # | trendValue     | string  | null      | Valeur du trend (ex: '+12%')             |
 # | progress       | number  | null      | Pourcentage 0-100                        |
 # | progressLabel  | string  | null      | Label de la progression                  |
 # | previousValue  | string  | null      | Valeur période précédente (hover reveal) |
 # | delta          | string  | null      | Variation vs précédent (ex: '+20%')      |
 # | deltaDown      | bool    | false     | true si la variation est négative         |
 # | href           | string  | null      | Rend la carte cliquable                  |
 # | size           | string  | 'md'      | sm, md, lg                               |
 # | layout         | string  | 'vertical'| vertical (icone au-dessus), horizontal   |
 # | class          | string  | ''        | Classes additionnelles                   |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Stat simple (layout vertical par défaut) :
 # {% include '_molecules/stat-card/stat-card.html.twig' with {
 #     label: 'Utilisateurs',
 #     value: '1,234',
 #     icon: 'users'
 # } %}
 #
 # Layout horizontal (icône à côté) :
 # {% include '_molecules/stat-card/stat-card.html.twig' with {
 #     label: 'Utilisateurs',
 #     value: '1,234',
 #     icon: 'users',
 #     layout: 'horizontal'
 # } %}
 #
 # Avec trend et progression:
 # {% include '_molecules/stat-card/stat-card.html.twig' with {
 #     label: 'Tokens restants',
 #     value: '12,500',
 #     icon: 'token',
 #     variant: 'primary',
 #     progress: 75,
 #     progressLabel: 'Disponibles'
 # } %}
 #
 # ============================================================================
 #}

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

{% set label = label ?? 'Statistique' %}
{% set value = value ?? '0' %}
{% set icon = icon ?? null %}
{% set detail = detail ?? null %}
{% set variant = variant ?? 'default' %}
{% set trend = trend ?? null %}
{% set trendValue = trendValue ?? null %}
{% set progress = progress ?? null %}
{% set progressLabel = progressLabel ?? null %}
{% set previousValue = previousValue ?? null %}
{% set delta = delta ?? null %}
{% set deltaDown = deltaDown ?? false %}
{% set href = href ?? null %}
{% set size = size ?? 'md' %}
{% set valueAttr = valueAttr ?? null %}
{% set layout = layout ?? 'vertical' %}
{% set class = class ?? '' %}
{% set editModalId = editModalId ?? null %}

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

{% set variantConfig = {
    'default': {
        'bg': 'bg-white',
        'iconBg': 'bg-gradient-to-br from-gray-100 to-gray-50',
        'iconColor': 'muted',
        'border': 'border-primary/10',
        'hoverBar': 'from-primary to-blue-400',
        'progressColor': 'primary'
    },
    'primary': {
        'bg': 'bg-white',
        'iconBg': 'bg-gradient-to-br from-blue-100 to-blue-50',
        'iconColor': 'primary',
        'border': 'border-primary/10',
        'hoverBar': 'from-primary to-blue-400',
        'progressColor': 'primary'
    },
    'success': {
        'bg': 'bg-white',
        'iconBg': 'bg-success/10',
        'iconColor': 'success',
        'border': 'border-success/10',
        'hoverBar': 'from-success to-success/80',
        'progressColor': 'success'
    },
    'warning': {
        'bg': 'bg-white',
        'iconBg': 'bg-warning/10',
        'iconColor': 'warning',
        'border': 'border-warning/10',
        'hoverBar': 'from-warning to-warning/80',
        'progressColor': 'warning'
    },
    'error': {
        'bg': 'bg-white',
        'iconBg': 'bg-error/10',
        'iconColor': 'error',
        'border': 'border-error/10',
        'hoverBar': 'from-error to-error/80',
        'progressColor': 'error'
    },
    'info': {
        'bg': 'bg-white',
        'iconBg': 'bg-info/10',
        'iconColor': 'info',
        'border': 'border-info/10',
        'hoverBar': 'from-info to-info/80',
        'progressColor': 'info'
    },
    'cohorts': {
        'bg': 'bg-white',
        'iconBg': 'bg-cohorts/10',
        'iconColor': 'cohorts',
        'border': 'border-cohorts/10',
        'hoverBar': 'from-cohorts to-cohorts/80',
        'progressColor': 'cohorts'
    }
} %}

{% set sizeConfig = {
    'sm': {
        'padding': 'p-6',
        'iconContainer': 'w-14 h-14',
        'iconSize': 'xl',
        'labelSize': 'text-xs',
        'valueSize': 'text-3xl',
        'detailSize': 'text-xs',
        'gap': 'gap-4',
        'iconMargin': 'mb-5',
        'valueMargin': 'mt-1',
        'progressMargin': 'mt-5'
    },
    'md': {
        'padding': 'p-8',
        'iconContainer': 'w-16 h-16',
        'iconSize': '2xl',
        'labelSize': 'text-sm',
        'valueSize': 'text-4xl',
        'detailSize': 'text-sm',
        'gap': 'gap-5',
        'iconMargin': 'mb-6',
        'valueMargin': 'mt-2',
        'progressMargin': 'mt-6'
    },
    'lg': {
        'padding': 'p-10',
        'iconContainer': 'w-20 h-20',
        'iconSize': '3xl',
        'labelSize': 'text-sm',
        'valueSize': 'text-5xl',
        'detailSize': 'text-base',
        'gap': 'gap-6',
        'iconMargin': 'mb-8',
        'valueMargin': 'mt-3',
        'progressMargin': 'mt-8'
    }
} %}

{% set trendConfig = {
    'up': { 'icon': 'arrow-up', 'color': 'text-green-600', 'bg': 'bg-green-50' },
    'down': { 'icon': 'arrow-down', 'color': 'text-red-600', 'bg': 'bg-red-50' },
    'neutral': { 'icon': 'minus', 'color': 'text-gray-500', 'bg': 'bg-gray-50' }
} %}

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

{% set baseClasses = [
    'bg-white/80 backdrop-blur-sm',
    'rounded-2xl border',
    'border-gray-200/60',
    'shadow-[0_2px_8px_rgba(12,129,228,0.04)]',
    sConfig.padding,
    'relative overflow-hidden',
    'transition-all duration-[400ms] ease-[cubic-bezier(0.16,1,0.3,1)]',
    'hover:-translate-y-1.5 hover:shadow-[0_16px_32px_rgba(12,129,228,0.12),0_0_0_1px_rgba(12,129,228,0.06)] hover:border-primary/20',
    'group'
]|join(' ') %}

{% set containerClasses = [
    baseClasses,
    href ? 'block cursor-pointer' : '',
    class
]|join(' ')|trim %}

{# Tag a utiliser #}
{% set tag = href ? 'a' : 'div' %}

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

<{{ tag }}{% if href %} href="{{ href }}"{% endif %} class="{{ containerClasses }}">

    {# Barre colorée au hover #}
    <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r {{ vConfig.hoverBar }} transform origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></div>

    {# Bouton d'édition (optionnel) #}
    {% if editModalId %}
        <div class="absolute top-3 right-3 z-10">
            {% include '_atoms/button/button.html.twig' with {
                icon: 'edit',
                iconOnly: true,
                variant: 'ghost',
                size: 'sm',
                attr: { onclick: "openModal('" ~ editModalId ~ "')" }
            } only %}
        </div>
    {% endif %}

    {% if layout == 'horizontal' %}
        {# ===== LAYOUT HORIZONTAL : Icone a cote du contenu ===== #}
        <div class="flex items-start {{ sConfig.gap }}">
            {# Icone #}
            {% if icon %}
                <div class="{{ sConfig.iconContainer }} {{ vConfig.iconBg }} rounded-xl flex items-center justify-center flex-shrink-0 transition-transform duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)] group-hover:scale-110 group-hover:rotate-3">
                    {% include '_atoms/icon/icon.html.twig' with {
                        name: icon,
                        size: sConfig.iconSize,
                        color: vConfig.iconColor
                    } only %}
                </div>
            {% endif %}

            {# Contenu #}
            <div class="flex-1 min-w-0">
                <p class="{{ sConfig.labelSize }} font-semibold text-gray-500 uppercase tracking-wide truncate">{{ label }}</p>
                <div class="flex items-baseline gap-3 {{ sConfig.valueMargin }}">
                    <p class="{{ sConfig.valueSize }} font-bold text-gray-900 tabular-nums tracking-tight leading-none py-1"{% if valueAttr %} {{ valueAttr|raw }}{% endif %}>{{ value }}</p>
                    {% if trend and trendValue %}
                        {% set tConfig = trendConfig[trend] ?? trendConfig['neutral'] %}
                        <span class="inline-flex items-center gap-1 {{ tConfig.color }} {{ tConfig.bg }} px-2 py-1 rounded-md text-xs font-medium">
                            {% include '_atoms/icon/icon.html.twig' with {
                                name: tConfig.icon,
                                size: 'xs',
                                color: trend == 'up' ? 'success' : (trend == 'down' ? 'error' : 'muted')
                            } only %}
                            {{ trendValue }}
                        </span>
                    {% endif %}
                </div>
                {% if detail %}
                    <p class="{{ sConfig.detailSize }} text-gray-400 mt-2">{{ detail }}</p>
                {% endif %}
            </div>
        </div>

    {% else %}
        {# ===== LAYOUT VERTICAL (defaut) : Icone au-dessus du contenu ===== #}

        {# Icone #}
        {% if icon %}
            <div class="{{ sConfig.iconContainer }} {{ vConfig.iconBg }} rounded-xl flex items-center justify-center {{ sConfig.iconMargin }} transition-transform duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)] group-hover:scale-110 group-hover:rotate-3">
                {% include '_atoms/icon/icon.html.twig' with {
                    name: icon,
                    size: sConfig.iconSize,
                    color: vConfig.iconColor
                } only %}
            </div>
        {% endif %}

        {# Label #}
        <p class="{{ sConfig.labelSize }} font-semibold text-gray-500 uppercase tracking-wide truncate">{{ label }}</p>

        {# Valeur + Trend #}
        <div class="flex items-baseline gap-3 {{ sConfig.valueMargin }}">
            <p class="{{ sConfig.valueSize }} font-bold text-gray-900 tabular-nums tracking-tight leading-none py-1">{{ value }}</p>
            {% if trend and trendValue %}
                {% set tConfig = trendConfig[trend] ?? trendConfig['neutral'] %}
                <span class="inline-flex items-center gap-1 {{ tConfig.color }} {{ tConfig.bg }} px-2 py-1 rounded-md text-xs font-medium">
                    {% include '_atoms/icon/icon.html.twig' with {
                        name: tConfig.icon,
                        size: 'xs',
                        color: trend == 'up' ? 'success' : (trend == 'down' ? 'error' : 'muted')
                    } only %}
                    {{ trendValue }}
                </span>
            {% endif %}
        </div>

        {# Detail #}
        {% if detail %}
            <p class="{{ sConfig.detailSize }} text-gray-400 mt-2">{{ detail }}</p>
        {% endif %}

    {% endif %}

    {# Barre de progression (commune aux deux layouts) #}
    {% if progress is not null %}
        <div class="{{ sConfig.progressMargin }}">
            {% include '_atoms/progress/progress.html.twig' with {
                value: progress,
                size: size == 'lg' ? 'md' : 'sm',
                variant: variant == 'default' ? 'primary' : variant,
                showLabel: false
            } only %}
            {% if progressLabel %}
                <div class="flex justify-between items-center mt-2">
                    <span class="text-xs font-medium text-gray-700">{{ progress }}%</span>
                    <span class="text-xs text-gray-500">{{ progressLabel }}</span>
                </div>
            {% endif %}
        </div>
    {% endif %}

    {# Comparaison periode precedente (revele au hover) #}
    {% if previousValue or delta %}
        <div class="mt-3 pt-3 border-t border-gray-100 max-h-0 opacity-0 overflow-hidden
                    group-hover:max-h-16 group-hover:opacity-100
                    transition-all duration-300 ease-out">
            <div class="flex justify-between items-center">
                {% if previousValue %}
                    <span class="text-xs text-gray-400">{{ previousValue }}</span>
                {% endif %}
                {% if delta %}
                    <span class="text-xs font-bold px-2 py-0.5 rounded-md
                        {{ deltaDown ? 'text-warning bg-warning/10' : 'text-success bg-success/10' }}">
                        {{ delta }}
                    </span>
                {% endif %}
            </div>
        </div>
    {% endif %}

</{{ tag }}>