{#
 # ============================================================================
 # MOLECULE: ACTIVITY ITEM
 # ============================================================================
 #
 # Affiche un élément d'activité utilisateur avec icône, titre, tokens et date.
 # Utilisé dans les listes d'activités récentes du dashboard et admin.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre   | Type              | Défaut     | Description                    |
 # |-------------|-------------------|------------|--------------------------------|
 # | title       | string            | (requis)   | Titre de l'activité            |
 # | toolCode    | string            | 'moodia'   | Code outil (moodia/serenia...) |
 # | toolName    | string            | null       | Nom affiché (déduit si null)   |
 # | tokens      | int               | 0          | Nombre de tokens consommés     |
 # | energy      | float             | 0          | Énergie consommée en Wh        |
 # | date        | DateTimeInterface | (requis)   | Date de l'activité             |
 # | showBadge   | bool              | true       | Afficher le badge outil        |
 # | compact     | bool              | false      | Mode compact (moins d'espace)  |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Basique:
 # {% include '_molecules/activity-item/activity-item.html.twig' with {
 #     title: 'Génération de cours Moodle',
 #     toolCode: 'moodia',
 #     tokens: 1500,
 #     energy: 0.45,
 #     date: activity.createdAt
 # } only %}
 #
 # Sans badge:
 # {% include '_molecules/activity-item/activity-item.html.twig' with {
 #     title: 'Message envoyé',
 #     toolCode: 'serenia',
 #     tokens: 250,
 #     date: activity.createdAt,
 #     showBadge: false
 # } only %}
 #
 # ============================================================================
 #}

{# @tailwind-safelist (Tailwind JIT: dynamic color classes)
   bg-primary/10 bg-cohorts/10 bg-warning/10 bg-error/10 bg-success/10 bg-info/10 bg-pink/10
   text-primary text-cohorts text-warning text-error text-success text-info text-pink
#}

{% set title = title|default('Activité') %}
{% set toolCode = toolCode|default('moodia') %}
{% set toolName = toolName|default(toolCode|capitalize) %}
{% set tokens = tokens|default(0) %}
{% set energy = energy|default(0) %}
{% set showBadge = showBadge ?? true %}
{% set compact = compact|default(false) %}

<div class="flex items-start gap-4 {{ compact ? 'py-3 first:pt-0' : 'py-4 first:pt-0' }}">
    {# Icône de l'outil - couleur depuis la base de données #}
    {% set aic = tool_colors[toolCode] ?? 'primary' %}
    {% set aihex = (tool_color_details[toolCode] ?? {}).primary ?? null %}
    {% set aihexSecondary = (tool_color_details[toolCode] ?? {}).secondary ?? null %}
    <div class="flex-shrink-0 w-10 h-10 rounded-xl flex items-center justify-center {{ aihex ? '' : 'bg-' ~ aic ~ '/10' }}"
         {% if aihex %}style="background: {{ aihex }}18;"{% endif %}>
        {% include '_atoms/icon/icon.html.twig' with {
            name: 'bubul-' ~ toolCode,
            size: 'md',
            color: aic,
            colorPrimary: aihex,
            colorSecondary: aihexSecondary
        } only %}
    </div>

    {# Contenu principal #}
    <div class="flex-1 min-w-0">
        <h4 class="text-sm font-medium text-gray-900 line-clamp-2 leading-snug">{{ title }}</h4>
        <div class="flex items-center gap-2 flex-wrap text-sm text-gray-500 mt-1.5">
            {# Tokens #}
            <span class="inline-flex items-center gap-1 text-primary font-medium">
                {% include '_atoms/icon/icon.html.twig' with {
                    name: 'token',
                    size: 'xs',
                    color: 'primary'
                } only %}
                {{ tokens|number_format(0, ',', ' ') }}
            </span>

            {# Énergie #}
            <span class="inline-flex items-center gap-1 text-warning">
                {% include '_atoms/icon/icon.html.twig' with {
                    name: 'bolt',
                    size: 'xs',
                    color: 'warning'
                } only %}
                {{ energy|number_format(4, ',', ' ') }} Wh
            </span>

            {# Date #}
            <span class="text-gray-400">
                · {{ date|format_datetime('long', 'none', locale='fr') }}
            </span>
        </div>
    </div>

    {# Badge outil (optionnel) - couleur dynamique #}
    {% if showBadge %}
        {% include '_atoms/badge/badge.html.twig' with {
            label: toolName,
            variant: tool_colors[toolCode] ?? 'primary',
            size: 'sm'
        } only %}
    {% endif %}
</div>