{% extends 'base.html.twig' %}

{% block title %}{{ isViewingOtherUser ? 'Activités de ' ~ viewedUser.fullName : 'Historique d\'activité' }} - Bubul{% endblock %}

{% block meta_description %}Consultez l'historique complet de vos activités sur Bubul.{% endblock %}

{# Macro pour construire les URLs de filtre en conservant les params existants #}
{% macro filter_url(tool, sort, dir, page, uuid) %}
    {% set params = {} %}
    {% if uuid is not null %}{% set params = params|merge({uuid: uuid}) %}{% endif %}
    {% if tool is not null %}{% set params = params|merge({tool: tool}) %}{% endif %}
    {% if sort is not null and sort != 'date' %}{% set params = params|merge({sort: sort}) %}{% endif %}
    {% if dir is not null and dir != 'desc' %}{% set params = params|merge({dir: dir}) %}{% endif %}
    {% if page is not null and page > 1 %}{% set params = params|merge({page: page}) %}{% endif %}
    {{ path('app_activity_history', params) }}
{% endmacro %}

{% set targetUuid = isViewingOtherUser ? viewedUser.uuid : null %}

{# @tailwind-safelist (classes dynamiques construites à partir de tool_colors)
   bg-primary/10 bg-cohorts/10 bg-warning/10 bg-pink/10 bg-success/10 bg-info/10
   text-primary text-cohorts text-warning text-pink text-success text-info
#}

{# Couleurs dérivées du global tool_colors (source : Tool entity en base) #}
{% set toolBgColors = {} %}
{% for code, token in tool_colors %}
    {% set toolBgColors = toolBgColors|merge({(code): 'bg-' ~ token ~ '/10 text-' ~ token}) %}
{% endfor %}

{% block body %}
<div class="max-w-[1100px] mx-auto"
     data-controller="activity-filter"
     data-activity-filter-chart-data-value="{{ chartData|json_encode|e('html_attr') }}"
     data-activity-filter-colors-value="{{ tool_color_hex|json_encode|e('html_attr') }}"
     data-activity-filter-labels-value="{{ tools|reduce((carry, t) => carry|merge({(t.code): t.name}), {})|json_encode|e('html_attr') }}">

    {# ====================================================================
       EN-TÊTE DE PAGE
       ==================================================================== #}

    <header class="mb-8">
        {# Lien retour #}
        {% if isViewingOtherUser %}
            <a href="{{ path('admin_user_show', {uuid: viewedUser.uuid}) }}"
               class="inline-flex items-center gap-1.5 text-sm text-gray-400 hover:text-primary transition-colors mb-4">
                {% include '_atoms/icon/icon.html.twig' with { name: 'chevron-left', size: 'sm', color: 'current' } only %}
                Retour à la fiche utilisateur
            </a>
        {% else %}
            <a href="{{ path('app_dashboard') }}"
               class="inline-flex items-center gap-1.5 text-sm text-gray-400 hover:text-primary transition-colors mb-4">
                {% include '_atoms/icon/icon.html.twig' with { name: 'chevron-left', size: 'sm', color: 'current' } only %}
                Retour au dashboard
            </a>
        {% endif %}

        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <div class="flex items-center gap-4">
                <div class="shrink-0 w-14 h-14 flex items-center justify-center bg-gradient-to-br from-primary/10 to-primary/5 rounded-2xl border border-primary/10">
                    {% include '_atoms/icon/icon.html.twig' with {
                        name: 'clock',
                        size: 'xl',
                        color: 'primary'
                    } only %}
                </div>
                <div>
                    <h1 class="text-2xl font-bold text-black font-secondary tracking-tight">
                        {{ isViewingOtherUser ? 'Activités de ' ~ viewedUser.fullName : 'Historique d\'activité' }}
                    </h1>
                    <p class="text-sm text-gray-500">
                        {{ isViewingOtherUser ? 'Utilisations de ' ~ viewedUser.fullName ~ ' sur les 30 derniers jours' : '30 derniers jours d\'utilisation des outils Bubul' }}
                    </p>
                </div>
            </div>

            {# Badge nombre total #}
            <div class="flex-shrink-0">
                <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-primary/10 text-primary text-sm font-semibold tabular-nums">
                    {{ totalActivities }}
                    <span class="text-primary/60 font-normal">activité{{ totalActivities > 1 ? 's' : '' }}</span>
                </span>
            </div>
        </div>
    </header>

    {# ====================================================================
       FILTRES : Outils + Tri
       ==================================================================== #}

    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
        {# Filtres outils (dynamique depuis la base de données) #}
        {% set toolFiltersList = [
            { id: 'all', label: 'Tous', href: (_self.filter_url(null, currentSort, currentDir, null, targetUuid))|trim }
        ] %}
        {% for tool in tools %}
            {% set toolFiltersList = toolFiltersList|merge([{
                id: tool.code,
                label: tool.name,
                href: (_self.filter_url(tool.code, currentSort, currentDir, null, targetUuid))|trim
            }]) %}
        {% endfor %}

        {% include '_molecules/filter-tabs/filter-tabs.html.twig' with {
            filters: toolFiltersList,
            active: currentTool ?? 'all',
            size: 'md',
            name: 'tool'
        } only %}

        {# Tri (molecule filter-tabs Moodia) #}
        {% set nextDirDate = (currentSort == 'date') ? (currentDir == 'desc' ? 'asc' : 'desc') : 'desc' %}
        {% set nextDirTokens = (currentSort == 'tokens') ? (currentDir == 'desc' ? 'asc' : 'desc') : 'desc' %}
        {% set nextDirEnergy = (currentSort == 'energy') ? (currentDir == 'desc' ? 'asc' : 'desc') : 'desc' %}

        {% set sortFiltersList = [
            { id: 'date', label: 'Date ' ~ (currentSort == 'date' and currentDir == 'asc' ? '↑' : '↓'), href: (_self.filter_url(currentTool, 'date', nextDirDate, null, targetUuid))|trim },
            { id: 'tokens', label: 'Tokens ' ~ (currentSort == 'tokens' and currentDir == 'asc' ? '↑' : '↓'), href: (_self.filter_url(currentTool, 'tokens', nextDirTokens, null, targetUuid))|trim },
            { id: 'energy', label: 'Énergie ' ~ (currentSort == 'energy' and currentDir == 'asc' ? '↑' : '↓'), href: (_self.filter_url(currentTool, 'energy', nextDirEnergy, null, targetUuid))|trim }
        ] %}

        {% include '_molecules/filter-tabs/filter-tabs.html.twig' with {
            filters: sortFiltersList,
            active: currentSort,
            size: 'md',
            name: 'sort'
        } only %}
    </div>

    {# ====================================================================
       GRAPHIQUE DE CONSOMMATION
       ==================================================================== #}

    <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden mb-8">
        <div class="p-6 sm:p-8">
            <div class="flex items-center justify-between mb-6">
                <div class="flex items-center gap-3">
                    <h3 class="text-lg font-semibold text-gray-900 font-secondary">Consommation</h3>
                    <span class="text-[11px] font-medium text-gray-400 px-2 py-0.5 bg-gray-100 rounded-md">J-30</span>
                </div>
                <span class="text-xs font-medium text-gray-400 px-2.5 py-1 bg-gray-100 rounded-full"
                      data-activity-filter-target="chartMetricLabel">{{ currentSort == 'energy' ? 'Énergie (Wh)' : 'Tokens' }}</span>
            </div>
            <div class="h-[280px]">
                <canvas data-activity-filter-target="chart"></canvas>
            </div>
        </div>
    </div>

    {# ====================================================================
       LISTE DES ACTIVITÉS
       ==================================================================== #}

    {% include '_molecules/section-divider/section-divider.html.twig' with {
        title: 'Détail des <span class="italic text-primary">activités</span>',
        icon: 'clock',
        iconColor: 'primary'
    } only %}

    <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="p-6 sm:p-8" data-activity-filter-target="list">
            {% if activities|length > 0 %}
                <div class="flex flex-col gap-3">
                    {% for activity in activities %}
                        {# Résoudre le type d'outil #}
                        {% if activity.tool is defined and activity.tool %}
                            {% set toolCode = activity.tool.code %}
                            {% set toolName = activity.tool.name %}
                        {% elseif activity.type is defined %}
                            {% set toolCode = activity.type|lower %}
                            {% set toolName = toolCode|capitalize %}
                        {% else %}
                            {% set toolCode = 'moodia' %}
                            {% set toolName = 'Moodia' %}
                        {% endif %}
                        {% set tokensValue = activity.tokens is defined ? activity.tokens : (activity.tokensUsed is defined ? activity.tokensUsed : 0) %}
                        {% set energyValue = activity.energy is defined ? activity.energy : (activity.energyConsumedWh is defined ? activity.energyConsumedWh : 0) %}
                        {% set activityDate = activity.date is defined ? activity.date : activity.createdAt %}
                        {% set activityTitle = activity.title is defined ? activity.title : (activity.description is defined ? activity.description : 'Activité') %}

                        {% set aHex = (tool_color_details[toolCode] ?? {}).primary ?? null %}
                        {% set aHexSecondary = (tool_color_details[toolCode] ?? {}).secondary ?? null %}

                        <div class="flex items-center gap-4 p-4 rounded-xl border border-gray-100
                                    transition-all duration-base hover:border-gray-200 hover:bg-gray-50/50"
                             data-activity-item data-tool="{{ toolCode }}" data-tokens="{{ tokensValue }}"
                             data-energy="{{ energyValue }}" data-date="{{ activityDate|date('Y-m-d H:i:s') }}">

                            {# Icône outil #}
                            <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 {{ aHex ? '' : toolBgColors[toolCode]|default('bg-gray-100 text-gray-500') }}"
                                 {% if aHex %}style="background: {{ aHex }}18;"{% endif %}>
                                {% include '_atoms/icon/icon.html.twig' with {
                                    name: 'bubul-' ~ toolCode,
                                    size: 'md',
                                    color: tool_colors[toolCode]|default('gray'),
                                    colorPrimary: aHex,
                                    colorSecondary: aHexSecondary
                                } only %}
                            </div>

                            {# Contenu #}
                            <div class="flex-1 min-w-0">
                                <h4 class="text-sm font-medium text-gray-900 truncate">{{ activityTitle }}</h4>
                                <div class="flex items-center gap-3 mt-1">
                                    {# Tokens (primary = bleu) #}
                                    <span class="inline-flex items-center gap-1 text-sm font-medium text-primary">
                                        {% include '_atoms/icon/icon.html.twig' with { name: 'token', size: 'xs', color: 'primary' } only %}
                                        {{ tokensValue|number_format(0, ',', ' ') }}
                                    </span>
                                    {# Énergie (warning = orange) #}
                                    <span class="inline-flex items-center gap-1 text-sm font-medium text-warning">
                                        {% include '_atoms/icon/icon.html.twig' with { name: 'bolt', size: 'xs', color: 'warning' } only %}
                                        {{ energyValue|number_format(4, ',', ' ') }} Wh
                                    </span>
                                </div>
                            </div>

                            {# Date #}
                            <time class="text-xs text-gray-400 flex-shrink-0 hidden sm:block">
                                {{ activityDate|format_datetime('long', 'none', locale='fr') }}
                            </time>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                {# État vide #}
                <div class="flex flex-col items-center justify-center py-16 text-center">
                    <div class="w-16 h-16 flex items-center justify-center bg-gray-100 rounded-2xl mb-4">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'clock', size: 'xl', color: 'gray' } only %}
                    </div>
                    <p class="text-base font-semibold text-gray-700 mb-1">Aucune activité trouvée</p>
                    <p class="text-sm text-gray-400 max-w-sm">
                        {% if currentTool is not null %}
                            Aucune activité pour cet outil.
                            <a href="{{ path('app_activity_history', targetUuid ? {uuid: targetUuid} : {}) }}"
                               class="text-primary hover:underline">Voir toutes les activités</a>
                        {% elseif isViewingOtherUser %}
                            Cet utilisateur n'a pas encore d'activités.
                        {% else %}
                            Vos activités apparaîtront ici une fois que vous aurez utilisé les outils.
                        {% endif %}
                    </p>
                </div>
            {% endif %}
        </div>
    </div>

    {# ====================================================================
       PAGINATION (molecule Moodia)
       ==================================================================== #}

    <div class="mt-6">
        {% include '_molecules/pagination/pagination.html.twig' with {
            currentPage: currentPage,
            totalPages: totalPages,
            baseUrl: (_self.filter_url(currentTool, currentSort, currentDir, null, targetUuid))|trim,
            variant: 'moodia'
        } only %}
    </div>
</div>
{% endblock %}