<template>
  <div class="kids-mode">
    <!-- 静音开关 -->
    <button v-if="false" class="mute-toggle" @click.stop="toggleMute" :class="{ muted: isMuted }">
      <VolumeX v-if="isMuted" :size="24" :stroke-width="2.5" class="mute-icon" />
      <Volume2 v-else :size="24" :stroke-width="2.5" class="mute-icon" />
    </button>

    <!-- 主内容区 -->
    <div class="kids-content">
      <!-- 绘本展示 -->
      <Transition name="content-fade" mode="out-in">
        <div v-if="currentResourceType === 'ebook'" key="ebook" class="content-viewer">
          <EbookViewer :pages="ebookPages" :current-page="currentEbookPage" :audio-url="syncAudioUrl"
            :auto-play="autoPlayAudio" @page-change="handlePageChange" @toggle-audio-sync="toggleAudioSync" />
        </div>

        <!-- 视频播放 -->
        <div v-else-if="currentResourceType === 'video'" key="video" class="content-viewer">
          <Player v-if="currentResourceUrl" :key="currentResourceUrl" :url="currentResourceUrl"
            :title="currentResourceName" :no-page="true" @ended="handleMediaEnded" />
        </div>

        <!-- 图片展示 -->
        <div v-else-if="currentResourceType === 'image'" key="image" class="content-viewer">
          <div class="image-viewer">
            <div class="image-wrapper">
              <a-spin :spinning="imageLoading" :indicator="null">
                <img
                  :src="currentResourceUrl"
                  :alt="currentResourceName"
                  class="full-image"
                  :style="{ opacity: imageLoaded ? 1 : 0, transition: 'opacity 0.3s' }"
                  @load="onImageLoad"
                  @error="onImageError"
                />
              </a-spin>
              <!-- 加载失败占位图 -->
              <div v-if="imageError" class="error-placeholder">
                <Image style="font-size: 48px; color: #999;" />
                <span>图片加载失败</span>
              </div>
            </div>
            <div v-if="currentResourceName" class="image-caption">{{ currentResourceName }}</div>
          </div>
        </div>

        <!-- 音频播放 -->
        <div v-else-if="currentResourceType === 'audio'" key="audio" class="content-viewer">
          <AudioPlayer :src="currentResourceUrl" :title="currentResourceName" :background-image="backgroundImageUrl"
            @ended="handleMediaEnded" />
        </div>
        <!-- PPT/挂图展示 -->
        <div v-else-if="currentResourceType === 'ppt'" key="ppt" class="content-viewer">
          <!-- <SlidesViewer
            :pages="slidesPages"
            :current-page="currentSlidePage"
            :type="currentResourceType"
            @page-change="handleSlideChange"
          /> -->
          <WebOffice v-if="currentResourceUrl" :key="currentResourceUrl" :url="currentResourceUrl"
            :file-name="currentResourceName" :no-page="true" />
        </div>

        <!-- PPT/挂图展示 -->
        <div v-else-if="currentResourceType === 'poster'" key="slides" class="content-viewer">
          <SlidesViewer :pages="slidesPages" :current-page="currentSlidePage" :type="currentResourceType"
            @page-change="handleSlideChange" />
        </div>
        <!-- 文档展示 (PDF/Word/Excel 等，使用 WebOffice) -->
        <div v-else-if="currentResourceType === 'document'" key="document" class="content-viewer">
          <WebOffice v-if="currentResourceUrl" :key="currentResourceUrl" :url="currentResourceUrl"
            :file-name="currentResourceName" :no-page="true" />
        </div>

        <!-- 课程资源展示 (从底部点击的PPT/挂图) -->
        <div v-else-if="showingResource" key="resource" class="content-viewer">
          <SlidesViewer :pages="[showingResource.url]" :current-page="0"
            :type="(showingResource.type as 'ppt' | 'poster')" />
          <div class="resource-header">
            <span class="resource-title">{{ showingResource.name }}</span>
            <button class="close-resource-btn" @click="showingResource = null">
              <X :size="20" />
            </button>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-else key="empty" class="empty-content"> <button class="play-area-btn"
            :disabled="allLessonResources.length === 0" @click.stop="playCurrentResource">
            <Play :size="120" :stroke-width="2.5" />
          </button>
        </div>
      </Transition>
    </div>

    <!-- 底部固定导航 -->
    <div class="kids-nav">
      <!-- 教学资源区域 -->
      <div class="resources-section">
        <div class="section-label">
          <MonitorPlay :size="20" :stroke-width="2.5" class="label-icon" />
          <span>教学资源</span>
        </div>
        <div class="resources-track">
          <button v-for="resource in allLessonResources" :key="resource.id" class="resource-chip"
            :class="{ active: currentResourceIndex === resource.index }"
            @click.stop="handleResourceByIndex(resource.index)">
            <component :is="getResourceIcon(resource.type)" :size="24" :stroke-width="2.5" />
            <span>{{ resource.name }}</span>
          </button>
        </div>
      </div>

      <!-- 进度条 -->
      <div class="progress-section">
        <div class="progress-track">
          <div class="progress-fill" :style="{ width: resourceProgressPercent + '%' }"></div>
        </div>
        <div class="progress-info">
          <span>{{ currentResourceIndex + 1 }}/{{ allLessonResources.length }} 资源</span>
          <span v-if="currentResourceName" class="current-resource-name">{{ currentResourceName }}</span>
        </div>
      </div>

      <!-- 延伸活动 -->
      <div v-if="activities.length > 0" class="activities-section">
        <div class="section-label">
          <Lightbulb :size="20" :stroke-width="2.5" class="label-icon" />
          <span>延伸活动</span>
        </div>
        <div class="activities-track">
          <button v-for="activity in activities" :key="activity.id" class="activity-chip"
            @click.stop="handleActivityClick(activity)">
            <component :is="getActivityIcon(activity.activityType)" :size="22" :stroke-width="2.5" />
            <span>{{ activity.name }}</span>
          </button>
        </div>
      </div>

      <!-- 控制按钮 -->
      <div class="nav-controls">
        <button class="ctrl-btn" :disabled="currentResourceIndex === 0" @click.stop="prevResource">
          <ChevronLeft :size="28" :stroke-width="3" />
          <span>上一个</span>
        </button>
        <button class="ctrl-btn primary" :disabled="currentResourceIndex >= allLessonResources.length - 1"
          @click.stop="nextResource">
          <span>下一个</span>
          <ChevronRight :size="28" :stroke-width="3" />
        </button>
        <button class="ctrl-btn exit" @click.stop="handleExit">
          <X :size="24" :stroke-width="3" />
          <span>退出</span>
        </button>
      </div>
    </div>

    <!-- 延伸活动弹窗 -->
    <a-modal v-model:open="activityModalVisible" :title="selectedActivity?.name" :footer="null" width="90%"
      class="activity-modal" @cancel="activityModalVisible = false">
      <div v-if="selectedActivity" class="activity-content">
        <div v-if="activityResourceUrl" class="activity-media">
          <video v-if="activityResourceType === 'video'" :src="activityResourceUrl" controls
            style="width: 100%; max-height: 50vh;"></video>
          <div v-else-if="activityResourceType === 'image'" class="activity-image-wrapper">
            <a-spin :spinning="activityImageLoading" :indicator="null">
              <img
                :src="activityResourceUrl"
                style="width: 100%; max-height: 50vh; object-fit: contain; display: block;"
                :style="{ opacity: activityImageLoaded ? 1 : 0, transition: 'opacity 0.3s' }"
                @load="activityImageLoaded = true"
                @error="activityImageError = true"
              />
            </a-spin>
            <!-- 加载失败占位图 -->
            <div v-if="activityImageError" class="error-placeholder">
              <Image style="font-size: 48px; color: #999;" />
              <span>图片加载失败</span>
            </div>
          </div>
        </div>
        <div class="activity-info">
          <div class="info-item" v-if="selectedActivity.objectives">
            <div class="info-label">活动目标</div>
            <div class="info-value">{{ selectedActivity.objectives }}</div>
          </div>
          <div class="info-item" v-if="selectedActivity.activityGuide">
            <div class="info-label">活动指引</div>
            <div class="info-value">{{ selectedActivity.activityGuide }}</div>
          </div>
          <div class="info-item" v-if="selectedActivity.duration">
            <div class="info-label">预计时长</div>
            <div class="info-value">{{ selectedActivity.duration }} 分钟</div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
