document.addEventListener("DOMContentLoaded", function () {
  const swiperEl = document.querySelector('.lumanPlus-video-wrapper swiper-container');
  if (!swiperEl || !customElements.get('swiper-container')) return;

  const swiperInstance = swiperEl.swiper;

  const infoBox = document.getElementById('lumanPlus-video-info');
  const infoName = infoBox.querySelector('#info-name');
  const infoLocation = infoBox.querySelector('#info-location');
  const infoDesc = infoBox.querySelector('#info-desc');
  const infoAvatar = infoBox.querySelector('#info-avatar');
  const infoLink = infoBox.querySelector('#info-link');

  const slides = swiperEl.querySelectorAll('swiper-slide');

  function getSlideInfo(index) {
    const infoEl = slides[index]?.querySelector('.lumanPlus-slide-info');
    if (!infoEl) return null;

    return {
      name: infoEl.querySelector('.slide-name')?.innerText || '',
      location: infoEl.querySelector('.slide-location')?.innerText || '',
      desc: infoEl.querySelector('.slide-desc')?.innerText || '',
      avatar: infoEl.querySelector('.slide-avatar')?.innerText || '',
      link: infoEl.querySelector('.slide-link')?.innerText || '',
      linkText: infoEl.querySelector('.slide-link-text')?.innerText || ''
    };
  }

  function updateInfo(index) {
    const data = getSlideInfo(index);
    if (!data) return;

    infoName.textContent = data.name;
    infoLocation.textContent = data.location;
    infoDesc.textContent = data.desc;
    infoAvatar.src = data.avatar;
    infoLink.href = data.link;
    infoLink.textContent = data.linkText;
  }

  function updateNavButtons() {
    document.getElementById('prevBtn')?.classList.toggle('disabled', swiperInstance.isBeginning);
    document.getElementById('nextBtn')?.classList.toggle('disabled', swiperInstance.isEnd);
  }

  function resetVideos() {
    swiperEl.querySelectorAll('video').forEach(v => {
      v.pause();
      v.currentTime = 0;
      v.removeAttribute("controls");
      v.style.display = 'none';
      v.style.zIndex = 1;
    });

    swiperEl.querySelectorAll('.video-cover').forEach(c => {
      c.style.visibility = 'visible';
    });
  }

  // پخش ویدیو با کلیک روی کاور
  window.lumanPlusPlayVideo = function (cover) {
    const video = cover.nextElementSibling;
    cover.style.visibility = 'hidden';
    video.style.display = 'block';
    video.style.zIndex = 20;
    video.setAttribute("controls", "true");
    video.muted = false;
    video.play().catch(console.warn);
  };

  // دکمه‌های رفتن به بعدی و قبلی
  window.lumanPlusGoToNext = () => swiperInstance.slideNext();
  window.lumanPlusGoToPrev = () => swiperInstance.slidePrev();

  // لیزی لود ویدیو برای اسلاید فعال
  swiperInstance.on('slideChangeTransitionEnd', () => {
    const videos = swiperEl.querySelectorAll('video');
    videos.forEach((video, i) => {
      if (i === swiperInstance.activeIndex && video.hasAttribute('preload')) {
        video.setAttribute('preload', 'auto');
      }
    });
  });

  swiperInstance.on('slideChange', () => {
    updateInfo(swiperInstance.activeIndex);
    updateNavButtons();
    resetVideos();
  });

  swiperInstance.on('transitionEnd', updateNavButtons);

  // مقداردهی اولیه
  updateInfo(0);
  updateNavButtons();
});
