<template>
  <div class="course-detail-view">
    <!-- 顶部课程信息 -->
    <div class="course-header">
      <div class="header-left">
        <a-button type="text" @click="goBackToList" 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 course.gradeTags" :key="tag" :style="getGradeTagStyle(tag)">
              {{ tag }}
            </a-tag>
          </div>
        </div>
      </div>
      <div class="header-right">
        <a-tag :color="course.authorized ? 'success' : 'warning'" class="auth-tag">
          {{ course.authorized ? '已授权' : '未授权' }}
        </a-tag>
      </div>
    </div>

    <a-spin :spinning="loading">
      <div class="detail-content">
        <a-row :gutter="20">
          <!-- 左侧：课程信息和教学流程 -->
          <a-col :span="16">
            <!-- 课程封面和基本信息 -->
            <div class="info-card">
              <div class="card-header">
                <div class="header-icon info-icon"><InfoCircleOutlined /></div>
                <span>课程信息</span>
              </div>
              <div class="card-body">
                <div class="cover-section" v-if="course.coverImagePath">
                  <img :src="getFileUrl(course.coverImagePath)" alt="课程封面" class="cover-image" />
                </div>
                <div class="info-grid">
                  <div class="info-item">
                    <span class="info-label">课程名称</span>
                    <span class="info-value">{{ course.name }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">绘本名称</span>
                    <span class="info-value">{{ course.pictureBookName }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">适用年级</span>
                    <div class="info-tags">
                      <a-tag v-for="tag in course.gradeTags" :key="tag" :style="getGradeTagStyle(tag)">
                        {{ tag }}
                      </a-tag>
                    </div>
                  </div>
                  <div class="info-item">
                    <span class="info-label">核心发展目标</span>
                    <div class="info-tags">
                      <a-tag v-for="tag in course.domainTags" :key="tag" :style="getDomainTagStyle(tag)">
                        {{ tag }}
                      </a-tag>
                    </div>
                  </div>
                  <div class="info-item">
                    <span class="info-label">课时长度</span>
                    <span class="info-value">{{ course.duration }} 分钟</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">课程版本</span>
                    <span class="info-value">{{ course.version }}</span>
                  </div>
                  <div class="info-item full-width" v-if="course.description">
                    <span class="info-label">课程描述</span>
                    <span class="info-value desc">{{ course.description }}</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 教学流程 -->
            <div class="flow-card">
              <div class="card-header">
                <div class="header-icon flow-icon"><OrderedListOutlined /></div>
                <span>教学流程</span>
                <span class="step-count">{{ scripts.length }} 个环节</span>
              </div>
              <div class="card-body">
                <div v-if="scripts && scripts.length > 0" class="flow-timeline">
                  <div v-for="(script, index) in scripts" :key="script.id" class="flow-item">
                    <div class="flow-indicator">
                      <div class="flow-number">{{ index + 1 }}</div>
                      <div class="flow-line" v-if="index < scripts.length - 1"></div>
                    </div>
                    <div class="flow-content">
                      <div class="flow-header">
                        <span class="flow-name">{{ script.stepName }}</span>
                        <span class="flow-duration"><ClockCircleOutlined /> {{ script.duration }} 分钟</span>
                      </div>
                      <div class="flow-objective" v-if="script.objective">
                        <AimOutlined /> {{ script.objective }}
                      </div>
                      <div class="flow-script" v-if="script.teacherScript">
                        <SoundOutlined /> 教师讲稿
                        <div class="script-text">{{ script.teacherScript }}</div>
                      </div>
                      <!-- 关联资源 -->
                      <div class="flow-resources" v-if="getScriptResources(script).length > 0">
                        <FolderOutlined /> 关联资源
                        <div class="resource-tags">
                          <a-tag v-for="res in getScriptResources(script)" :key="res.id" @click="previewFile(res)" class="resource-tag">
                            {{ res.icon }} {{ res.name }}
                          </a-tag>
                        </div>
                      </div>
                      <!-- 逐页脚本 -->
                      <div class="flow-pages" v-if="script.pages && script.pages.length > 0">
                        <FileTextOutlined /> 逐页脚本 ({{ script.pages.length }}页)
                        <div class="pages-list">
                          <a-collapse size="small" ghost :activeKey="getExpandedPages(script)">
                            <a-collapse-panel v-for="(page, pIndex) in script.pages" :key="pIndex">
                              <template #header>
                                <span class="page-header">
                                  第 {{ page.pageNumber }} 页
                                  <span v-if="hasPageContent(page)" class="content-dot"></span>
                                </span>
                              </template>
                              <div class="page-detail">
                                <div v-if="page.questions" class="page-row">
                                  <span class="page-label">教师话术：</span>
                                  <span class="page-value">{{ page.questions }}</span>
                                </div>
                                <div v-if="page.teacherNotes" class="page-row">
                                  <span class="page-label">教学备注：</span>
                                  <span class="page-value notes">{{ page.teacherNotes }}</span>
                                </div>
                                <div v-if="getPageResources(script, page).length > 0" class="page-row">
                                  <span class="page-label">关联资源：</span>
                                  <div class="page-resources">
                                    <a-tag v-for="res in getPageResources(script, page)" :key="res.id" size="small" @click="previewFile(res)" class="resource-tag">
                                      {{ res.icon }} {{ res.name }}
                                    </a-tag>
                                  </div>
                                </div>
                              </div>
                            </a-collapse-panel>
                          </a-collapse>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else class="empty-flow">
                  <InboxOutlined />
                  <span>暂无教学流程</span>
                </div>
              </div>
            </div>

            <!-- 延伸活动 -->
            <div class="activity-card" v-if="activities && activities.length > 0">
              <div class="card-header">
                <div class="header-icon activity-icon"><AppstoreOutlined /></div>
                <span>延伸活动</span>
                <span class="activity-count">{{ activities.length }} 个</span>
              </div>
              <div class="card-body">
                <div class="activity-list">
                  <div v-for="activity in activities" :key="activity.id" class="activity-item">
                    <div class="activity-header">
                      <span class="activity-name">{{ activity.name }}</span>
                      <a-tag :style="getActivityTypeStyle(translateActivityType(activity.activityType))">
                        {{ translateActivityType(activity.activityType) }}
                      </a-tag>
                    </div>
                    <div class="activity-info">
                      <span v-if="activity.duration"><ClockCircleOutlined /> {{ activity.duration }}分钟</span>
                    </div>
                    <div class="activity-content" v-if="activity.content">{{ activity.content }}</div>
                    <div class="activity-materials" v-if="activity.materials">
                      <ToolOutlined /> {{ activity.materials }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a-col>

          <!-- 右侧：资源和材料 -->
          <a-col :span="8">
            <!-- 数字资源 -->
            <div class="resource-card">
              <div class="card-header">
                <div class="header-icon resource-icon"><FolderOutlined /></div>
                <span>数字资源</span>
              </div>
              <div class="card-body">
                <!-- 电子绘本 -->
                <div class="resource-section" v-if="ebookPaths && ebookPaths.length > 0">
                  <div class="section-title"><FilePdfOutlined /> 电子绘本</div>
                  <div v-for="(item, index) in ebookPaths" :key="index" class="resource-item" @click="previewResource(item)">
                    <FilePdfOutlined class="item-icon ebook" />
                    <span class="item-name">{{ item.name || `电子绘本${index + 1}` }}</span>
                    <EyeOutlined class="item-action" />
                  </div>
                </div>
                <!-- 音频 -->
                <div class="resource-section" v-if="audioPaths && audioPaths.length > 0">
                  <div class="section-title"><SoundOutlined /> 音频资源</div>
                  <div v-for="(item, index) in audioPaths" :key="index" class="resource-item" @click="previewResource(item)">
                    <SoundOutlined class="item-icon audio" />
                    <span class="item-name">{{ item.name || `音频${index + 1}` }}</span>
                    <PlayCircleOutlined class="item-action" />
                  </div>
                </div>
                <!-- 视频 -->
                <div class="resource-section" v-if="videoPaths && videoPaths.length > 0">
                  <div class="section-title"><PlayCircleOutlined /> 视频资源</div>
                  <div v-for="(item, index) in videoPaths" :key="index" class="resource-item" @click="previewResource(item)">
                    <PlayCircleOutlined class="item-icon video" />
                    <span class="item-name">{{ item.name || `视频${index + 1}` }}</span>
                    <PlayCircleOutlined class="item-action" />
                  </div>
                </div>
                <!-- 其他 -->
                <div class="resource-section" v-if="otherResources && otherResources.length > 0">
                  <div class="section-title"><FileOutlined /> 其他素材</div>
                  <div v-for="(item, index) in otherResources" :key="index" class="resource-item" @click="previewResource(item)">
                    <FileOutlined class="item-icon other" />
                    <span class="item-name">{{ item.name || `素材${index + 1}` }}</span>
                    <EyeOutlined class="item-action" />
                  </div>
                </div>
                <!-- 空状态 -->
                <div v-if="(!ebookPaths || !ebookPaths.length) && (!audioPaths || !audioPaths.length) && (!videoPaths || !videoPaths.length) && (!otherResources || !otherResources.length)" class="empty-resource">
                  <InboxOutlined />
                  <span>暂无数字资源</span>
                </div>
              </div>
            </div>

            <!-- 教学材料 -->
            <div class="material-card">
              <div class="card-header">
                <div class="header-icon material-icon"><ToolOutlined /></div>
                <span>教学材料</span>
              </div>
              <div class="card-body">
                <!-- 教学PPT -->
                <div class="resource-section" v-if="course.pptPath">
                  <div class="section-title"><FilePptOutlined /> 教学PPT</div>
                  <div class="resource-item" @click="previewResource({ path: course.pptPath, name: course.pptName || '教学PPT' })">
                    <FilePptOutlined class="item-icon ppt" />
                    <span class="item-name">{{ course.pptName || '教学PPT' }}</span>
                    <EyeOutlined class="item-action" />
                  </div>
                </div>
                <!-- 教学挂图 -->
                <div class="resource-section" v-if="posterPaths && posterPaths.length > 0">
                  <div class="section-title"><PictureOutlined /> 教学挂图</div>
                  <div class="poster-grid">
                    <img v-for="(item, index) in posterPaths" :key="index"
                      :src="getFileUrl(item.path)"
                      :alt="item.name || `挂图${index + 1}`"
                      class="poster-thumb"
                      @click="previewImage(getFileUrl(item.path))"
                    />
                  </div>
                </div>
                <!-- 学生材料 -->
                <div class="resource-section" v-if="course.studentMaterials">
                  <div class="section-title"><FormOutlined /> 学生材料</div>
                  <div class="student-materials">{{ course.studentMaterials }}</div>
                </div>
                <!-- 空状态 -->
                <div v-if="!course.pptPath && (!posterPaths || !posterPaths.length) && !course.studentMaterials" class="empty-resource">
                  <InboxOutlined />
                  <span>暂无教学材料</span>
                </div>
              </div>
            </div>

            <!-- 使用统计 -->
            <div class="stats-card">
              <div class="card-header">
                <div class="header-icon stats-icon"><BarChartOutlined /></div>
                <span>使用统计</span>
              </div>
              <div class="card-body">
                <div class="stats-grid">
                  <div class="stat-item">
                    <div class="stat-value">{{ course.teacherCount || 0 }}</div>
                    <div class="stat-label">使用教师</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-value">{{ course.usageCount || 0 }}</div>
                    <div class="stat-label">使用次数</div>
                  </div>
                </div>
              </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="imagePreviewVisible" :footer="null" centered>
      <img :src="previewImageUrl" style="width: 100%;" />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import {
  LeftOutlined,
  BookOutlined,
  ClockCircleOutlined,
  InfoCircleOutlined,
  OrderedListOutlined,
  AimOutlined,
  SoundOutlined,
  FolderOutlined,
  FileTextOutlined,
  InboxOutlined,
  AppstoreOutlined,
  ToolOutlined,
  FilePdfOutlined,
  PlayCircleOutlined,
  FileOutlined,
  FilePptOutlined,
  PictureOutlined,
  FormOutlined,
  EyeOutlined,
  BarChartOutlined,
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import * as schoolApi from '@/api/school';
import FilePreviewModal from '@/components/FilePreviewModal.vue';
import {
  translateGradeTags,
  translateDomainTags,
  getGradeTagStyle,
  getDomainTagStyle,
  translateActivityType,
  getActivityTypeStyle,
} from '@/utils/tagMaps';

const router = useRouter();
const route = useRoute();
const loading = ref(false);

// 获取完整的文件 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 previewModalVisible = ref(false);
const previewFileUrl = ref('');
const previewFileName = ref('');

// 图片预览
const imagePreviewVisible = ref(false);
const previewImageUrl = ref('');

const course = ref<any>({
  id: 0,
  name: '',
  pictureBookName: '',
  description: '',
  gradeTags: [],
  domainTags: [],
  duration: 25,
  version: '1.0',
  usageCount: 0,
  teacherCount: 0,
  avgRating: 0,
  pptPath: '',
  pptName: '',
  studentMaterials: '',
  authorized: true,
});

const scripts = ref<any[]>([]);
const activities = ref<any[]>([]);

// 数字资源
const ebookPaths = ref<any[]>([]);
const audioPaths = ref<any[]>([]);
const videoPaths = ref<any[]>([]);
const otherResources = ref<any[]>([]);

// 教学材料
const posterPaths = ref<any[]>([]);

// 根据脚本的 resourceIds 获取资源详情列表
const getScriptResources = (script: any) => {
  let resourceIds: string[] = [];
  if (script.resourceIds) {
    if (typeof script.resourceIds === 'string') {
      try {
        resourceIds = JSON.parse(script.resourceIds);
      } catch {
        resourceIds = [];
      }
    } else if (Array.isArray(script.resourceIds)) {
      resourceIds = script.resourceIds;
    }
  }

  if (!resourceIds.length) return [];

  const resources: { id: string; name: string; typeName: string; icon: string }[] = [];
  const typeInfo: Record<string, { name: string; icon: string }> = {
    ebook: { name: '电子绘本', icon: '📄' },
    audio: { name: '音频', icon: '🎵' },
    video: { name: '视频', icon: '📹' },
    ppt: { name: 'PPT', icon: '📊' },
    poster: { name: '挂图', icon: '🖼️' },
  };

  resourceIds.forEach((resId: string) => {
    const parts = resId.split('-');
    if (parts.length !== 2) return;

    const type = parts[0];
    const index = parseInt(parts[1]);
    const info = typeInfo[type] || { name: '资源', icon: '📁' };

    let name = '';
    switch (type) {
      case 'ebook':
        name = ebookPaths.value[index]?.name || `电子绘本${index + 1}`;
        break;
      case 'audio':
        name = audioPaths.value[index]?.name || `音频${index + 1}`;
        break;
      case 'video':
        name = videoPaths.value[index]?.name || `视频${index + 1}`;
        break;
      case 'ppt':
        name = course.value.pptName || '教学PPT';
        break;
      case 'poster':
        name = posterPaths.value[index]?.name || `挂图${index + 1}`;
        break;
    }

    if (name) {
      resources.push({ id: resId, name, typeName: info.name, icon: info.icon });
    }
  });

  return resources;
};

// 获取逐页脚本的资源列表
const getPageResources = (script: any, page: any) => {
  if (!page.resourceIds || page.resourceIds.length === 0) return [];
  const scriptResources = getScriptResources(script);

  let pageResourceIds: string[] = [];
  if (typeof page.resourceIds === 'string') {
    try {
      pageResourceIds = JSON.parse(page.resourceIds);
    } catch {
      pageResourceIds = [];
    }
  } else if (Array.isArray(page.resourceIds)) {
    pageResourceIds = page.resourceIds;
  }

  return scriptResources.filter((r: any) => pageResourceIds.includes(r.id));
};

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

// 获取有内容的页面索引
const getExpandedPages = (script: any) => {
  if (!script.pages) return [];
  return script.pages
    .map((page: any, index: number) => hasPageContent(page) ? String(index) : null)
    .filter((idx: string | null) => idx !== null);
};

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

  loading.value = true;
  try {
    const data = await schoolApi.getSchoolCourse(parseInt(courseId));

    course.value = {
      ...data,
      gradeTags: translateGradeTags(data.gradeTags || []),
      domainTags: translateDomainTags(data.domainTags || []),
    };

    scripts.value = (data.scripts || []).map((script: any) => ({
      ...script,
      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) => {
      let content = '';
      if (activity.onlineMaterials) {
        if (typeof activity.onlineMaterials === 'object') {
          content = activity.onlineMaterials.content || '';
        } else if (typeof activity.onlineMaterials === 'string') {
          try {
            const parsed = JSON.parse(activity.onlineMaterials);
            content = parsed.content || '';
          } catch {
            content = activity.onlineMaterials;
          }
        }
      }
      return {
        ...activity,
        content: content,
        materials: activity.offlineMaterials || '',
      };
    });

    ebookPaths.value = Array.isArray(data.ebookPaths) ? data.ebookPaths : [];
    audioPaths.value = Array.isArray(data.audioPaths) ? data.audioPaths : [];
    videoPaths.value = Array.isArray(data.videoPaths) ? data.videoPaths : [];
    otherResources.value = Array.isArray(data.otherResources) ? data.otherResources : [];

    if (data.posterPaths) {
      if (typeof data.posterPaths === 'string') {
        try { posterPaths.value = JSON.parse(data.posterPaths); } catch { posterPaths.value = []; }
      } else if (Array.isArray(data.posterPaths)) {
        posterPaths.value = data.posterPaths;
      }
    }
  } catch (error: any) {
    message.error(error.response?.data?.message || '获取课程详情失败');
    router.back();
  } finally {
    loading.value = false;
  }
};

const goBackToList = () => {
  router.push('/school/courses');
};

const previewResource = (resource: any) => {
  if (!resource.path) {
    message.warning('文件路径不存在');
    return;
  }
  previewFileUrl.value = getFileUrl(resource.path);
  previewFileName.value = resource.name || '未知文件';
  previewModalVisible.value = true;
};

const previewFile = (res: any) => {
  const resId = res.id;
  const parts = resId.split('-');
  if (parts.length !== 2) return;

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

  let path = '';
  switch (type) {
    case 'ebook':
      path = ebookPaths.value[index]?.path || '';
      break;
    case 'audio':
      path = audioPaths.value[index]?.path || '';
      break;
    case 'video':
      path = videoPaths.value[index]?.path || '';
      break;
    case 'ppt':
      path = course.value.pptPath || '';
      break;
    case 'poster':
      path = posterPaths.value[index]?.path || '';
      break;
  }

  if (path) {
    previewFileUrl.value = getFileUrl(path);
    previewFileName.value = res.name;
    previewModalVisible.value = true;
  }
};

const previewImage = (url: string) => {
  previewImageUrl.value = url;
  imagePreviewVisible.value = true;
};

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

<style scoped>
.course-detail-view {
  min-height: 100vh;
  background: linear-gradient(135deg, #F0FFF4 0%, #FFFFFF 50%, #F0FDF4 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: #43e97b;
}

.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;
}

.auth-tag {
  font-size: 14px;
  padding: 4px 16px;
  border-radius: 16px;
}

/* 内容区域 */
.detail-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;
}

.card-body {
  padding: 16px;
}

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

.info-icon {
  background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
  color: #43A047;
}

.cover-section {
  text-align: center;
  margin-bottom: 16px;
}

.cover-image {
  max-width: 100%;
  max-height: 280px;
  border-radius: 8px;
  object-fit: cover;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
}

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

.info-item.full-width {
  grid-column: span 2;
}

.info-label {
  font-size: 12px;
  color: #999;
}

.info-value {
  font-size: 14px;
  color: #333;
}

.info-value.desc {
  line-height: 1.6;
  white-space: pre-wrap;
}

.info-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

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

.flow-icon {
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
  color: #1976D2;
}

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

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

.flow-item {
  display: flex;
  gap: 16px;
  padding: 12px 0;
}

.flow-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flow-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

.flow-line {
  width: 2px;
  flex: 1;
  background: #E8E8E8;
  margin-top: 8px;
  min-height: 40px;
}

.flow-content {
  flex: 1;
  padding-bottom: 12px;
}

.flow-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.flow-name {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

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

.flow-objective {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
  padding: 8px 12px;
  background: #E8F5E9;
  border-radius: 6px;
  border-left: 3px solid #43e97b;
}

.flow-script {
  font-size: 13px;
  margin-bottom: 8px;
  padding: 10px 14px;
  background: #FFF8F0;
  border-radius: 6px;
  border-left: 3px solid #FF8C42;
  color: #FF8C42;
}

.script-text {
  margin-top: 8px;
  color: #333;
  white-space: pre-wrap;
  line-height: 1.6;
}

.flow-resources,
.flow-pages {
  font-size: 13px;
  color: #666;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #E8E8E8;
}

.resource-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.resource-tag {
  cursor: pointer;
  transition: all 0.2s;
}

.resource-tag:hover {
  border-color: #43e97b;
  color: #43e97b;
}

.pages-list {
  margin-top: 8px;
}

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

.content-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #52c41a;
}

.page-detail {
  padding: 8px 0;
}

.page-row {
  margin-bottom: 8px;
  font-size: 13px;
}

.page-label {
  color: #999;
}

.page-value {
  color: #333;
}

.page-value.notes {
  color: #666;
  font-style: italic;
}

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

.empty-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  color: #999;
  gap: 8px;
}

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

.activity-icon {
  background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
  color: #F57C00;
}

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

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  padding: 12px;
  background: #FAFAFA;
  border-radius: 8px;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

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

.activity-info {
  font-size: 12px;
  color: #999;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.activity-content {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 6px;
}

.activity-materials {
  font-size: 12px;
  color: #999;
}

/* 右侧资源卡片 */
.resource-card,
.material-card,
.stats-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  margin-bottom: 16px;
}

.resource-icon {
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
  color: #1976D2;
}

.material-icon {
  background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%);
  color: #8E24AA;
}

