{% 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 tous les logs d'accès aux médias</p>
        </div>
        <div class="mt-4 sm:mt-0 flex gap-2">
            <a href="{{ path('admin_media_logs_suspicious') }}"
               class="inline-flex items-center px-4 py-2 border border-orange-300 rounded-lg text-sm font-medium text-orange-700 bg-orange-50 hover:bg-orange-100">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                </svg>
                Accès Suspects
            </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>

{# Filters Section #}
<div class="bg-white shadow rounded-lg mb-6 p-6">
    <div class="flex items-center justify-between mb-4">
        <h2 class="text-lg font-semibold text-gray-900">Filtres</h2>
        <button type="button"
                onclick="document.getElementById('filterForm').classList.toggle('hidden')"
                class="text-sm text-blue-600 hover:text-blue-800">
            <span id="toggleText">Afficher les filtres</span>
        </button>
    </div>

    <div id="filterForm" class="hidden">
        {{ form_start(filterForm, {'attr': {'class': 'space-y-4'}}) }}
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    {{ form_row(filterForm.search) }}
                </div>
                <div>
                    {{ form_row(filterForm.accessGranted) }}
                </div>
                <div class="flex items-center">
                    {{ form_row(filterForm.isSuspicious) }}
                </div>
                <div>
                    {{ form_row(filterForm.mediaType) }}
                </div>
                <div>
                    {{ form_row(filterForm.actionType) }}
                </div>
                <div>
                    {{ form_row(filterForm.user) }}
                </div>
                <div>
                    {{ form_row(filterForm.dateFrom) }}
                </div>
                <div>
                    {{ form_row(filterForm.dateTo) }}
                </div>
                <div class="flex items-end">
                    <button type="submit"
                            class="w-full px-4 py-2.5 text-sm font-medium text-white bg-blue-700 hover:bg-blue-800 rounded-lg">
                        Appliquer les filtres
                    </button>
                </div>
            </div>
        {{ form_end(filterForm) }}
    </div>
</div>

{# 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-gray-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</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-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</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-gray-50 {{ log.isSuspicious ? 'bg-orange-50' : '' }}">
                    <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>
                        {% if log.media %}
                        <a href="{{ path('admin_media_show', {'id': log.media.id}) }}" class="text-xs text-blue-600 hover:text-blue-800">
                            Voir le média
                        </a>
                        {% endif %}
                    </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 text-sm text-gray-500 font-mono">
                        {{ log.ipAddress }}
                        {% if log.country %}
                        <div class="text-xs text-gray-400">{{ log.city }}, {{ log.country }}</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 %}
                        {% if log.isSuspicious %}
                            <span class="ml-1 px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-100 text-orange-800">
                                Suspect
                            </span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                            {{ log.actionType|upper }}
                        </span>
                    </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 text-gray-500">
                        Aucun log trouvé
                    </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 {{ log.isSuspicious ? 'bg-orange-50' : '' }}">
            <div class="flex justify-between items-start mb-2">
                <div class="text-sm font-medium text-gray-900">{{ log.fileName }}</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.actionType|upper }}</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 text-gray-500">
            Aucun log trouvé
        </div>
        {% endfor %}
    </div>

    {# Pagination #}
    <div class="px-6 py-4 border-t border-gray-200">
        {{ knp_pagination_render(logs) }}
    </div>
</div>

<script>
document.querySelector('[onclick*="filterForm"]')?.addEventListener('click', function() {
    const text = document.getElementById('toggleText');
    text.textContent = text.textContent === 'Afficher les filtres' ? 'Masquer les filtres' : 'Afficher les filtres';
});
</script>
{% endblock %}