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

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

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    {# Breadcrumb #}
    <nav class="flex mb-6" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="{{ path('app_manager_media_index') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-purple-600">
                    <i class="fas fa-images mr-2"></i>
                    Médias
                </a>
            </li>
            <li>
                <div class="flex items-center">
                    <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                    <span class="text-sm font-medium text-gray-500">{{ media.originalFileName|slice(0, 50) }}...</span>
                </div>
            </li>
        </ol>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
        {# Preview Section (2/3) #}
        <div class="lg:col-span-2">
            <div class="bg-white rounded-lg shadow-lg overflow-hidden">
                {# Preview Header #}
                <div class="bg-gradient-to-r from-purple-600 to-indigo-600 px-6 py-4">
                    <h1 class="text-xl font-bold text-white flex items-center">
                        <i class="fas fa-{{ media.category == 'image' ? 'image' : (media.category == 'video' ? 'video' : (media.category == 'audio' ? 'music' : 'file-pdf')) }} mr-3"></i>
                        {{ media.originalFileName }}
                    </h1>
                </div>

                {# Preview Content #}
                <div class="p-6 bg-gray-50">
                    {% if media.category == 'image' %}
                        {# Image Preview #}
                        <div class="bg-white rounded-lg p-4 flex items-center justify-center" style="min-height: 400px;">
                            <img src="{{ asset('media/' ~ media.filePath) }}"
                                 alt="{{ media.originalFileName }}"
                                 class="max-w-full max-h-[600px] rounded shadow-lg cursor-pointer"
                                 onclick="document.getElementById('imageModal').classList.remove('hidden')">
                        </div>
                        <p class="text-sm text-gray-500 mt-2 text-center">Cliquez sur l'image pour l'agrandir</p>

                    {% elseif media.category == 'video' %}
                        {# Video Player #}
                        <div class="bg-black rounded-lg overflow-hidden">
                            <video controls class="w-full" style="max-height: 600px;">
                                <source src="{{ asset('media/' ~ media.filePath) }}" type="{{ media.mimeType }}">
                                Votre navigateur ne supporte pas la lecture vidéo.
                            </video>
                        </div>

                    {% elseif media.category == 'audio' %}
                        {# Audio Player #}
                        <div class="bg-white rounded-lg p-8 flex flex-col items-center justify-center" style="min-height: 400px;">
                            <i class="fas fa-music text-8xl text-purple-500 mb-6"></i>
                            <audio controls class="w-full max-w-md">
                                <source src="{{ asset('media/' ~ media.filePath) }}" type="{{ media.mimeType }}">
                                Votre navigateur ne supporte pas la lecture audio.
                            </audio>
                        </div>

                    {% elseif media.mimeType == 'application/pdf' %}
                        {# PDF Preview #}
                        <div class="bg-white rounded-lg overflow-hidden">
                            <iframe src="{{ asset('media/' ~ media.filePath) }}"
                                    class="w-full border-0"
                                    style="height: 600px;"></iframe>
                        </div>

                    {% else %}
                        {# Generic File Icon #}
                        <div class="bg-white rounded-lg p-12 flex flex-col items-center justify-center" style="min-height: 400px;">
                            <i class="fas fa-file-alt text-8xl text-gray-300 mb-4"></i>
                            <p class="text-lg font-medium text-gray-900">Prévisualisation non disponible</p>
                            <p class="text-sm text-gray-500 mt-2">Téléchargez le fichier pour le consulter</p>
                            <a href="{{ path('app_manager_media_download', {id: media.id}) }}"
                               class="mt-6 inline-flex items-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-purple-600 hover:bg-purple-700">
                                <i class="fas fa-download mr-2"></i>
                                Télécharger
                            </a>
                        </div>
                    {% endif %}
                </div>

                {# Download Button #}
                <div class="px-6 py-4 bg-gray-100 border-t border-gray-200">
                    <div class="flex items-center justify-between">
                        <a href="{{ path('app_manager_media_index') }}"
                           class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                            <i class="fas fa-arrow-left mr-2"></i>
                            Retour
                        </a>
                        <a href="{{ path('app_manager_media_download', {id: media.id}) }}"
                           class="inline-flex items-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-purple-600 hover:bg-purple-700">
                            <i class="fas fa-download mr-2"></i>
                            Télécharger
                        </a>
                    </div>
                </div>
            </div>
        </div>

        {# Sidebar Info (1/3) #}
        <div class="lg:col-span-1 space-y-6">
            {# File Info Card #}
            <div class="bg-white rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-info-circle mr-2 text-purple-600"></i>
                    Informations
                </h2>

                <dl class="space-y-3">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Type</dt>
                        <dd class="mt-1">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                                {{ media.category|upper }}
                            </span>
                        </dd>
                    </div>

                    <div>
                        <dt class="text-sm font-medium text-gray-500">Taille</dt>
                        <dd class="mt-1 text-sm text-gray-900 font-medium">{{ fileSizeFormatted }}</dd>
                    </div>

                    <div>
                        <dt class="text-sm font-medium text-gray-500">Format</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ media.mimeType }}</dd>
                    </div>

                    <div>
                        <dt class="text-sm font-medium text-gray-500">Visibilité</dt>
                        <dd class="mt-1">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                {% if media.visibility == 'protected' %}bg-yellow-100 text-yellow-800
                                {% else %}bg-blue-100 text-blue-800{% endif %}">
                                <i class="fas fa-{{ media.visibility == 'protected' ? 'shield-alt' : 'lock' }} mr-1"></i>
                                {{ media.visibility|upper }}
                            </span>
                        </dd>
                    </div>

                    <div>
                        <dt class="text-sm font-medium text-gray-500">Uploadé par</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            {{ media.uploadedBy ? media.uploadedBy.fullName : 'N/A' }}
                        </dd>
                    </div>

                    <div>
                        <dt class="text-sm font-medium text-gray-500">Téléversé le</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ media.createdAt|date('d/m/Y à H:i') }}</dd>
                    </div>

                    <div>
                        <dt class="text-sm font-medium text-gray-500">Nombre d'accès</dt>
                        <dd class="mt-1 text-sm text-gray-900 font-medium">{{ media.accessCount }} fois</dd>
                    </div>
                </dl>
            </div>

            {# Quick Stats #}
            <div class="bg-white rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-chart-line mr-2 text-blue-600"></i>
                    Statistiques
                </h2>

                <div class="space-y-3">
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Total accès</span>
                        <span class="text-lg font-bold text-blue-600">{{ detailedStats.total_accesses }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Accès accordés</span>
                        <span class="text-lg font-bold text-green-600">{{ detailedStats.granted_accesses }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Accès refusés</span>
                        <span class="text-lg font-bold text-red-600">{{ detailedStats.denied_accesses }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Accès suspects</span>
                        <span class="text-lg font-bold text-yellow-600">{{ detailedStats.suspicious_accesses }}</span>
                    </div>
                    <div class="flex justify-between items-center pt-3 border-t">
                        <span class="text-sm text-gray-600">Utilisateurs uniques</span>
                        <span class="text-sm font-medium">{{ detailedStats.unique_users }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">IPs uniques</span>
                        <span class="text-sm font-medium">{{ detailedStats.unique_ips }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# Tabs Section #}
    <div class="bg-white rounded-lg shadow">
        <div class="border-b border-gray-200">
            <nav class="-mb-px flex space-x-8 px-6" aria-label="Tabs">
                <button onclick="switchTab('access-logs')" class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm active">
                    <i class="fas fa-history mr-2"></i>
                    Logs d'Accès ({{ recentAccessLogs|length }})
                </button>
                <button onclick="switchTab('access-grants')" class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                    <i class="fas fa-user-check mr-2"></i>
                    Accès Accordés ({{ mediaAccessGrants|length }})
                </button>
                <button onclick="switchTab('denied-access')" class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                    <i class="fas fa-ban mr-2"></i>
                    Accès Refusés ({{ deniedAccessLogs|length }})
                </button>
                <button onclick="switchTab('suspicious-access')" class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    Accès Suspects ({{ suspiciousAccessLogs|length }})
                </button>
            </nav>
        </div>

        {# Tab Content: Access Logs #}
        <div id="access-logs-tab" class="tab-content p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Derniers Accès (50)</h3>
            {% if recentAccessLogs is not empty %}
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Utilisateur</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">IP</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Device</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Statut</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            {% for log in recentAccessLogs %}
                            <tr class="hover:bg-gray-50">
                                <td class="px-4 py-3 text-sm text-gray-900">{{ log.createdAt|date('d/m/Y H:i:s') }}</td>
                                <td class="px-4 py-3 text-sm text-gray-900">{{ log.user ? log.user.email : 'Anonyme' }}</td>
                                <td class="px-4 py-3 text-sm text-gray-500">{{ log.ipAddress }}</td>
                                <td class="px-4 py-3 text-sm text-gray-500">{{ log.deviceType|default('N/A') }}</td>
                                <td class="px-4 py-3">
                                    {% if log.accessGranted %}
                                        <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Accordé</span>
                                    {% else %}
                                        <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">Refusé</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <p class="text-gray-500 text-center py-8">Aucun log d'accès trouvé</p>
            {% endif %}
        </div>

        {# Tab Content: Access Grants #}
        <div id="access-grants-tab" class="tab-content p-6 hidden">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Utilisateurs avec Accès Explicite</h3>
            {% if mediaAccessGrants is not empty %}
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Utilisateur</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Accordé par</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Expire le</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Statut</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            {% for grant in mediaAccessGrants %}
                            <tr class="hover:bg-gray-50">
                                <td class="px-4 py-3 text-sm text-gray-900">{{ grant.user.fullName }}</td>
                                <td class="px-4 py-3 text-sm text-gray-500">{{ grant.grantedBy ? grant.grantedBy.fullName : 'N/A' }}</td>
                                <td class="px-4 py-3 text-sm text-gray-500">{{ grant.grantedAt|date('d/m/Y H:i') }}</td>
                                <td class="px-4 py-3 text-sm text-gray-500">{{ grant.expiresAt ? grant.expiresAt|date('d/m/Y H:i') : 'Permanent' }}</td>
                                <td class="px-4 py-3">
                                    {% if grant.isActive %}
                                        <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Actif</span>
                                    {% else %}
                                        <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Révoqué</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <p class="text-gray-500 text-center py-8">Aucun accès explicite accordé</p>
            {% endif %}
        </div>

        {# Tab Content: Denied Access #}
        <div id="denied-access-tab" class="tab-content p-6 hidden">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Tentatives d'Accès Refusées</h3>
            {% if deniedAccessLogs is not empty %}
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Utilisateur</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">IP</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Device</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Raison</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            {% for log in deniedAccessLogs %}
                            <tr class="hover:bg-gray-50">
                                <td class="px-4 py-3 text-sm text-gray-900">{{ log.createdAt|date('d/m/Y H:i:s') }}</td>
                                <td class="px-4 py-3 text-sm text-gray-900">{{ log.user ? log.user.email : 'Anonyme' }}</td>
                                <td class="px-4 py-3 text-sm text-gray-500">{{ log.ipAddress }}</td>
                                <td class="px-4 py-3 text-sm text-gray-500">{{ log.deviceType|default('N/A') }}</td>
                                <td class="px-4 py-3 text-sm text-red-600">Accès non autorisé</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <p class="text-gray-500 text-center py-8">Aucune tentative d'accès refusée</p>
            {% endif %}
        </div>

        {# Tab Content: Suspicious Access #}
        <div id="suspicious-access-tab" class="tab-content p-6 hidden">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Accès Suspects Détectés</h3>
            {% if suspiciousAccessLogs is not empty %}
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Utilisateur</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">IP</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Device</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Alerte</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            {% for log in suspiciousAccessLogs %}
                            <tr class="hover:bg-gray-50 bg-yellow-50">
                                <td class="px-4 py-3 text-sm text-gray-900">{{ log.createdAt|date('d/m/Y H:i:s') }}</td>
                                <td class="px-4 py-3 text-sm text-gray-900">{{ log.user ? log.user.email : 'Anonyme' }}</td>
                                <td class="px-4 py-3 text-sm text-gray-500">{{ log.ipAddress }}</td>
                                <td class="px-4 py-3 text-sm text-gray-500">{{ log.deviceType|default('N/A') }}</td>
                                <td class="px-4 py-3">
                                    <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">
                                        <i class="fas fa-exclamation-triangle mr-1"></i>
                                        Suspect
                                    </span>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <p class="text-gray-500 text-center py-8">Aucun accès suspect détecté</p>
            {% endif %}
        </div>
    </div>

</div>

{# Image Lightbox Modal #}
{% if media.category == 'image' %}
<div id="imageModal" class="hidden fixed inset-0 z-50 overflow-y-auto bg-black bg-opacity-90"
     onclick="this.classList.add('hidden')">
    <div class="flex items-center justify-center min-h-screen p-4">
        <img src="{{ asset('media/' ~ media.filePath) }}"
             alt="{{ media.originalFileName }}"
             class="max-w-full max-h-screen rounded shadow-2xl"
             onclick="event.stopPropagation()">
    </div>
    <button onclick="document.getElementById('imageModal').classList.add('hidden')"
            class="absolute top-4 right-4 text-white text-2xl hover:text-gray-300">
        <i class="fas fa-times"></i>
    </button>
</div>
{% endif %}

<script>
function switchTab(tabName) {
    // Hide all tab contents
    document.querySelectorAll('.tab-content').forEach(content => {
        content.classList.add('hidden');
    });

    // Remove active state from all buttons
    document.querySelectorAll('.tab-button').forEach(button => {
        button.classList.remove('active', 'border-purple-600', 'text-purple-600');
        button.classList.add('border-transparent', 'text-gray-500');
    });

    // Show selected tab
    document.getElementById(tabName + '-tab').classList.remove('hidden');

    // Add active state to clicked button
    event.target.classList.add('active', 'border-purple-600', 'text-purple-600');
    event.target.classList.remove('border-transparent', 'text-gray-500');
}
</script>
{% endblock %}