import {
  BookOpen,
  ChevronLeft,
  ChevronRight,
  X,
  Target,
  BookText,
  MessageCircle,
  Palette,
  Sparkles,
  Star,
  Pencil,
  Scissors,
  Music,
  Trophy,
  Puzzle,
  Presentation,
  Image,
  Video,
  FileText,
  Volume2,
  VolumeX,
  MonitorPlay,
  Lightbulb,
  Play,
} from 'lucide-vue-next';
import EbookViewer from './viewers/EbookViewer.vue';
import Player from '@/views/office/player.vue';
import WebOffice from '@/views/office/WebOffice.vue';
import VideoPlayer from './viewers/VideoPlayer.vue';
import AudioPlayer from './viewers/AudioPlayer.vue';
import SlidesViewer from './viewers/SlidesViewer.vue';

// Props
interface Props {
  course: any;
  currentLesson: any;
  steps: any[];
  activities: any[];
  currentStepIndex: number;
  timerSeconds: number;
}

const props = defineProps<Props>();

// Emits
const emit = defineEmits<{
  (e: 'exit'): void;
  (e: 'stepChange', index: number): void;
}>();

// 当前资源状态
const currentResourceType = ref<string>('');
const currentResourceUrl = ref<string>('');
const currentResourceName = ref<string>('');
const currentResourceIndex = ref(0);
const currentEbookPage = ref(0);
const currentSlidePage = ref(0);
const currentDocumentPage = ref(0);

// 图片加载状态
const imageLoading = ref(false);
const imageLoaded = ref(false);
const imageError = ref(false);

// 活动弹窗中的图片加载状态
const activityImageLoading = ref(false);
const activityImageLoaded = ref(false);
const activityImageError = ref(false);

// 绘本音频同步
const syncAudioUrl = ref<string>('');
const autoPlayAudio = ref(false);

// 延伸活动弹窗
const activityModalVisible = ref(false);
const selectedActivity = ref<any>(null);
const activityResourceUrl = ref<string>('');
const activityResourceType = ref<string>('');

// 课程资源显示状态 (PPT/挂图)
const showingResource = ref<{ id: string; type: string; name: string; url: string } | null>(null);

// 音效状态
const isMuted = ref(false);
const audioContext = ref<AudioContext | null>(null);

// 计算属性
const currentStep = computed(() => props.steps[props.currentStepIndex]);

const progressPercent = computed(() => {
  if (props.steps.length === 0) return 0;
  return ((props.currentStepIndex + 1) / props.steps.length) * 100;
});

