var videoElement  = null;
var captionEl     = null;

var videos = [
    {
        "url": "/videos/vQue es.mp4",
        "text": "What it is and what makes us unique in the culinary world.",
        "finalText": "Want to know more? Swipe up to dive into our historical roots."
    },
    {
        "url": "/videos/vQue es 2.mp4",
        "text": "Discover the event through our visitors.",
        "finalText": "Curious how our traditions have stayed alive? Explore more about our culinary heritage—swipe up."
    },
    {
        "url": "/videos/vHistoria.mp4",
        "text": "Travel through time to explore our history.",
        "finalText": "Curious how our traditions have stayed alive? Explore more about our culinary heritage."
    },
    {
        "url": "/videos/vTradicion.mp4",
        "text": "Learn about our tradition passed down from generation to generation and how it has influenced our culinary approach.",
        "finalText": "Fascinated by tradition? See how our chefs use these traditional methods today."
    },
    {
        "url": "/videos/vvideo1.mp4",
        "text": "Explore the unique characteristics of the razor clam, an essential seafood in our cuisine.",
        "finalText": "Interested in other exquisite seafood? Don’t miss our next video on Seafood Rice."
    },
    {
        "url": "/videos/vvideo2.mp4",
        "text": "Enjoy our Seafood Rice, a perfect blend of flavors that captures the essence of the ocean.",
        "finalText": "Hungry for more delights? Discover the fresh, authentic taste of mussels in our next video."
    },
    {
        "url": "/videos/vvideo3.mp4",
        "text": "Dive into the vibrant flavor of mussels, a vital component of our culinary offer.",
        "finalText": "Fascinated by the flavors of the sea? Scallops await you in the next video to surprise you."
    },
    {
        "url": "/videos/vvideo4.mp4",
        "text": "Experience the soft, delicate taste of scallops, a favorite among gourmets and chefs.",
        "finalText": "Interested in our cooking methods? Discover how we prepare octopus in the next video."
    },
    {
        "url": "/videos/vvideo5.mp4",
        "text": "Discover the different ways to prepare octopus and how each technique enhances its unique flavors.",
        "finalText": "Thank you for joining us on this culinary journey. We hope you enjoyed discovering our cuisine as much as we enjoyed preparing it for you."
    }
];

// ── Estado ──
var currentVideoIndex = 0;
var userWantsSound    = false;
var progressInterval  = null;
var isTouch = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);

// ── Progreso (story bars) ──
function initProgressBars() {
    var bar = document.getElementById('progress-bar');
    if (!bar) return;
    bar.innerHTML = '';
    for (var i = 0; i < videos.length; i++) {
        var seg = document.createElement('div');
        seg.className = 'progress-segment';
        seg.id = 'seg-' + i;
        var fill = document.createElement('div');
        fill.className = 'fill';
        seg.appendChild(fill);
        bar.appendChild(seg);
    }
}

function updateProgressBars() {
    if (progressInterval) { clearInterval(progressInterval); progressInterval = null; }

    for (var i = 0; i < videos.length; i++) {
        var seg  = document.getElementById('seg-' + i);
        if (!seg) continue;
        var fill = seg.querySelector('.fill');
        if (i < currentVideoIndex) {
            seg.classList.add('done');
            fill.style.width = '100%';
        } else if (i === currentVideoIndex) {
            seg.classList.remove('done');
            fill.style.width = '0%';
            // Animar fill según progreso real del vídeo
            (function(f) {
                progressInterval = setInterval(function() {
                    if (!videoElement || !videoElement.duration) return;
                    var pct = (videoElement.currentTime / videoElement.duration) * 100;
                    f.style.width = Math.min(pct, 100) + '%';
                    if (pct >= 100) { clearInterval(progressInterval); progressInterval = null; }
                }, 300);
            })(fill);
        } else {
            seg.classList.remove('done');
            fill.style.width = '0%';
        }
    }
}

// ── Contador ──
function updateCounter() {
    var el = document.getElementById('video-counter');
    if (el) el.textContent = (currentVideoIndex + 1) + ' / ' + videos.length;
}

// ── Caption ──
function showCaption(text) {
    if (!captionEl) return;
    captionEl.classList.add('hide');
    setTimeout(function() {
        captionEl.innerHTML = text || '';
        captionEl.classList.remove('hide');
        // Auto-ocultar tras 15s
        setTimeout(function() { captionEl.classList.add('hide'); }, 15000);
    }, 300);
}

// ── Sonido: sincronizar icono ──
function syncSoundIcon() {
    var icon = document.getElementById('sound-icon');
    if (!icon || !videoElement) return;
    icon.className = videoElement.muted ? 'fas fa-volume-mute' : 'fas fa-volume-up';
}

