<template>
  <div class="prepare-mode-view">
    <!-- 顶部课程信息 -->
    <div class="course-header">
      <div class="header-left">
        <a-button type="text" @click="goBackToDetail" class="back-btn">
          <template #icon><LeftOutlined /></template>
          返回
        </a-button>
        <div class="course-info">
          <h1 class="course-title">{{ course.name || '备课模式' }}</h1>
          <div class="course-meta">
            <span class="meta-item">
              <BookOutlined /> {{ course.pictureBookName || '关联绘本' }}
            </span>
            <span class="meta-item">
              <ClockCircleOutlined /> {{ course.duration || 25 }} 分钟
            </span>
            <a-tag v-for="tag in courseGradeTags" :key="tag" :style="getGradeTagStyle(tag)">
              {{ tag }}
            </a-tag>
          </div>
        </div>
      </div>
      <div class="header-right">
        <div class="class-selector">
          <span class="selector-label">授课班级</span>
          <a-select
            v-model:value="selectedClassId"
            placeholder="选择班级"
            style="width: 160px;"
          >
            <a-select-option v-for="cls in classes" :key="cls.id" :value="cls.id">
              <TeamOutlined /> {{ cls.name }}
            </a-select-option>
          </a-select>
        </div>
        <a-button @click="showScheduleModal" :disabled="!selectedClassId" class="schedule-btn">
          <template #icon><CalendarOutlined /></template>
          预约上课
        </a-button>
        <a-button type="primary" @click="startTeaching" :disabled="!selectedClassId" class="start-btn">
          <template #icon><PlayCircleOutlined /></template>
          开始上课
        </a-button>
      </div>
    </div>

    <a-spin :spinning="loading">
      <div class="prepare-content">
        <a-row :gutter="20">
          <!-- 左侧：教学流程导航 -->
          <a-col :span="5">
            <div class="flow-nav-card">
              <div class="card-header">
                <div class="header-icon">
                  <OrderedListOutlined />
                </div>
                <span>教学流程</span>
                <span class="step-count">{{ scripts.length }} 个环节</span>
              </div>

              <div class="flow-steps">
                <div
                  v-for="(script, index) in scripts"
                  :key="script.id"
                  :class="['flow-step', { active: selectedStepKeys.includes(String(script.id)) }]"
                  @click="handleStepClick({ key: script.id })"
                >
                  <div class="step-indicator">
                    <div class="step-number">{{ index + 1 }}</div>
                    <div class="step-line" v-if="index < scripts.length - 1"></div>
                  </div>
                  <div class="step-content">
                    <div class="step-name">{{ script.stepName }}</div>
                    <div class="step-meta">
                      <span class="duration">
                        <ClockCircleOutlined /> {{ script.duration }}分钟
                      </span>
                    </div>
                  </div>
                  <div class="step-arrow">
                    <RightOutlined />
                  </div>
                </div>
              </div>

              <div class="total-time">
                <span>总时长</span>
                <strong>{{ totalTime }} 分钟</strong>
              </div>
            </div>
          </a-col>

          <!-- 中间：当前步骤详情 -->
          <a-col :span="12">
            <div class="step-detail-card" v-if="currentScript">
              <div class="detail-header">
                <div class="header-left">
                  <div class="step-badge">
                    <span class="badge-icon"><ReadOutlined /></span>
                    <span class="badge-text">{{ currentScript.stepType }}</span>
                  </div>
                  <h2 class="step-title">{{ currentScript.stepName }}</h2>
                </div>
                <div class="header-right">
                  <div class="time-display">
                    <ClockCircleOutlined />
                    <span>{{ currentScript.duration }} 分钟</span>
                  </div>
                </div>
              </div>

              <div class="detail-content">
                <!-- 教学目标 -->
                <div class="content-section" v-if="currentScript.objective">
                  <div class="section-header">
                    <div class="section-icon objective-icon"><AimOutlined /></div>
                    <span>教学目标</span>
                  </div>
                  <div class="section-body objective-body">
                    {{ currentScript.objective }}
                  </div>
                </div>

                <!-- 教师讲稿 -->
                <div class="content-section">
                  <div class="section-header">
                    <div class="section-icon script-icon"><EditOutlined /></div>
                    <span>教师讲稿</span>
                  </div>
                  <div class="section-body script-body">
                    <div class="script-content">
                      {{ currentScript.teacherScript || '暂无讲稿内容' }}
                    </div>
                  </div>
                </div>

                <!-- 逐页配置 -->
                <div class="content-section" v-if="pages && pages.length > 0">
                  <div class="section-header">
                    <div class="section-icon pages-icon"><FileTextOutlined /></div>
                    <span>逐页脚本</span>
                    <span class="pages-count">{{ pages.length }} 页</span>
                  </div>
                  <div class="section-body pages-body">
                    <div class="pages-tabs">
                      <div
                        v-for="page in pages"
                        :key="page.id"
                        :class="['page-tab', { active: activePageKey === String(page.id), 'has-content': hasPageContent(page) }]"
                        @click="activePageKey = String(page.id)"
                      >
                        <span class="page-num">第{{ page.pageNumber }}页</span>
                        <span v-if="hasPageContent(page)" class="content-dot"></span>
                      </div>
                    </div>
                    <div class="page-content" v-if="currentPage">
                      <div class="page-item" v-if="currentPage.questions">
                        <span class="page-label">教师话术：</span>
                        <span class="page-value">{{ currentPage.questions }}</span>
                      </div>
                      <div class="page-item" v-if="currentPage.teacherNotes">
                        <span class="page-label">教学备注：</span>
                        <span class="page-value">{{ currentPage.teacherNotes }}</span>
                      </div>
                      <div class="page-item" v-if="currentPage.resourceIds && currentPage.resourceIds.length > 0">
                        <span class="page-label">关联资源：</span>
                        <div class="page-resources">
                          <a-tag
                            v-for="res in currentPageResources"
                            :key="res.id"
                            size="small"
                            style="cursor: pointer; margin: 2px;"
                            @click="previewResource(res)"
                          >
                            <PlayCircleOutlined v-if="res.type === '视频'" style="margin-right: 4px;" />
                            <SoundOutlined v-else-if="res.type === '音频'" style="margin-right: 4px;" />
                            <FilePdfOutlined v-else-if="res.type === '电子绘本'" style="margin-right: 4px;" />
                            <FilePptOutlined v-else-if="res.type === 'PPT课件'" style="margin-right: 4px;" />
                            <PictureOutlined v-else style="margin-right: 4px;" />
                            {{ res.name }}
                          </a-tag>
                        </div>
                      </div>
                      <div class="page-empty" v-if="!currentPage.questions && !currentPage.teacherNotes && (!currentPage.resourceIds || currentPage.resourceIds.length === 0)">
                        <span>该页暂无配置内容</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="empty-state" v-else>
              <div class="empty-icon">
                <ReadOutlined />
              </div>
              <p>请从左侧选择教学环节</p>
              <p class="empty-hint">查看详细的教师讲稿和教学目标</p>
            </div>
          </a-col>

          <!-- 右侧：资源和笔记 -->
          <a-col :span="7">
            <!-- 我的备课笔记 -->
            <div class="notes-card">
              <div class="card-header">
                <div class="header-icon notes-icon">
                  <FormOutlined />
                </div>
                <span>我的备课笔记</span>
                <a-button type="link" size="small" @click="saveNotes" class="save-btn">
                  <SaveOutlined /> 保存
                </a-button>
              </div>
              <div class="notes-body">
                <a-textarea
                  v-model:value="myNotes"
                  placeholder="在这里记录您的备课笔记、教学心得或需要特别注意的事项..."
                  :auto-size="{ minRows: 6, maxRows: 10 }"
                  class="notes-textarea"
                />
              </div>
            </div>

            <!-- 教学材料 -->
            <div class="materials-card">
              <div class="card-header">
                <div class="header-icon materials-icon">
                  <FolderOutlined />
                </div>
                <span>本环节材料</span>
              </div>
              <div class="materials-body">
                <div v-if="stepMaterials && stepMaterials.length > 0" class="materials-list">
                  <div v-for="item in stepMaterials" :key="item.id" class="material-item" @click="previewMaterial(item)">
                    <div class="material-icon" :class="`icon-${item.id.split('-')[0]}`">
                      <PlayCircleOutlined v-if="item.type === '视频'" />
                      <SoundOutlined v-else-if="item.type === '音频'" />
                      <FilePdfOutlined v-else-if="item.type === '电子绘本'" />
                      <FilePptOutlined v-else-if="item.type === 'PPT课件'" />
                      <PictureOutlined v-else />
                    </div>
                    <div class="material-info">
                      <span class="material-name">{{ item.name }}</span>
                      <span class="material-type">{{ item.type }}</span>
                    </div>
                    <a-button type="link" size="small" class="preview-btn">
                      <EyeOutlined />
                    </a-button>
                  </div>
                </div>
                <div v-else class="empty-materials">
                  <InboxOutlined />
                  <span>暂无相关材料</span>
                </div>
              </div>
            </div>

            <!-- 延伸活动提示 -->
            <div class="activities-card" v-if="activities && activities.length > 0">
              <div class="card-header">
                <div class="header-icon activities-icon">
                  <AppstoreOutlined />
                </div>
                <span>延伸活动</span>
                <span class="activity-count">{{ activities.length }} 个</span>
              </div>
              <div class="activities-body">
                <a-collapse ghost>
                  <a-collapse-panel v-for="activity in activities" :key="activity.id">
                    <template #header>
                      <div class="activity-header">
                        <span class="activity-name">{{ activity.name }}</span>
                        <a-tag size="small" :style="getActivityTypeStyle(translateActivityType(activity.activityType))">
                          {{ translateActivityType(activity.activityType) }}
                        </a-tag>
                      </div>
                    </template>
                    <div class="activity-detail">
                      <p v-if="activity.duration"><ClockCircleOutlined /> {{ activity.duration }}分钟</p>
                      <p v-if="activity.onlineMaterialsText">
                        <FileTextOutlined /> {{ activity.onlineMaterialsText }}
                      </p>
                    </div>
                  </a-collapse-panel>
                </a-collapse>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </a-spin>

    <!-- 文件预览弹窗 -->
    <FilePreviewModal
      v-model:open="previewModalVisible"
      :file-url="previewFileUrl"
      :file-name="previewFileName"
    />

    <!-- 预约上课弹窗 -->
    <a-modal
      v-model:open="scheduleModalVisible"
      title="预约上课"
      @ok="confirmSchedule"
      :confirmLoading="scheduleLoading"
      okText="确认预约"
      cancelText="取消"
    >
      <a-form layout="vertical">
        <a-form-item label="授课班级">
          <span>{{ selectedClassInfo?.name || '未选择' }}</span>
        </a-form-item>
        <a-form-item label="计划上课时间" required>
          <a-date-picker
            v-model:value="scheduleDate"
            show-time
            format="YYYY-MM-DD HH:mm"
            placeholder="选择计划上课时间"
            style="width: 100%;"
          />
        </a-form-item>
        <a-alert
          message="预约成功后，可在【上课记录】中查看和管理预约"
          type="info"
          show-icon
          style="margin-top: 8px;"
        />
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import {
  LeftOutlined,
  SaveOutlined,
  PlayCircleOutlined,
  FileOutlined,
  BookOutlined,
  ClockCircleOutlined,
  TeamOutlined,
  OrderedListOutlined,
  RightOutlined,
  ReadOutlined,
  AimOutlined,
  EditOutlined,
  FileTextOutlined,
  FormOutlined,
  FolderOutlined,
  InboxOutlined,
  AppstoreOutlined,
  SoundOutlined,
  FilePdfOutlined,
  FilePptOutlined,
  PictureOutlined,
  EyeOutlined,
  CalendarOutlined,
} from '@ant-design/icons-vue';
import { message, Modal } from 'ant-design-vue';
import dayjs from 'dayjs';
import * as teacherApi from '@/api/teacher';
import {
  translateGradeTag,
  getGradeTagStyle,
  translateStepType,
  translateActivityType,
  getActivityTypeStyle,
} from '@/utils/tagMaps';
import FilePreviewModal from '@/components/FilePreviewModal.vue';