// 收集当前课程的所有数字资源
const allLessonResources = computed(() => {
  const resources: { id: string; index: number; type: string; name: string; url: string }[] = [];
  let index = 0;

  // 首先添加课程级资源（视频、音频、PPT、挂图）
  if (props.course?.videoPaths && props.course.videoPaths.length > 0) {
    props.course.videoPaths.forEach((video: any) => {
      resources.push({
        id: `course-video-${video.id || index}`,
        index: index++,
        type: 'video',
        name: video.name || `视频`,
        url: getFileUrl(video.path),
      });
    });
  }

  if (props.course?.audioPaths && props.course.audioPaths.length > 0) {
    props.course.audioPaths.forEach((audio: any) => {
      resources.push({
        id: `course-audio-${audio.id || index}`,
        index: index++,
        type: 'audio',
        name: audio.name || `音频`,
        url: getFileUrl(audio.path),
      });
    });
  }

  if (props.course?.pptPath) {
    resources.push({
      id: 'course-ppt-0',
      index: index++,
      type: 'ppt',
      name: props.course.pptName || '教学PPT',
      url: getFileUrl(props.course.pptPath),
    });
  }

  if (props.course?.posterPaths && props.course.posterPaths.length > 0) {
    props.course.posterPaths.forEach((poster: any) => {
      resources.push({
        id: `course-poster-${poster.id || index}`,
        index: index++,
        type: 'poster',
        name: poster.name || `挂图`,
        url: getFileUrl(poster.path),
      });
    });
  }

  // 添加当前课程（lesson）的资源
  const lesson = props.currentLesson;
  if (lesson) {
    // 课程级别的视频
    if (lesson.videoPath) {
      resources.push({
        id: `lesson-video-${lesson.id}`,
        index: index++,
        type: 'video',
        name: lesson.videoName || '课程视频',
        url: getFileUrl(lesson.videoPath),
      });
    }

    // 课程级别的PPT
    if (lesson.pptPath) {
      resources.push({
        id: `lesson-ppt-${lesson.id}`,
        index: index++,
        type: 'ppt',
        name: lesson.pptName || '课程PPT',
        url: getFileUrl(lesson.pptPath),
      });
    }

    // 课程级别的PDF
    if (lesson.pdfPath) {
      resources.push({
        id: `lesson-pdf-${lesson.id}`,
        index: index++,
        type: 'document',
        name: lesson.pdfName || '课程PDF',
        url: getFileUrl(lesson.pdfPath),
      });
    }

    // 遍历所有环节，添加环节资源
    if (lesson.steps && lesson.steps.length > 0) {
      lesson.steps.forEach((step: any) => {
        // 图片
        if (step.images && step.images.length > 0) {
          step.images.forEach((img: any) => {
            resources.push({
              id: img.id || `step-${step.id}-img-${index}`,
              index: index++,
              type: 'image',
              name: img.name || `图片`,
              url: getFileUrl(img.path || img.url),
            });
          });
        }

        // 视频
        if (step.videos && step.videos.length > 0) {
          step.videos.forEach((vid: any) => {
            resources.push({
              id: vid.id || `step-${step.id}-video-${index}`,
              index: index++,
              type: 'video',
              name: vid.name || `视频`,
              url: getFileUrl(vid.path || vid.url),
            });
          });
        }

        // 音频
        if (step.audioList && step.audioList.length > 0) {
          step.audioList.forEach((aud: any) => {
            resources.push({
              id: aud.id || `step-${step.id}-audio-${index}`,
              index: index++,
              type: 'audio',
              name: aud.name || `音频`,
              url: getFileUrl(aud.path || aud.url),
            });
          });
        }

        // PPT
        if (step.pptFiles && step.pptFiles.length > 0) {
          step.pptFiles.forEach((ppt: any) => {
            resources.push({
              id: ppt.id || `step-${step.id}-ppt-${index}`,
              index: index++,
              type: 'ppt',
              name: ppt.name || `课件`,
              url: getFileUrl(ppt.path || ppt.url),
            });
          });
        }

        // 文档
        if (step.documents && step.documents.length > 0) {
          step.documents.forEach((doc: any) => {
            resources.push({
              id: doc.id || `step-${step.id}-doc-${index}`,
              index: index++,
              type: 'document',
              name: doc.name || `文档`,
              url: getFileUrl(doc.path || doc.url),
            });
          });
        }
      });
    }
  }

  return resources;
});

// 资源进度百分比
const resourceProgressPercent = computed(() => {
  const total = allLessonResources.value.length;
  if (total === 0) return 0;
  return ((currentResourceIndex.value + 1) / total) * 100;
});

const ebookPages = computed(() => {
  if (!props.course?.ebookPaths) return [];
  return props.course.ebookPaths.map((p: any) => getFileUrl(p.path));
});

const slidesPages = computed(() => {
  // 如果正在显示课程资源（PPT/挂图）
  if (showingResource.value) {
    if (showingResource.value.type === 'ppt') {
      return [showingResource.value.url];
    }
    if (showingResource.value.type === 'poster') {
      return [showingResource.value.url];
    }
  }
  // 如果是环节关联的PPT/挂图
  if (currentResourceType.value === 'ppt' && props.course?.pptPath) {
    return [getFileUrl(props.course.pptPath)];
  }
  if (currentResourceType.value === 'poster' && props.course?.posterPaths) {
    return props.course.posterPaths.map((p: any) => getFileUrl(p.path));
  }
  // 如果是文档（PDF）
  if (currentResourceType.value === 'document' && currentResourceUrl.value) {
    return [currentResourceUrl.value];
  }
  return [];
});

