{% 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">

    {# Header #}
    <div class="mb-6">
        <a href="{{ path('user_media_index') }}" class="inline-flex items-center text-sm text-gray-500 hover:text-gray-700 mb-4">
            <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="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
            </svg>
            Retour à mes médias
        </a>
        <div class="flex justify-between items-start">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">{{ media.originalFileName }}</h1>
                <p class="mt-1 text-sm text-gray-500">Uploadé le {{ media.createdAt|date('d/m/Y à H:i') }}</p>
            </div>
            <div class="flex gap-2">
                <a href="{{ path('user_media_download', {'id': media.id}) }}" data-turbo="false" download class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition">
                    <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="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 isOwner %}
                    <form method="post" action="{{ path('user_media_delete', {'id': media.id}) }}" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce média ?');" class="inline">
                        <input type="hidden" name="_token" value="{{ csrf_token('delete_media_' ~ media.id) }}">
                        <button type="submit" class="inline-flex items-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition">
                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                            </svg>
                            Supprimer
                        </button>
                    </form>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

        {# Preview Column #}
        <div class="lg:col-span-2">
            <div class="bg-white rounded-lg shadow overflow-hidden">
                {% if media.category == 'image' %}
                    <img src="{{ path('app_media_serve', {'path': media.filePath}) }}" alt="{{ media.originalFileName }}" class="w-full max-h-96 object-contain bg-gray-100">
                {% elseif media.category == 'video' %}
                    <video controls class="w-full max-h-96 bg-gray-900">
                        <source src="{{ path('app_media_serve', {'path': media.filePath}) }}" type="{{ media.mimeType }}">
                        Votre navigateur ne supporte pas la lecture de vidéos.
                    </video>
                {% elseif media.category == 'audio' %}
                    <div class="p-12 bg-gray-100">
                        <audio controls class="w-full">
                            <source src="{{ path('app_media_serve', {'path': media.filePath}) }}" type="{{ media.mimeType }}">
                            Votre navigateur ne supporte pas la lecture audio.
                        </audio>
                    </div>
                {% elseif media.mimeType == 'application/pdf' %}
                    <embed src="{{ path('app_media_serve', {'path': media.filePath}) }}" type="application/pdf" width="100%" height="600px">
                {% else %}
                    <div class="flex flex-col items-center justify-center p-12 bg-gray-100">
                        <svg class="w-24 h-24 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                        </svg>
                        <p class="text-gray-600">Prévisualisation non disponible</p>
                        <p class="text-sm text-gray-500 mt-1">{{ media.mimeType }}</p>
                    </div>
                {% endif %}
            </div>
        </div>

        {# Info Column #}
        <div class="space-y-6">

            {# Details Card #}
            <div class="bg-white rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Détails</h2>
                <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 break-all">{{ media.fileName }}</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 ?? ((media.fileSize / 1024)|round(2) ~ ' KB') }}
                        </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-medium rounded-full bg-blue-100 text-blue-800">
                                {{ media.category|capitalize }}
                            </span>
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Type</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ media.type|replace({'_': ' '})|title }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Visibilité</dt>
                        <dd class="mt-1">
                            {% if media.visibility == 'private' %}
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">Privé</span>
                            {% else %}
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800">Protégé</span>
                            {% endif %}
                        </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 %}
                    <div>
                        <dt class="text-sm font-medium text-gray-500">UUID</dt>
                        <dd class="mt-1 text-xs text-gray-600 break-all font-mono">{{ media.uuid }}</dd>
                    </div>
                </dl>
            </div>

            {# Share Card (Only for owners) #}
            {% if isOwner %}
                <div class="bg-white rounded-lg shadow p-6">
                    <h2 class="text-lg font-semibold text-gray-900 mb-4">Partage</h2>
                    {% if sharedWith|length > 0 %}
                        <p class="text-sm text-gray-600 mb-3">Partagé avec {{ sharedWith|length }} personne(s) :</p>
                        <ul class="space-y-2 mb-4">
                            {% for access in sharedWith %}
                                <li class="flex items-center justify-between text-sm">
                                    <span class="text-gray-900">{{ access.user.email }}</span>
                                    {% if access.expiresAt %}
                                        <span class="text-xs text-gray-500">Expire le {{ access.expiresAt|date('d/m/Y') }}</span>
                                    {% endif %}
                                </li>
                            {% endfor %}
                        </ul>
                    {% else %}
                        <p class="text-sm text-gray-600 mb-4">Ce média n'est partagé avec personne.</p>
                    {% endif %}
                    <button type="button" class="w-full px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg transition">
                        Partager avec d'autres utilisateurs
                    </button>
                    <p class="text-xs text-gray-500 mt-2">Fonctionnalité de partage à venir</p>
                </div>
            {% endif %}

            {# Statistics Card #}
            <div class="bg-white rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Statistiques</h2>
                <dl class="space-y-3">
                    <div class="flex justify-between">
                        <dt class="text-sm font-medium text-gray-500">Nombre d'accès</dt>
                        <dd class="text-sm font-semibold text-gray-900">{{ media.accessCount ?? 0 }}</dd>
                    </div>
                    {% if media.lastAccessedAt %}
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Dernier accès</dt>
                            <dd class="text-sm text-gray-900">{{ media.lastAccessedAt|date('d/m/Y à H:i') }}</dd>
                        </div>
                    {% endif %}
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Date de création</dt>
                        <dd class="text-sm text-gray-900">{{ media.createdAt|date('d/m/Y à H:i') }}</dd>
                    </div>
                    {% if media.updatedAt and media.updatedAt != media.createdAt %}
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Dernière modification</dt>
                            <dd class="text-sm text-gray-900">{{ media.updatedAt|date('d/m/Y à H:i') }}</dd>
                        </div>
                    {% endif %}
                </dl>
            </div>

        </div>

    </div>

    {# Access History Section (Full Width) #}
    {% if accessLogs|length > 0 %}
        <div class="mt-6">
            <div class="bg-white rounded-lg shadow overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900">Historique d'accès</h2>
                    <p class="text-sm text-gray-600 mt-1">Vos {{ accessLogs|length }} derniers accès à ce média</p>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date d'accès</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type d'accès</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Accordé par</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            {% for log in accessLogs %}
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ log.lastAccessedAt ? log.lastAccessedAt|date('d/m/Y H:i') : log.grantedAt|date('d/m/Y H:i') }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        Accès {{ log.accessCount ?? 0 }} fois
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ log.grantedBy ? log.grantedBy.email : 'Propriétaire' }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        {% if log.isActive %}
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Actif</span>
                                        {% else %}
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">Révoqué</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    {% endif %}

</div>
{% endblock %}