{#
Page Vidéos — lecteur principal + playlist, à la manière d'une appli vidéo.

Données attendues du contrôleur (adapte les noms de champs à tes entités) :

videos: collection d'objets/array avec au minimum :
    - id (ou slug)
    - title
    - description (optionnel)
    - youtubeId (optionnel — identifiant YouTube, ex. "dQw4w9WgXcQ")
    - videoFilename / videoMimeType (optionnel — fichier vidéo uploadé, prioritaire sur youtubeId)
    - hasVideoFile() (booléen — vrai si une vidéo fichier est présente)
    - thumbnail (optionnel — sinon miniature YouTube par défaut, ou icône 🎬 si aucune des deux)
    - theme (optionnel, pour affichage d'un badge)
    - duration (optionnel, chaîne du type "12:34")

Exemple de contrôleur :

    return $this->render('video/index.html.twig', [
        'videos' => $videoRepository->findBy([], ['createdAt' => 'DESC']),
    ]);
#}
{% extends 'base.html.twig' %}
{% block title %}Vidéos — Serigne Sam Mbaye{% endblock %}
{% block meta_description %}Regardez des extraits vidéo des conférences de Serigne Sam Mbaye : soufisme, mouridisme, vie du prophète et bien plus.{% endblock %}
{% block body %}
    <section class="mx-auto max-w-6xl px-4 py-10">
        <p class="text-xs font-semibold uppercase tracking-[0.3em] text-gold-400">Vidéothèque</p>
        <h1 class="rule-gold mt-2 font-display text-3xl font-semibold">Vidéos</h1>
        <p class="mt-3 max-w-2xl leading-relaxed text-sand">
            Extraits filmés des conférences de Serigne Sam Mbaye. Sélectionnez une vidéo dans la playlist pour la lancer.
        </p>

        {% if videos|length > 0 %}
            <div class="mt-8 grid gap-6 lg:grid-cols-[1fr_360px]">

                <!-- Lecteur principal -->
                <div>
                    <div class="card overflow-hidden p-0">
                        <div class="aspect-video w-full bg-night-950" id="video-player-container">
                            {% set firstVideo = videos|first %}
                            {% if firstVideo.videoFilename %}
                                <video
                                    id="video-player"
                                    class="h-full w-full"
                                    controls
                                    autoplay
                                    playsinline
                                    {% if firstVideo.thumbnail %}poster="{{ asset('uploads/thumbnails/' ~ firstVideo.thumbnail) }}"{% endif %}
                                >
                                    <source src="{{ asset('uploads/videos/' ~ firstVideo.videoFilename) }}" type="{{ firstVideo.videoMimeType|default('video/mp4') }}">
                                    Votre navigateur ne supporte pas la lecture vidéo HTML5.
                                </video>
                            {% elseif firstVideo.youtubeId %}
                                <iframe
                                    id="video-player"
                                    class="h-full w-full"
                                    src="https://www.youtube-nocookie.com/embed/{{ firstVideo.youtubeId }}?rel=0&autoplay=1"
                                    title="Lecteur vidéo"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                    allowfullscreen
                                    loading="lazy"
                                ></iframe>
                            {% else %}
                                <div class="flex h-full w-full items-center justify-center bg-night-800">
                                    <span class="text-4xl">🎬</span>
                                </div>
                            {% endif %}
                        </div>
                        <div class="p-5">
                            <div class="flex items-start justify-between gap-3">
                                <h2 id="video-title" class="font-display text-xl font-semibold text-ivory">{{ firstVideo.title }}</h2>
                                {% if firstVideo.theme %}
                                    <span id="video-theme" class="shrink-0 rounded-full border border-gold-400/30 px-3 py-1 text-xs text-gold-300">{{ firstVideo.theme }}</span>
                                {% endif %}
                            </div>
                            <p id="video-description" class="mt-2 text-sm leading-relaxed text-sand">{{ firstVideo.description|default('') }}</p>
                        </div>
                    </div>
                </div>

                <!-- Playlist -->
                <aside class="card max-h-[640px] overflow-y-auto p-3">
                    <p class="px-2 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-gold-400">
                        Playlist · {{ videos|length }} vidéo{{ videos|length > 1 ? 's' : '' }}
                    </p>
                    <ul class="mt-1 space-y-1">
                        {% for video in videos %}
                            <li>
                                <button
                                    type="button"
                                    class="video-item flex w-full items-start gap-3 rounded-lg p-2 text-left transition hover:bg-night-800/60 {{ loop.first ? 'bg-night-800/80 ring-1 ring-gold-400/30' : '' }}"
                                    data-source="{{ video.videoFilename ? 'file' : 'youtube' }}"
                                    data-video-url="{{ video.videoFilename ? asset('uploads/videos/' ~ video.videoFilename) : '' }}"
                                    data-video-mime="{{ video.videoMimeType|default('video/mp4') }}"
                                    data-youtube-id="{{ video.youtubeId }}"
                                    data-poster="{{ video.thumbnail ? asset('uploads/thumbnails/' ~ video.thumbnail) : '' }}"
                                    data-title="{{ video.title|e('html_attr') }}"
                                    data-description="{{ video.description|default('')|e('html_attr') }}"
                                    data-theme="{{ video.theme|default('')|e('html_attr') }}"
                                >
                                    <span class="relative shrink-0 overflow-hidden rounded-md" style="width:112px;">
                                        {# --- GESTION CORRIGÉE DES THUMBNAILS --- #}
                                        {% if video.thumbnail %}
                                            {# Thumbnail généré automatiquement #}
                                            <img
                                                src="{{ asset('uploads/thumbnails/' ~ video.thumbnail) }}"
                                                alt="{{ video.title }}"
                                                class="aspect-video w-full object-cover"
                                                loading="lazy"
                                                onerror="this.onerror=null; this.parentElement.innerHTML='<div class=\'flex aspect-video w-full items-center justify-center bg-night-800 text-lg\'>🎬</div>';"
                                            >
                                        {% elseif video.youtubeId %}
                                            {# Thumbnail YouTube #}
                                            <img
                                                src="https://i.ytimg.com/vi/{{ video.youtubeId }}/mqdefault.jpg"
                                                alt="{{ video.title }}"
                                                class="aspect-video w-full object-cover"
                                                loading="lazy"
                                                onerror="this.onerror=null; this.parentElement.innerHTML='<div class=\'flex aspect-video w-full items-center justify-center bg-night-800 text-lg\'>🎬</div>';"
                                            >
                                        {% else %}
                                            {# Placeholder par défaut #}
                                            <div class="flex aspect-video w-full items-center justify-center bg-night-800 text-lg">🎬</div>
                                        {% endif %}

                                        {# Badge durée #}
                                        {% if video.duration %}
                                            <span class="absolute bottom-1 right-1 rounded bg-night-950/80 px-1 text-[10px] text-ivory">{{ video.duration }}</span>
                                        {% endif %}
                                    </span>
                                    <span class="min-w-0">
                                        <span class="line-clamp-2 block text-sm font-medium text-ivory">{{ video.title }}</span>
                                        {% if video.theme %}
                                            <span class="mt-1 block text-xs text-sand-dim">{{ video.theme }}</span>
                                        {% endif %}
                                    </span>
                                </button>
                            </li>
                        {% endfor %}
                    </ul>
                </aside>
            </div>

            <script>
                (function () {
                    var container = document.getElementById('video-player-container');
                    var titleEl = document.getElementById('video-title');
                    var descEl = document.getElementById('video-description');
                    var themeEl = document.getElementById('video-theme');
                    var items = document.querySelectorAll('.video-item');

                    function escapeAttr(str) {
                        var div = document.createElement('div');
                        div.textContent = str == null ? '' : String(str);
                        return div.innerHTML;
                    }

                    function renderPlayer(source, item) {
                        if (source === 'file') {
                            var url = item.getAttribute('data-video-url');
                            var mime = item.getAttribute('data-video-mime') || 'video/mp4';
                            var poster = item.getAttribute('data-poster');
                            container.innerHTML =
                                '<video id="video-player" class="h-full w-full" controls autoplay playsinline' +
                                (poster ? ' poster="' + escapeAttr(poster) + '"' : '') + '>' +
                                '<source src="' + escapeAttr(url) + '" type="' + escapeAttr(mime) + '">' +
                                'Votre navigateur ne supporte pas la lecture vidéo HTML5.' +
                                '</video>';
                        } else {
                            var youtubeId = item.getAttribute('data-youtube-id');
                            container.innerHTML =
                                '<iframe id="video-player" class="h-full w-full" ' +
                                'src="https://www.youtube-nocookie.com/embed/' + escapeAttr(youtubeId) + '?rel=0&autoplay=1" ' +
                                'title="Lecteur vidéo" ' +
                                'allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" ' +
                                'allowfullscreen loading="lazy"></iframe>';
                        }
                    }

                    items.forEach(function (item) {
                        item.addEventListener('click', function () {
                            renderPlayer(item.getAttribute('data-source'), item);

                            titleEl.textContent = item.getAttribute('data-title');
                            descEl.textContent = item.getAttribute('data-description');

                            if (themeEl) {
                                var theme = item.getAttribute('data-theme');
                                themeEl.textContent = theme;
                                if (theme) {
                                    themeEl.classList.remove('hidden');
                                } else {
                                    themeEl.classList.add('hidden');
                                }
                            }

                            items.forEach(function (i) {
                                i.classList.remove('bg-night-800/80', 'ring-1', 'ring-gold-400/30');
                            });
                            item.classList.add('bg-night-800/80', 'ring-1', 'ring-gold-400/30');

                            item.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
                            window.scrollTo({ top: 0, behavior: 'smooth' });
                        });
                    });

                    // --- Correction pour le premier chargement ---
                    // S'assurer que le poster du lecteur principal est correct
                    (function fixFirstVideoPoster() {
                        var firstItem = document.querySelector('.video-item');
                        if (firstItem) {
                            var poster = firstItem.getAttribute('data-poster');
                            var video = document.getElementById('video-player');
                            if (video && video.tagName === 'VIDEO' && poster) {
                                video.setAttribute('poster', poster);
                            }
                        }
                    })();
                })();
            </script>
        {% else %}
            <div class="mt-10 card p-10 text-center text-sand-dim">
                <p>Aucune vidéo n'est disponible pour le moment.</p>
                <p class="mt-1 text-sm">Revenez bientôt — de nouveaux extraits seront ajoutés régulièrement.</p>
            </div>
        {% endif %}
    </section>
{% endblock %}