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

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

{% block content %}
<div class="mb-6">
    <a href="{{ path('admin_media_index') }}" 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 à la liste
    </a>
</div>

<div class="bg-white shadow rounded-lg overflow-hidden mb-6">
    <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">{{ media.originalFileName }}</h1>
            <div class="flex gap-2">
                <a href="{{ path(media_download_route(), {'id': media.id}) }}"
                   data-turbo="false"
                   download
                   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">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                    </svg>
                    Télécharger
                </a>
                {% if is_granted('ROLE_ADMIN') and not media.deletedAt %}
                <a href="{{ path('admin_media_edit', {'id': media.id}) }}"
                   class="inline-flex items-center px-4 py-2 border border-blue-300 rounded-lg text-sm font-medium text-blue-700 bg-blue-50 hover:bg-blue-100">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                    </svg>
                    Modifier
                </a>
                {% endif %}
            </div>
        </div>
    </div>

    {# Tabs Navigation #}
    <div class="border-b border-gray-200">
        <nav class="flex -mb-px">
            <a href="{{ path('admin_media_show', {'id': media.id, 'tab': 'details'}) }}"
               class="py-4 px-6 text-sm font-medium border-b-2 {{ activeTab == 'details' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
                Détails
            </a>
            <a href="{{ path('admin_media_show', {'id': media.id, 'tab': 'logs'}) }}"
               class="py-4 px-6 text-sm font-medium border-b-2 {{ activeTab == 'logs' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
                Logs d'Accès ({{ accessLogs|length }})
            </a>
            <a href="{{ path('admin_media_show', {'id': media.id, 'tab': 'statistics'}) }}"
               class="py-4 px-6 text-sm font-medium border-b-2 {{ activeTab == 'statistics' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
                Statistiques
            </a>
        </nav>
    </div>

    {# Tab Content #}
    <div class="p-6">
        {% if activeTab == 'details' %}
            {# Details Tab #}
            <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 original</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ media.originalFileName }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Nom du fichier</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ media.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">{{ media.filePath }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Type MIME</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ media.mimeType }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Taille</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ media.formattedFileSize }}</dd>
                        </div>
                        {% if media.width and media.height %}
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Dimensions</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ media.width }} × {{ media.height }} px</dd>
                        </div>
                        {% endif %}
                    </dl>
                </div>

                <div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Classification</h3>
                    <dl class="space-y-3">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Type</dt>
                            <dd class="mt-1">
                                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                                    {{ media.typeLabel }}
                                </span>
                            </dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Catégorie</dt>
                            <dd class="mt-1">
                                <span class="px-2 py-1 text-xs font-semibold rounded-full
                                    {% if media.category == 'image' %}bg-green-100 text-green-800
                                    {% elseif media.category == 'video' %}bg-purple-100 text-purple-800
                                    {% elseif media.category == 'audio' %}bg-yellow-100 text-yellow-800
                                    {% else %}bg-gray-100 text-gray-800{% endif %}">
                                    {{ media.category|upper }}
                                </span>
                            </dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Visibilité</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                {% if media.visibility == 'private' %}
                                    <span class="text-gray-600">🔒 Privé</span>
                                {% else %}
                                    <span class="text-orange-600">🔐 Protégé</span>
                                {% endif %}
                            </dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Uploadé par</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                {% if media.uploadedBy %}
                                    {{ media.uploadedBy.email }}
                                {% else %}
                                    <span class="text-gray-400">N/A</span>
                                {% endif %}
                            </dd>
                        </div>
                        {% if media.relatedUser %}
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Utilisateur lié</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ media.relatedUser.email }}</dd>
                        </div>
                        {% endif %}
                        {% if media.relatedCompany %}
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Entreprise liée</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ media.relatedCompany.name }}</dd>
                        </div>
                        {% endif %}
                    </dl>
                </div>

                <div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Dates</h3>
                    <dl class="space-y-3">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Créé le</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ media.createdAt|date('d/m/Y à H:i:s') }}</dd>
                        </div>
                        {% if media.updatedAt %}
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Modifié le</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ media.updatedAt|date('d/m/Y à H:i:s') }}</dd>
                        </div>
                        {% endif %}
                        {% if media.lastAccessedAt %}
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Dernier accès</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ media.lastAccessedAt|date('d/m/Y à H:i:s') }}</dd>
                        </div>
                        {% endif %}
                        {% if media.expiresAt %}
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Expire le</dt>
                            <dd class="mt-1 text-sm {{ media.isExpired ? 'text-red-600 font-semibold' : 'text-gray-900' }}">
                                {{ media.expiresAt|date('d/m/Y à H:i:s') }}
                                {% if media.isExpired %}
                                    <span class="ml-2 px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">EXPIRÉ</span>
                                {% endif %}
                            </dd>
                        </div>
                        {% endif %}
                        {% if media.deletedAt %}
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Supprimé le</dt>
                            <dd class="mt-1 text-sm text-red-600 font-semibold">
                                {{ media.deletedAt|date('d/m/Y à H:i:s') }}
                                <span class="ml-2 px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">SUPPRIMÉ</span>
                            </dd>
                        </div>
                        {% endif %}
                    </dl>
                </div>

                {% if media.isImage %}
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Aperçu</h3>
                    <img src="/media/{{ media.filePath }}" alt="{{ media.originalFileName }}" class="max-w-full rounded-lg shadow">
                </div>
                {% endif %}
            </div>

        {% elseif activeTab == 'logs' %}
            {# Logs Tab #}
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Logs d'Accès Récents (50 derniers)</h3>
                {% if accessLogs|length > 0 %}
                <div class="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">Date</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Utilisateur</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">IP</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Statut</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Action</th>
                                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Détails</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            {% for log in accessLogs %}
                            <tr class="hover:bg-gray-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 whitespace-nowrap text-sm text-gray-900">
                                    {% if log.user %}
                                        {{ log.user.email }}
                                    {% else %}
                                        <span class="text-gray-400">Anonyme</span>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ log.ipAddress }}
                                </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 text-sm text-gray-500">
                                    {{ log.actionType|upper }}
                                </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>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="mt-4">
                    <a href="{{ path('admin_media_logs') }}?media={{ media.id }}" class="text-sm text-blue-600 hover:text-blue-800">
                        Voir tous les logs pour ce média →
                    </a>
                </div>
                {% else %}
                <p class="text-gray-500 text-center py-8">Aucun log d'accès pour ce média</p>
                {% endif %}
            </div>

        {% elseif activeTab == 'statistics' %}
            {# Statistics Tab #}
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-6">Statistiques d'Accès</h3>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                    <div class="bg-blue-50 rounded-lg p-4">
                        <p class="text-sm font-medium text-blue-600">Total Accès</p>
                        <p class="text-2xl font-bold text-blue-900">{{ statistics.total_accesses }}</p>
                    </div>
                    <div class="bg-green-50 rounded-lg p-4">
                        <p class="text-sm font-medium text-green-600">Accès Accordés</p>
                        <p class="text-2xl font-bold text-green-900">{{ statistics.granted_accesses }}</p>
                    </div>
                    <div class="bg-red-50 rounded-lg p-4">
                        <p class="text-sm font-medium text-red-600">Accès Refusés</p>
                        <p class="text-2xl font-bold text-red-900">{{ statistics.denied_accesses }}</p>
                    </div>
                    <div class="bg-orange-50 rounded-lg p-4">
                        <p class="text-sm font-medium text-orange-600">Accès Suspects</p>
                        <p class="text-2xl font-bold text-orange-900">{{ statistics.suspicious_accesses }}</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <h4 class="font-semibold text-gray-900 mb-3">Audience</h4>
                        <dl class="space-y-2">
                            <div class="flex justify-between">
                                <dt class="text-sm text-gray-600">Utilisateurs uniques</dt>
                                <dd class="text-sm font-semibold text-gray-900">{{ statistics.unique_users }}</dd>
                            </div>
                            <div class="flex justify-between">
                                <dt class="text-sm text-gray-600">Adresses IP uniques</dt>
                                <dd class="text-sm font-semibold text-gray-900">{{ statistics.unique_ips }}</dd>
                            </div>
                            <div class="flex justify-between">
                                <dt class="text-sm text-gray-600">Temps de réponse moyen</dt>
                                <dd class="text-sm font-semibold text-gray-900">{{ statistics.avg_response_time|number_format(2) }} ms</dd>
                            </div>
                        </dl>
                    </div>

                    <div>
                        <h4 class="font-semibold text-gray-900 mb-3">Par Type d'Appareil</h4>
                        <dl class="space-y-2">
                            {% for deviceStat in statistics.by_device_type %}
                            <div class="flex justify-between">
                                <dt class="text-sm text-gray-600">{{ deviceStat.deviceType|default('Inconnu')|capitalize }}</dt>
                                <dd class="text-sm font-semibold text-gray-900">{{ deviceStat.count }}</dd>
                            </div>
                            {% endfor %}
                        </dl>
                    </div>

                    <div>
                        <h4 class="font-semibold text-gray-900 mb-3">Par Type d'Action</h4>
                        <dl class="space-y-2">
                            {% for actionStat in statistics.by_action_type %}
                            <div class="flex justify-between">
                                <dt class="text-sm text-gray-600">{{ actionStat.actionType|upper }}</dt>
                                <dd class="text-sm font-semibold text-gray-900">{{ actionStat.count }}</dd>
                            </div>
                            {% endfor %}
                        </dl>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}