// 课程资源列表 (所有资源)
const allCourseResources = computed(() => {
  const resources: { id: string; type: string; name: string; url: string }[] = [];

  // 添加电子绘本
  if (props.course?.ebookPaths && props.course.ebookPaths.length > 0) {
    props.course.ebookPaths.forEach((ebook: any, index: number) => {
      resources.push({
        id: `ebook-${index}`,
        type: 'ebook',
        name: ebook.name || `绘本${index + 1}`,
        url: getFileUrl(ebook.path),
      });
    });
  }

  // 添加音频
  if (props.course?.audioPaths && props.course.audioPaths.length > 0) {
    props.course.audioPaths.forEach((audio: any, index: number) => {
      resources.push({
        id: `audio-${index}`,
        type: 'audio',
        name: audio.name || `音频${index + 1}`,
        url: getFileUrl(audio.path),
      });
    });
  }

  // 添加视频
  if (props.course?.videoPaths && props.course.videoPaths.length > 0) {
    props.course.videoPaths.forEach((video: any, index: number) => {
      resources.push({
        id: `video-${index}`,
        type: 'video',
        name: video.name || `视频${index + 1}`,
        url: getFileUrl(video.path),
      });
    });
  }

  // 添加PPT
  if (props.course?.pptPath) {
    resources.push({
      id: 'ppt-0',
      type: 'ppt',
      name: props.course.pptName || '教学PPT',
      url: getFileUrl(props.course.pptPath),
    });
  }

  // 添加挂图
  if (props.course?.posterPaths && props.course.posterPaths.length > 0) {
    props.course.posterPaths.forEach((poster: any, index: number) => {
      resources.push({
        id: `poster-${index}`,
        type: 'poster',
        name: poster.name || `挂图${index + 1}`,
        url: getFileUrl(poster.path),
      });
    });
  }

  return resources;
});

// 获取环节关联的资源
const getStepResources = (step: any): { id: string; type: string; name: string; url: string }[] => {
  const resources: { id: string; type: string; name: string; url: string }[] = [];

  // 新结构：直接使用步骤内的资源
  if (step.images && step.images.length > 0) {
    step.images.forEach((img: any, idx: number) => {
      resources.push({
        id: img.id || `${step.id}-img-${idx}`,
        type: 'image',
        name: img.name || `图片${idx + 1}`,
        url: getFileUrl(img.path || img.url),
      });
    });
  }

  if (step.videos && step.videos.length > 0) {
    step.videos.forEach((vid: any, idx: number) => {
      resources.push({
        id: vid.id || `${step.id}-video-${idx}`,
        type: 'video',
        name: vid.name || `视频${idx + 1}`,
        url: getFileUrl(vid.path || vid.url),
      });
    });
  }

  if (step.audioList && step.audioList.length > 0) {
    step.audioList.forEach((aud: any, idx: number) => {
      resources.push({
        id: aud.id || `${step.id}-audio-${idx}`,
        type: 'audio',
        name: aud.name || `音频${idx + 1}`,
        url: getFileUrl(aud.path || aud.url),
      });
    });
  }

  if (step.pptFiles && step.pptFiles.length > 0) {
    step.pptFiles.forEach((ppt: any, idx: number) => {
      resources.push({
        id: ppt.id || `${step.id}-ppt-${idx}`,
        type: 'ppt',
        name: ppt.name || `课件${idx + 1}`,
        url: getFileUrl(ppt.path || ppt.url),
      });
    });
  }

  // 兼容旧结构：使用 resourceIds
  if (step.resourceIds && step.resourceIds.length > 0 && resources.length === 0) {
    return step.resourceIds
      .map((resId: string) => {
        const resource = allCourseResources.value.find(r => r.id === resId);
        return resource;
      })
      .filter(Boolean) as { id: string; type: string; name: string; url: string }[];
  }

  return resources;
};

// 获取资源图标
const getResourceIcon = (type: string) => {
  const iconMap: Record<string, typeof BookOpen> = {
    'ebook': BookOpen,
    'audio': Music,
    'video': Video,
    'ppt': Presentation,
    'poster': Image,
  };
  return iconMap[type] || FileText;
};

// 所有环节关联的资源ID集合
const associatedResourceIds = computed(() => {
  const ids = new Set<string>();
  props.steps.forEach((step: any) => {
    (step.resourceIds || []).forEach((id: string) => ids.add(id));
  });
  return ids;
});

// 未关联环节的资源 (PPT和挂图)
const unassociatedResources = computed(() => {
  return allCourseResources.value.filter(r =>
    (r.type === 'ppt' || r.type === 'poster') && !associatedResourceIds.value.has(r.id)
  );
});

const backgroundImageUrl = computed(() => {
  if (props.course?.coverImagePath) {
    return getFileUrl(props.course.coverImagePath);
  }
  return '';
});

// 方法
const getFileUrl = (filePath: string | null | undefined): string => {
  if (!filePath) return '';
  if (filePath.startsWith('http://') || filePath.startsWith('https://')) {
    return filePath;
  }
  const SERVER_BASE = import.meta.env.VITE_SERVER_BASE_URL || 'http://localhost:3000';
  return `${SERVER_BASE}${filePath}`;
};

const formatTime = (seconds: number) => {
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
};

// 获取环节图标组件
const getStepIcon = (stepType: string): typeof Target => {
  const iconMap: Record<string, typeof Target> = {
    '导入': Target,
    '共读': BookText,
    '讨论': MessageCircle,
    '活动': Palette,
    '创作': Pencil,
    '总结': Star,
  };
  return iconMap[stepType] || BookOpen;
};

// 获取活动图标组件
const getActivityIcon = (activityType: string): typeof Puzzle => {
  const iconMap: Record<string, typeof Puzzle> = {
    'ART': Palette,
    'GAME': Puzzle,
    'OUTDOOR': Trophy,
    'MUSIC': Music,
    'READING': BookOpen,
    'HANDCRAFT': Scissors,
    'OTHER': Sparkles,
  };
  return iconMap[activityType] || Sparkles;
};

