@php
    $playerId = $playerId ?? 'protected-player-' . uniqid();
    $styleOnly = $styleOnly ?? false;
@endphp

<style>
.video-player-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    user-select: none;
    -webkit-user-select: none;
    aspect-ratio: 16/9;
}

.video-player-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Custom Controls styling */
.custom-controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
}

.video-player-wrapper:hover .custom-controls,
.video-player-wrapper:focus-within .custom-controls {
    opacity: 1;
}

/* Center play/pause overlay */
.center-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    background: rgba(218, 41, 28, 0.92);
    color: #fff;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(218, 41, 28, 0.5);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                opacity 0.25s ease, background 0.2s ease, box-shadow 0.3s ease;
    opacity: 1;
    pointer-events: auto;
    z-index: 10;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.center-play-btn i {
    /* Empuja ligeramente el ícono play para compensar su asimetría visual */
    transform: translateX(2px);
}

.center-play-btn.is-pause i {
    transform: translateX(0);
}

.center-play-btn:hover {
    background: rgba(255, 50, 40, 1);
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 0 8px rgba(218, 41, 28, 0.18);
}

.center-play-btn:active {
    transform: translate(-50%, -50%) scale(0.95);
}

/* Cuando se está reproduciendo: fade out el botón salvo en hover */
.video-player-wrapper.is-playing .center-play-btn {
    opacity: 0;
    pointer-events: none;
}

.video-player-wrapper.is-playing:hover .center-play-btn,
.video-player-wrapper.is-playing:focus-within .center-play-btn {
    opacity: 1;
    pointer-events: auto;
}

.controls-bottom-bar {
    padding: 10px 15px 12px 15px;
    background: rgba(15, 15, 15, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transform: translateY(0);
    transition: transform 0.3s ease;
}

/* Progress slider styling */
.progress-container {
    position: relative;
    width: 100%;
    height: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 4px 0;
}

.progress-bar-track {
    position: relative;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    overflow: visible;
}

.progress-container:hover .progress-bar-track {
    height: 8px;
}

.progress-filled-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: #da291c;
    border-radius: 3px 0 0 3px;
    z-index: 2;
}

.progress-buffer-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 3px;
    z-index: 1;
    transition: width 0.2s ease;
}

.progress-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border: 2px solid #da291c;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 3;
    transition: transform 0.1s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.progress-container:hover .progress-thumb,
.progress-container:active .progress-thumb {
    transform: translate(-50%, -50%) scale(1);
}