// ── Reproducción ──
function changeVideo(fadeDir) {
    if (!videoElement) return;

    // Fade out
    videoElement.classList.add('fading');

    setTimeout(function() {
        // Configurar vídeo
        videoElement.muted    = !userWantsSound;
        videoElement.autoplay = true;
        videoElement.setAttribute('playsinline', '');
        videoElement.setAttribute('webkit-playsinline', '');

        videoElement.onended = null;
        videoElement.src = videos[currentVideoIndex].url;
        videoElement.currentTime = 0;
        videoElement.load();

        // Fade in
        videoElement.classList.remove('fading');

        // UI
        updateCounter();
        updateProgressBars();
        syncSoundIcon();
        showCaption(videos[currentVideoIndex].text);

        // Al terminar el vídeo: mostrar texto final
        videoElement.onended = function() {
            showCaption(videos[currentVideoIndex].finalText);
        };

        // Autoplay
        var p = videoElement.play();
        if (p && typeof p.then === 'function') {
            p.catch(function() { /* bloqueado por política del navegador */ });
        }
    }, 220);
}

// ── Controles globales ──
function playVideo() {
    if (!videoElement) return;
    if (videoElement.muted) {
        userWantsSound = true;
        videoElement.muted = false;
        if (videoElement.volume === 0) videoElement.volume = 0.6;
        syncSoundIcon();
        videoElement.play().catch(function(){});
        return;
    }
    if (videoElement.paused) {
        videoElement.play().catch(function(){});
    } else {
        videoElement.pause();
    }
}

function nextVideo() {
    currentVideoIndex = (currentVideoIndex + 1) % videos.length;
    changeVideo('up');
}

function previousVideo() {
    currentVideoIndex = (currentVideoIndex - 1 + videos.length) % videos.length;
    changeVideo('down');
}

// ── Inicialización ──
document.addEventListener('DOMContentLoaded', function() {
    videoElement = document.getElementById('current-video');
    captionEl    = document.getElementById('caption-text');

    initProgressBars();

    // ── MÓVIL: swipe + unmute automático ──
    if (isTouch && videoElement) {
        var touchstartY = 0, touchstartX = 0, THRESHOLD = 48;

        document.getElementById('tour-wrapper').addEventListener('touchstart', function(e) {
            touchstartY = e.changedTouches[0].clientY;
            touchstartX = e.changedTouches[0].clientX;
        }, { passive: true });

        document.getElementById('tour-wrapper').addEventListener('touchend', function(e) {
            var dy  = e.changedTouches[0].clientY - touchstartY;
            var dx  = e.changedTouches[0].clientX - touchstartX;
            var tapX = e.changedTouches[0].clientX;

            // Ignorar si el toque fue sobre botones, top-bar, etc.
            var target = e.target;
            if (target.closest('#action-buttons') || target.closest('#top-bar') || target.closest('#nav-arrows')) {
                return;
            }

            if (Math.abs(dy) > Math.abs(dx) && Math.abs(dy) > THRESHOLD) {
                // Swipe vertical: arriba → siguiente, abajo → anterior
                if (dy < 0) { nextVideo(); } else { previousVideo(); }
            } else if (Math.abs(dy) < 12 && Math.abs(dx) < 12) {
                // Tap corto: mitad izquierda → anterior, mitad derecha → siguiente
                if (tapX < window.innerWidth / 2) { previousVideo(); } else { nextVideo(); }
            }
        }, { passive: true });

        // Primera interacción: desmutear
        var unmuteOnce = function() {
            if (!userWantsSound) {
                userWantsSound = true;
                videoElement.muted  = false;
                if (videoElement.volume === 0) videoElement.volume = 0.6;
                syncSoundIcon();
                videoElement.play().catch(function(){});
            }
            window.removeEventListener('touchend', unmuteOnce, true);
        };
        window.addEventListener('touchend', unmuteOnce, true);

        // Swipe tip
        var swipeTip = document.getElementById('swipe-tip');
        if (swipeTip) {
            swipeTip.style.display = 'flex';
            var hideTip = function() {
                swipeTip.classList.add('hide');
                setTimeout(function() { if (swipeTip.parentNode) swipeTip.parentNode.removeChild(swipeTip); }, 500);
                document.getElementById('tour-wrapper').removeEventListener('touchstart', hideTip, true);
            };
            setTimeout(hideTip, 5000);
            document.getElementById('tour-wrapper').addEventListener('touchstart', hideTip, { once: true, capture: true });
        }
    }

    // ── DESKTOP: teclado + click para desmutear ──
    if (!isTouch) {
        document.addEventListener('keydown', function(e) {
            switch (e.key) {
                case 'ArrowDown': case 'PageDown': e.preventDefault(); nextVideo();     break;
                case 'ArrowUp':   case 'PageUp':   e.preventDefault(); previousVideo(); break;
                case ' ': case 'Spacebar':          e.preventDefault(); playVideo();     break;
                case 'm': case 'M':
                    var btn = document.getElementById('sound-button');
                    if (btn) btn.click();
                    break;
            }
        });

        // Click en el vídeo: desmutea / pausa-play
        videoElement.addEventListener('click', function() {
            if (videoElement.muted) {
                userWantsSound = true;
                videoElement.muted = false;
                if (videoElement.volume === 0) videoElement.volume = 0.6;
                syncSoundIcon();
                videoElement.play().catch(function(){});
            } else {
                if (videoElement.paused) { videoElement.play().catch(function(){}); }
                else { videoElement.pause(); }
            }
        });
    }

    // Cargar primer vídeo
    changeVideo();
});