document.addEventListener('DOMContentLoaded', () => {
  const autoslide_interval = 7000;
  const slider = document.querySelector('.section-38');
  const sliderItems = document.querySelectorAll('.div-block-179');
  const navItems = document.querySelectorAll('.list-item-7');
  const linkItems = document.querySelectorAll('.section-43');

  // PCとSPのtransform値
  const pcTransforms = [ '480px', '160px', '-160px', '-480px', '-800px', '-1120px' ];
  const spTransforms = [ '540px', '280px', '20px', '-240px', '-500px', '-760px' ];

  let currentSlideIndex = 1; // 初期スライドは2番目 (index 1)
  let isSP = window.innerWidth < 992; // 初期ロード時にブレイクポイント判定

  // 再生/一時停止ボタン要素の取得
  const playPauseButton = document.querySelector('.div-block-182');
  const playIcon = document.querySelector('.image-59');
  const pauseIcon = document.querySelector('.image-60');

  // 自動再生の状態を管理するフラグ
  let isAutoplay = true;
  let autoplayInterval;

  // ブレイクポイントをチェックしてisSPを更新する関数
  const checkBreakpoint = () => {
    isSP = window.innerWidth < 992;
  };

  // スライダーの位置を更新し、current, intro, outroクラスを付与する関数
  const updateSliderPosition = (index, skipTransition = false) => {
    currentSlideIndex = index;
    const transforms = isSP ? spTransforms : pcTransforms;
    
    // トランジションを制御
    if (skipTransition) {
      slider.style.transition = 'none';
      sliderItems.forEach(item => {
        item.style.transition = 'none';
      });
    } else {
      slider.style.transition = 'transform .3s';
      sliderItems.forEach(item => {
        item.style.transition = 'margin .2s, transform .2s, opacity .2s';
      });
    }
    
    // 強制的にリフロー（再レンダリング）を発生させる
    void slider.offsetWidth;
    
    // 位置を更新
    slider.style.transform = `translateX(${transforms[index]})`;
  
    sliderItems.forEach((item) => {
      const i = parseInt(item.getAttribute('data-slider-item'));
      item.classList.remove('div-block-179-current', 'div-block-179-intro', 'div-block-179-outro');
      if (i === index) {
        item.classList.add('div-block-179-current');
      } else if (i < index) {
        item.classList.add('div-block-179-outro');
      } else {
        item.classList.add('div-block-179-intro');
      }
    });
    
    // 端に到達した場合のループ処理
    if (index === 4 || index === 0) {
      setTimeout(() => {
        const targetIndex = index === 4 ? 1 : 3;
        updateSliderPosition(targetIndex, true); // トランジションをスキップして移動
        updateActiveClass(targetIndex);
        updateLinkDisplay(targetIndex);
        // トランジションを元に戻す（少し遅らせる）
        setTimeout(() => {
          slider.style.transition = 'transform .3s';
          sliderItems.forEach(item => {
            item.style.transition = 'margin .2s, transform .2s, opacity .2s';
          });
        }, 20);
      }, 500);
    }
  };

  // ナビゲーションドットのアクティブ状態を更新する関数
  const updateActiveClass = (index) => {
    navItems.forEach((navItem) => {
      var i = parseInt(navItem.getAttribute('data-slider-target'));
      navItem.classList.remove('list-item-7-active');
      navItem.classList.remove('list-item-7-stop');
      index = index % 3;
      if (index === 0) {
        index = 3;
      }
      if (i === index) {
        navItem.classList.add('list-item-7-active');
        //autoplayが停止している場合、追加でlist-item-7-stopクラスを付与
        if (!isAutoplay) {
          navItem.classList.add('list-item-7-stop');
        }
      }
    });
  };

  const updateLinkDisplay = (index) => {
    linkItems.forEach((linkItem) => {
      var i = parseInt(linkItem.getAttribute('data-slider-link'));
      linkItem.classList.remove('section-43-active');
      index = index % 3;
      if (i === index) {
        linkItem.classList.add('section-43-active');
      }
    });
  };

  // ナビゲーションドットのクリックイベントリスナーを設定
  navItems.forEach((navItem) => {
    navItem.addEventListener('click', (event) => {
      event.preventDefault(); // デフォルトのリンク動作を防止
      //data-slider-target属性の値を取得
      const index = parseInt(navItem.getAttribute('data-slider-target'));
      updateSliderPosition(index, false);
      updateActiveClass(index);
      updateLinkDisplay(index);
    });
  });
  
  // 初期表示を設定
  updateSliderPosition(currentSlideIndex, false);
  updateActiveClass(currentSlideIndex);
  updateLinkDisplay(currentSlideIndex);

  // resizeイベントでブレイクポイントをチェック
  window.addEventListener('resize', () => {
    checkBreakpoint();
    updateSliderPosition(currentSlideIndex); // リサイズ時にスライダー位置を再調整 (必要に応じて)
    updateActiveClass(currentSlideIndex);
    updateLinkDisplay(currentSlideIndex);
  });

  // 自動再生を開始する関数
  const startAutoplay = () => {
    autoplayInterval = setInterval(() => {
      currentSlideIndex = (currentSlideIndex + 1) % sliderItems.length;
      updateSliderPosition(currentSlideIndex);
      updateActiveClass(currentSlideIndex);
      updateLinkDisplay(currentSlideIndex);
    }, autoslide_interval);
    
    // アイコン表示を更新
    playIcon.style.display = 'block';
    pauseIcon.style.display = 'none';
    navItems.forEach((navItem) => {
      if (navItem.classList.contains('list-item-7-stop')) {
        navItem.classList.remove('list-item-7-stop');
        navItem.classList.remove('list-item-7-active');
        setTimeout(() => {
          navItem.classList.add('list-item-7-active');
        }, 100);
      }
    });
  };

  // 自動再生を停止する関数
  const stopAutoplay = () => {
    clearInterval(autoplayInterval);
    
    // アイコン表示を更新
    playIcon.style.display = 'none';
    pauseIcon.style.display = 'block';
    //現在list-item-7-activeクラスが付いている要素にlist-item-7-stopクラスを付与
    navItems.forEach((navItem) => {
      if (navItem.classList.contains('list-item-7-active')) {
        navItem.classList.add('list-item-7-stop');
      }
    });
  };

  // 再生/一時停止ボタンのクリックイベント
  playPauseButton.addEventListener('click', () => {
    isAutoplay = !isAutoplay;
    
    if (isAutoplay) {
      startAutoplay();
    } else {
      stopAutoplay();
    }
  });
  
  setTimeout(() => {
    //sliderItemsに直接指定されたスタイルを全て削除
    sliderItems.forEach((item) => {
      item.removeAttribute('style');
    });
    updateActiveClass(currentSlideIndex);

    // 自動再生を開始（元のsetInterval部分を置き換え）
    startAutoplay();
  }, autoslide_interval);

  //slider要素を左右にスワイプできるようにする
  let touchStartX = 0;
  let touchEndX = 0;
  slider.addEventListener('touchstart', (event) => {
    console.log('touch');
    touchStartX = event.changedTouches[0].clientX;
  });
  slider.addEventListener('touchend', (event) => {
    console.log('touchend');
    touchEndX = event.changedTouches[0].clientX;
    if (touchStartX - touchEndX > 50) {
      currentSlideIndex = (currentSlideIndex + 1) % sliderItems.length;
      updateSliderPosition(currentSlideIndex);
      updateActiveClass(currentSlideIndex);
      updateLinkDisplay(currentSlideIndex);
    }
    if (touchStartX - touchEndX < -50) {
      currentSlideIndex = (currentSlideIndex - 1 + sliderItems.length) % sliderItems.length;
      updateSliderPosition(currentSlideIndex);
      updateActiveClass(currentSlideIndex);
      updateLinkDisplay(currentSlideIndex);
    }
  });

});