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

{% block page_title %}{{ media.originalFileName }}{% endblock %}

{% block content %}
{# Breadcrumbs dynamiques #}
{% if breadcrumbs is defined and breadcrumbs|length > 0 %}
<nav class="flex mb-6" aria-label="Breadcrumb">
    <ol class="inline-flex items-center space-x-1 md:space-x-3">
        {% for breadcrumb in breadcrumbs %}
            <li class="inline-flex items-center">
                {% if not loop.last %}
                    {% if breadcrumb.url %}
                        <a href="{{ breadcrumb.url }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600">
                            {{ breadcrumb.label }}
                        </a>
                    {% else %}
                        <span class="text-sm font-medium text-gray-500">{{ breadcrumb.label }}</span>
                    {% endif %}
                    {% if not loop.last %}
                        <svg class="w-3 h-3 mx-1 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
                        </svg>
                    {% endif %}
                {% else %}
                    <span class="text-sm font-medium text-gray-900">{{ breadcrumb.label }}</span>
                {% endif %}
            </li>
        {% endfor %}
    </ol>
</nav>
{% endif %}

{# Bouton retour contextuel #}
<div class="mb-6">
    <a href="{{ returnUrl }}" class="text-sm text-blue-600 hover:text-blue-800 flex items-center w-fit">
        <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
    </a>
</div>

<div class="bg-white shadow rounded-lg overflow-hidden mb-6">
    {# En-tête avec titre et actions #}
    <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">
                {# Bouton télécharger - toujours visible si autorisé #}
                {% if canDownload %}
                <a href="{{ media_download_url(media) }}"
                   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>
                {% endif %}

                {# Bouton éditer - seulement admin #}
                {% 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>

    {# Contenu principal #}
    <div class="p-6">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {# Colonne gauche - Aperçu du média #}
            <div class="lg:col-span-2">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Aperçu</h3>
                <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                    {% if media.mimeType starts with 'image/' %}
                        {# Image preview #}
                        <img src="{{ media.filePath|media_url }}"
                             alt="{{ media.originalFileName }}"
                             class="max-w-full h-auto rounded-lg shadow-sm">
                    {% elseif media.mimeType starts with 'video/' %}
                        {# Video preview #}
                        <video controls class="max-w-full h-auto rounded-lg shadow-sm">
                            <source src="{{ media.filePath|media_url }}" type="{{ media.mimeType }}">
                            Votre navigateur ne supporte pas la lecture de vidéos.
                        </video>
                    {% elseif media.mimeType starts with 'audio/' %}
                        {# Audio preview #}
                        <audio controls class="w-full">
                            <source src="{{ media.filePath|media_url }}" type="{{ media.mimeType }}">
                            Votre navigateur ne supporte pas la lecture audio.
                        </audio>
                    {% elseif media.mimeType == 'application/pdf' %}
                        {# PDF preview #}
                        <div class="flex items-center justify-center p-8 text-gray-500">
                            <div class="text-center">
                                <svg class="w-16 h-16 mx-auto mb-4 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path>
                                </svg>
                                <p class="font-medium">Document PDF</p>
                                <p class="text-sm mt-2">Téléchargez le fichier pour le visualiser</p>
                            </div>
                        </div>
                    {% else %}
                        {# Autres types de fichiers #}
                        <div class="flex items-center justify-center p-8 text-gray-500">
                            <div class="text-center">
                                <svg class="w-16 h-16 mx-auto mb-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"></path>
                                </svg>
                                <p class="font-medium">{{ media.fileExtension }}</p>
                                <p class="text-sm mt-2">Aperçu non disponible - téléchargez le fichier</p>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>

            {# Colonne droite - Informations du fichier #}
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Informations</h3>
                <dl class="space-y-4">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Type de fichier</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                {{ media.fileExtension }}
                            </span>
                        </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>

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

                    {% if media.uploadedBy %}
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Téléversé par</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ media.uploadedBy.fullName }}</dd>
                    </div>
                    {% endif %}

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

                    {% if media.company %}
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Entreprise</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ media.company.name }}</dd>
                    </div>
                    {% endif %}

                    <div>
                        <dt class="text-sm font-medium text-gray-500">Chemin</dt>
                        <dd class="mt-1 text-xs text-gray-600 font-mono break-all">{{ media.filePath }}</dd>
                    </div>
                </dl>

                {# Actions supplémentaires #}
                <div class="mt-6 pt-6 border-t border-gray-200">
                    {% if canDelete and not media.deletedAt %}
                    <button type="button"
                            onclick="if(confirm('Êtes-vous sûr de vouloir supprimer ce média ?')) { window.location.href='{{ path('admin_media_delete', {'id': media.id}) }}'; }"
                            class="w-full inline-flex justify-center items-center px-4 py-2 border border-red-300 rounded-lg text-sm font-medium text-red-700 bg-white hover:bg-red-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="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>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}