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

{% block page_title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="mb-6">
    <a href="{{ path('admin_media_logs') }}" class="text-sm text-blue-600 hover:text-blue-800 flex items-center">
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
        </svg>
        Retour aux logs
    </a>
</div>

<div class="bg-white shadow rounded-lg overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-200">
        <div class="flex items-center justify-between">
            <h1 class="text-2xl font-bold text-gray-900">Détail du Log d'Accès</h1>
            <div class="flex gap-2">
                {% if log.accessGranted %}
                    <span class="px-3 py-1 inline-flex text-sm leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                        Accès Accordé
                    </span>
                {% else %}
                    <span class="px-3 py-1 inline-flex text-sm leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                        Accès Refusé
                    </span>
                {% endif %}
                {% if log.isSuspicious %}
                    <span class="px-3 py-1 inline-flex text-sm leading-5 font-semibold rounded-full bg-orange-100 text-orange-800">
                        ⚠️ Suspect
                    </span>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="p-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Informations du Fichier</h3>
                <dl class="space-y-3">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Nom du fichier</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ log.fileName }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Chemin</dt>
                        <dd class="mt-1 text-sm text-gray-900 font-mono">{{ log.filePath }}</dd>
                    </div>
                    {% if log.media %}
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Média lié</dt>
                        <dd class="mt-1">
                            <a href="{{ path('admin_media_show', {'id': log.media.id}) }}" class="text-sm text-blue-600 hover:text-blue-800">
                                Voir le média complet →
                            </a>
                        </dd>
                    </div>
                    {% endif %}
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Type de média</dt>
                        <dd class="mt-1">
                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                                {{ log.mediaType|upper }}
                            </span>
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Type MIME</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ log.mimeType }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Taille</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            {% if log.fileSize %}
                                {% set sizeInKB = log.fileSize / 1024 %}
                                {% if sizeInKB > 1024 %}
                                    {{ (sizeInKB / 1024)|number_format(2) }} MB
                                {% else %}
                                    {{ sizeInKB|number_format(2) }} KB
                                {% endif %}
                            {% else %}
                                N/A
                            {% endif %}
                        </dd>
                    </div>
                </dl>
            </div>

            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Informations de l'Accès</h3>
                <dl class="space-y-3">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Date et heure</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ log.createdAt|date('d/m/Y à H:i:s') }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Type d'action</dt>
                        <dd class="mt-1">
                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-purple-100 text-purple-800">
                                {{ log.actionType|upper }}
                            </span>
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Utilisateur</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            {% if log.user %}
                                {{ log.user.email }} ({{ log.user.firstName }} {{ log.user.lastName }})
                            {% else %}
                                <span class="text-gray-400">Anonyme</span>
                            {% endif %}
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Adresse IP</dt>
                        <dd class="mt-1 text-sm text-gray-900 font-mono">{{ log.ipAddress }}</dd>
                    </div>
                    {% if log.country or log.city %}
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Géolocalisation</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            {{ log.city }}{% if log.city and log.country %}, {% endif %}{{ log.country }}
                        </dd>
                    </div>
                    {% endif %}
                    {% if log.sessionId %}
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Session ID</dt>
                        <dd class="mt-1 text-sm text-gray-900 font-mono text-xs">{{ log.sessionId }}</dd>
                    </div>
                    {% endif %}
                    {% if log.responseTime %}
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Temps de réponse</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ log.responseTime|number_format(2) }} ms</dd>
                    </div>
                    {% endif %}
                </dl>
            </div>

            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Appareil et Navigateur</h3>
                <dl class="space-y-3">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">User Agent</dt>
                        <dd class="mt-1 text-xs text-gray-900 font-mono break-all">{{ log.userAgent }}</dd>
                    </div>
                    {% if log.browser %}
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Navigateur</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ log.browser }}</dd>
                    </div>
                    {% endif %}
                    {% if log.os %}
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Système d'exploitation</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ log.os }}</dd>
                    </div>
                    {% endif %}
                    {% if log.deviceType %}
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Type d'appareil</dt>
                        <dd class="mt-1">
                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800">
                                {{ log.deviceType|capitalize }}
                            </span>
                        </dd>
                    </div>
                    {% endif %}
                    {% if log.referer %}
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Referer</dt>
                        <dd class="mt-1 text-xs text-gray-900 break-all">{{ log.referer }}</dd>
                    </div>
                    {% endif %}
                </dl>
            </div>

            {% if not log.accessGranted or log.isSuspicious %}
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Informations de Sécurité</h3>
                <dl class="space-y-3">
                    {% if not log.accessGranted %}
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Raison du refus</dt>
                        <dd class="mt-1 text-sm text-red-600 font-semibold">{{ log.denialReason }}</dd>
                    </div>
                    {% endif %}
                    {% if log.isSuspicious %}
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Raison de suspicion</dt>
                        <dd class="mt-1 text-sm text-orange-600 font-semibold">{{ log.suspicionReason }}</dd>
                    </div>
                    {% endif %}
                </dl>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}