const router = useRouter();
const route = useRoute();
const loading = ref(false);
const selectedStepKeys = ref<string[]>([]);
const activePageKey = ref('1');
const myNotes = ref('');

// 文件预览相关
const previewModalVisible = ref(false);
const previewFileUrl = ref('');
const previewFileName = ref('');
const courseId = ref(0);

const course = ref<any>({});
const scripts = ref<any[]>([]);
const pages = ref<any[]>([]);
const stepMaterials = ref<any[]>([]);
const activities = ref<any[]>([]);
const classes = ref<any[]>([]);
const selectedClassId = ref<number>();

// 预约上课相关
const scheduleModalVisible = ref(false);
const scheduleLoading = ref(false);
const scheduleDate = ref<dayjs.Dayjs | undefined>(undefined);

// 获取选中的班级信息
const selectedClassInfo = computed(() => {
  return classes.value.find(c => c.id === selectedClassId.value);
});

// 计算课程年级标签
const courseGradeTags = computed(() => {
  if (!course.value.gradeTags) return [];
  const tags = Array.isArray(course.value.gradeTags)
    ? course.value.gradeTags
    : [];
  return tags.map((tag: string) => translateGradeTag(tag));
});

// 计算总时长
const totalTime = computed(() => {
  return scripts.value.reduce((sum, script) => sum + (script.duration || 0), 0);
});

