<template>
  <div 
    class="tutorial-carousel relative"
    @wheel.prevent="handleWheel"
    @mouseenter="pauseAutoRotation"
    @mouseleave="resumeAutoRotation"
  >    <!-- 例程卡片堆叠 -->
    <div class="card-stack relative mx-auto">
      <div 
        v-for="(tutorial, index) in tutorials" 
        :key="index" 
        class="tutorial-card absolute transition-all duration-500 ease-in-out rounded-2xl shadow-2xl border-4 border-base-300 overflow-hidden"
        :class="getCardClass(index)"
        :style="getCardStyle(index)"
        @click="handleCardClick(index, tutorial.id)"
      >
        <!-- 卡片内容 -->
        <div class="relative">
          <!-- 图片 -->          <img 
            :src="tutorial.thumbnail || `https://placehold.co/600x400?text=${tutorial.title}`" 
            class="w-full object-contain"
            :alt="tutorial.title"
            style="width: 600px; height: 400px;"
          />
          
          <!-- 卡片蒙层 -->
          <div 
            class="absolute inset-0 bg-primary opacity-20 transition-opacity duration-300"
            :class="{'opacity-10': index === currentIndex}"
          ></div>
          
          <!-- 标题覆盖层 -->
          <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-base-300 to-transparent">
            <h3 class="text-lg font-bold text-base-content">{{ tutorial.title }}</h3>
            <p class="text-sm opacity-80 truncate">{{ tutorial.description }}</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 导航指示器 -->
    <div class="indicators flex justify-center gap-2 mt-4">
      <button 
        v-for="(_, index) in tutorials" 
        :key="index"
        @click="setActiveCard(index)"
        class="w-3 h-3 rounded-full transition-all duration-300"
        :class="index === currentIndex ? 'bg-primary scale-125' : 'bg-base-300'"
      ></button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';

// 接口定义
interface Tutorial {
  id: string;
  title: string;
  description: string;
  thumbnail?: string;
  docPath: string;
}

// Props
const props = defineProps<{
  autoRotationInterval?: number;
}>();

// 配置默认值
const autoRotationInterval = props.autoRotationInterval || 5000; // 默认5秒

// 状态管理
const tutorials = ref<Tutorial[]>([]);
const currentIndex = ref(0);
const router = useRouter();
let autoRotationTimer: number | null = null;

// 处理卡片点击
const handleCardClick = (index: number, tutorialId: string) => {
  if (index === currentIndex.value) {
    goToTutorial(tutorialId);
  } else {
    setActiveCard(index);
  }
};