// 加载当前环节资源
const loadCurrentStepResources = () => {
  const step = currentStep.value;
  if (!step) {
    currentResourceType.value = '';
    currentResourceUrl.value = '';
    currentResourceName.value = '';
    return;
  }

  // 优先使用新结构：分类资源数组
  if (step.images && step.images.length > 0) {
    currentResourceType.value = 'image';
    currentResourceUrl.value = getFileUrl(step.images[0].path || step.images[0].url);
    currentResourceName.value = step.images[0].name || '图片';
    return;
  }

  if (step.videos && step.videos.length > 0) {
    currentResourceType.value = 'video';
    currentResourceUrl.value = getFileUrl(step.videos[0].path || step.videos[0].url);
    currentResourceName.value = step.videos[0].name || '视频';
    return;
  }

  if (step.audioList && step.audioList.length > 0) {
    currentResourceType.value = 'audio';
    currentResourceUrl.value = getFileUrl(step.audioList[0].path || step.audioList[0].url);
    currentResourceName.value = step.audioList[0].name || '音频';
    return;
  }

  if (step.pptFiles && step.pptFiles.length > 0) {
    currentResourceType.value = 'ppt';
    currentResourceUrl.value = getFileUrl(step.pptFiles[0].path || step.pptFiles[0].url);
    currentResourceName.value = step.pptFiles[0].name || '课件';
    return;
  }

  // 兼容旧结构：resourceIds
  const resourceIds = step.resourceIds || [];
  if (resourceIds.length > 0) {
    const resourceId = resourceIds[0];
    const resource = getResourceById(resourceId);

    if (resource) {
      currentResourceType.value = resource.type === '电子绘本' ? 'ebook' :
        resource.type === '音频' ? 'audio' :
          resource.type === '视频' ? 'video' :
            resource.type === 'PPT课件' ? 'ppt' :
              resource.type === '教学挂图' ? 'poster' : '';
      currentResourceUrl.value = resource.url ? getFileUrl(resource.url) : '';
      currentResourceName.value = resource.name;

      if (currentResourceType.value === 'ebook' && props.course?.audioPaths?.length > 0) {
        syncAudioUrl.value = getFileUrl(props.course.audioPaths[0].path);
      }
      return;
    }
  }

  // 没有资源
  currentResourceType.value = '';
  currentResourceUrl.value = '';
  currentResourceName.value = '';
};

const getResourceById = (resId: string) => {
  if (!resId || !props.course) return null;

  const parts = resId.split('-');
  if (parts.length !== 2) return null;

  const type = parts[0];
  const index = parseInt(parts[1]);

  const typeNames: Record<string, string> = {
    ebook: '电子绘本',
    audio: '音频',
    video: '视频',
    ppt: 'PPT课件',
    poster: '教学挂图',
  };

  switch (type) {
    case 'ebook': {
      const ebooks = props.course.ebookPaths || [];
      if (index < ebooks.length) {
        return { id: resId, name: ebooks[index].name || `电子绘本${index + 1}`, type: typeNames.ebook, url: ebooks[index].path };
      }
      break;
    }
    case 'audio': {
      const audios = props.course.audioPaths || [];
      if (index < audios.length) {
        return { id: resId, name: audios[index].name || `音频${index + 1}`, type: typeNames.audio, url: audios[index].path };
      }
      break;
    }
    case 'video': {
      const videos = props.course.videoPaths || [];
      if (index < videos.length) {
        return { id: resId, name: videos[index].name || `视频${index + 1}`, type: typeNames.video, url: videos[index].path };
      }
      break;
    }
    case 'ppt': {
      if (props.course.pptPath) {
        return { id: resId, name: props.course.pptName || '教学PPT', type: typeNames.ppt, url: props.course.pptPath };
      }
      break;
    }
    case 'poster': {
      const posters = props.course.posterPaths || [];
      if (index < posters.length) {
        return { id: resId, name: posters[index].name || `挂图${index + 1}`, type: typeNames.poster, url: posters[index].path };
      }
      break;
    }
  }
  return null;
};

const handleExit = () => {
  playSound('click');
  emit('exit');
};

// 图片加载事件处理
const onImageLoad = () => {
  imageLoading.value = false;
  imageLoaded.value = true;
  imageError.value = false;
};

const onImageError = () => {
  imageLoading.value = false;
  imageLoaded.value = false;
  imageError.value = true;
};

// 根据索引加载并显示资源
const handleResourceByIndex = (index: number) => {
  playSound('click');
  currentResourceIndex.value = index;
  const resource = allLessonResources.value[index];
  if (resource) {
    currentResourceType.value = resource.type;
    currentResourceUrl.value = resource.url;
    currentResourceName.value = resource.name;

    // 如果是图片类型，重置加载状态
    if (resource.type === 'image') {
      imageLoading.value = true;
      imageLoaded.value = false;
      imageError.value = false;
    }
  }
};

// 播放当前选中的资源
const playCurrentResource = () => {
  if (allLessonResources.value.length === 0) return;
  handleResourceByIndex(currentResourceIndex.value);
};

// 上一个资源
const prevResource = () => {
  if (currentResourceIndex.value > 0) {
    handleResourceByIndex(currentResourceIndex.value - 1);
  }
};

// 下一个资源
const nextResource = () => {
  if (currentResourceIndex.value < allLessonResources.value.length - 1) {
    playSound('click');
    handleResourceByIndex(currentResourceIndex.value + 1);
  }
};

const handleStepClick = (index: number) => {
  playSound('click');
  emit('stepChange', index);
};

const prevStep = () => {
  if (props.currentStepIndex > 0) {
    playSound('click');
    emit('stepChange', props.currentStepIndex - 1);
  }
};

