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

{% block page_title %}Requêtes HTTP{% endblock %}

{% block content %}
<div class="mb-8">
    <div>
        <h1 class="text-3xl font-bold text-gray-900">Requêtes HTTP</h1>
        <p class="mt-2 text-sm text-gray-700">Journal de toutes les requêtes HTTP du système</p>
    </div>
</div>

{# Filters #}
<div class="bg-white shadow rounded-lg overflow-hidden mb-6">
    <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
        <h3 class="text-lg leading-6 font-medium text-gray-900">
            <i class="fas fa-filter text-gray-400 mr-2"></i>
            Filtres de Recherche
        </h3>
    </div>
    <div class="px-4 py-5 sm:p-6">
        <form method="get" action="{{ path('admin_security_http_requests') }}" data-controller="form-submit" class="space-y-4">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                {# Méthode HTTP #}
                <div>
                    <label for="method" class="block text-sm font-medium text-gray-700 mb-1">Méthode HTTP</label>
                    <select name="method" id="method"
                            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 les méthodes</option>
                        <option value="GET" {{ filters.method is defined and filters.method == 'GET' ? 'selected' : '' }}>GET</option>
                        <option value="POST" {{ filters.method is defined and filters.method == 'POST' ? 'selected' : '' }}>POST</option>
                        <option value="PUT" {{ filters.method is defined and filters.method == 'PUT' ? 'selected' : '' }}>PUT</option>
                        <option value="DELETE" {{ filters.method is defined and filters.method == 'DELETE' ? 'selected' : '' }}>DELETE</option>
                        <option value="PATCH" {{ filters.method is defined and filters.method == 'PATCH' ? 'selected' : '' }}>PATCH</option>
                    </select>
                </div>

                {# Code Statut #}
                <div>
                    <label for="statusCode" class="block text-sm font-medium text-gray-700 mb-1">Code Statut</label>
                    <select name="statusCode" id="statusCode"
                            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="">Tous les codes</option>
                        <option value="200" {{ filters.statusCode is defined and filters.statusCode == 200 ? 'selected' : '' }}>200 - OK</option>
                        <option value="201" {{ filters.statusCode is defined and filters.statusCode == 201 ? 'selected' : '' }}>201 - Created</option>
                        <option value="400" {{ filters.statusCode is defined and filters.statusCode == 400 ? 'selected' : '' }}>400 - Bad Request</option>
                        <option value="401" {{ filters.statusCode is defined and filters.statusCode == 401 ? 'selected' : '' }}>401 - Unauthorized</option>
                        <option value="403" {{ filters.statusCode is defined and filters.statusCode == 403 ? 'selected' : '' }}>403 - Forbidden</option>
                        <option value="404" {{ filters.statusCode is defined and filters.statusCode == 404 ? 'selected' : '' }}>404 - Not Found</option>
                        <option value="500" {{ filters.statusCode is defined and filters.statusCode == 500 ? 'selected' : '' }}>500 - Internal Error</option>
                    </select>
                </div>

                {# Type de Route #}
                <div>
                    <label for="routeType" class="block text-sm font-medium text-gray-700 mb-1">Type de Route</label>
                    <select name="routeType" id="routeType"
                            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="">Tous les types</option>
                        <option value="api" {{ filters.routeType is defined and filters.routeType == 'api' ? 'selected' : '' }}>API</option>
                        <option value="web" {{ filters.routeType is defined and filters.routeType == 'web' ? 'selected' : '' }}>WEB</option>
                    </select>
                </div>

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

                {# Erreur #}
                <div>
                    <label for="isError" class="block text-sm font-medium text-gray-700 mb-1">Requêtes avec erreur</label>
                    <select name="isError" id="isError"
                            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.isError is defined and filters.isError == true ? 'selected' : '' }}>Avec erreur uniquement</option>
                        <option value="0" {{ filters.isError is defined and filters.isError == false ? 'selected' : '' }}>Sans erreur uniquement</option>
                    </select>
                </div>

                {# Suspecte #}
                <div>
                    <label for="isSuspicious" class="block text-sm font-medium text-gray-700 mb-1">Requêtes suspectes</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' : '' }}>Suspectes uniquement</option>
                        <option value="0" {{ filters.isSuspicious is defined and filters.isSuspicious == false ? 'selected' : '' }}>Normales uniquement</option>
                    </select>
                </div>
            </div>

            {# Action Buttons #}
            <div class="flex justify-between items-center pt-4 border-t border-gray-200">
                <div class="text-sm text-gray-500">
                    <i class="fas fa-info-circle mr-1"></i>
                    Utilisez les filtres pour affiner votre recherche
                </div>
                <div class="flex space-x-3">
                    <a href="{{ path('admin_security_http_requests') }}"
                       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 transition-colors">
                        <i class="fas fa-times 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 transition-colors">
                        <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>
            </div>
        </form>
    </div>
</div>

{# HTTP Requests 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">
                        Méthode
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        URL
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Statut
                    </th>
                    <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">
                        IP
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Date
                    </th>
                    <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Actions
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% if http_requests is empty %}
                    <tr>
                        <td colspan="7" class="px-6 py-12 text-center text-sm text-gray-500">
                            <i class="fas fa-globe text-4xl text-gray-300 mb-3"></i>
                            <p>Aucune requête HTTP trouvée</p>
                        </td>
                    </tr>
                {% else %}
                    {% for request in http_requests %}
                        <tr class="{{ request.isSuspicious ? 'bg-yellow-50' : (request.isError ? 'bg-red-50' : '') }}">
                            <td class="px-6 py-4 whitespace-nowrap text-sm">
                                <span class="px-2 py-1 text-xs font-semibold rounded {{ request.method == 'GET' ? 'bg-blue-100 text-blue-800' : (request.method == 'POST' ? 'bg-green-100 text-green-800' : (request.method == 'DELETE' ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800')) }}">
                                    {{ request.method }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-900">
                                <div class="flex items-center space-x-2">
                                    {% if request.routeName starts with 'api_' or request.uri starts with '/api/' %}
                                        <span class="px-2 py-1 text-xs font-semibold rounded bg-purple-100 text-purple-800">API</span>
                                    {% else %}
                                        <span class="px-2 py-1 text-xs font-semibold rounded bg-blue-100 text-blue-800">WEB</span>
                                    {% endif %}
                                    {% if request.isSuspicious %}
                                        <i class="fas fa-exclamation-triangle text-yellow-600"></i>
                                    {% endif %}
                                    <span>{{ request.uri|u.truncate(45, '...') }}</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm">
                                <span class="px-2 py-1 text-xs font-semibold rounded {{ request.statusCode >= 200 and request.statusCode < 300 ? 'bg-green-100 text-green-800' : (request.statusCode >= 400 and request.statusCode < 500 ? 'bg-yellow-100 text-yellow-800' : (request.statusCode >= 500 ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800')) }}">
                                    {{ request.statusCode }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {% if request.user %}
                                    <a href="{{ path('admin_users_show', {id: request.user.id}) }}" class="text-blue-600 hover:text-blue-900">
                                        {{ request.user.email|u.truncate(20, '...') }}
                                    </a>
                                {% else %}
                                    <span class="text-gray-400">Anonyme</span>
                                {% endif %}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900">
                                {% if request.ipAddress %}
                                    {{ request.ipAddress }}
                                {% else %}
                                    <span class="text-gray-400">N/A</span>
                                {% endif %}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ request.createdAt|date('d/m/Y H:i:s') }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <a href="{{ path('admin_security_http_requests_show', {id: request.id}) }}"
                                   class="inline-flex items-center px-2 py-1 text-xs font-medium rounded text-blue-600 hover:bg-blue-50 transition-colors duration-150">
                                    <i class="fas fa-eye mr-1"></i>
                                    Voir
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                {% endif %}
            </tbody>
        </table>
    </div>

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

    {# Pagination #}
    {% if http_requests.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 http_requests.currentPageNumber > 1 %}
                    <a href="{{ path('admin_security_http_requests', app.request.query.all|merge({page: http_requests.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 http_requests.currentPageNumber < http_requests.pageCount %}
                    <a href="{{ path('admin_security_http_requests', app.request.query.all|merge({page: http_requests.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">{{ http_requests|length > 0 ? ((http_requests.getCurrentPageNumber - 1) * http_requests.getItemNumberPerPage + 1) : 0 }}</span>
                        à
                        <span class="font-medium">{{ ((http_requests.getCurrentPageNumber - 1) * http_requests.getItemNumberPerPage) + http_requests|length }}</span>
                        sur
                        <span class="font-medium">{{ http_requests.getTotalItemCount }}</span>
                        résultats
                    </p>
                </div>
                <div>
                    {{ knp_pagination_render(http_requests) }}
                </div>
            </div>
        </div>
    {% endif %}
</div>
{% endblock %}