---
interface Props {
  autoplay?: boolean;
  autoplaySpeed?: number; // 毫秒
  showArrows?: boolean;
  showDots?: boolean;
  cardGap?: number; // px
  className?: string;
}

const {
  autoplay = true,
  autoplaySpeed = 5000,
  showArrows = true,
  showDots = true,
  cardGap = 16,
  className = ""
} = Astro.props;

const carouselId = `carousel-${Math.random().toString(36).substring(2, 11)}`;
---

<div class={`smooth-card-carousel relative overflow-hidden group ${className}`} id={carouselId}>
  <!-- 轮播容器 -->
  <div class="carousel-container relative">
    <!-- 轮播轨道 -->
    <div class="carousel-track flex transition-transform duration-500 ease-out cursor-grab">
      <slot />
    </div>
    
    <!-- 控制按钮 -->
    {showArrows && (
      <div class="carousel-controls">
        <button class="carousel-prev absolute left-4 top-1/2 -translate-y-1/2 z-10 bg-white bg-opacity-70 dark:bg-color-dark-card dark:bg-opacity-70 rounded-full p-2 shadow-md opacity-40 group-hover:opacity-100 transition-opacity hover:bg-opacity-90 dark:hover:bg-opacity-90 focus:outline-none hover:scale-110">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
          </svg>
          <span class="sr-only">上一个</span>
        </button>
        <button class="carousel-next absolute right-4 top-1/2 -translate-y-1/2 z-10 bg-white bg-opacity-70 dark:bg-color-dark-card dark:bg-opacity-70 rounded-full p-2 shadow-md opacity-40 group-hover:opacity-100 transition-opacity hover:bg-opacity-90 dark:hover:bg-opacity-90 focus:outline-none hover:scale-110">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
          <span class="sr-only">下一个</span>
        </button>
      </div>
    )}
    
    <!-- 指示点 -->
    {showDots && (
      <div class="carousel-dots absolute bottom-3 left-0 right-0 flex justify-center space-x-2 z-10">
        <!-- 指示点将通过JS动态生成 -->
      </div>
    )}
  </div>
</div>

<style define:vars={{ cardGap: `${cardGap}px` }}>
  .smooth-card-carousel {
    position: relative;
    overflow: hidden;
  }
  
  .carousel-track {
    display: flex;
    transition: transform 0.5s ease-out;
    gap: var(--cardGap);
    padding: 8px 4px; /* 添加内边距，让阴影效果完全显示 */
  }
  
  .carousel-track.grabbing {
    cursor: grabbing;
    transition: none;
  }
  
  .carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
  }
  
  .carousel-dot.active {
    width: 10px;
    height: 10px;
    background-color: white;
  }
  
  /* 淡入淡出效果 */
  .carousel-track > * {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  .carousel-track .card-faded {
    opacity: 0.6;
    transform: scale(0.95);
  }
  
  /* 导航按钮悬停效果 */
  .carousel-prev,
  .carousel-next {
    transition: opacity 0.3s ease, transform 0.2s ease, background-color 0.3s ease;
  }
  
  .carousel-container::before,
  .carousel-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 5;
    pointer-events: none;
  }
  
  .carousel-container::before {
    left: 0;
    background: linear-gradient(to right, rgba(255,255,255,0.5), transparent);
  }
  
  .carousel-container::after {
    right: 0;
    background: linear-gradient(to left, rgba(255,255,255,0.5), transparent);
  }
  
  /* 暗黑模式下的渐变适配 */
  [data-theme='dark'] .carousel-container::before {
    background: linear-gradient(to right, rgba(0,0,0,0.3), transparent);
  }
  
  [data-theme='dark'] .carousel-container::after {
    background: linear-gradient(to left, rgba(0,0,0,0.3), transparent);
  }
</style>