const nextStep = () => {
  if (props.currentStepIndex < props.steps.length - 1) {
    emit('stepChange', props.currentStepIndex + 1);
  }
};

// 处理课程资源点击 (PPT/挂图)
const handleResourceClick = (resource: { id: string; type: string; name: string; url: string }) => {
  playSound('click');
  if (showingResource.value?.id === resource.id) {
    // 再次点击取消显示
    showingResource.value = null;
  } else {
    showingResource.value = resource;
  }
};

const handlePageChange = (page: number) => {
  playSound('click');
  currentEbookPage.value = page;
};
const handleSlideChange = (page: number) => { currentSlidePage.value = page; };
const handleMediaEnded = () => { };
const toggleAudioSync = () => { autoPlayAudio.value = !autoPlayAudio.value; };

const handleDocumentPageChange = (page: number) => {
  playSound('click');
  currentDocumentPage.value = page;
};

const handleActivityClick = (activity: any) => {
  selectedActivity.value = activity;
  playSound('click');

  // 重置活动图片加载状态
  activityImageLoading.value = false;
  activityImageLoaded.value = false;
  activityImageError.value = false;

  if (activity.onlineMaterials) {
    try {
      const materials = typeof activity.onlineMaterials === 'string' ? JSON.parse(activity.onlineMaterials) : activity.onlineMaterials;
      if (materials.length > 0) {
        activityResourceUrl.value = getFileUrl(materials[0].path);
        activityResourceType.value = materials[0].type || 'image';

        // 如果是图片类型，设置 loading 状态
        if (materials[0].type === 'image') {
          activityImageLoading.value = true;
        }
      }
    } catch { activityResourceUrl.value = ''; }
  }
  activityModalVisible.value = true;
};

// 音效管理
const initAudioContext = () => {
  if (!audioContext.value) {
    audioContext.value = new (window.AudioContext || (window as any).webkitAudioContext)();
  }
};

const playSound = (type: 'click' | 'success' | 'complete') => {
  if (isMuted.value) return;

  initAudioContext();

  if (!audioContext.value) return;

  const oscillator = audioContext.value.createOscillator();
  const gainNode = audioContext.value.createGain();

  oscillator.connect(gainNode);
  gainNode.connect(audioContext.value.destination);

  switch (type) {
    case 'click':
      oscillator.frequency.setValueAtTime(800, audioContext.value.currentTime);
      oscillator.frequency.exponentialRampToValueAtTime(600, audioContext.value.currentTime + 0.1);
      gainNode.gain.setValueAtTime(0.1, audioContext.value.currentTime);
      gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.value.currentTime + 0.1);
      oscillator.start(audioContext.value.currentTime);
      oscillator.stop(audioContext.value.currentTime + 0.1);
      break;
    case 'success':
      oscillator.frequency.setValueAtTime(523.25, audioContext.value.currentTime); // C5
      oscillator.frequency.setValueAtTime(659.25, audioContext.value.currentTime + 0.1); // E5
      oscillator.frequency.setValueAtTime(783.99, audioContext.value.currentTime + 0.2); // G5
      gainNode.gain.setValueAtTime(0.1, audioContext.value.currentTime);
      gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.value.currentTime + 0.4);
      oscillator.start(audioContext.value.currentTime);
      oscillator.stop(audioContext.value.currentTime + 0.4);
      break;
    case 'complete':
      oscillator.frequency.setValueAtTime(523.25, audioContext.value.currentTime); // C5
      oscillator.frequency.setValueAtTime(659.25, audioContext.value.currentTime + 0.1); // E5
      oscillator.frequency.setValueAtTime(783.99, audioContext.value.currentTime + 0.2); // G5
      oscillator.frequency.setValueAtTime(1046.50, audioContext.value.currentTime + 0.3); // C6
      gainNode.gain.setValueAtTime(0.15, audioContext.value.currentTime);
      gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.value.currentTime + 0.6);
      oscillator.start(audioContext.value.currentTime);
      oscillator.stop(audioContext.value.currentTime + 0.6);
      break;
  }
};

const toggleMute = () => {
  isMuted.value = !isMuted.value;
  playSound('click');
};

// 键盘事件
const handleKeydown = (e: KeyboardEvent) => {
  if (e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A') prevStep();
  else if (e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') nextStep();
  else if (e.key === 'Escape') handleExit();
};

// 监听资源索引变化，自动加载资源
watch(() => currentResourceIndex.value, (newIndex) => {
  const resource = allLessonResources.value[newIndex];
  if (resource) {
    currentResourceType.value = resource.type;
    currentResourceUrl.value = resource.url;
    currentResourceName.value = resource.name;
    // 重置页面索引
    currentEbookPage.value = 0;
    currentSlidePage.value = 0;
    currentDocumentPage.value = 0;
  }
}, { immediate: true });

// 监听资源类型变化，重置对应的页面索引
watch(() => currentResourceType.value, (newType) => {
  if (newType === 'document') {
    currentDocumentPage.value = 0;
  } else if (newType === 'ppt' || newType === 'poster') {
    currentSlidePage.value = 0;
  } else if (newType === 'ebook') {
    currentEbookPage.value = 0;
  }
});

// 监听课程变化，重置资源索引
watch(() => props.currentLesson?.id, () => {
  currentResourceIndex.value = 0;
  currentDocumentPage.value = 0;
});

watch(() => props.currentStepIndex, () => {
  loadCurrentStepResources();
  currentEbookPage.value = 0;
  currentSlidePage.value = 0;
}, { immediate: true });

onMounted(() => {
  document.addEventListener('keydown', handleKeydown);
});

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown);
});
</script>

