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

{% block title %}Statistiques d'activité{% endblock %}

{% block page_title %}Statistiques d'activité{% endblock %}

{% block body %}
<div class="space-y-6">
    <!-- Header avec actions -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h2 class="text-2xl font-bold text-gray-900">Statistiques d'activité</h2>
            <p class="text-gray-600 mt-1">
                {% if is_admin %}
                    Aperçu global des activités du système
                {% else %}
                    Aperçu de vos activités et celles de {{ current_user.teams|length > 1 ? 'vos équipes' : (current_user.teams|length == 1 ? 'votre équipe' : 'votre compte') }}
                {% endif %}
            </p>
        </div>
        <div class="mt-4 sm:mt-0 flex space-x-3">
            <a href="{{ path('app_history_index') }}" 
               class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors duration-200">
                <i class="fas fa-arrow-left mr-2"></i>
                Retour à l'historique
            </a>
        </div>
    </div>

    <!-- Statistiques par type d'action -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-900">Répartition par type d'action</h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                {% set total_actions = 0 %}
                {% for count in action_stats %}
                    {% set total_actions = total_actions + count %}
                {% endfor %}

                {% for action, count in action_stats %}
                    {% set percentage = total_actions > 0 ? (count / total_actions * 100)|round : 0 %}
                    <div class="text-center">
                        <div class="w-20 h-20 mx-auto mb-4 relative">
                            <svg class="w-20 h-20 transform -rotate-90" viewBox="0 0 36 36">
                                <path
                                    class="text-gray-200"
                                    stroke="currentColor"
                                    stroke-width="3"
                                    fill="none"
                                    d="M18 2.0845
                                       a 15.9155 15.9155 0 0 1 0 31.831
                                       a 15.9155 15.9155 0 0 1 0 -31.831"
                                />
                                <path
                                    class="
                                    {% if action == 'CREATE' %}text-green-500
                                    {% elseif action == 'UPDATE' %}text-blue-500
                                    {% elseif action == 'DELETE' %}text-red-500
                                    {% elseif action == 'LOGIN' %}text-purple-500
                                    {% else %}text-gray-500
                                    {% endif %}
                                    "
                                    stroke="currentColor"
                                    stroke-width="3"
                                    stroke-linecap="round"
                                    fill="none"
                                    stroke-dasharray="{{ percentage }}, 100"
                                    d="M18 2.0845
                                       a 15.9155 15.9155 0 0 1 0 31.831
                                       a 15.9155 15.9155 0 0 1 0 -31.831"
                                />
                            </svg>
                            <div class="absolute inset-0 flex items-center justify-center">
                                <span class="text-xl font-bold text-gray-900">{{ percentage }}%</span>
                            </div>
                        </div>
                        <div class="text-center">
                            <p class="text-sm font-medium text-gray-900">
                                {% if action == 'CREATE' %}Créations
                                {% elseif action == 'UPDATE' %}Modifications
                                {% elseif action == 'DELETE' %}Suppressions
                                {% elseif action == 'LOGIN' %}Connexions
                                {% elseif action == 'LOGOUT' %}Déconnexions
                                {% elseif action == 'VIEW' %}Consultations
                                {% else %}{{ action }}
                                {% endif %}
                            </p>
                            <p class="text-2xl font-bold 
                            {% if action == 'CREATE' %}text-green-600
                            {% elseif action == 'UPDATE' %}text-blue-600
                            {% elseif action == 'DELETE' %}text-red-600
                            {% elseif action == 'LOGIN' %}text-purple-600
                            {% else %}text-gray-600
                            {% endif %}
                            ">{{ count }}</p>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Activité quotidienne -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-900">Activité des 30 derniers jours</h3>
        </div>
        <div class="p-6">
            <div class="relative">
                <div class="flex items-end justify-between h-64 space-x-1">
                    {% set max_activity = 0 %}
                    {% for date, count in daily_activity %}
                        {% if count > max_activity %}
                            {% set max_activity = count %}
                        {% endif %}
                    {% endfor %}

                    {% for date, count in daily_activity %}
                        {% set height = max_activity > 0 ? (count / max_activity * 100) : 0 %}
                        <div class="flex flex-col items-center group relative">
                            <div class="w-4 bg-blue-500 rounded-t transition-all duration-200 hover:bg-blue-600" 
                                 style="height: {{ height > 0 ? height : 2 }}%"
                                 title="{{ date }}: {{ count }} activité{{ count > 1 ? 's' : '' }}">
                            </div>
                            <span class="text-xs text-gray-500 mt-2 transform rotate-45 origin-top-left">
                                {{ date|date('d/m') }}
                            </span>
                            
                            <!-- Tooltip -->
                            <div class="absolute bottom-full mb-2 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-xs rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-10">
                                {{ date|date('d/m/Y') }}: {{ count }} activité{{ count > 1 ? 's' : '' }}
                                <div class="absolute top-full left-1/2 transform -translate-x-1/2 border-2 border-transparent border-t-gray-900"></div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                
                <!-- Axe Y -->
                <div class="absolute left-0 top-0 h-64 flex flex-col justify-between text-xs text-gray-500 -ml-8">
                    <span>{{ max_activity }}</span>
                    <span>{{ (max_activity * 0.75)|round }}</span>
                    <span>{{ (max_activity * 0.5)|round }}</span>
                    <span>{{ (max_activity * 0.25)|round }}</span>
                    <span>0</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Résumé -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-sm text-white p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                        <i class="fas fa-calendar-day text-white"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-blue-100 text-sm font-medium">Activité d'aujourd'hui</p>
                    <p class="text-2xl font-semibold">
                        {{ daily_activity['now'|date('Y-m-d')] ?? 0 }}
                    </p>
                </div>
            </div>
        </div>
        
        <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-xl shadow-sm text-white p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                        <i class="fas fa-calendar-week text-white"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-green-100 text-sm font-medium">Cette semaine</p>
                    <p class="text-2xl font-semibold">
                        {% set week_total = 0 %}
                        {% for i in 0..6 %}
                            {% set date = ('now'|date_modify('-' ~ i ~ ' days'))|date('Y-m-d') %}
                            {% set week_total = week_total + (daily_activity[date] ?? 0) %}
                        {% endfor %}
                        {{ week_total }}
                    </p>
                </div>
            </div>
        </div>
        
        <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl shadow-sm text-white p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                        <i class="fas fa-calendar-alt text-white"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-purple-100 text-sm font-medium">Ce mois</p>
                    <p class="text-2xl font-semibold">
                        {% set month_total = 0 %}
                        {% for date, count in daily_activity %}
                            {% set month_total = month_total + count %}
                        {% endfor %}
                        {{ month_total }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}