{#
 # ============================================================================
 # ORGANISM: DASHBOARD ACTIVITY
 # ============================================================================
 #
 # Liste simple d'activités récentes pour le dashboard.
 # Affiche les dernières activités avec date, tokens et énergie.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 # - _molecules/empty-state/empty-state.html.twig
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre     | Type    | Défaut     | Description                        |
 # |---------------|---------|------------|------------------------------------|
 # | activities    | array   | []         | Liste des activités                |
 # | limit         | int     | 5          | Nombre d'activités affichées       |
 # | viewMoreHref  | string  | null       | Lien vers historique complet       |
 # | class         | string  | ''         | Classes additionnelles             |
 #
 # ============================================================================
 #}

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

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

{% set activities = activities ?? [] %}
{% set limit = limit ?? 5 %}
{% set viewMoreHref = viewMoreHref ?? null %}
{% set class = class ?? '' %}

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

<div class="bg-white/80 backdrop-blur-sm rounded-2xl border border-gray-200/60 shadow-[0_2px_12px_rgba(12,129,228,0.04)] overflow-hidden {{ class }}">

    {% if activities|length > 0 %}
        <div class="divide-y divide-gray-100/80">
            {% for activity in activities|slice(0, limit) %}
                {% set toolCode = activity.tool is defined and activity.tool ? activity.tool.code : (activity.type ?? activity.activityType ?? 'moodia') %}
                {% set actTitle = activity.title ?? activity.description ?? 'Activité' %}
                {% set actTokens = activity.tokens ?? activity.tokensUsed ?? 0 %}
                {% set actEnergy = activity.energy ?? activity.energyConsumedWh ?? 0 %}
                {% set actDate = activity.date ?? activity.createdAt %}

                {# Couleur par outil (via global tool_colors + tool_color_details depuis la DB) #}
                {% set atc = tool_colors[toolCode|lower] ?? 'primary' %}
                {% set atHex = (tool_color_details[toolCode|lower] ?? {}).primary ?? null %}
                {% set atHexSecondary = (tool_color_details[toolCode|lower] ?? {}).secondary ?? null %}

                <div class="flex items-center gap-4 px-6 py-4 hover:bg-gray-50/50 transition-colors duration-200">

                    {# Icône outil #}
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0 {{ atHex ? '' : 'bg-' ~ atc ~ '/8 border border-' ~ atc ~ '/12' }}"
                         {% if atHex %}style="background: {{ atHex }}18; border: 1px solid {{ atHex }}30;"{% endif %}>
                        {% include '_atoms/icon/icon.html.twig' with {
                            name: 'bubul-' ~ toolCode|lower,
                            size: 'md',
                            color: atc,
                            colorPrimary: atHex,
                            colorSecondary: atHexSecondary
                        } only %}
                    </div>

                    {# Titre #}
                    <div class="flex-1 min-w-0">
                        <div class="text-sm font-medium text-gray-800 truncate">{{ actTitle }}</div>
                    </div>

                    {# Date + heure #}
                    <div class="text-right shrink-0">
                        <div class="text-xs font-medium text-gray-500">
                            {{ actDate|format_datetime('short', 'none', locale='fr') }}
                        </div>
                        <div class="text-[11px] text-gray-300 mt-0.5">
                            {{ actDate|date('H:i') }}
                        </div>
                    </div>

                    {# Tokens #}
                    <div class="flex items-center gap-1.5 shrink-0">
                        {% include '_atoms/icon/icon.html.twig' with {
                            name: 'token',
                            size: 'xs',
                            color: 'primary'
                        } only %}
                        <span class="text-[11px] font-semibold text-primary tabular-nums">
                            {{ actTokens|format_number(locale='fr') }}
                        </span>
                    </div>

                    {# Énergie (Wh) en jaune/warning #}
                    <div class="flex items-center gap-1.5 shrink-0">
                        {% include '_atoms/icon/icon.html.twig' with {
                            name: 'bolt',
                            size: 'xs',
                            color: 'warning'
                        } only %}
                        <span class="text-[11px] font-semibold text-warning tabular-nums">
                            {{ actEnergy|number_format(2, ',', ' ') }} Wh
                        </span>
                    </div>
                </div>
            {% endfor %}
        </div>


    {% else %}
        <div class="p-6">
            {% include '_molecules/empty-state/empty-state.html.twig' with {
                title: 'Aucune activité récente',
                description: 'Vos activités apparaîtront ici.',
                icon: 'clock',
                size: 'sm'
            } only %}
        </div>
    {% endif %}
</div>