{# Galerie media produit (images + videos) - responsive mobile #}
{% set productMedia = product.productMedia %}

<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 sm:p-6"
     data-controller="pos-product-upload"
     data-pos-product-upload-url-value="{{ path('manager_pos_products_upload_image', {id: product.id}) }}"
     data-pos-product-upload-token-value="{{ csrf_token('upload_product_image_' ~ product.id) }}">

    <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
            <i class="fas fa-images mr-2 text-gray-400"></i>Media ({{ productMedia|length }})
        </h3>
        {# Bouton ajouter #}
        <label class="inline-flex items-center gap-2 px-4 py-2 bg-emerald-600 text-white rounded-lg text-sm font-medium hover:bg-emerald-700 transition-colors cursor-pointer shadow-sm">
            <i class="fas fa-plus"></i>
            <span class="hidden sm:inline">Ajouter</span>
            <input type="file" name="media" accept="image/jpeg,image/png,image/webp,video/mp4,video/webm,video/quicktime" multiple class="hidden"
                   data-pos-product-upload-target="fileInput"
                   data-action="change->pos-product-upload#selectFiles">
        </label>
    </div>

    {# Zone de preview avant upload #}
    <div data-pos-product-upload-target="previewZone" class="hidden mb-4">
        <div class="border-2 border-dashed border-emerald-300 dark:border-emerald-700 rounded-lg p-4 bg-emerald-50/50 dark:bg-emerald-900/10">
            <div class="flex items-center justify-between mb-3">
                <p class="text-sm font-medium text-emerald-700 dark:text-emerald-400"><i class="fas fa-cloud-arrow-up mr-1"></i>Fichiers a envoyer</p>
                <div class="flex items-center gap-3">
                    <label class="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap">
                        <input type="checkbox" name="is_primary" value="1" class="rounded border-gray-300 text-emerald-600 focus:ring-emerald-500">
                        Definir comme principale
                    </label>
                    <button type="button"
                            data-pos-product-upload-target="uploadBtn"
                            data-action="pos-product-upload#upload"
                            class="inline-flex items-center gap-1.5 px-4 py-2 bg-emerald-600 text-white rounded-lg text-sm font-medium hover:bg-emerald-700 transition-colors">
                        <i class="fas fa-upload"></i>
                        <span>Envoyer</span>
                    </button>
                    <button type="button"
                            data-action="pos-product-upload#clearFiles"
                            class="inline-flex items-center px-3 py-2 text-gray-500 hover:text-red-600 rounded-lg text-sm transition-colors">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <div data-pos-product-upload-target="previewGrid" class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2"></div>
            {# Progress bar #}
            <div data-pos-product-upload-target="progressBar" class="hidden mt-3">
                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                    <div data-pos-product-upload-target="progressFill" class="bg-emerald-600 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
                </div>
                <p data-pos-product-upload-target="progressText" class="text-xs text-gray-500 mt-1 text-center"></p>
            </div>
        </div>
    </div>

    {# Galerie des medias uploades #}
    {% if productMedia|length > 0 %}
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
            {% for pm in productMedia %}
                {% set mediaUrl = pm.media and pm.media.filePath ? path('app_media_serve', {path: pm.media.filePath}) : '' %}
                {% set isVideo = pm.media and pm.media.category == 'video' %}

                <div class="bg-white dark:bg-gray-800 rounded-lg border {{ pm.isPrimary ? 'border-emerald-400 ring-2 ring-emerald-200' : 'border-gray-200 dark:border-gray-700' }} overflow-hidden group">
                    {# Thumbnail cliquable - ouvre overlay #}
                    <div class="relative cursor-pointer"
                         data-action="click->pos-product-upload#openOverlay"
                         data-url="{{ mediaUrl }}"
                         data-type="{{ isVideo ? 'video' : 'image' }}"
                         data-name="{{ pm.altText|default(product.name) }}">

                        {% if mediaUrl %}
                            {% if isVideo %}
                                <video src="{{ mediaUrl }}" class="w-full h-28 sm:h-36 object-cover" muted preload="metadata"></video>
                                <div class="absolute inset-0 flex items-center justify-center bg-black/20 group-hover:bg-black/30 transition-colors">
                                    <span class="w-10 h-10 rounded-full bg-white/90 flex items-center justify-center">
                                        <i class="fas fa-play text-gray-700 text-sm ml-0.5"></i>
                                    </span>
                                </div>
                            {% else %}
                                <img src="{{ mediaUrl }}" alt="{{ pm.altText|default(product.name) }}" class="w-full h-28 sm:h-36 object-cover group-hover:scale-105 transition-transform duration-200">
                            {% endif %}
                        {% else %}
                            <div class="w-full h-28 sm:h-36 bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
                                <i class="fas fa-image text-2xl text-gray-300"></i>
                            </div>
                        {% endif %}

                        {% if pm.isPrimary %}
                            <span class="absolute top-1.5 left-1.5 px-1.5 py-0.5 text-[10px] font-bold bg-emerald-500 text-white rounded shadow-sm">
                                <i class="fas fa-star mr-0.5"></i>Principale
                            </span>
                        {% endif %}

                        {% if isVideo %}
                            <span class="absolute top-1.5 right-1.5 px-1.5 py-0.5 text-[10px] font-bold bg-blue-600 text-white rounded shadow-sm">
                                <i class="fas fa-video"></i>
                            </span>
                        {% endif %}
                    </div>

                    {# Barre d'actions en bas de la card #}
                    <div class="flex items-center justify-around border-t border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/30">
                        {# Ouvrir #}
                        <button type="button" class="flex-1 py-2 text-center text-xs text-gray-500 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors" title="Ouvrir"
                                data-action="click->pos-product-upload#openOverlay"
                                data-url="{{ mediaUrl }}"
                                data-type="{{ isVideo ? 'video' : 'image' }}"
                                data-name="{{ pm.altText|default(product.name) }}">
                            <i class="fas fa-expand"></i>
                        </button>

                        {# Telecharger #}
                        <a href="{{ path('manager_pos_products_download_image', {id: product.id, mediaId: pm.id}) }}" data-no-loader download class="flex-1 py-2 text-center text-xs text-gray-500 hover:text-emerald-600 hover:bg-emerald-50 dark:hover:bg-emerald-900/20 transition-colors border-l border-r border-gray-100 dark:border-gray-700" title="Telecharger">
                            <i class="fas fa-download"></i>
                        </a>

                        {# Definir comme principale #}
                        {% if not pm.isPrimary %}
                        <form method="POST" action="{{ path('manager_pos_products_set_primary_image', {id: product.id, mediaId: pm.id}) }}" class="flex-1">
                            <input type="hidden" name="_token" value="{{ csrf_token('set_primary_' ~ pm.id) }}">
                            <button type="submit" class="w-full py-2 text-center text-xs text-gray-500 hover:text-yellow-600 hover:bg-yellow-50 dark:hover:bg-yellow-900/20 transition-colors border-r border-gray-100 dark:border-gray-700" title="Definir comme principale">
                                <i class="fas fa-star"></i>
                            </button>
                        </form>
                        {% else %}
                        <span class="flex-1 py-2 text-center text-xs text-yellow-500 border-r border-gray-100 dark:border-gray-700" title="Image principale">
                            <i class="fas fa-star"></i>
                        </span>
                        {% endif %}

                        {# Supprimer #}
                        <button type="button"
                                data-modal-target="confirm-modal-del-img-{{ pm.id }}"
                                data-modal-toggle="confirm-modal-del-img-{{ pm.id }}"
                                data-no-loader
                                class="flex-1 py-2 text-center text-xs text-gray-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors" title="Supprimer">
                            <i class="fas fa-trash"></i>
                        </button>
                        {% include 'components/pos/_confirm_modal.html.twig' with {
                            modal_id: 'del-img-' ~ pm.id,
                            title: 'Supprimer le media',
                            message: 'Ce fichier sera definitivement supprime.',
                            action_url: path('manager_pos_products_delete_image', {id: product.id, mediaId: pm.id}),
                            csrf_token_name: 'delete_product_image_' ~ pm.id,
                        } %}
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="text-center py-8 text-gray-400">
            <i class="fas fa-photo-film text-4xl text-gray-300 dark:text-gray-600 mb-3"></i>
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Aucun media</p>
            <p class="text-xs text-gray-400 mt-1">Cliquez sur "Ajouter" pour charger des images ou videos</p>
        </div>
    {% endif %}

    {# Overlay pour preview plein ecran #}
    <div data-pos-product-upload-target="overlay" class="hidden fixed inset-0 z-[60] bg-black/90 flex items-center justify-center" data-action="click->pos-product-upload#closeOverlay keydown.escape@window->pos-product-upload#closeOverlay">
        <button type="button" data-action="pos-product-upload#closeOverlay" class="absolute top-4 right-4 text-white hover:text-gray-300 transition-colors z-10">
            <i class="fas fa-times text-2xl"></i>
        </button>
        <div data-pos-product-upload-target="overlayContent" class="max-w-[90vw] max-h-[90vh]" data-action="click->pos-product-upload#stopPropagation"></div>
    </div>
</div>