{#
Page Vidéos — lecteur principal + playlist.
Compatible Symfony Turbo :
  - reprend la dernière vidéo cliquée (sessionStorage), SANS autoplay
  - arrête la vidéo quand on quitte la page (turbo:before-visit / before-cache)
  - coupe le lecteur audio persistant quand une vidéo démarre
#}
{% 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
                                    playsinline
                                    preload="metadata"
                                    {% 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&enablejsapi=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-video-id="{{ video.id }}"
                                    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;">
                                        {% if video.thumbnail %}
                                            <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 %}
                                            <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 %}
                                            <div class="flex aspect-video w-full items-center justify-center bg-night-800 text-lg">🎬</div>
                                        {% endif %}

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

{% block extra_scripts %}
    <script>
        (function () {
            'use strict';

            var STORAGE_KEY = 'ssm:last-video-id';
            var initialized = false;
            var cleanupFns = [];

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

            // Arrête et neutralise le lecteur vidéo courant (fichier ou YouTube).
            function stopCurrentPlayer(container) {
                if (!container) return;
                var v = container.querySelector('video');
                if (v) {
                    try { v.pause(); } catch (e) {}
                    // Couper la source évite que le buffering/son continue en cache Turbo
                    v.removeAttribute('autoplay');
                }
                var iframe = container.querySelector('iframe');
                if (iframe) {
                    // Pause YouTube via postMessage (enablejsapi=1 requis)
                    try {
                        iframe.contentWindow.postMessage(
                            '{"event":"command","func":"pauseVideo","args":""}', '*'
                        );
                    } catch (e) {}
                }
            }

            // Demande au lecteur audio persistant de se mettre en pause.
            function pauseAudioPlayer() {
                // API directe exposée par podcast-player.js
                if (window.podcastPlayer && typeof window.podcastPlayer.pause === 'function') {
                    window.podcastPlayer.pause();
                }
                // Événement (au cas où l'API ne serait pas encore prête)
                document.dispatchEvent(new CustomEvent('audio-player:pause'));
            }

            // L'audio a démarré → couper la vidéo en cours sur cette page.
            function onAudioStarted() {
                stopCurrentPlayer(document.getElementById('video-player-container'));
            }

            function renderPlayer(source, item, opts) {
                opts = opts || {};
                var autoplay = opts.autoplay === true;
                var container = document.getElementById('video-player-container');
                if (!container) return;

                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 playsinline preload="metadata"' +
                        (autoplay ? ' autoplay' : '') +
                        (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&enablejsapi=1' + (autoplay ? '&autoplay=1' : '') + '" ' +
                        'title="Lecteur vidéo" ' +
                        'allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" ' +
                        'allowfullscreen loading="lazy"></iframe>';
                }

                bindPlayEvent(container);
            }

            // Quand une vidéo démarre → couper l'audio persistant.
            function bindPlayEvent(container) {
                var v = container.querySelector('video');
                if (v) {
                    v.addEventListener('play', pauseAudioPlayer);
                }
            }

            function selectItem(item, opts) {
                var titleEl = document.getElementById('video-title');
                var descEl = document.getElementById('video-description');
                var themeEl = document.getElementById('video-theme');
                var items = document.querySelectorAll('.video-item');

                renderPlayer(item.getAttribute('data-source'), item, opts);

                if (titleEl) titleEl.textContent = item.getAttribute('data-title');
                if (descEl) descEl.textContent = item.getAttribute('data-description');
                if (themeEl) {
                    var theme = item.getAttribute('data-theme');
                    themeEl.textContent = theme;
                    themeEl.classList.toggle('hidden', !theme);
                }

                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');

                // Mémoriser la dernière vidéo cliquée
                var id = item.getAttribute('data-video-id');
                if (id) {
                    try { sessionStorage.setItem(STORAGE_KEY, id); } catch (e) {}
                }
            }

            function onItemClick() {
                selectItem(this, { autoplay: true }); // clic = action volontaire → lecture
                this.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }

            function init() {
                if (initialized) return;
                var items = document.querySelectorAll('.video-item');
                if (!items.length) return;
                initialized = true;

                items.forEach(function (item) {
                    item.addEventListener('click', onItemClick);
                    cleanupFns.push(function () {
                        item.removeEventListener('click', onItemClick);
                    });
                });

                // Reprendre la dernière vidéo cliquée — SANS autoplay
                var lastId = null;
                try { lastId = sessionStorage.getItem(STORAGE_KEY); } catch (e) {}
                if (lastId) {
                    var target = document.querySelector('.video-item[data-video-id="' + lastId + '"]');
                    if (target) {
                        selectItem(target, { autoplay: false });
                    }
                }

                // Corriger le poster du lecteur initial
                var firstItem = items[0];
                if (firstItem) {
                    var poster = firstItem.getAttribute('data-poster');
                    var video = document.getElementById('video-player');
                    if (video && video.tagName === 'VIDEO' && poster) {
                        video.setAttribute('poster', poster);
                    }
                    bindPlayEvent(document.getElementById('video-player-container'));
                }
            }

            // Nettoyage avant que Turbo quitte / met en cache la page
            function teardown() {
                stopCurrentPlayer(document.getElementById('video-player-container'));
                cleanupFns.forEach(function (fn) { fn(); });
                cleanupFns = [];
                initialized = false;
            }

            // Pause si l'onglet passe en arrière-plan
            function onVisibility() {
                if (document.hidden) {
                    stopCurrentPlayer(document.getElementById('video-player-container'));
                }
            }

            // --- Câblage Turbo ---
            document.addEventListener('turbo:load', init);
            document.addEventListener('turbo:before-visit', teardown);
            document.addEventListener('turbo:before-cache', teardown);
            document.addEventListener('visibilitychange', onVisibility);
            // L'audio persistant demande l'arrêt de la vidéo
            document.addEventListener('video-player:pause', onAudioStarted);

            // Cas non-Turbo / premier rendu direct
            if (document.readyState !== 'loading') {
                init();
            } else {
                document.addEventListener('DOMContentLoaded', init);
            }
        })();
    </script>
{% endblock %}