// 当前选中的步骤
const currentScript = computed(() => {
  const id = selectedStepKeys.value[0];
  return scripts.value.find(s => String(s.id) === id);
});

// 当前选中的页面
const currentPage = computed(() => {
  return pages.value.find(p => String(p.id) === activePageKey.value);
});

// 检查页面是否有内容
const hasPageContent = (page: any) => {
  return (page.questions && page.questions.trim()) ||
         (page.teacherNotes && page.teacherNotes.trim()) ||
         (page.resourceIds && page.resourceIds.length > 0);
};

// 当前页面的资源列表 - 直接从课程数据中获取
const currentPageResources = computed(() => {
  if (!currentPage.value || !currentPage.value.resourceIds) return [];
  const pageResourceIds = currentPage.value.resourceIds;
  const resources: any[] = [];
  pageResourceIds.forEach((resId: string) => {
    const resource = getResourceById(resId);
    if (resource) {
      resources.push(resource);
    }
  });
  return resources;
});

// 获取完整的文件 URL
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 previewResource = (res: any) => {
  if (res.url) {
    previewFileUrl.value = getFileUrl(res.url);
    previewFileName.value = res.name;
    previewModalVisible.value = true;
  }
};

const loadCourseData = async () => {
  courseId.value = parseInt(route.params.id as string);
  if (!courseId.value) return;

  loading.value = true;
  try {
    // 加载课程详情
    const data = await teacherApi.getTeacherCourse(courseId.value);

    // 解析课程中的路径数组（可能是JSON字符串）
    const parsePathArray = (paths: any) => {
      if (!paths) return [];
      if (typeof paths === 'string') {
        try {
          return JSON.parse(paths);
        } catch {
          return [];
        }
      }
      return Array.isArray(paths) ? paths : [];
    };

    course.value = {
      ...data,
      ebookPaths: parsePathArray(data.ebookPaths),
      audioPaths: parsePathArray(data.audioPaths),
      videoPaths: parsePathArray(data.videoPaths),
      posterPaths: parsePathArray(data.posterPaths),
    };

    scripts.value = (data.scripts || []).map((script: any) => ({
      ...script,
      stepType: translateStepType(script.stepType) || script.stepType,
      interactionPointsText: Array.isArray(script.interactionPoints)
        ? script.interactionPoints.join('、')
        : script.interactionPoints,
      resourceIds: typeof script.resourceIds === 'string' ? JSON.parse(script.resourceIds) : (script.resourceIds || []),
      pages: (script.pages || []).map((page: any) => ({
        ...page,
        resourceIds: typeof page.resourceIds === 'string' ? JSON.parse(page.resourceIds) : (page.resourceIds || []),
      })),
    }));

    activities.value = (data.activities || []).map((activity: any) => ({
      ...activity,
      activityType: activity.activityType || '活动',
      domain: activity.domain || '',
      onlineMaterialsText: typeof activity.onlineMaterials === 'object'
        ? activity.onlineMaterials?.content || ''
        : activity.onlineMaterials || '',
      objectivesText: Array.isArray(activity.objectives)
        ? activity.objectives.join('、')
        : activity.objectives || '',
    }));

    // 加载教师班级
    const classesData = await teacherApi.getTeacherClasses();
    classes.value = classesData || [];
    if (classes.value.length > 0) {
      selectedClassId.value = classes.value[0].id;
    }

    // 默认选中第一个步骤
    if (scripts.value.length > 0) {
      selectedStepKeys.value = [String(scripts.value[0].id)];
      loadStepData(scripts.value[0]);
    }

    // 加载已保存的笔记
    const savedNotes = localStorage.getItem(`notes_${courseId.value}`);
    if (savedNotes) {
      myNotes.value = savedNotes;
    }
  } catch (error: any) {
    message.error(error.response?.data?.message || '获取课程数据失败');
  } finally {
    loading.value = false;
  }
};

