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

{% block page_title %}{{ page_title }}{% 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">{{ page_title }}</h1>
            <p class="mt-2 text-sm text-gray-700">Consultez les accès suspects détectés par le système</p>
        </div>
        <div class="mt-4 sm:mt-0 flex gap-2">
            <a href="{{ path('admin_media_logs') }}"
               class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                Tous les logs
            </a>
            <a href="{{ path('admin_media_index') }}"
               class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                Liste des Médias
            </a>
        </div>
    </div>
</div>

{# Warning Banner #}
<div class="bg-orange-50 border-l-4 border-orange-400 p-4 mb-6">
    <div class="flex">
        <div class="flex-shrink-0">
            <svg class="h-5 w-5 text-orange-400" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
            </svg>
        </div>
        <div class="ml-3">
            <p class="text-sm text-orange-700">
                Les accès suspects sont détectés automatiquement en fonction de critères de sécurité (rate limiting, bots, accès inhabituels, etc.)
            </p>
        </div>
    </div>
</div>

{# Suspicious Logs Table #}
<div class="bg-white shadow rounded-lg overflow-hidden">
    <div class="hidden lg:block overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-orange-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fichier</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Utilisateur</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IP / Localisation</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Raison</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Détails</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for log in logs %}
                <tr class="hover:bg-orange-50 bg-orange-25">
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {{ log.createdAt|date('d/m/Y H:i:s') }}
                    </td>
                    <td class="px-6 py-4">
                        <div class="text-sm font-medium text-gray-900 truncate max-w-xs">{{ log.fileName }}</div>
                        <div class="text-xs text-gray-500">{{ log.mediaType|upper }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        {% if log.user %}
                            <div class="text-sm text-gray-900">{{ log.user.email }}</div>
                        {% else %}
                            <span class="text-sm text-gray-400">Anonyme</span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900 font-mono">{{ log.ipAddress }}</div>
                        {% if log.country %}
                        <div class="text-xs text-gray-400">{{ log.city }}, {{ log.country }}</div>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4">
                        <div class="text-sm text-orange-600 font-semibold">{{ log.suspicionReason }}</div>
                        {% if log.deviceType %}
                        <div class="text-xs text-gray-500">{{ log.deviceType|capitalize }} • {{ log.browser }}</div>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        {% if log.accessGranted %}
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                Accordé
                            </span>
                        {% else %}
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                Refusé
                            </span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <a href="{{ path('admin_media_logs_show', {'id': log.id}) }}" class="text-blue-600 hover:text-blue-900">
                            Voir
                        </a>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="7" class="px-6 py-12 text-center">
                        <div class="flex flex-col items-center justify-center">
                            <svg class="w-12 h-12 text-green-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <p class="text-lg font-semibold text-gray-900">Aucun accès suspect détecté</p>
                            <p class="text-sm text-gray-500 mt-1">Tous les accès semblent normaux</p>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {# Mobile Cards #}
    <div class="lg:hidden divide-y divide-gray-200">
        {% for log in logs %}
        <div class="p-4 bg-orange-50">
            <div class="flex items-start justify-between mb-2">
                <div class="flex-1">
                    <div class="text-sm font-medium text-gray-900">{{ log.fileName }}</div>
                    <div class="text-xs text-orange-600 font-semibold mt-1">{{ log.suspicionReason }}</div>
                </div>
                <div class="ml-2">
                    {% if log.accessGranted %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Accordé</span>
                    {% else %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Refusé</span>
                    {% endif %}
                </div>
            </div>
            <div class="text-sm text-gray-500 space-y-1">
                <p>{{ log.createdAt|date('d/m/Y H:i:s') }}</p>
                <p>{{ log.user ? log.user.email : 'Anonyme' }} • {{ log.ipAddress }}</p>
                <p>{{ log.deviceType|capitalize }} • {{ log.browser }}</p>
            </div>
            <div class="mt-2">
                <a href="{{ path('admin_media_logs_show', {'id': log.id}) }}" class="text-sm text-blue-600">
                    Voir les détails
                </a>
            </div>
        </div>
        {% else %}
        <div class="p-12 text-center">
            <svg class="w-16 h-16 text-green-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <p class="text-lg font-semibold text-gray-900">Aucun accès suspect</p>
            <p class="text-sm text-gray-500 mt-1">Tous les accès semblent normaux</p>
        </div>
        {% endfor %}
    </div>

    {# Pagination #}
    {% if logs|length > 0 %}
    <div class="px-6 py-4 border-t border-gray-200">
        {{ knp_pagination_render(logs) }}
    </div>
    {% endif %}
</div>
{% endblock %}