<script define:vars={{ carouselId, autoplay, autoplaySpeed }}>
  document.addEventListener('DOMContentLoaded', () => {
    const carousel = document.getElementById(carouselId);
    if (!carousel) return;
    
    const track = carousel.querySelector('.carousel-track');
    const cards = Array.from(track.children);
    const carouselContainer = carousel.querySelector('.carousel-container');
    const prevBtn = carousel.querySelector('.carousel-prev');
    const nextBtn = carousel.querySelector('.carousel-next');
    const dotsContainer = carousel.querySelector('.carousel-dots');
    
    let currentIndex = 0;
    let startX, startScrollLeft, cardWidth, totalCards, visibleCards;
    let autoplayInterval;
    let isDragging = false;
    
    // 初始化
    const initialize = () => {
      if (cards.length === 0) return;
      
      // 计算一张卡片的宽度（包括间距）
      cardWidth = cards[0].offsetWidth + parseInt(getComputedStyle(track).gap);
      
      // 计算可见卡片数量和总卡片数
      visibleCards = Math.floor(carouselContainer.offsetWidth / cardWidth);
      totalCards = cards.length;
      
      // 克隆卡片以实现无限滚动
      if (totalCards < visibleCards * 2) {
        for (let i = 0; i < totalCards; i++) {
          const clone = cards[i].cloneNode(true);
          track.appendChild(clone);
        }
        // 更新卡片数组
        cards.push(...Array.from(track.children).slice(totalCards));
        totalCards = cards.length;
      }
      
      // 创建指示点
      if (dotsContainer) {
        dotsContainer.innerHTML = '';
        const numDots = Math.ceil(totalCards / visibleCards);
        
        for (let i = 0; i < numDots; i++) {
          const dot = document.createElement('button');
          dot.classList.add('carousel-dot');
          dot.setAttribute('aria-label', `滑动到第${i + 1}组卡片`);
          
          if (i === 0) dot.classList.add('active');
          
          dot.addEventListener('click', () => {
            goToSlide(i * visibleCards);
          });
          
          dotsContainer.appendChild(dot);
        }
      }
      
      // 开始自动播放
      if (autoplay) {
        startAutoplay();
      }
      
      applyCardStyles();
    };
    
    // 设置卡片样式（淡入淡出效果）
    const applyCardStyles = () => {
      cards.forEach((card, index) => {
        if (index < currentIndex || index >= currentIndex + visibleCards) {
          card.classList.add('card-faded');
        } else {
          card.classList.remove('card-faded');
        }
      });
    };
    
    // 滚动到指定滑块
    const goToSlide = (index) => {
      // 防止越界
      if (index < 0) {
        index = totalCards - visibleCards;
      } else if (index >= totalCards) {
        index = 0;
      }
      
      currentIndex = index;
      track.style.transform = `translateX(-${currentIndex * cardWidth}px)`;
      
      // 更新指示点
      if (dotsContainer) {
        const dots = Array.from(dotsContainer.children);
        const activeDotIndex = Math.floor(currentIndex / visibleCards);
        
        dots.forEach((dot, i) => {
          if (i === activeDotIndex) {
            dot.classList.add('active');
          } else {
            dot.classList.remove('active');
          }
        });
      }
      
      applyCardStyles();
    };
    
    // 下一张
    const nextSlide = () => {
      goToSlide(currentIndex + visibleCards);
    };
    
    // 上一张
    const prevSlide = () => {
      goToSlide(currentIndex - visibleCards);
    };
    
    // 鼠标/触摸事件处理
    const dragStart = (e) => {
      isDragging = true;
      startX = e.type.includes('mouse') ? e.pageX : e.touches[0].pageX;
      startScrollLeft = currentIndex * cardWidth;
      
      track.classList.add('grabbing');
      
      // 暂停自动播放
      if (autoplay) {
        clearInterval(autoplayInterval);
      }
    };
    
    const dragging = (e) => {
      if (!isDragging) return;
      
      e.preventDefault();
      const x = e.type.includes('mouse') ? e.pageX : e.touches[0].pageX;
      const walk = startX - x;
      
      track.style.transform = `translateX(-${startScrollLeft + walk}px)`;
    };
    
    const dragEnd = () => {
      if (!isDragging) return;
      isDragging = false;
      
      track.classList.remove('grabbing');
      
      const threshold = cardWidth / 3;
      const walk = parseInt(track.style.transform.match(/-?\d+/) || 0);
      const targetIndex = Math.round(walk / cardWidth);
      
      goToSlide(targetIndex);
      
      // 重新开始自动播放
      if (autoplay) {
        startAutoplay();
      }
    };
    
    // 自动播放
    const startAutoplay = () => {
      if (autoplayInterval) clearInterval(autoplayInterval);
      autoplayInterval = setInterval(nextSlide, autoplaySpeed);
    };
    
    // 事件监听
    if (prevBtn) prevBtn.addEventListener('click', prevSlide);
    if (nextBtn) nextBtn.addEventListener('click', nextSlide);
    
    // 鼠标拖动
    track.addEventListener('mousedown', dragStart);
    window.addEventListener('mousemove', dragging);
    window.addEventListener('mouseup', dragEnd);
    
    // 触摸拖动
    track.addEventListener('touchstart', dragStart);
    window.addEventListener('touchmove', dragging);
    window.addEventListener('touchend', dragEnd);
    
    // 鼠标悬停时暂停自动播放
    carousel.addEventListener('mouseenter', () => {
      if (autoplay) clearInterval(autoplayInterval);
    });
    
    carousel.addEventListener('mouseleave', () => {
      if (autoplay) startAutoplay();
    });
    
    // 窗口调整大小时重新初始化
    window.addEventListener('resize', initialize);
    
    // 初始化
    initialize();
  });
</script>