.stats-icon {
  background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
  color: #43A047;
}

.resource-section {
  margin-bottom: 16px;
}

.resource-section:last-child {
  margin-bottom: 0;
}

.section-title {
  font-size: 13px;
  font-weight: 500;
  color: #666;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.resource-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: #FAFAFA;
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.resource-item:hover {
  background: #F0FFF4;
}

.resource-item:hover .item-action {
  opacity: 1;
}

.item-icon {
  font-size: 18px;
  margin-right: 10px;
}

.item-icon.ebook { color: #1890ff; }
.item-icon.audio { color: #52c41a; }
.item-icon.video { color: #722ed1; }
.item-icon.other { color: #fa8c16; }
.item-icon.ppt { color: #1890ff; }

.item-name {
  flex: 1;
  font-size: 13px;
  color: #333;
}

.item-action {
  color: #43e97b;
  opacity: 0;
  transition: opacity 0.2s;
}

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

.poster-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.poster-thumb {
  width: 100%;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s;
}

.poster-thumb:hover {
  transform: scale(1.05);
}

.student-materials {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
  white-space: pre-wrap;
  padding: 10px 12px;
  background: #FAFAFA;
  border-radius: 8px;
}

/* 使用统计 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.stat-item {
  text-align: center;
  padding: 16px;
  background: #FAFAFA;
  border-radius: 8px;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  color: #43e97b;
}

.stat-label {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}
</style>