const loadStepData = (script: any) => {
  // 加载逐页配置
  pages.value = script.pages || [];
  if (pages.value.length > 0) {
    activePageKey.value = String(pages.value[0].id);
  } else {
    activePageKey.value = '';
  }

  // 根据资源ID加载材料
  const resourceIds = script.resourceIds || [];
  const materials: any[] = [];

  // 遍历资源ID，构建材料列表
  resourceIds.forEach((resId: string) => {
    const material = getResourceById(resId);
    if (material) {
      materials.push(material);
    }
  });

  stepMaterials.value = materials;
};

// 根据资源ID获取资源详情
const getResourceById = (resId: string) => {
  if (!resId || !course.value) return null;

  // 解析资源ID格式: type-index (如 "ebook-0", "audio-1", "ppt-0", "poster-2")
  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: '教学挂图',
  };

  const typeIcons: Record<string, any> = {
    ebook: 'FilePdfOutlined',
    audio: 'SoundOutlined',
    video: 'PlayCircleOutlined',
    ppt: 'FilePptOutlined',
    poster: 'PictureOutlined',
  };

  // 根据类型从课程数据中获取资源
  switch (type) {
    case 'ebook': {
      const ebooks = course.value.ebookPaths || [];
      if (index < ebooks.length) {
        return {
          id: resId,
          name: ebooks[index].name || `电子绘本${index + 1}`,
          type: typeNames.ebook,
          icon: typeIcons.ebook,
          url: ebooks[index].path,
        };
      }
      break;
    }
    case 'audio': {
      const audios = course.value.audioPaths || [];
      if (index < audios.length) {
        return {
          id: resId,
          name: audios[index].name || `音频${index + 1}`,
          type: typeNames.audio,
          icon: typeIcons.audio,
          url: audios[index].path,
        };
      }
      break;
    }
    case 'video': {
      const videos = course.value.videoPaths || [];
      if (index < videos.length) {
        return {
          id: resId,
          name: videos[index].name || `视频${index + 1}`,
          type: typeNames.video,
          icon: typeIcons.video,
          url: videos[index].path,
        };
      }
      break;
    }
    case 'ppt': {
      if (course.value.pptPath) {
        return {
          id: resId,
          name: course.value.pptName || '教学PPT',
          type: typeNames.ppt,
          icon: typeIcons.ppt,
          url: course.value.pptPath,
        };
      }
      break;
    }
    case 'poster': {
      const posters = course.value.posterPaths || [];
      if (index < posters.length) {
        return {
          id: resId,
          name: posters[index].name || `挂图${index + 1}`,
          type: typeNames.poster,
          icon: typeIcons.poster,
          url: posters[index].path,
        };
      }
      break;
    }
  }

  return null;
};