.time-tooltip {
    position: absolute;
    top: -30px;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    pointer-events: none;
    display: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.progress-container:hover .time-tooltip {
    display: block;
}

/* Control buttons styling */
.controls-buttons-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.left-controls, .right-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.control-btn {
    background: none;
    border: none;
    color: #eee;
    padding: 0;
    width: 32px;
    height: 32px;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s ease, transform 0.1s ease, background 0.15s ease;
}

.control-btn:hover {
    color: #da291c;
    background: rgba(255, 255, 255, 0.08);
}

.control-btn:active {
    transform: scale(0.9);
}

.time-display {
    color: #ddd;
    font-size: 13px;
    font-family: 'Outfit', 'Inter', sans-serif;
    letter-spacing: 0.5px;
}

.current-time {
    color: #fff;
    font-weight: 500;
}

.total-duration {
    color: #aaa;
}

/* Volume Slider styling */
.volume-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.volume-slider-wrapper {
    width: 0;
    overflow: hidden;
    transition: width 0.2s ease;
    display: flex;
    align-items: center;
}

.volume-container:hover .volume-slider-wrapper,
.volume-container:focus-within .volume-slider-wrapper {
    width: 60px;
}

.volume-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    outline: none;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

/* Playback Speed Control */
.speed-container {
    position: relative;
    display: flex;
    align-items: center;
}

.speed-btn {
    background: none;
    border: none;
    color: #eee;
    padding: 0 8px;
    height: 32px;
    min-width: 38px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Outfit', 'Inter', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease;
    letter-spacing: 0.3px;
}

.speed-btn:hover {
    color: #da291c;
    background: rgba(255, 255, 255, 0.08);
}

.speed-btn:active {
    transform: scale(0.92);
}

.speed-menu {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    background: rgba(20, 20, 22, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 6px 0;
    min-width: 110px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 20;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.speed-menu.open {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.speed-option {
    width: 100%;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 7px 14px;
    color: #ddd;
    font-size: 13px;
    font-family: 'Outfit', 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    user-select: none;
}

.speed-option:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.speed-option.active {
    color: #da291c;
    font-weight: 600;
}

.speed-option.active::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 11px;
    margin-left: 10px;
}

@media (max-width: 520px) {
    .controls-bottom-bar {
        padding: 9px 10px 10px;
    }

    .left-controls, .right-controls {
        gap: 8px;
    }

    .time-display,
    .speed-btn,
    .speed-option {
        font-size: 12px;
    }

    .speed-btn {
        min-width: 34px;
        padding: 0 6px;
    }

    .volume-container:hover .volume-slider-wrapper,
    .volume-container:focus-within .volume-slider-wrapper {
        width: 48px;
    }
}

/* Loading spinner */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0c0d12;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 6;
}

.loading-overlay.hidden {
    opacity: 0;
}

.loading-overlay.active {
    opacity: 1;
    background: rgba(0, 0, 0, 0.55);
}

.spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    border-top-color: #da291c;
    animation: spin 1s ease-in-out infinite;
}

.loading-text {
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-family: 'Outfit', 'Inter', sans-serif;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Mantener el botón central oculto hasta que el video esté listo para reproducir */
.video-player-wrapper:not(.ready) .center-play-btn {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.85);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Autoplay Countdown overlay */
.autoplay-countdown-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(12, 13, 18, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    pointer-events: none;
}

.autoplay-countdown-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.autoplay-countdown-card {
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    max-width: 90%;
    width: 350px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5);
}

.autoplay-countdown-title {
    font-size: 16px;
    font-weight: 500;
    color: #a0aec0;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.autoplay-countdown-number {
    font-size: 56px;
    font-weight: 700;
    color: #da291c;
    margin-bottom: 20px;
}

.autoplay-countdown-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.autoplay-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.autoplay-btn-cancel {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.autoplay-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.2);
}

.autoplay-btn-play {
    background: #da291c;
    color: #fff;
}

.autoplay-btn-play:hover {
    background: #ff3c30;
    box-shadow: 0 0 15px rgba(218, 41, 28, 0.4);
}
</style>