// 从 public/doc 目录加载例程信息
onMounted(async () => {
  try {
    // 尝试从API获取教程目录
    let tutorialIds: string[] = [];
    try {
      const response = await fetch('/api/tutorial');
      if (response.ok) {
        const data = await response.json();
        tutorialIds = data.tutorials || [];
      }
    } catch (error) {
      console.warn('无法从API获取教程目录，使用默认值:', error);
    }
    
    // 如果API调用失败或返回空列表，使用默认值
    if (tutorialIds.length === 0) {
      tutorialIds = ['01', '02', '11']; // 默认例程
    }
    
    // 为每个例程创建对象并尝试获取文档标题
    const tutorialPromises = tutorialIds.map(async (id) => {
      // 尝试读取doc.md获取标题
      let title = `例程 ${id}`;
      let description = "点击加载此例程";
      let thumbnail = `/doc/${id}/images/1.png`; // 默认使用第一张图片作为缩略图
      
      try {
        // 尝试读取文档内容获取标题
        const response = await fetch(`/doc/${id}/doc.md`);
        if (response.ok) {
          const text = await response.text();
          // 从Markdown提取标题
          const titleMatch = text.match(/^#\s+(.+)$/m);
          if (titleMatch && titleMatch[1]) {
            title = titleMatch[1].trim();
          }
          
          // 提取第一段作为描述
          const descMatch = text.match(/\n\n([^#\n][^\n]+)/);
          if (descMatch && descMatch[1]) {
            description = descMatch[1].substring(0, 100).trim();
            if (description.length === 100) description += '...';
          }
        }
      } catch (error) {
        console.warn(`无法读取例程${id}的文档内容:`, error);
      }
      
      return {
        id,
        title,
        description,
        thumbnail,
        docPath: `/doc/${id}/doc.md`
      };
    });
    
    tutorials.value = await Promise.all(tutorialPromises);
    
    // 启动自动旋转
    startAutoRotation();
  } catch (error) {
    console.error('加载例程失败:', error);
  }
});

// 在组件销毁时清除计时器
onUnmounted(() => {
  if (autoRotationTimer) {
    clearInterval(autoRotationTimer);
  }
});

// 鼠标滚轮处理
const handleWheel = (event: WheelEvent) => {
  if (event.deltaY > 0) {
    nextCard();
  } else {
    prevCard();
  }
};

// 下一张卡片
const nextCard = () => {
  currentIndex.value = (currentIndex.value + 1) % tutorials.value.length;
};

// 上一张卡片
const prevCard = () => {
  currentIndex.value = (currentIndex.value - 1 + tutorials.value.length) % tutorials.value.length;
};

// 设置活动卡片
const setActiveCard = (index: number) => {
  currentIndex.value = index;
};

// 自动旋转
const startAutoRotation = () => {
  autoRotationTimer = window.setInterval(() => {
    nextCard();
  }, autoRotationInterval);
};

// 暂停自动旋转
const pauseAutoRotation = () => {
  if (autoRotationTimer) {
    clearInterval(autoRotationTimer);
    autoRotationTimer = null;
  }
};

// 恢复自动旋转
const resumeAutoRotation = () => {
  if (!autoRotationTimer) {
    startAutoRotation();
  }
};

// 前往例程
const goToTutorial = (tutorialId: string) => {
  // 跳转到工程页面，并通过 query 参数传递文档路径
  router.push({
    path: '/project',
    query: { tutorial: tutorialId }
  });
};

// 计算卡片类和样式
const getCardClass = (index: number) => {
  const isActive = index === currentIndex.value;
  const isPrev = (index === currentIndex.value - 1) || (currentIndex.value === 0 && index === tutorials.value.length - 1);
  const isNext = (index === currentIndex.value + 1) || (currentIndex.value === tutorials.value.length - 1 && index === 0);
  
  return {
    'z-30': isActive,
    'z-20': isPrev || isNext,
    'z-10': !isActive && !isPrev && !isNext,
    'hover:scale-105': isActive,
    'cursor-pointer': true
  };
};

const getCardStyle = (index: number) => {
  const isActive = index === currentIndex.value;
  const isPrev = (index === currentIndex.value - 1) || (currentIndex.value === 0 && index === tutorials.value.length - 1);
  const isNext = (index === currentIndex.value + 1) || (currentIndex.value === tutorials.value.length - 1 && index === 0);
  
  // 基本样式
  let style = {
    transform: 'scale(1) translateY(0) rotate(0deg)',
    opacity: '1',
    filter: 'blur(0)'
  };
  
  // 活动卡片
  if (isActive) {
    return style;
  }
  
  // 上一张卡片
  if (isPrev) {
    style.transform = 'scale(0.85) translateY(-10%) rotate(-5deg)';
    style.opacity = '0.7';
    style.filter = 'blur(1px)';
    return style;
  }
  
  // 下一张卡片
  if (isNext) {
    style.transform = 'scale(0.85) translateY(10%) rotate(5deg)';
    style.opacity = '0.7';
    style.filter = 'blur(1px)';
    return style;
  }
  
  // 其他卡片
  style.transform = 'scale(0.7) translateY(0) rotate(0deg)';
  style.opacity = '0.4';
  style.filter = 'blur(2px)';
  return style;
}
</script>

<style scoped>
.tutorial-carousel {
  width: 100%;
  height: 500px;
  perspective: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-stack {
  width: 600px;
  height: 440px;
  position: relative;
  transform-style: preserve-3d;
}

.tutorial-card {
  width: 600px;
  height: 400px;
  background-color: hsl(var(--b2));
  will-change: transform, opacity;
}

.tutorial-card:hover {
  box-shadow: 0 0 15px rgba(var(--p), 0.5);
}
</style>
