{#
 # ============================================================================
 # MOLECULE: USER CARD
 # ============================================================================
 #
 # Carte utilisateur avec avatar, infos et progress ring optionnel.
 # Utilisé pour afficher les profils, membres d'équipe, etc.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 # - _atoms/avatar/avatar.html.twig (si disponible)
 # - _atoms/badge/badge.html.twig
 # - _molecules/progress-ring/progress-ring.html.twig
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre     | Type    | Défaut    | Description                        |
 # |---------------|---------|-----------|-----------------------------------|
 # | name          | string  | (requis)  | Nom de l'utilisateur              |
 # | email         | string  | null      | Email                             |
 # | role          | string  | null      | Rôle/fonction                     |
 # | subtitle      | string  | null      | Sous-titre personnalisé           |
 # | avatar        | string  | null      | URL de l'avatar                   |
 # | initials      | string  | null      | Initiales (si pas d'avatar)       |
 # | badge         | object  | null      | Badge { text, variant }           |
 # | progress      | number  | null      | Pourcentage pour progress ring    |
 # | progressLabel | string  | null      | Label du progress                 |
 # | href          | string  | null      | Rend la carte cliquable           |
 # | actions       | array   | null      | Actions (boutons)                 |
 # | controls      | block   | null      | Slot pour contrôles custom        |
 # | size          | string  | 'md'      | sm, md, lg                        |
 # | variant       | string  | 'default' | default, bordered, elevated       |
 # | class         | string  | ''        | Classes additionnelles            |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Carte simple:
 # {% include '_molecules/user-card/user-card.html.twig' with {
 #     name: 'Jean Dupont',
 #     email: 'jean@example.com',
 #     role: 'Administrateur'
 # } %}
 #
 # Avec avatar et progression:
 # {% include '_molecules/user-card/user-card.html.twig' with {
 #     name: 'Marie Martin',
 #     avatar: '/uploads/avatar.jpg',
 #     progress: 75,
 #     progressLabel: 'Complété',
 #     badge: { text: 'Pro', variant: 'primary' }
 # } %}
 #
 # ============================================================================
 #}

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

{% set name = name ?? 'Utilisateur' %}
{% set email = email ?? null %}
{% set role = role ?? null %}
{% set subtitle = subtitle ?? null %}
{% set avatar = avatar ?? null %}
{% set initials = initials ?? name|slice(0,2)|upper %}
{% set badge = badge ?? null %}
{% set progress = progress ?? null %}
{% set progressLabel = progressLabel ?? null %}
{% set href = href ?? null %}
{% set actions = actions ?? null %}
{% set size = size ?? 'md' %}
{% set variant = variant ?? 'default' %}
{% set class = class ?? '' %}

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

{% set sizeConfig = {
    'sm': {
        'padding': 'p-3',
        'avatarSize': 'w-10 h-10 text-sm',
        'nameText': 'text-sm',
        'detailText': 'text-xs',
        'gap': 'gap-3',
        'progressSize': 'sm'
    },
    'md': {
        'padding': 'p-4',
        'avatarSize': 'w-12 h-12 text-base',
        'nameText': 'text-base',
        'detailText': 'text-sm',
        'gap': 'gap-4',
        'progressSize': 'md'
    },
    'lg': {
        'padding': 'p-5',
        'avatarSize': 'w-16 h-16 text-lg',
        'nameText': 'text-lg',
        'detailText': 'text-base',
        'gap': 'gap-5',
        'progressSize': 'lg'
    }
} %}

{% set variantConfig = {
    'default': 'bg-white',
    'bordered': 'bg-white border border-gray-200',
    'elevated': 'bg-white shadow-md'
} %}

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

{% set containerClasses = [
    'flex items-center rounded-xl transition-all duration-200',
    sConfig.padding,
    sConfig.gap,
    vConfig,
    href ? 'hover:shadow-lg hover:-translate-y-0.5 cursor-pointer' : '',
    class
]|join(' ')|trim %}

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

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

<{{ tag }}{% if href %} href="{{ href }}"{% endif %} class="{{ containerClasses }}">
    {# Avatar / Initiales #}
    <div class="relative flex-shrink-0">
        {% if avatar %}
            <img
                src="{{ avatar }}"
                alt="{{ name }}"
                class="{{ sConfig.avatarSize }} rounded-full object-cover"
            >
        {% else %}
            <div class="{{ sConfig.avatarSize }} rounded-full bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center font-semibold text-primary">
                {{ initials }}
            </div>
        {% endif %}

        {# Badge de statut (petit point) #}
        {% if badge and badge.dot is defined and badge.dot %}
            <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></span>
        {% endif %}
    </div>

    {# Informations #}
    <div class="flex-1 min-w-0">
        <div class="flex items-center gap-2">
            <p class="{{ sConfig.nameText }} font-semibold text-gray-900 truncate">
                {{ name }}
            </p>

            {% if badge and badge.text is defined %}
                {% include '_atoms/badge/badge.html.twig' with {
                    text: badge.text,
                    variant: badge.variant ?? 'primary',
                    size: 'sm'
                } only %}
            {% endif %}
        </div>

        {% if role %}
            <p class="{{ sConfig.detailText }} text-gray-500 truncate">
                {{ role }}
            </p>
        {% endif %}

        {% if subtitle %}
            <p class="{{ sConfig.detailText }} text-gray-500 truncate">
                {{ subtitle }}
            </p>
        {% endif %}

        {% if email %}
            <p class="{{ sConfig.detailText }} text-gray-400 truncate">
                {{ email }}
            </p>
        {% endif %}

        {% if progressLabel and progress is not null %}
            <p class="{{ sConfig.detailText }} text-gray-500 mt-1">
                {{ progressLabel }}: {{ progress }}%
            </p>
        {% endif %}
    </div>

    {# Progress Ring #}
    {% if progress is not null %}
        <div class="flex-shrink-0">
            {% include '_molecules/progress-ring/progress-ring.html.twig' with {
                value: progress,
                size: sConfig.progressSize,
                variant: progress >= 100 ? 'success' : 'primary'
            } only %}
        </div>
    {% endif %}

    {# Actions #}
    {% if actions %}
        <div class="flex items-center gap-2 flex-shrink-0">
            {% for action in actions %}
                <button
                    type="button"
                    class="p-2 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors"
                    {% if action.onclick is defined %}onclick="{{ action.onclick }}"{% endif %}
                    data-tooltip="{{ action.label ?? '' }}"
                >
                    {% include '_atoms/icon/icon.html.twig' with {
                        name: action.icon,
                        size: 'sm'
                    } only %}
                </button>
            {% endfor %}
        </div>
    {% endif %}

    {# Controls slot (pour embed) #}
    {% block controls %}{% endblock %}
</{{ tag }}>