<script>
if (typeof window.initializeProtectedPlayer === 'undefined') {
    window.initializeProtectedPlayer = function(playerId) {
        const wrapper = document.getElementById(playerId);
        if (!wrapper) return;
        
        const video = wrapper.querySelector('.video-element');
        const progressContainer = wrapper.querySelector('.progress-container');
        const progressFilled = wrapper.querySelector('.progress-filled-bar');
        const progressBuffer = wrapper.querySelector('.progress-buffer-bar');
        const progressThumb = wrapper.querySelector('.progress-thumb');
        const tooltip = wrapper.querySelector('.time-tooltip');
        
        const playPauseBtn = wrapper.querySelector('.play-pause-btn');
        const centerPlayBtn = wrapper.querySelector('.center-play-btn');
        const timeCurrent = wrapper.querySelector('.current-time');
        const timeDuration = wrapper.querySelector('.total-duration');
        const volumeBtn = wrapper.querySelector('.volume-btn');
        const volumeSlider = wrapper.querySelector('.volume-slider');
        const fullscreenBtn = wrapper.querySelector('.fullscreen-btn');
        const speedContainer = wrapper.querySelector('.speed-container');
        const speedBtn = wrapper.querySelector('.speed-btn');
        const speedMenu = wrapper.querySelector('.speed-menu');
        const speedOptions = wrapper.querySelectorAll('.speed-option');
        const loadingOverlay = wrapper.querySelector('.loading-overlay');
        const controlsOverlay = wrapper.querySelector('.custom-controls');
        
        let isDragging = false;
        let dragPercent = 0;
        let controlsTimeout;
        
        // Prevent right click to protect video download option
        wrapper.addEventListener('contextmenu', e => e.preventDefault());
        
        // Play / Pause toggler
        function togglePlay(e) {
            // Si el evento viene de un botón/control evita que el video también lo reciba
            if (e) {
                e.preventDefault();
                e.stopPropagation();
            }
            // Sólo permitir reproducir si el video tiene datos cargados
            if (video.readyState < 2 && video.paused) return;
            if (video.paused) {
                video.play().catch(err => console.log("Play failed: ", err));
            } else {
                video.pause();
            }
        }

        playPauseBtn.addEventListener('click', togglePlay);
        centerPlayBtn.addEventListener('click', togglePlay);

        // Click en el video: pausa/reproduce. Doble click: fullscreen.
        // Usamos un pequeño delay para distinguir single de double click.
        let videoClickTimer = null;
        video.addEventListener('click', () => {
            if (videoClickTimer) {
                clearTimeout(videoClickTimer);
                videoClickTimer = null;
                return; // dejar que el dblclick haga el fullscreen
            }
            videoClickTimer = setTimeout(() => {
                videoClickTimer = null;
                togglePlay();
            }, 220);
        });
        video.addEventListener('dblclick', () => {
            if (videoClickTimer) {
                clearTimeout(videoClickTimer);
                videoClickTimer = null;
            }
            if (!document.fullscreenElement) {
                wrapper.requestFullscreen?.().catch(() => {});
            } else {
                document.exitFullscreen?.();
            }
        });
        
        // Update play/pause icon states
        video.addEventListener('play', () => {
            playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
            centerPlayBtn.innerHTML = '<i class="fas fa-pause"></i>';
            centerPlayBtn.classList.add('is-pause');
            wrapper.classList.add('is-playing');
            hideControlsDelayed();
        });

        video.addEventListener('pause', () => {
            playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
            centerPlayBtn.innerHTML = '<i class="fas fa-play"></i>';
            centerPlayBtn.classList.remove('is-pause');
            wrapper.classList.remove('is-playing');
            showControls();
        });
        
        // Estado inicial: overlay visible, wrapper NO listo (oculta botón play central)
        wrapper.classList.remove('ready', 'is-playing');
        loadingOverlay.classList.remove('hidden', 'active');
        // Limpiar estilos inline de versiones anteriores del init
        centerPlayBtn.style.opacity = '';
        centerPlayBtn.style.transform = '';
        centerPlayBtn.innerHTML = '<i class="fas fa-play"></i>';

        // Pre-warm: dispara una mini-petición Range para que el navegador abra
        // la conexión HTTP/2 al backend ANTES de que el <video> haga su request.
        // Cuando el <video> empiece a cargar, la conexión TCP/TLS ya está caliente
        // y el primer byte llega significativamente más rápido.
        if (video.src) {
            try {
                fetch(video.src, {
                    method: 'GET',
                    headers: { 'Range': 'bytes=0-0' },
                    cache: 'no-store',
                    credentials: 'same-origin',
                    keepalive: true,
                }).catch(() => {});
            } catch (e) { /* ignore */ }
        }

        // Auto-retry: si el video falla por error de red en los primeros segundos
        // (típico cuando la conexión a gstorage falla por timeout), reintentar 1 vez.
        let retryCount = 0;
        video.addEventListener('error', () => {
            const err = video.error;
            if (!err) return;
            // 2 = MEDIA_ERR_NETWORK, 3 = MEDIA_ERR_DECODE
            if ((err.code === 2 || err.code === 3) && retryCount < 1) {
                retryCount++;
                const currentSrc = video.src;
                const currentTime = video.currentTime || 0;
                video.src = '';
                setTimeout(() => {
                    video.src = currentSrc;
                    video.load();
                    if (currentTime > 0) {
                        video.currentTime = currentTime;
                    }
                    video.play().catch(() => {});
                }, 500);
            }
        });

        // Helpers para mostrar/ocultar el overlay de carga
        function showInitialLoading() {
            wrapper.classList.remove('ready');
            loadingOverlay.classList.remove('hidden', 'active');
        }
        function showBufferingLoading() {
            // Spinner con fondo semi-transparente cuando se buffea durante reproducción
            if (wrapper.classList.contains('ready')) {
                loadingOverlay.classList.remove('hidden');
                loadingOverlay.classList.add('active');
            }
        }
        function hideLoading() {
            wrapper.classList.add('ready');
            loadingOverlay.classList.remove('active');
            loadingOverlay.classList.add('hidden');
        }

        // Load and metadata events
        video.addEventListener('loadstart', showInitialLoading);
        video.addEventListener('loadedmetadata', () => {
            timeDuration.textContent = formatTime(video.duration);
        });
        video.addEventListener('loadeddata', hideLoading);

        // Update progress bar & timers (while not dragging)
        video.addEventListener('timeupdate', () => {
            if (!isDragging) {
                const percent = (video.currentTime / video.duration) * 100;
                updateProgressUI(percent);
                timeCurrent.textContent = formatTime(video.currentTime);
            }
        });

        // Buffer/Progress loading
        video.addEventListener('progress', () => {
            if (video.buffered.length > 0) {
                const bufferedEnd = video.buffered.end(video.buffered.length - 1);
                const duration = video.duration;
                if (duration > 0) {
                    progressBuffer.style.width = (bufferedEnd / duration) * 100 + '%';
                }
            }
        });

        // Buffering durante reproducción → spinner semitransparente
        video.addEventListener('waiting', showBufferingLoading);
        video.addEventListener('stalled', showBufferingLoading);
        video.addEventListener('playing', hideLoading);
        video.addEventListener('canplay', hideLoading);
        video.addEventListener('canplaythrough', hideLoading);

        // Si el video ya tiene datos cuando llegamos (cache del navegador), ocultamos
        if (video.readyState >= 2) {
            hideLoading();
        }
        
        // Custom videoEnded Event Dispatcher when video ends
        video.addEventListener('ended', () => {
            loadingOverlay.classList.remove('active');
            loadingOverlay.classList.add('hidden');
            playPauseBtn.innerHTML = '<i class="fas fa-redo"></i>';
            
            // Dispatch custom JS event on the player wrapper
            const endedEvent = new CustomEvent('videoEnded', {
                bubbles: true,
                detail: { playerId: playerId, video: video }
            });
            wrapper.dispatchEvent(endedEvent);
        });

        // Listen for the custom videoEnded event inside the player itself
        wrapper.addEventListener('videoEnded', () => {
            startAutoplayCountdown(wrapper);
        });

        let autoplayTimer;
        function startAutoplayCountdown(playerWrapper) {
            // Remove existing overlay if any
            const existing = playerWrapper.querySelector('.autoplay-countdown-overlay');
            if (existing) existing.remove();
            
            // Create overlay HTML
            const overlay = document.createElement('div');
            overlay.className = 'autoplay-countdown-overlay';
            overlay.innerHTML = `
                <div class="autoplay-countdown-card">
                    <div class="autoplay-countdown-title">Siguiente clase en</div>
                    <div class="autoplay-countdown-number">5</div>
                    <div class="autoplay-countdown-buttons">
                        <button class="autoplay-btn autoplay-btn-cancel" type="button">Cancelar</button>
                        <button class="autoplay-btn autoplay-btn-play" type="button">Reproducir Ya</button>
                    </div>
                </div>
            `;
            
            playerWrapper.appendChild(overlay);
            
            // Force reflow and add active class
            setTimeout(() => overlay.classList.add('active'), 50);
            
            let countdown = 5;
            const numberEl = overlay.querySelector('.autoplay-countdown-number');
            const cancelBtn = overlay.querySelector('.autoplay-btn-cancel');
            const playBtn = overlay.querySelector('.autoplay-btn-play');
            
            function triggerNextClass() {
                clearInterval(autoplayTimer);
                overlay.classList.remove('active');
                setTimeout(() => overlay.remove(), 300);
                
                // Find and click the next button
                const nextBtn = document.getElementById('btn-next');
                if (nextBtn && !nextBtn.disabled) {
                    nextBtn.click();
                }
            }
            
            autoplayTimer = setInterval(() => {
                countdown--;
                numberEl.textContent = countdown;
                if (countdown <= 0) {
                    triggerNextClass();
                }
            }, 1000);
            
            cancelBtn.addEventListener('click', () => {
                clearInterval(autoplayTimer);
                overlay.classList.remove('active');
                setTimeout(() => overlay.remove(), 300);
            });
            
            playBtn.addEventListener('click', () => {
                triggerNextClass();
            });
        }
        
        // Format seconds
        function formatTime(seconds) {
            if (isNaN(seconds) || seconds === Infinity) return '0:00';
            const h = Math.floor(seconds / 3600);
            const m = Math.floor((seconds % 3600) / 60);
            const s = Math.floor(seconds % 60);
            const sStr = s < 10 ? '0' + s : s;
            if (h > 0) {
                const mStr = m < 10 ? '0' + m : m;
                return h + ':' + mStr + ':' + sStr;
            }
            return m + ':' + sStr;
        }
        
        // Optimistic progress UI updates
        function updateProgressUI(percent) {
            percent = Math.max(0, Math.min(100, percent));
            progressFilled.style.width = percent + '%';
            progressThumb.style.left = percent + '%';
        }
        
        // Progress handlers
        function handleProgressInteraction(clientX) {
            const rect = progressContainer.getBoundingClientRect();
            const pos = (clientX - rect.left) / rect.width;
            dragPercent = Math.max(0, Math.min(1, pos));
            updateProgressUI(dragPercent * 100);
            
            tooltip.style.left = (dragPercent * 100) + '%';
            tooltip.textContent = formatTime(dragPercent * video.duration);
        }
        
        progressContainer.addEventListener('mousedown', function(e) {
            isDragging = true;
            handleProgressInteraction(e.clientX);
            tooltip.style.display = 'block';
            
            function onMouseMove(moveEvent) {
                handleProgressInteraction(moveEvent.clientX);
            }
            
            function onMouseUp() {
                isDragging = false;
                window.removeEventListener('mousemove', onMouseMove);
                window.removeEventListener('mouseup', onMouseUp);
                video.currentTime = dragPercent * video.duration;
                tooltip.style.display = '';
            }
            
            window.addEventListener('mousemove', onMouseMove);
            window.addEventListener('mouseup', onMouseUp);
        });
        
        progressContainer.addEventListener('touchstart', function(e) {
            isDragging = true;
            handleProgressInteraction(e.touches[0].clientX);
            tooltip.style.display = 'block';
            
            function onTouchMove(moveEvent) {
                handleProgressInteraction(moveEvent.touches[0].clientX);
            }
            
            function onTouchEnd() {
                isDragging = false;
                window.removeEventListener('touchmove', onTouchMove);
                window.removeEventListener('touchend', onTouchEnd);
                video.currentTime = dragPercent * video.duration;
                tooltip.style.display = '';
            }
            
            window.addEventListener('touchmove', onTouchMove);
            window.addEventListener('touchend', onTouchEnd);
        });
        
        // Hover tooltip updating
        progressContainer.addEventListener('mousemove', (e) => {
            if (!isDragging) {
                const rect = progressContainer.getBoundingClientRect();
                const pos = (e.clientX - rect.left) / rect.width;
                const percent = Math.max(0, Math.min(1, pos));
                tooltip.style.left = (percent * 100) + '%';
                tooltip.textContent = formatTime(percent * video.duration);
            }
        });
        
        // Controls Visibility Handlers
        function showControls() {
            controlsOverlay.style.opacity = '1';
            wrapper.style.cursor = 'default';
            clearTimeout(controlsTimeout);
            hideControlsDelayed();
        }
        
        function hideControlsDelayed() {
            if (video.paused || isDragging || speedMenu?.classList.contains('open')) return;
            clearTimeout(controlsTimeout);
            controlsTimeout = setTimeout(() => {
                if (!video.paused && !isDragging && !speedMenu?.classList.contains('open')) {
                    controlsOverlay.style.opacity = '0';
                    wrapper.style.cursor = 'none';
                }
            }, 3000);
        }
        
        wrapper.addEventListener('mousemove', showControls);
        wrapper.addEventListener('mouseleave', () => {
            clearTimeout(controlsTimeout);
            if (!video.paused && !isDragging && !speedMenu?.classList.contains('open')) {
                controlsOverlay.style.opacity = '0';
            }
        });
        
        // Playback speed control
        function syncSpeedUI(rate) {
            if (!speedBtn || !speedOptions.length) return;
            const label = rate === 1 ? '1x' : rate + 'x';
            speedBtn.textContent = label;
            speedOptions.forEach(option => {
                const isActive = parseFloat(option.dataset.speed) === rate;
                option.classList.toggle('active', isActive);
                option.setAttribute('aria-checked', isActive ? 'true' : 'false');
            });
        }

        // Velocidad elegida por el usuario vs velocidad efectiva: si el buffer
        // no alcanza a 1.5x/2x, bajamos temporalmente a 1x sin perder la
        // preferencia del usuario (la restauramos en cuanto el buffer se recupera).
        let userSelectedRate = video.playbackRate || 1;
        let throttled = false;

        function setPlaybackSpeed(rate) {
            if (!Number.isFinite(rate) || rate <= 0) return;
            userSelectedRate = rate;
            throttled = false;
            video.playbackRate = rate;
            video.defaultPlaybackRate = rate;
            syncSpeedUI(rate);
        }

        function bufferedAheadOf(t) {
            try {
                for (let i = 0; i < video.buffered.length; i++) {
                    if (video.buffered.start(i) <= t && video.buffered.end(i) >= t) {
                        return video.buffered.end(i) - t;
                    }
                }
            } catch (e) {}
            return 0;
        }

        function applyAdaptiveRate() {
            if (video.paused || video.ended) return;
            const ahead = bufferedAheadOf(video.currentTime);
            if (userSelectedRate > 1 && ahead < 2 && !throttled) {
                throttled = true;
                video.playbackRate = 1;
            } else if (throttled && ahead > 8) {
                throttled = false;
                video.playbackRate = userSelectedRate;
            }
        }

        video.addEventListener('timeupdate', applyAdaptiveRate);
        video.addEventListener('progress', applyAdaptiveRate);
        video.addEventListener('waiting', applyAdaptiveRate);

        function closeSpeedMenu() {
            if (!speedMenu || !speedBtn) return;
            speedMenu.classList.remove('open');
            speedBtn.setAttribute('aria-expanded', 'false');
        }

        if (speedBtn && speedMenu && speedOptions.length) {
            syncSpeedUI(video.playbackRate || 1);

            speedBtn.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                const shouldOpen = !speedMenu.classList.contains('open');

                if (shouldOpen) {
                    speedMenu.classList.add('open');
                    speedBtn.setAttribute('aria-expanded', 'true');
                    showControls();
                    clearTimeout(controlsTimeout);
                } else {
                    closeSpeedMenu();
                    hideControlsDelayed();
                }
            });

            speedOptions.forEach(option => {
                option.addEventListener('click', (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    setPlaybackSpeed(parseFloat(option.dataset.speed));
                    closeSpeedMenu();
                    hideControlsDelayed();
                });
            });

            document.addEventListener('click', (e) => {
                if (speedMenu.classList.contains('open') && !speedContainer?.contains(e.target)) {
                    closeSpeedMenu();
                    hideControlsDelayed();
                }
            });

            wrapper.addEventListener('keydown', (e) => {
                if (e.key === 'Escape') {
                    closeSpeedMenu();
                    hideControlsDelayed();
                }
            });

            // Solo sincronizamos la UI con la velocidad que eligió el usuario.
            // Si estamos en throttle automático por buffer bajo, mantenemos el
            // label de la velocidad seleccionada en el menú.
            video.addEventListener('ratechange', () => {
                syncSpeedUI(throttled ? userSelectedRate : (video.playbackRate || 1));
            });
        }

        // Volume Control
        volumeSlider.addEventListener('input', (e) => {
            const val = parseFloat(e.target.value);
            video.volume = val;
            video.muted = (val === 0);
            updateVolumeIcon(val, video.muted);
        });
        
        volumeBtn.addEventListener('click', () => {
            video.muted = !video.muted;
            const volumeIcon = volumeBtn.querySelector('i');
            if (video.muted) {
                volumeIcon.className = 'fas fa-volume-mute';
                volumeSlider.value = 0;
            } else {
                volumeSlider.value = video.volume;
                updateVolumeIcon(video.volume, false);
            }
        });
        
        function updateVolumeIcon(volume, muted) {
            const volumeIcon = volumeBtn.querySelector('i');
            if (!volumeIcon) return;
            if (muted || volume === 0) {
                volumeIcon.className = 'fas fa-volume-mute';
            } else if (volume < 0.5) {
                volumeIcon.className = 'fas fa-volume-down';
            } else {
                volumeIcon.className = 'fas fa-volume-up';
            }
        }
        
        // Fullscreen Toggler
        fullscreenBtn.addEventListener('click', () => {
            if (!document.fullscreenElement) {
                wrapper.requestFullscreen().catch(err => {
                    console.log("Fullscreen error: ", err);
                });
            } else {
                document.exitFullscreen();
            }
        });
        
        document.addEventListener('fullscreenchange', () => {
            if (document.fullscreenElement === wrapper) {
                fullscreenBtn.innerHTML = '<i class="fas fa-compress"></i>';
            } else {
                fullscreenBtn.innerHTML = '<i class="fas fa-expand"></i>';
            }
        });

        // Trigger loadedmetadata immediately if it is already loaded
        if (video.readyState >= 1) {
            timeDuration.textContent = formatTime(video.duration);
        }
    };
}
</script>