const handleStepClick = ({ key }: { key: string | number }) => {
  selectedStepKeys.value = [String(key)];
  const script = scripts.value.find(s => String(s.id) === String(key));
  if (script) {
    loadStepData(script);
  }
};

// 预览材料
const previewMaterial = (item: any) => {
  if (!item.url) {
    message.warning('该材料暂无可预览的文件');
    return;
  }
  previewFileUrl.value = getFileUrl(item.url);
  previewFileName.value = item.name;
  previewModalVisible.value = true;
};

const saveNotes = () => {
  localStorage.setItem(`notes_${courseId.value}`, myNotes.value);
  message.success('笔记已保存');
};

const startTeaching = async () => {
  if (!selectedClassId.value) {
    message.warning('请先选择班级');
    return;
  }

  Modal.confirm({
    title: '开始上课',
    content: '确认要开始上课吗？系统将创建一条新的授课记录。',
    okText: '确认开始',
    cancelText: '取消',
    onOk: async () => {
      try {
        // 创建授课记录
        const lesson = await teacherApi.createLesson({
          courseId: courseId.value,
          classId: selectedClassId.value!,
        });

        // 开始上课
        await teacherApi.startLesson(lesson.id);

        message.success('正在进入课堂...');
        router.push(`/teacher/lessons/${lesson.id}`);
      } catch (error: any) {
        message.error(error.response?.data?.message || '创建授课记录失败');
      }
    },
  });
};

