{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}Activités du Système{% endblock %}

{% block content %}
<div class="mb-8">
    <div class="sm:flex sm:items-center sm:justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Activités</h1>
            <p class="mt-2 text-sm text-gray-700">Historique complet des activités du système</p>
        </div>
        <div class="mt-4 sm:mt-0 flex space-x-3">
            <a href="{{ path('admin_activities_security') }}" class="inline-flex items-center px-4 py-2 border border-red-300 shadow-sm text-sm font-medium rounded-md text-red-700 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                <i class="fas fa-shield-alt mr-2"></i>
                Événements de sécurité
            </a>
            <a href="{{ path('admin_activities_suspicious') }}" class="inline-flex items-center px-4 py-2 border border-yellow-300 shadow-sm text-sm font-medium rounded-md text-yellow-700 bg-white hover:bg-yellow-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500">
                <i class="fas fa-exclamation-triangle mr-2"></i>
                Activités suspectes
            </a>
        </div>
    </div>
</div>

{# Statistics Cards #}
<div class="grid grid-cols-1 gap-5 sm:grid-cols-3 mb-6">
    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-history text-3xl text-blue-500"></i>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Total Aujourd'hui</dt>
                        <dd class="text-2xl font-semibold text-gray-900">{{ stats.total_today|default(0) }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-shield-alt text-3xl text-red-500"></i>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Sécurité Aujourd'hui</dt>
                        <dd class="text-2xl font-semibold text-gray-900">{{ stats.security_today|default(0) }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-triangle text-3xl text-yellow-500"></i>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Suspectes Aujourd'hui</dt>
                        <dd class="text-2xl font-semibold text-gray-900">{{ stats.suspicious_today|default(0) }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>

{# Filters #}
<div class="bg-white shadow rounded-lg mb-6">
    <div class="px-4 py-5 sm:p-6">
        <form method="get" action="{{ path('admin_activities_index') }}" data-controller="form-submit" class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
            <div>
                <label for="activityType" class="block text-sm font-medium text-gray-700 mb-1">Type d'activité</label>
                <input type="text" name="activityType" id="activityType" value="{{ filters.activityType|default('') }}"
                       class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                       placeholder="Ex: login, logout...">
            </div>

            <div>
                <label for="activityCategory" class="block text-sm font-medium text-gray-700 mb-1">Catégorie</label>
                <input type="text" name="activityCategory" id="activityCategory" value="{{ filters.activityCategory|default('') }}"
                       class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                       placeholder="Ex: Auth, Security...">
            </div>

            <div>
                <label for="isSecurityRelated" class="block text-sm font-medium text-gray-700 mb-1">Liée à la sécurité</label>
                <select name="isSecurityRelated" id="isSecurityRelated" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    <option value="">Toutes</option>
                    <option value="1" {{ filters.isSecurityRelated is defined and filters.isSecurityRelated == true ? 'selected' : '' }}>Oui</option>
                    <option value="0" {{ filters.isSecurityRelated is defined and filters.isSecurityRelated == false ? 'selected' : '' }}>Non</option>
                </select>
            </div>

            <div>
                <label for="isSuspicious" class="block text-sm font-medium text-gray-700 mb-1">Suspecte</label>
                <select name="isSuspicious" id="isSuspicious" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    <option value="">Toutes</option>
                    <option value="1" {{ filters.isSuspicious is defined and filters.isSuspicious == true ? 'selected' : '' }}>Oui</option>
                    <option value="0" {{ filters.isSuspicious is defined and filters.isSuspicious == false ? 'selected' : '' }}>Non</option>
                </select>
            </div>

            <div>
                <label for="dateFrom" class="block text-sm font-medium text-gray-700 mb-1">Date début</label>
                <input type="date" name="dateFrom" id="dateFrom" value="{{ filters.dateFrom is defined and filters.dateFrom ? filters.dateFrom|date('Y-m-d') : '' }}"
                       class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
            </div>

            <div>
                <label for="dateTo" class="block text-sm font-medium text-gray-700 mb-1">Date fin</label>
                <input type="date" name="dateTo" id="dateTo" value="{{ filters.dateTo is defined and filters.dateTo ? filters.dateTo|date('Y-m-d') : '' }}"
                       class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
            </div>

            <div class="sm:col-span-2 lg:col-span-3 flex justify-end space-x-3">
                <a href="{{ path('admin_activities_index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    <i class="fas fa-redo mr-2"></i>
                    Réinitialiser
                </a>
                <button type="submit" data-form-submit-target="submit" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    <i class="fas fa-filter mr-2"></i>
                    <span data-form-submit-target="buttonText">Filtrer</span>
                    <span data-form-submit-target="spinner" class="hidden ml-2">
                        <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                    </span>
                </button>
            </div>
        </form>
    </div>
</div>

{# Activities Table #}
<div class="bg-white shadow rounded-lg overflow-hidden">
    {# Desktop Table #}
    <div class="hidden lg:block overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Utilisateur
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Type
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Catégorie
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Description
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        IP
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Date
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% if activities is empty %}
                    <tr>
                        <td colspan="6" class="px-6 py-12 text-center text-sm text-gray-500">
                            <i class="fas fa-history text-4xl text-gray-300 mb-3"></i>
                            <p>Aucune activité trouvée</p>
                        </td>
                    </tr>
                {% else %}
                    {% for activity in activities %}
                        <tr class="{{ activity.isSuspicious ? 'bg-yellow-50' : (activity.isSecurityRelated ? 'bg-red-50' : '') }}">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                {% if activity.user %}
                                    <a href="{{ path('admin_users_show', {id: activity.user.id}) }}" class="text-blue-600 hover:text-blue-900">
                                        {{ activity.user.email }}
                                    </a>
                                {% else %}
                                    <span class="text-gray-400">Système</span>
                                {% endif %}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {% if activity.isSuspicious %}
                                    <i class="fas fa-exclamation-triangle text-yellow-600 mr-1"></i>
                                {% elseif activity.isSecurityRelated %}
                                    <i class="fas fa-shield-alt text-red-600 mr-1"></i>
                                {% endif %}
                                {{ activity.activityType }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                    {{ activity.activityCategory }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-500">
                                {{ activity.description|default('')|u.truncate(60, '...') }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-500">
                                {{ activity.ipAddress|default('N/A') }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ activity.createdAt|date('d/m/Y H:i') }}
                            </td>
                        </tr>
                    {% endfor %}
                {% endif %}
            </tbody>
        </table>
    </div>

    {# Mobile Cards #}
    <div class="lg:hidden">
        {% if activities is empty %}
            <div class="p-12 text-center text-gray-500">
                <i class="fas fa-history text-4xl text-gray-300 mb-3"></i>
                <p>Aucune activité trouvée</p>
            </div>
        {% else %}
            <div class="p-4 space-y-4">
                {% for activity in activities %}
                    {% include 'admin/components/cards/activities_card.html.twig' with {item: activity} %}
                {% endfor %}
            </div>
        {% endif %}
    </div>

    {# Pagination #}
    {% if activities.pageCount > 1 %}
        <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
            <div class="flex-1 flex justify-between sm:hidden">
                {% if activities.currentPageNumber > 1 %}
                    <a href="{{ path('admin_activities_index', app.request.query.all|merge({page: activities.currentPageNumber - 1})) }}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        Précédent
                    </a>
                {% endif %}
                {% if activities.currentPageNumber < activities.pageCount %}
                    <a href="{{ path('admin_activities_index', app.request.query.all|merge({page: activities.currentPageNumber + 1})) }}" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        Suivant
                    </a>
                {% endif %}
            </div>
            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                <div>
                    <p class="text-sm text-gray-700">
                        Affichage de
                        <span class="font-medium">{{ activities|length > 0 ? ((activities.getCurrentPageNumber - 1) * activities.getItemNumberPerPage + 1) : 0 }}</span>
                        à
                        <span class="font-medium">{{ ((activities.getCurrentPageNumber - 1) * activities.getItemNumberPerPage) + activities|length }}</span>
                        sur
                        <span class="font-medium">{{ activities.getTotalItemCount }}</span>
                        résultats
                    </p>
                </div>
                <div>
                    {{ knp_pagination_render(activities) }}
                </div>
            </div>
        </div>
    {% endif %}
</div>
{% endblock %}