{#
 # ============================================================================
 # MOLECULE: CARD
 # ============================================================================
 #
 # Conteneur flexible avec header, body et footer optionnels.
 # Molécule fondamentale pour afficher du contenu structuré.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - _atoms/typography/typography.html.twig (titres)
 # - _atoms/icon/icon.html.twig (icône header)
 # - _atoms/button/button.html.twig (actions)
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre      | Type    | Défaut    | Description                              |
 # |----------------|---------|-----------|------------------------------------------|
 # | title          | string  | null      | Titre du header                          |
 # | subtitle       | string  | null      | Sous-titre du header                     |
 # | description    | string  | null      | Description (pour mode action)           |
 # | icon           | string  | null      | Icône du header (nom)                    |
 # | iconColor      | string  | 'primary' | Couleur de l'icône                       |
 # | status         | string  | null      | Statut: available, locked, coming        |
 # | badge          | string  | null      | Badge texte (Nouveau, À venir...)        |
 # | headerAction   | block   | null      | Slot pour action dans le header          |
 # | footer         | block   | null      | Slot pour le footer                      |
 # | variant        | string  | 'default' | Style: default, elevated, bordered, flat |
 # | padding        | string  | 'md'      | Padding du body: none, sm, md, lg        |
 # | href           | string  | null      | Rend la card cliquable                   |
 # | hover          | bool    | false     | Effet hover (auto si href)               |
 # | fullHeight     | bool    | false     | Étirer la card verticalement (h-full)    |
 # | collapsible    | bool    | false     | Rend le body pliable (clic sur header)   |
 # | collapsed      | bool    | false     | État initial fermé (si collapsible)      |
 # | class          | string  | ''        | Classes additionnelles                   |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Card simple:
 # {% embed '_molecules/card/card.html.twig' with { title: 'Mon titre' } %}
 #     {% block body %}
 #         <p>Contenu de la card</p>
 #     {% endblock %}
 # {% endembed %}
 #
 # Card avec footer:
 # {% embed '_molecules/card/card.html.twig' with { title: 'Utilisateur', icon: 'user' } %}
 #     {% block body %}
 #         <p>Informations utilisateur</p>
 #     {% endblock %}
 #     {% block footer %}
 #         <button>Éditer</button>
 #     {% endblock %}
 # {% endembed %}
 #
 # Card Mode Action (quick-action style):
 # {% embed '_molecules/card/card.html.twig' with {
 #     title: 'Créer un cours',
 #     description: 'Générez un cours depuis un PDF',
 #     icon: 'bubul-moodia',
 #     iconColor: 'moodia',
 #     status: 'available',
 #     href: '/moodia'
 # } %}{% endembed %}
 #
 # ============================================================================
 #}

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

{% set title = title ?? null %}
{% set subtitle = subtitle ?? null %}
{% set description = description ?? null %}
{% set icon = icon ?? null %}
{% set iconColor = iconColor ?? 'primary' %}
{% set status = status ?? null %}
{% set badge = badge ?? null %}
{% set variant = variant ?? 'default' %}
{% set padding = padding ?? 'md' %}
{% set href = href ?? null %}
{% set hover = hover ?? (href is not null) %}
{% set fullHeight = fullHeight ?? false %}
{% set collapsible = collapsible ?? false %}
{% set collapsed = collapsed ?? false %}
{% set collapsibleGroup = collapsibleGroup ?? '' %}
{% set overflowHidden = overflowHidden ?? false %}
{% set class = class ?? '' %}

{# Mode Action = quand status est défini (style quick-action) #}
{% set isActionMode = status is not null %}

{# Status configuration #}
{% set statusConfig = {
    'available': { 'badge': null, 'icon': 'chevron-right', 'opacity': '', 'interactive': true },
    'locked': { 'badge': null, 'icon': 'lock', 'opacity': 'opacity-75', 'interactive': false },
    'coming': { 'badge': badge ?? 'À venir', 'icon': null, 'opacity': 'opacity-75', 'interactive': false }
} %}
{% set sStatus = status ? (statusConfig[status] ?? statusConfig['available']) : null %}

{# Est-ce que la card est interactive ? #}
{% set isInteractive = href is not null and (not sStatus or sStatus.interactive) %}

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

{% set variantClasses = {
    'default': 'bg-white border border-gray-200 shadow-sm',
    'elevated': 'bg-white border border-gray-100 shadow-md',
    'bordered': 'bg-white border-2 border-gray-200',
    'flat': 'bg-gray-50 border border-gray-100'
} %}

{% set paddingClasses = {
    'none': '',
    'sm': 'p-4',
    'md': 'p-6',
    'lg': 'p-8'
} %}

{# Hover classes selon le mode #}
{% if isActionMode and isInteractive %}
    {% set hoverClasses = 'group hover:-translate-y-1 hover:shadow-[0_12px_32px_rgba(12,129,228,0.15)] hover:border-primary transition-all duration-300 cursor-pointer' %}
{% elseif hover %}
    {% set hoverClasses = 'hover:shadow-md hover:border-gray-300 transition-all cursor-pointer' %}
{% else %}
    {% set hoverClasses = '' %}
{% endif %}

{# Classes du conteneur #}
{% set cardClasses = [
    'rounded-2xl relative' ~ (overflowHidden ? ' overflow-hidden' : ''),
    isActionMode ? 'border border-primary/10 bg-white shadow-sm' : variantClasses[variant] ?? variantClasses['default'],
    hoverClasses,
    sStatus ? sStatus.opacity : '',
    fullHeight ? 'h-full flex flex-col' : '',
    class
]|join(' ')|trim %}

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

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

<{{ cardTag }}
    {% if href and isInteractive %} href="{{ href }}"{% endif %}
    class="{{ cardClasses }}"
    {% if collapsible %}
        data-controller="shared--collapsible"
        data-shared--collapsible-open-value="{{ collapsed ? 'false' : 'true' }}"
        {% if collapsibleGroup %}data-shared--collapsible-group-value="{{ collapsibleGroup }}"{% endif %}
    {% endif %}
>

    {# Overlay gradient au hover (Mode Action uniquement) #}
    {% if isActionMode and isInteractive %}
        <div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl pointer-events-none"></div>
    {% endif %}

    {# ----- Mode Action (quick-action style) ----- #}
    {% if isActionMode %}
        <div class="flex items-start gap-5 p-6">
            {# Icône avec animation hover #}
            {% if icon %}
                <div class="relative w-14 h-14 min-w-[56px] rounded-xl flex items-center justify-center transition-transform duration-300 {{ isInteractive ? 'group-hover:scale-110 group-hover:-rotate-3' : '' }} {{ sStatus and not sStatus.interactive ? 'grayscale opacity-70 bg-gray-100' : 'bg-primary/10' }}">
                    {% include '_atoms/icon/icon.html.twig' with {
                        name: icon,
                        size: 'lg',
                        color: sStatus and not sStatus.interactive ? 'gray' : 'primary'
                    } only %}
                </div>
            {% endif %}

            {# Contenu #}
            <div class="flex-1 relative z-[1]">
                <div class="flex items-center gap-2">
                    <h3 class="text-lg font-semibold font-[Poppins] {{ sStatus and not sStatus.interactive ? 'text-gray-500' : 'text-gray-900' }}">
                        {{ title }}
                    </h3>
                    {% if sStatus and sStatus.badge %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-semibold uppercase tracking-wider bg-gray-100 text-gray-500 border border-gray-200">
                            {{ sStatus.badge }}
                        </span>
                    {% elseif badge %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-semibold uppercase tracking-wider bg-primary/10 text-primary border border-primary/20">
                            {{ badge }}
                        </span>
                    {% endif %}
                </div>
                {% if description %}
                    <p class="text-sm {{ sStatus and not sStatus.interactive ? 'text-gray-400' : 'text-gray-500' }} leading-relaxed mt-1">
                        {{ description }}
                    </p>
                {% endif %}
            </div>

            {# Flèche (slide-in au hover) ou Cadenas - self-center pour centrage vertical #}
            {% if sStatus and sStatus.icon == 'lock' %}
                <div class="w-9 h-9 flex items-center justify-center text-gray-400 self-center">
                    {% include '_atoms/icon/icon.html.twig' with {
                        name: 'lock',
                        size: 'md',
                        color: 'gray'
                    } only %}
                </div>
            {% elseif isInteractive %}
                <div class="text-primary opacity-0 -translate-x-3 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 self-center">
                    {% include '_atoms/icon/icon.html.twig' with {
                        name: 'chevron-right',
                        size: 'md',
                        color: 'primary'
                    } only %}
                </div>
            {% endif %}
        </div>

    {# ----- Mode Standard (card classique) ----- #}
    {% else %}
        {# Header - avec support collapsible #}
        {% if title or icon or block('headerAction') is defined %}
            {% set headerTag = collapsible ? 'button' : 'div' %}
            <{{ headerTag }}
                class="w-full px-6 py-4 border-b border-gray-100 flex items-center justify-between gap-4 {{ collapsible ? 'cursor-pointer hover:bg-gray-50/50 transition-colors select-none text-left' : '' }}"
                {% if collapsible %}
                    type="button"
                    data-action="click->shared--collapsible#toggle"
                {% endif %}
            >
                <div class="flex items-center gap-3">
                    {% if icon %}
                        <div class="w-10 h-10 rounded-lg bg-{{ iconColor }}/10 flex items-center justify-center">
                            {% include '_atoms/icon/icon.html.twig' with {
                                name: icon,
                                size: 'md',
                                color: iconColor
                            } only %}
                        </div>
                    {% endif %}
                    <div>
                        {% if badge %}
                            <span class="text-xs font-medium text-gray-500 bg-gray-100 px-2 py-0.5 rounded mb-1 inline-block">{{ badge }}</span>
                        {% endif %}
                        {% if title %}
                            <h3 class="font-semibold text-gray-900">{{ title }}</h3>
                        {% endif %}
                        {% if subtitle %}
                            <p class="text-sm text-gray-500">{{ subtitle }}</p>
                        {% endif %}
                        {% if description %}
                            <p class="text-sm text-gray-500 mt-1">{{ description }}</p>
                        {% endif %}
                    </div>
                </div>
                <div class="flex items-center gap-2 flex-shrink-0">
                    {% if block('headerAction') is defined %}
                        {{ block('headerAction') }}
                    {% endif %}
                    {% if collapsible %}
                        <div class="w-6 h-6 flex items-center justify-center text-gray-400 transition-transform duration-200"
                             data-shared--collapsible-target="icon">
                            {% include '_atoms/icon/icon.html.twig' with {
                                name: 'chevron-down',
                                size: 'sm',
                                color: 'gray'
                            } only %}
                        </div>
                    {% endif %}
                </div>
            </{{ headerTag }}>
        {% endif %}

        {# Body - avec support collapsible #}
        <div class="{{ paddingClasses[padding] ?? paddingClasses['md'] }}{{ fullHeight ? ' flex-1' : '' }}"
             {% if collapsible %}data-shared--collapsible-target="content"{% endif %}>
            {% block body %}{% endblock %}
        </div>

        {# Footer #}
        {% if block('footer') is defined %}
            <div class="px-6 py-4 border-t border-gray-100 bg-gray-50">
                {{ block('footer') }}
            </div>
        {% endif %}
    {% endif %}

</{{ cardTag }}>