// 显示预约上课弹窗
const showScheduleModal = () => {
  if (!selectedClassId.value) {
    message.warning('请先选择班级');
    return;
  }
  scheduleDate.value = undefined;
  scheduleModalVisible.value = true;
};

// 确认预约上课
const confirmSchedule = async () => {
  if (!scheduleDate.value) {
    message.warning('请选择计划上课时间');
    return;
  }

  scheduleLoading.value = true;
  try {
    await teacherApi.createLesson({
      courseId: courseId.value,
      classId: selectedClassId.value!,
      plannedDatetime: scheduleDate.value.toISOString(),
    });

    message.success('预约成功，可在"上课记录"中查看');
    scheduleModalVisible.value = false;
  } catch (error: any) {
    message.error(error.response?.data?.message || '预约失败');
  } finally {
    scheduleLoading.value = false;
  }
};

// 返回课程详情页
const goBackToDetail = () => {
  router.push(`/teacher/courses/${courseId.value}`);
};

onMounted(() => {
  loadCourseData();
});
</script>

<style scoped>
.prepare-mode-view {
  min-height: 100vh;
  background: linear-gradient(135deg, #FFF5EB 0%, #FFF9F5 50%, #F0F7FF 100%);
  padding-bottom: 24px;
}

/* 顶部课程信息 */
.course-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.back-btn {
  color: #666;
  font-size: 14px;
}

.back-btn:hover {
  color: #FF8C42;
}

.course-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.course-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.course-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #666;
  font-size: 13px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.class-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selector-label {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
}

.schedule-btn {
  border: 1px solid #FF8C42;
  color: #FF8C42;
  height: 32px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  background: white;
}

.schedule-btn:hover:not(:disabled) {
  background: #FFF5EB;
  border-color: #FF6B35;
  color: #FF6B35;
}

.schedule-btn:disabled {
  border-color: #d9d9d9;
  color: #d9d9d9;
  background: white;
}

.start-btn {
  background: linear-gradient(135deg, #FF8C42 0%, #FF6B35 100%);
  border: none;
  height: 32px;
  padding: 0 24px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(255, 140, 66, 0.3);
}

.start-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #FF7A2A 0%, #FF5722 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 140, 66, 0.4);
}

.start-btn:disabled {
  background: #d9d9d9;
  box-shadow: none;
}

/* 内容区域 */
.prepare-content {
  padding: 20px 24px;
}

/* 卡片通用样式 */
.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.header-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* 流程导航卡片 */
.flow-nav-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.flow-nav-card .header-icon {
  background: linear-gradient(135deg, #E8F4FD 0%, #D4E8F9 100%);
  color: #1890ff;
}

.step-count {
  margin-left: auto;
  font-size: 12px;
  color: #999;
  font-weight: 400;
}

.flow-steps {
  padding: 8px 0;
}

.flow-step {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.flow-step:hover {
  background: #FFF7F0;
}

.flow-step.active {
  background: linear-gradient(90deg, #FFF5EB 0%, #FFF 100%);
  border-left: 3px solid #FF8C42;
}

.step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 12px;
}

.step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f0f0f0;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
}

.flow-step.active .step-number {
  background: linear-gradient(135deg, #FF8C42 0%, #FF6B35 100%);
  color: white;
}

.step-line {
  width: 2px;
  height: 24px;
  background: #e8e8e8;
  margin-top: 4px;
}

.step-content {
  flex: 1;
}

.step-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.step-meta {
  margin-top: 4px;
}

.step-meta .duration {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
  gap: 4px;
}

.step-arrow {
  color: #d9d9d9;
  opacity: 0;
  transition: all 0.2s;
}

.flow-step:hover .step-arrow,
.flow-step.active .step-arrow {
  opacity: 1;
  color: #FF8C42;
}

.total-time {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  background: #FAFAFA;
  font-size: 13px;
  color: #666;
}

.total-time strong {
  color: #FF8C42;
  font-size: 15px;
}

/* 步骤详情卡片 */
.step-detail-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  min-height: 500px;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, #FFF5EB 0%, #FFF 100%);
  border-bottom: 1px solid #f0f0f0;
}

.step-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: white;
  border-radius: 20px;
  font-size: 13px;
  color: #FF8C42;
  border: 1px solid #FFD4B8;
}

.step-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 8px 0 0 0;
}