<style scoped lang="scss">
.kids-mode {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #FFF8E1 0%, #FFE0B2 50%, #FFCCBC 100%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  // 云朵装饰背景
  &::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 5%;
    width: 200px;
    height: 80px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 100px;
    filter: blur(20px);
    animation: float 8s ease-in-out infinite;
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 30%;
    right: 8%;
    width: 180px;
    height: 60px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 80px;
    filter: blur(15px);
    animation: float 10s ease-in-out infinite reverse;
  }
}

// 静音开关
.mute-toggle {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  border: 3px solid #FFD700;
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;

  &:hover {
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 6px 24px rgba(255, 215, 0, 0.5);
  }

  &:active {
    transform: scale(0.95);
  }

  &.muted {
    border-color: #9E9E9E;
    box-shadow: 0 4px 20px rgba(158, 158, 158, 0.3);

    .mute-icon {
      color: #9E9E9E;
    }
  }

  .mute-icon {
    color: #FF8C42;
    transition: color 0.3s;
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0) translateX(0);
  }

  50% {
    transform: translateY(-20px) translateX(10px);
  }
}

// 内容切换动画
.content-fade-enter-active,
.content-fade-leave-active {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.content-fade-enter-from {
  opacity: 0;
  transform: scale(0.9) translateY(20px);
}

.content-fade-leave-to {
  opacity: 0;
  transform: scale(0.95) translateY(-20px);
}

// 弹跳动画
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }

  50% {
    transform: scale(1.05);
  }

  70% {
    transform: scale(0.9);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

// 波纹动画
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }

  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

// 摇晃动画
@keyframes wiggle {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-5deg);
  }

  75% {
    transform: rotate(5deg);
  }
}

// 闪烁动画
@keyframes sparkle {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.kids-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  padding-bottom: 0;
  min-height: 0;
  overflow: hidden;
}

.content-viewer {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-viewer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;

  .image-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: calc(100% - 60px);

    .full-image {
      max-width: 100%;
      max-height: calc(100% - 60px);
      object-fit: contain;
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    }

    .error-placeholder {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: #999;
      font-size: 14px;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 16px;
    }
  }

  .image-caption {
    margin-top: 16px;
    font-size: 18px;
    font-weight: 600;
    color: #5D4037;
    text-align: center;
  }
}

.empty-content {
  text-align: center;
  color: #5D4037;

  .empty-icon {
    opacity: 0.4;
    margin-bottom: 24px;
    color: #FF8C42;
  }

  .empty-text {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #FF8C42;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }

  .empty-hint {
    font-size: 20px;
    opacity: 0.7;
    color: #8D6E63;
  }

  .play-area-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    margin-top: 32px;
    padding: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF9800 0%, #FF6F00 100%);
    border: 4px solid #E65100;
    color: white;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 32px rgba(255, 111, 0, 0.45);

    &:hover:not(:disabled) {
      transform: scale(1.08);
      box-shadow: 0 12px 40px rgba(255, 111, 0, 0.55);
    }

    &:active:not(:disabled) {
      transform: scale(0.98);
    }

    &:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
  }
}

// 底部固定导航
.kids-nav {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-top: 3px solid #FF9800;
  padding: 16px 24px 24px;
  box-shadow: 0 -4px 20px rgba(255, 152, 0, 0.15);
}

.steps-section {
  margin-bottom: 12px;

  .section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #8D6E63;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;

    .label-icon {
      color: #FF8C42;
    }
  }

  .steps-container {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .step-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: fit-content;

    &.active {
      .step-chip {
        background: linear-gradient(135deg, #FF8C42 0%, #E67635 100%);
        border-color: #FF8C42;
        color: white;
        font-weight: 500;
      }

      .step-resources {
        opacity: 1;
      }
    }
  }

  .step-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 24px;
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF3E0 100%);
    border: 3px solid #FFE0B2;
    color: #5D4037;
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

    &:hover {
      background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(255, 152, 0, 0.2);
    }

    &:active {
      transform: scale(0.98);
    }

    &.active {
      background: linear-gradient(135deg, #FF9800 0%, #FF6F00 100%);
      border-color: #FF6F00;
      color: white;
      font-weight: 700;
      box-shadow: 0 4px 16px rgba(255, 111, 0, 0.4);
      animation: pulse 2s ease-in-out infinite;
    }

    &.completed {
      background: linear-gradient(135deg, #C8E6C9 0%, #A5D6A7 100%);
      border-color: #81C784;
      color: #2E7D32;
      box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
    }

    .step-icon {
      display: flex;
      align-items: center;
    }

    .step-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 24px;
      height: 24px;
      padding: 0 6px;
      border-radius: 12px;
      background: rgba(255, 111, 0, 0.2);
      color: #E65100;
      font-size: 13px;
      font-weight: 800;
    }
  }

  @keyframes pulse {

    0%,
    100% {
      box-shadow: 0 4px 16px rgba(255, 111, 0, 0.4);
    }

    50% {
      box-shadow: 0 6px 24px rgba(255, 111, 0, 0.6);
    }
  }

  .step-resources {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    opacity: 0.7;
    transition: opacity 0.2s;
  }

  .resource-mini-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 16px;
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
    border: 2px solid #90CAF9;
    color: #1565C0;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

    &:hover {
      background: linear-gradient(135deg, #BBDEFB 0%, #90CAF9 100%);
      transform: scale(1.08);
      box-shadow: 0 4px 10px rgba(33, 150, 243, 0.3);
    }

    &.active {
      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
      border-color: #1565C0;
      color: white;
      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
    }
  }
}

