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

{% block title %}Historique des activités{% endblock %}

{% block page_title %}Historique des activités{% 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">Historique des activités</h2>
            <p class="text-gray-600 mt-1">
                {% if is_admin %}
                    Toutes les activités du système
                {% else %}
                    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_stats') }}" 
               class="inline-flex items-center px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium rounded-lg transition-colors duration-200">
                <i class="fas fa-chart-bar mr-2"></i>
                Statistiques
            </a>
            <a href="{{ path('app_history_export', {entity_type: current_entity_type, limit: limit}) }}" 
               class="inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-lg transition-colors duration-200">
                <i class="fas fa-download mr-2"></i>
                Exporter CSV
            </a>
            <a href="{{ path('app_history_export_pdf', {entity_type: current_entity_type, limit: limit}) }}" 
               class="inline-flex items-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-lg transition-colors duration-200">
                <i class="fas fa-file-pdf mr-2"></i>
                Exporter PDF
            </a>
        </div>
    </div>

    <!-- Statistiques rapides -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-list text-blue-600"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">Total d'activités</p>
                    <p class="text-2xl font-semibold text-gray-900">{{ histories|length }}</p>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-plus text-green-600"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">Créations</p>
                    <p class="text-2xl font-semibold text-gray-900">{{ action_stats.CREATE ?? 0 }}</p>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-yellow-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-edit text-yellow-600"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">Modifications</p>
                    <p class="text-2xl font-semibold text-gray-900">{{ action_stats.UPDATE ?? 0 }}</p>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-trash text-red-600"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">Suppressions</p>
                    <p class="text-2xl font-semibold text-gray-900">{{ action_stats.DELETE ?? 0 }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtres -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Filtres</h3>
        <form method="GET" class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label for="entity_type" class="block text-sm font-medium text-gray-700 mb-2">Type d'entité</label>
                <select id="entity_type" name="entity_type" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="">Toutes les entités</option>
                    <option value="User" {{ current_entity_type == 'User' ? 'selected' : '' }}>Utilisateurs</option>
                    <option value="Team" {{ current_entity_type == 'Team' ? 'selected' : '' }}>Équipes</option>
                    <option value="Role" {{ current_entity_type == 'Role' ? 'selected' : '' }}>Rôles</option>
                    <option value="Survey" {{ current_entity_type == 'Survey' ? 'selected' : '' }}>Enquêtes</option>
                    <option value="Task" {{ current_entity_type == 'Task' ? 'selected' : '' }}>Tâches</option>
                    <option value="Project" {{ current_entity_type == 'Project' ? 'selected' : '' }}>Projets</option>
                </select>
            </div>
            
            <div>
                <label for="limit" class="block text-sm font-medium text-gray-700 mb-2">Nombre d'éléments</label>
                <select id="limit" name="limit" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="25" {{ limit == 25 ? 'selected' : '' }}>25</option>
                    <option value="50" {{ limit == 50 ? 'selected' : '' }}>50</option>
                    <option value="100" {{ limit == 100 ? 'selected' : '' }}>100</option>
                    <option value="200" {{ limit == 200 ? 'selected' : '' }}>200</option>
                </select>
            </div>
            
            <div class="flex items-end">
                <button type="submit" class="w-full 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-filter mr-2"></i>
                    Appliquer les filtres
                </button>
            </div>
        </form>
    </div>

    <!-- Liste des historiques -->
    <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és récentes</h3>
        </div>
        <div class="p-6">
            {% if histories is empty %}
                <div class="text-center py-12">
                    <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-history text-gray-400 text-xl"></i>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">Aucune activité</h3>
                    <p class="text-gray-500">Aucune activité ne correspond aux critères sélectionnés</p>
                </div>
            {% else %}
                <div class="space-y-4">
                    {% for history in histories %}
                        <div class="flex items-start space-x-4 p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors duration-200">
                            <div class="flex-shrink-0">
                                <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center border border-gray-200">
                                    <i class="{{ history.actionIcon }}"></i>
                                </div>
                            </div>
                            
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center space-x-2">
                                        <span class="text-sm font-medium text-gray-900">{{ history.user.fullName }}</span>
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                            {{ history.actionLabel }}
                                        </span>
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                            {{ history.entityLabel }}
                                        </span>
                                    </div>
                                    <time class="text-sm text-gray-500" title="{{ history.createdAt|date('Y-m-d H:i:s') }}">
                                        {{ history.createdAt|date('d/m/Y H:i') }}
                                    </time>
                                </div>
                                
                                {% if history.description %}
                                    <p class="text-sm text-gray-600 mt-1">{{ history.description }}</p>
                                {% endif %}
                                
                                <div class="flex items-center space-x-4 mt-2 text-xs text-gray-500">
                                    {% if history.team %}
                                        <span>
                                            <i class="fas fa-users mr-1"></i>
                                            {{ history.team.name }}
                                        </span>
                                    {% endif %}
                                    {% if history.ipAddress %}
                                        <span>
                                            <i class="fas fa-globe mr-1"></i>
                                            {{ history.ipAddress }}
                                        </span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}