.time-display {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #FFF0E5;
  border-radius: 20px;
  color: #FF8C42;
  font-weight: 500;
}

.detail-content {
  padding: 20px;
}

.content-section {
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.section-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.objective-icon {
  background: #E6F7FF;
  color: #1890ff;
}

.script-icon {
  background: #FFF0E5;
  color: #FF8C42;
}

.pages-icon {
  background: #F6FFED;
  color: #52c41a;
}

.pages-count {
  font-size: 12px;
  color: #999;
  font-weight: 400;
  margin-left: auto;
}

.section-body {
  padding: 16px;
  border-radius: 8px;
}

.objective-body {
  background: #F0F7FF;
  color: #1890ff;
  font-size: 14px;
  line-height: 1.6;
}

.script-body {
  background: #FAFAFA;
  border: 1px solid #E8E8E8;
}

.script-content {
  white-space: pre-wrap;
  line-height: 1.8;
  font-size: 14px;
  color: #333;
}

.pages-body {
  background: #FAFAFA;
  border: 1px solid #E8E8E8;
  padding: 0;
  overflow: hidden;
}

.pages-tabs {
  display: flex;
  border-bottom: 1px solid #E8E8E8;
  padding: 0 12px;
  background: #F5F5F5;
}

.page-tab {
  padding: 10px 16px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.page-tab:hover {
  color: #FF8C42;
}

.page-tab.active {
  color: #FF8C42;
  border-bottom-color: #FF8C42;
  background: white;
}

.page-tab.has-content .content-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #52c41a;
  display: inline-block;
}

.page-resources {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.page-content {
  padding: 16px;
}

.page-item {
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.6;
}

.page-label {
  color: #999;
  margin-right: 8px;
}

.page-value {
  color: #333;
}

.page-empty {
  text-align: center;
  color: #999;
  padding: 20px;
}

/* 空状态 */
.empty-state {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
}

.empty-icon {
  font-size: 48px;
  color: #D9D9D9;
  margin-bottom: 16px;
}

.empty-state p {
  margin: 4px 0;
}

.empty-hint {
  font-size: 13px;
  color: #BFBFBF;
}

/* 笔记卡片 */
.notes-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  margin-bottom: 16px;
}

.notes-icon {
  background: #FFF0E5;
  color: #FF8C42;
}

.save-btn {
  margin-left: auto;
  color: #FF8C42;
}

.notes-body {
  padding: 16px;
}

.notes-textarea {
  border: 1px solid #E8E8E8;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
}

.notes-textarea:focus {
  border-color: #FF8C42;
  box-shadow: 0 0 0 2px rgba(255, 140, 66, 0.1);
}

/* 材料卡片 */
.materials-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  margin-bottom: 16px;
}

.materials-icon {
  background: #E6F7FF;
  color: #1890ff;
}

.materials-body {
  padding: 8px 0;
}

.materials-list {
  padding: 0 8px;
}

.material-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background 0.2s;
}

.material-item:hover {
  background: #F5F5F5;
}

.material-icon {
  width: 36px;
  height: 36px;
  background: #E6F7FF;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1890ff;
  margin-right: 12px;
}

.material-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.material-name {
  font-size: 13px;
  color: #333;
}

.material-type {
  font-size: 12px;
  color: #999;
}

.empty-materials {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  color: #BFBFBF;
  gap: 8px;
}

/* 活动卡片 */
.activities-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.activities-icon {
  background: #F6FFED;
  color: #52c41a;
}

.activity-count {
  margin-left: auto;
  font-size: 12px;
  color: #999;
  font-weight: 400;
}

.activities-body {
  padding: 8px 16px;
}

.activity-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.activity-name {
  font-size: 13px;
  color: #333;
}

.activity-detail {
  font-size: 12px;
  color: #666;
}

.activity-detail p {
  margin: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
</style>