.progress-section {
  margin-bottom: 16px;
  padding: 0 8px;

  .progress-track {
    height: 12px;
    background: linear-gradient(90deg, #FFE0B2 0%, #FFCCBC 100%);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #FF9800 0%, #FF6F00 100%);
    border-radius: 12px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(255, 111, 0, 0.5);
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 10px;
      right: 10px;
      height: 3px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 3px;
    }
  }

  .progress-info {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 16px;
    color: #5D4037;
    font-weight: 600;

    .timer {
      font-variant-numeric: tabular-nums;
      color: #FF6F00;
    }

    .current-resource-name {
      max-width: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #FF6F00;
      font-weight: 700;
    }
  }
}

.activities-section {
  margin-bottom: 12px;

  .section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #8D6E63;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;

    .label-icon {
      color: #FF8C42;
    }
  }

  .activities-track {
    display: flex;
    gap: 10px;
  }

  .activity-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 24px;
    background: linear-gradient(135deg, #E1F5FE 0%, #B3E5FC 100%);
    border: 3px solid #81D4FA;
    color: #0277BD;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 3px 10px rgba(2, 119, 189, 0.15);

    &:hover {
      background: linear-gradient(135deg, #B3E5FC 0%, #81D4FA 100%);
      transform: scale(1.08) rotate(-2deg);
      box-shadow: 0 5px 15px rgba(2, 119, 189, 0.3);
    }

    &:active {
      transform: scale(1.02);
    }
  }
}

.resources-section {
  margin-bottom: 16px;
  padding: 4px 0;
  /* 为动画留出上下呼吸空间，避免被父级裁剪 */

  .section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    color: #8D6E63;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;

    .label-icon {
      color: #FF8C42;
    }
  }

  .resources-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 16px 12px;
    /* 增加内边距，为 scale/shadow 动画留出空间 */
    flex-wrap: wrap;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .resource-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 28px;
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF3E0 100%);
    border: 3px solid #FFB74D;
    color: #E65100;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(230, 81, 0, 0.2);

    &:hover {
      background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
      transform: scale(1.08) rotate(2deg);
      box-shadow: 0 6px 20px rgba(230, 81, 0, 0.35);
    }

    &.active {
      background: linear-gradient(135deg, #FF9800 0%, #FF6F00 100%);
      border-color: #E65100;
      color: white;
      box-shadow: 0 6px 24px rgba(230, 81, 0, 0.5);
      transform: scale(1.05);
    }
  }
}

.resource-header {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 32px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 40px;
  border: 3px solid #FF9800;
  box-shadow: 0 8px 32px rgba(255, 152, 0, 0.25);
  z-index: 10;

  .resource-title {
    color: #5D4037;
    font-size: 18px;
    font-weight: 700;
  }

  .close-resource-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF5252 0%, #D32F2F 100%);
    border: none;
    color: white;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3);

    &:hover {
      transform: scale(1.1) rotate(90deg);
      box-shadow: 0 6px 16px rgba(211, 47, 47, 0.5);
    }
  }
}

.nav-controls {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 8px;

  .ctrl-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 32px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F5F5F5 100%);
    border: 3px solid #E0E0E0;
    color: #424242;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-height: 60px;

    &:hover:not(:disabled) {
      background: linear-gradient(135deg, #F5F5F5 0%, #EEEEEE 100%);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

    &:active:not(:disabled) {
      transform: translateY(0);
    }

    &:disabled {
      opacity: 0.3;
      cursor: not-allowed;
      transform: none;
    }

    &.primary {
      background: linear-gradient(135deg, #FF9800 0%, #FF6F00 100%);
      border-color: #FF6F00;
      color: white;
      font-weight: 800;
      box-shadow: 0 4px 16px rgba(255, 111, 0, 0.4);

      &:hover:not(:disabled) {
        background: linear-gradient(135deg, #FFA726 0%, #FF8F00 100%);
        box-shadow: 0 6px 24px rgba(255, 111, 0, 0.5);
      }
    }

    &.exit {
      background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
      border-color: #EF9A9A;
      color: #C62828;
      font-weight: 700;

      &:hover {
        background: linear-gradient(135deg, #FFCDD2 0%, #EF9A9A 100%);
        box-shadow: 0 4px 16px rgba(198, 40, 40, 0.3);
      }
    }
  }
}

// 延伸活动弹窗
.activity-modal {
  :deep(.ant-modal-content) {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  }

  :deep(.ant-modal-header) {
    background: linear-gradient(135deg, #FF9800 0%, #FF6F00 100%);
    border-bottom: none;
    padding: 20px 32px;

    .ant-modal-title {
      color: white;
      font-size: 22px;
      font-weight: 700;
    }
  }

  :deep(.ant-modal-close) {
    color: white;
    top: 16px;
    right: 16px;

    .ant-modal-close-x {
      width: 36px;
      height: 36px;
      line-height: 36px;
      font-size: 20px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      transition: all 0.3s;

      &:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: rotate(90deg);
      }
    }
  }

  :deep(.ant-modal-body) {
    padding: 28px 32px;
    background: linear-gradient(135deg, #FFF8E1 0%, #FFE0B2 100%);
  }
}

.activity-content {
  .activity-media {
    margin-bottom: 24px;
    border-radius: 20px;
    overflow: hidden;
    background: white;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border: 3px solid #FFE0B2;

    .activity-image-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-height: 50vh;

      .error-placeholder {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        color: #999;
        font-size: 14px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 20px;
      }
    }
  }

  .activity-info {
    .info-item {
      margin-bottom: 20px;
      padding: 20px 24px;
      background: white;
      border-radius: 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      border: 2px solid #FFE0B2;

      .info-label {
        font-size: 14px;
        color: #8D6E63;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 700;
      }

      .info-value {
        font-size: 18px;
        color: #424242;
        line-height: 1.7;
        font-weight: 500;
      }
    }
  }
}
</style>