@if(!$styleOnly)
{{-- Preconnect: indica al navegador que prepare conexión al origen del video --}}
<link rel="preconnect" href="{{ url('/') }}">
<div class="video-player-wrapper" id="{{ $playerId }}">
    <video
        class="video-element"
        src="{{ $videoSrc }}"
        preload="auto"
        playsinline
        webkit-playsinline="true"
        x5-playsinline="true"
        disablePictureInPicture
        @if(isset($autoplay) && $autoplay) autoplay @endif
        @if(isset($muted) && $muted) muted @endif
    ></video>
    
    <!-- Custom Controls overlay -->
    <div class="custom-controls">
        <!-- Big Center Play Button Overlay -->
        <div class="center-play-btn"><i class="fas fa-play"></i></div>
        
        <div class="controls-bottom-bar">
            <!-- Progress Bar -->
            <div class="progress-container">
                <div class="progress-bar-track">
                    <div class="progress-buffer-bar"></div>
                    <div class="progress-filled-bar"></div>
                    <div class="progress-thumb"></div>
                </div>
                <div class="time-tooltip">00:00</div>
            </div>
            
            <div class="controls-buttons-row">
                <div class="left-controls">
                    <button class="control-btn play-pause-btn" type="button"><i class="fas fa-play"></i></button>
                    <div class="time-display">
                        <span class="current-time">0:00</span> / <span class="total-duration">0:00</span>
                    </div>
                </div>
                
                <div class="right-controls">
                    <div class="speed-container">
                        <button class="speed-btn" type="button" aria-haspopup="true" aria-expanded="false" aria-label="Velocidad de reproducción">1x</button>
                        <div class="speed-menu" role="menu" aria-label="Velocidad de reproducción">
                            <button class="speed-option" type="button" role="menuitemradio" aria-checked="false" data-speed="0.5">0.5x</button>
                            <button class="speed-option" type="button" role="menuitemradio" aria-checked="false" data-speed="0.75">0.75x</button>
                            <button class="speed-option active" type="button" role="menuitemradio" aria-checked="true" data-speed="1">1x</button>
                            <button class="speed-option" type="button" role="menuitemradio" aria-checked="false" data-speed="1.25">1.25x</button>
                            <button class="speed-option" type="button" role="menuitemradio" aria-checked="false" data-speed="1.5">1.5x</button>
                            <button class="speed-option" type="button" role="menuitemradio" aria-checked="false" data-speed="2">2x</button>
                        </div>
                    </div>
                    <div class="volume-container">
                        <button class="control-btn volume-btn" type="button"><i class="fas fa-volume-up"></i></button>
                        <div class="volume-slider-wrapper">
                            <input type="range" class="volume-slider" min="0" max="1" step="0.05" value="1">
                        </div>
                    </div>
                    <button class="control-btn fullscreen-btn" type="button"><i class="fas fa-expand"></i></button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Loading spinner overlay (visible al inicio hasta que el video esté listo) -->
    <div class="loading-overlay">
        <div class="spinner"></div>
        <div class="loading-text">Cargando video...</div>
    </div>
</div>

<script>
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => {
            window.initializeProtectedPlayer('{{ $playerId }}');
        });
    } else {
        window.initializeProtectedPlayer('{{ $playerId }}');
    }
</script>
@endif