<template>
  <div class="chapter-video-management">
    <div class="upload-header">
      <h3>配置章节与视频</h3>
      <p>添加章节并为每个章节配置视频，支持为视频设置标题与封面</p>
    </div>

    <div class="chapter-actions" v-if="chapters.length > 0">
       <el-button type="primary" :icon="Plus" @click="showAddChapterDialog" class="ins-style">添加章节</el-button>
      <el-button @click="$emit('expandAllChapters')" style="margin-left: 8px">展开全部</el-button>
      <el-button @click="$emit('collapseAllChapters')">收起全部</el-button>
    </div>

    <!-- 空状态显示 -->
    <div v-if="chapters.length === 0" class="empty-chapters">
      <div class="empty-icon">
        <svg width="147" height="125" viewBox="0 0 147 125" fill="none" xmlns="http://www.w3.org/2000/svg" class="custom-video-icon">
          <g opacity="0.67">
            <path d="M62.46 125C96.95 125 124.91 97.02 124.91 62.5C124.91 27.98 96.95 0 62.46 0C27.96 0 0 27.98 0 62.5C0 97.02 27.96 125 62.46 125Z" fill="#EAEEF9"/>
            <mask id="mask0_61_13456" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="147" height="125">
              <path d="M107.52 106.59C96.1998 117.96 80.5297 125 63.2197 125C28.6997 125 0.719727 97.02 0.719727 62.5C0.719727 27.98 28.6997 0 63.2197 0C82.8697 0 100.41 9.07001 111.87 23.26H146.07V106.59H107.52Z" fill="#EAEEF9"/>
            </mask>
            <g mask="url(#mask0_61_13456)">
              <path d="M34.2897 20.8301H7.74976V102.2H34.2897V20.8301Z" fill="white"/>
              <path d="M25.1798 42.2197H16.8098V80.8198H25.1798V42.2197Z" fill="#EAEEF9"/>
              <path d="M7.74976 32.2402H34.2897" stroke="#D5DDEA" stroke-width="3" stroke-miterlimit="10"/>
              <path d="M7.74976 90.7598H34.2897" stroke="#D5DDEA" stroke-width="3" stroke-miterlimit="10"/>
              <path d="M51.5798 0H36.3899V102.2H51.5798V0Z" fill="white"/>
              <path d="M46.3699 26.8301H41.5598V75.3301H46.3699V26.8301Z" fill="#EAEEF9"/>
              <path d="M36.3899 14.3301H51.5398" stroke="#D5DDEA" stroke-width="3" stroke-miterlimit="10"/>
              <path d="M36.3899 87.8301H51.5398" stroke="#D5DDEA" stroke-width="3" stroke-miterlimit="10"/>
              <path d="M71.9799 3.62988L53.3398 6.44995L63.1299 71.05L81.7699 68.23L71.9799 3.62988Z" fill="white"/>
              <path d="M68.1698 21.5703L62.2898 22.4602L66.9298 53.1104L72.8098 52.2202L68.1698 21.5703Z" fill="#EAEEF9"/>
              <path d="M54.6897 15.5205L73.3597 12.7305" stroke="#D5DDEA" stroke-width="3" stroke-miterlimit="10"/>
              <path d="M61.7397 62.0002L80.3597 59.1602" stroke="#D5DDEA" stroke-width="3" stroke-miterlimit="10"/>
              <path d="M-18.3972 102.71H143.39" stroke="#C2C8D6" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M126.7 35.8207C126.01 33.2707 124.4 31.0705 122.1 29.6805C119.57 28.1705 116.93 27.9406 114.06 27.7106C109 27.1306 103.83 27.0106 98.6498 27.2406C94.0498 27.3606 88.7698 27.1307 84.5098 29.1007C78.4198 31.7607 77.6198 37.6707 77.3898 44.0507C77.1598 48.8007 77.1597 54.4807 78.4197 59.1107C79.4597 62.8207 82.3298 65.7206 86.1198 66.5306C90.9498 67.6906 101.3 67.9207 106.35 67.8007C106.81 67.8007 107.27 67.8007 107.73 67.8007C111.76 67.6907 116.01 67.6907 119.69 66.3007C122.79 65.2507 124.63 63.4007 125.78 61.0807C127.16 58.3007 127.51 54.8206 127.62 51.0006C128.08 46.0206 127.97 40.3407 126.7 35.8207Z" fill="url(#paint0_linear_61_13456)"/>
              <path d="M98.1697 40.8402C98.1697 39.3102 98.9397 38.8002 100.2 39.6202C103.57 41.7602 107.05 44 110.43 46.14C111.68 46.96 111.68 47.8702 110.43 48.7902C107.05 50.9302 103.67 53.1702 100.29 55.3102C98.9397 56.1302 98.2697 55.7202 98.1697 54.3002C98.1697 53.6802 98.1697 42.2702 98.1697 40.8402Z" fill="white"/>
              <path d="M129.31 98.6594H70.9297C63.0997 98.6594 56.7397 92.2995 56.7397 84.4695C56.7397 80.5295 58.3397 76.9995 60.9097 74.4395C63.4697 71.8795 67.0397 70.2695 70.9297 70.2695H129.31C128.08 71.0095 126.98 71.8796 125.97 72.8396C123 75.8096 121.17 79.9295 121.17 84.4695C121.17 90.5095 124.42 95.7794 129.31 98.6594Z" fill="#EAEEF9"/>
              <path d="M130.64 101.26H70.9297C61.7297 101.26 54.2197 93.75 54.2197 84.54C54.2197 75.34 61.7297 67.8301 70.9297 67.8301H130.64C132.01 67.8301 133.16 68.9701 133.16 70.3501C133.16 71.7201 132.01 72.8701 130.64 72.8701H70.9297C64.4697 72.8701 59.2598 78.09 59.2598 84.54C59.2598 91 64.4697 96.22 70.9297 96.22H130.64C132.01 96.22 133.16 97.36 133.16 98.74C133.16 100.11 132.01 101.26 130.64 101.26Z" fill="#C2C8D6"/>
              <path d="M83.3698 109.52L77.7897 104.02L72.2097 109.52V89.8301H83.3698V109.52Z" fill="#989FB0"/>
            </g>
          </g>
          <defs>
            <linearGradient id="paint0_linear_61_13456" x1="125.86" y1="27.1306" x2="78.8098" y2="27.3406" gradientUnits="userSpaceOnUse">
              <stop stop-color="#B0BACC"/>
              <stop offset="1" stop-color="#969EAE"/>
            </linearGradient>
          </defs>
        </svg>
      </div>
      <p class="empty-text">暂无章节，请添加章节</p>
       <el-button type="primary" :icon="Plus" @click="showAddChapterDialog" class="add-chapter-btn ins-style">添加章节</el-button>
    </div>

    <div class="chapter-list" v-if="chapters.length > 0">
      <div class="course-catalog-header">
        <span class="catalog-title">I 课程目录</span>
      </div>
      
      <div class="chapter-items">
        <div v-for="(chapter, cIndex) in chapters" :key="chapter.id" class="chapter-item">
          <div class="chapter-item-header" @click="$emit('toggleChapter', chapter.id)">
            <div class="chapter-info">
              <el-icon class="expand-icon" :class="{ expanded: isChapterExpanded(chapter.id) }">
                <ArrowRight v-if="!isChapterExpanded(chapter.id)" />
                <ArrowDown v-else />
              </el-icon>
              <span class="chapter-name" @click.stop="editChapterTitle(cIndex)">{{ chapter.title || `第 ${cIndex + 1} 章` }} ({{ chapter.videos?.length || 0 }}个)</span>
            </div>
            <div class="chapter-item-actions" @click.stop>
              <!-- <el-button 
                size="small" 
                :icon="Edit" 
                @click="editChapter(cIndex)"
                class="edit-btn"
                title="编辑章节"
              /> -->
           <el-button 
             size="small" 
             @click="showAddVideoDialog(cIndex)"
             class="add-content-btn"
           >
             添加小节
           </el-button>
              <el-dropdown @command="handleChapterCommand" trigger="click">
                <el-button size="small" class="more-btn">
                  <el-icon><MoreFilled /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item :command="`delete-${cIndex}`">删除章节</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
          
          <!-- 章节内容区域 -->
          <div v-if="isChapterExpanded(chapter.id)" class="chapter-content">
            <div v-if="chapter.videos && chapter.videos.length" class="video-list-simple">
              <div v-for="(video, vIndex) in chapter.videos" :key="video.id" class="video-item-simple">
                <div class="video-number">{{ String(vIndex + 1).padStart(2, '0') }}.</div>
                <div class="video-details">
                  <div class="video-title-row">
                    <span class="video-title">{{ video.title || `这里是第${vIndex + 1}小节的名称.MP4` }}</span>
                    <div class="video-actions">
                      <el-button size="small" type="warning" plain class="action-btn" @click="editVideo(cIndex, vIndex)">编辑</el-button>
                      <el-button size="small" type="danger" plain class="action-btn" @click="$emit('removeVideo', cIndex, vIndex)">删除</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="empty-content">
              暂无小节
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加/编辑章节弹窗 -->
    <div v-if="showAddDialog" class="dialog-overlay" @click="hideChapterDialog">
      <div class="dialog-content" @click.stop>
        <div class="dialog-header">
          <h3>{{ isEditMode ? '编辑章节' : '添加章节' }}</h3>
        </div>
        <div class="dialog-body">
          <el-input 
            v-model="newChapterTitle" 
            placeholder="请输入章节标题"
            maxlength="50"
            show-word-limit
            @keyup.enter="confirmChapterAction"
            ref="chapterTitleInput"
          />
        </div>
        <div class="dialog-footer">
          <el-button @click="hideChapterDialog" class="cancel-btn">取消</el-button>
          <el-button @click="confirmChapterAction" class="confirm-btn ins-style">确定</el-button>
        </div>
      </div>
    </div>

    <!-- 新建视频弹窗 -->
    <div v-if="showVideoDialog" class="dialog-overlay" @click="hideVideoDialog">
      <div class="video-dialog-content" @click.stop>
        <div class="video-dialog-header">
          <h3>{{ isVideoEditMode ? '编辑视频' : '新建视频' }}</h3>
          <el-button @click="hideVideoDialog" class="close-btn" :icon="Close" text />
        </div>
        <div class="video-dialog-body">
          <!-- 视频标题 -->
          <div class="form-item">
            <label class="form-label">*视频标题</label>
            <el-input 
              v-model="newVideoTitle" 
              placeholder="请输入视频标题"
              maxlength="50"
              show-word-limit
            />
          </div>

          <!-- 封面图片 -->
          <div class="form-item">
            <label class="form-label">*封面图片</label>
            <div class="upload-area cover-upload" @click="triggerCoverSelect">
              <div v-if="!videoCoverPreview" class="upload-placeholder">
                <el-icon class="upload-icon"><Picture /></el-icon>
                <p class="upload-text">点击上传封面图片</p>
                <p class="upload-hint">支持 JPG、PNG 格式，建议尺寸 16:9，大小不超过 2M</p>
              </div>
              <div v-else class="video-cover-preview">
                <img :src="videoCoverPreview" alt="封面预览" />
                <div class="video-cover-overlay">
                  <el-button size="small" @click.stop="triggerCoverSelect">选择文件</el-button>
                </div>
              </div>
            </div>
            <input 
              ref="videoCoverInput" 
              type="file" 
              accept="image/*" 
              @change="handleCoverSelect" 
              style="display: none"
            />
          </div>

          <!-- 上传视频 -->
          <div class="form-item">
            <label class="form-label">*上传视频</label>
            <div class="upload-area video-upload" @click="handleVideoUploadClick">
              <div v-if="!videoFileInfo" class="upload-placeholder">
                <el-icon class="upload-icon"><Upload /></el-icon>
                <p class="upload-text">点击选择文件或将文件拖拽到此</p>
                <p class="upload-hint">仅支持 MP4、AVI、MOV 等格式</p>
              </div>
              <div v-else-if="!videoPreviewUrl" class="video-info">
                <el-icon class="file-icon"><VideoPlay /></el-icon>
                <div class="file-details">
                  <p class="file-name">{{ videoFileInfo.name }}</p>
                  <p class="file-size">{{ formatFileSize(videoFileInfo.size) }}</p>
                </div>
                <el-button size="small" @click.stop="triggerVideoSelect">选择文件</el-button>
              </div>
              <div v-else class="video-preview-container" @click.stop>
                <video 
                  :src="videoPreviewUrl" 
                  controls 
                  class="video-preview"
                  @loadedmetadata="onVideoLoaded"
                  @click.stop
                >
                  您的浏览器不支持视频播放
                </video>
                <div class="video-reselect-btn" @click.stop>
                  <el-button size="small" @click.stop="triggerVideoSelect" class="reselect-button">重新选择</el-button>
                </div>
                <div class="video-info-overlay" @click.stop>
                  <div class="video-preview-info">
                    <p class="file-name">{{ videoFileInfo.name }}</p>
                    <p class="file-size">{{ formatFileSize(videoFileInfo.size) }}</p>
                  </div>
                </div>
              </div>
            </div>
            <input 
              ref="videoFileInput" 
              type="file" 
              accept="video/*" 
              @change="handleVideoSelect" 
              style="display: none"
            />
          </div>
        </div>
        <div class="video-dialog-footer">
          <el-button @click="hideVideoDialog" class="cancel-btn">取消</el-button>
          <el-button @click="confirmVideoAction" class="confirm-btn ins-style">{{ isVideoEditMode ? '更新' : '保存' }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { Plus, Picture, Upload, ArrowDown, ArrowRight, MoreFilled, Close, VideoPlay } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 章节弹窗状态
const showAddDialog = ref(false)
const newChapterTitle = ref('')
const chapterTitleInput = ref(null)
const isEditMode = ref(false)
const editingChapterIndex = ref(-1)

// 视频弹窗状态
const showVideoDialog = ref(false)
const newVideoTitle = ref('')
const videoCoverPreview = ref('')
const videoFileInfo = ref(null)
const videoPreviewUrl = ref('')
const videoCoverInput = ref(null)
const videoFileInput = ref(null)
const currentChapterIndex = ref(-1)
const isVideoEditMode = ref(false)
const editingVideoIndex = ref(-1)

const props = defineProps({
  chapters: {
    type: Array,
    required: true
  },
  activeChapterPanels: {
    type: Array,
    required: true
  },
  isChapterExpanded: {
    type: Function,
    required: true
  }
})

// 弹窗方法
const showAddChapterDialog = () => {
  isEditMode.value = false
  editingChapterIndex.value = -1
  showAddDialog.value = true
  newChapterTitle.value = ''
  // 等待DOM更新后聚焦输入框
  nextTick(() => {
    chapterTitleInput.value?.focus()
  })
}

const editChapterTitle = (cIndex) => {
  isEditMode.value = true
  editingChapterIndex.value = cIndex
  showAddDialog.value = true
  newChapterTitle.value = props.chapters[cIndex]?.title || ''
  // 等待DOM更新后聚焦输入框
  nextTick(() => {
    chapterTitleInput.value?.focus()
    chapterTitleInput.value?.select()
  })
}

const hideChapterDialog = () => {
  showAddDialog.value = false
  newChapterTitle.value = ''
  isEditMode.value = false
  editingChapterIndex.value = -1
}

const confirmChapterAction = () => {
  const title = newChapterTitle.value.trim()
  if (!title) {
    ElMessage.warning('请输入章节标题')
    return
  }
  
  if (isEditMode.value) {
    // 编辑模式：发送编辑章节事件
    emit('editChapterTitle', editingChapterIndex.value, title)
  } else {
    // 添加模式：发送添加章节事件
    emit('addChapter', title)
  }
  
  hideChapterDialog()
}

// 视频弹窗方法
const showAddVideoDialog = (cIndex) => {
  isVideoEditMode.value = false
  editingVideoIndex.value = -1
  currentChapterIndex.value = cIndex
  showVideoDialog.value = true
  resetVideoForm()
}

const hideVideoDialog = () => {
  showVideoDialog.value = false
  resetVideoForm()
  currentChapterIndex.value = -1
  isVideoEditMode.value = false
  editingVideoIndex.value = -1
}

// 编辑视频
const editVideo = (cIndex, vIndex) => {
  const video = props.chapters[cIndex]?.videos?.[vIndex]
  if (!video) return
  
  isVideoEditMode.value = true
  currentChapterIndex.value = cIndex
  editingVideoIndex.value = vIndex
  
  // 填充现有数据
  newVideoTitle.value = video.title || ''
  videoCoverPreview.value = video.coverPreviewUrl || ''
  
  // 如果有视频文件，创建文件信息对象
  if (video.file) {
    videoFileInfo.value = {
      name: video.file.name,
      size: video.file.size,
      file: video.file
    }
    // 创建预览URL
    if (video.previewUrl) {
      videoPreviewUrl.value = video.previewUrl
    } else {
      videoPreviewUrl.value = URL.createObjectURL(video.file)
    }
  }
  
  showVideoDialog.value = true
}

const resetVideoForm = () => {
  newVideoTitle.value = ''
  videoCoverPreview.value = ''
  videoFileInfo.value = null
  // 清理视频预览URL
  if (videoPreviewUrl.value) {
    try {
      URL.revokeObjectURL(videoPreviewUrl.value)
    } catch (e) {}
  }
  videoPreviewUrl.value = ''
  if (videoCoverInput.value) videoCoverInput.value.value = ''
  if (videoFileInput.value) videoFileInput.value.value = ''
}

// 文件选择方法
const triggerCoverSelect = () => {
  videoCoverInput.value?.click()
}

const triggerVideoSelect = () => {
  videoFileInput.value?.click()
}

const handleVideoUploadClick = () => {
  // 只有在没有视频预览时才触发文件选择
  if (!videoPreviewUrl.value) {
    triggerVideoSelect()
  }
}

const handleCoverSelect = (event) => {
  const file = event.target.files[0]
  if (!file) return
  
  // 验证文件类型
  if (!file.type.startsWith('image/')) {
    ElMessage.error('请选择图片文件')
    return
  }
  
  // 验证文件大小 (2MB)
  if (file.size > 2 * 1024 * 1024) {
    ElMessage.error('图片大小不能超过2MB')
    return
  }
  
  // 创建预览
  const reader = new FileReader()
  reader.onload = (e) => {
    videoCoverPreview.value = e.target.result
  }
  reader.readAsDataURL(file)
}

const handleVideoSelect = (event) => {
  const file = event.target.files[0]
  if (!file) return
  
  // 验证文件类型
  if (!file.type.startsWith('video/')) {
    ElMessage.error('请选择视频文件')
    return
  }
  
  // 清理之前的预览URL
  if (videoPreviewUrl.value) {
    try {
      URL.revokeObjectURL(videoPreviewUrl.value)
    } catch (e) {}
  }
  
  videoFileInfo.value = {
    name: file.name,
    size: file.size,
    file: file
  }
  
  // 创建视频预览URL
  videoPreviewUrl.value = URL.createObjectURL(file)
}

// 视频加载完成回调
const onVideoLoaded = (event) => {
  const video = event.target
  console.log(`视频时长: ${Math.round(video.duration)}秒`)
}

// 格式化文件大小
const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const confirmVideoAction = () => {
  // 验证必填项
  if (!newVideoTitle.value.trim()) {
    ElMessage.warning('请输入视频标题')
    return
  }
  
  if (!videoCoverPreview.value) {
    ElMessage.warning('请上传封面图片')
    return
  }
  
  if (!videoFileInfo.value) {
    ElMessage.warning('请上传视频文件')
    return
  }
  
  // 构造视频数据
  const videoData = {
    title: newVideoTitle.value.trim(),
    coverPreview: videoCoverPreview.value,
    videoFile: videoFileInfo.value,
    previewUrl: videoPreviewUrl.value
  }
  
  if (isVideoEditMode.value) {
    // 编辑模式：发送编辑视频事件
    emit('editVideo', currentChapterIndex.value, editingVideoIndex.value, videoData)
  } else {
    // 添加模式：发送添加视频事件
    emit('addVideo', currentChapterIndex.value, videoData)
  }
  
  hideVideoDialog()
}

// 编辑章节
const editChapter = (cIndex) => {
  emit('editChapter', cIndex)
}

// 处理章节下拉菜单命令
const handleChapterCommand = (command) => {
  if (command.startsWith('delete-')) {
    const cIndex = parseInt(command.split('-')[1])
    emit('removeChapter', cIndex)
  }
}

const emit = defineEmits([
  'addChapter',
  'removeChapter', 
  'editChapter',
  'editChapterTitle',
  'addVideo',
  'editVideo',
  'removeVideo',
  'expandAllChapters',
  'collapseAllChapters',
  'toggleChapter',
  'updateActiveChapterPanels',
  'triggerVideoCoverSelect',
  'clearVideoCover',
  'triggerVideoFileSelect',
  'handleVideoFileDrop',
  'clearVideoFile',
  'setVideoCoverInputRef',
  'setVideoFileInputRef',
  'handleVideoCoverSelect',
  'handleVideoFileSelect'
])
</script>

<style scoped>
.upload-header { 
  text-align: center; 
  margin-bottom: 30px; 
}

.upload-header h3 { 
  color: #333; 
  margin-bottom: 10px; 
  font-size: 24px; 
  font-weight: 600; 
}

.upload-header p { 
  color: #666; 
  font-size: 14px; 
}

/* 章节卡片 */
.chapter-actions { 
  margin-bottom: 16px; 
  text-align: left; 
  display: flex; 
  flex-wrap: wrap; 
  gap: 8px; 
}

/* 课程目录样式 */
.course-catalog-header {
  margin-bottom: 16px;
  padding: 16px 0;
  text-align: left !important;
  width: 100%;
}

.catalog-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  text-align: left !important;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* 章节项样式 */
.chapter-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chapter-item {
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
}

.chapter-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  background: #fafafa;
}

.chapter-item-header:hover {
  background: #f0f2f5;
}

.chapter-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.expand-icon {
  transition: transform 0.3s ease;
  color: #909399;
}

.expand-icon.expanded {
  transform: rotate(90deg);
}

.chapter-name {
  font-size: 15px;
  font-weight: 500;
  color: #303133;
  cursor: pointer;
  transition: color 0.2s;
}

.chapter-name:hover {
  color: #409eff;
}

.chapter-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.edit-btn {
  background: transparent !important;
  border: none !important;
  color: #909399 !important;
  padding: 4px !important;
}

.edit-btn:hover {
  color: #409eff !important;
  background: #ecf5ff !important;
}

.add-content-btn {
  background: #fff !important;
  border: 1px solid #dcdfe6 !important;
  color: #606266 !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  padding: 6px 12px !important;
}

.add-content-btn:hover {
  color: #409eff !important;
  border-color: #c6e2ff !important;
  background: #ecf5ff !important;
}

.more-btn {
  background: transparent !important;
  border: none !important;
  color: #909399 !important;
  padding: 4px !important;
}

.more-btn:hover {
  color: #409eff !important;
  background: #ecf5ff !important;
}

.chapter-content {
  border-top: 1px solid #e4e7ed;
  background: #fff;
}

.empty-content {
  padding: 40px 20px;
  text-align: center;
  color: #909399;
  font-size: 14px;
}

/* 视频项 */
.video-list { 
  display: flex; 
  flex-direction: column; 
  gap: 16px; 
}

.video-item { 
  padding: 12px; 
  background: #fff; 
  border-radius: 8px; 
  border: 1px solid #ebeef5; 
}

.video-item-header { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 12px; 
}

.video-index { 
  color: #666; 
  font-size: 13px; 
}

.form-group { 
  margin-bottom: 20px; 
}

.form-group label { 
  display: block; 
  margin-bottom: 8px; 
  font-weight: 500; 
  color: #333; 
  font-size: 14px; 
  text-align: left; 
}

/* 输入框独占一行 */
.full-width { 
  grid-column: 1 / -1; 
}

/* 两个上传组件左右对齐 */
.dual-upload-row { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 20px; 
  align-items: start; 
}

.upload-item label { 
  display: block; 
  margin-bottom: 8px; 
  font-weight: 500; 
  color: #333; 
  font-size: 14px; 
  text-align: left; 
}

.video-file-upload { 
  min-height: 200px; 
}

.video-preview-player { 
  width: 100%; 
  max-height: 200px; 
  background: #000; 
  border-radius: 8px; 
}

/* 封面上传复用样式 */
.cover-upload-area { 
  border: 2px dashed #ddd; 
  border-radius: 8px; 
  overflow: hidden; 
  transition: all 0.3s; 
}

.cover-upload-area:hover { 
  border-color: #000; 
}

.cover-upload-placeholder { 
  padding: 40px 20px; 
  text-align: center; 
  cursor: pointer; 
  background: #fafafa; 
}

.cover-upload-icon { 
  font-size: 32px; 
  color: #000; 
  margin-bottom: 12px; 
}

.cover-upload-placeholder p { 
  margin: 8px 0; 
  color: #666; 
  font-size: 14px; 
}

.cover-hint { 
  font-size: 12px; 
  color: #999; 
}

.cover-preview { 
  position: relative; 
  text-align: center; 
}

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

.cover-actions { 
  position: absolute; 
  top: 10px; 
  right: 10px; 
  display: flex; 
  gap: 8px; 
}

.empty-videos {
  padding: 20px;
  text-align: center;
}

/* 空状态样式 */
.empty-chapters {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
}

.empty-icon {
  margin-bottom: 20px;
}

.video-icon {
  font-size: 48px;
  color: #d0d7de;
  background: #f6f8fa;
  border-radius: 50%;
  padding: 20px;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-video-icon {
  width: 120px;
  height: auto;
  opacity: 0.8;
}

.empty-text {
  font-size: 16px;
  color: #656d76;
  margin: 0 0 24px 0;
  font-weight: 400;
}

.add-chapter-btn {
  font-size: 14px;
  padding: 12px 24px;
}

/* Instagram 风格按钮 - 黑色主题 */
.ins-style {
  background: #000000 !important;
  border: none !important;
  border-radius: 25px !important;
  color: white !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 14px 32px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s ease !important;
  text-transform: none !important;
  letter-spacing: 0.5px !important;
}

.ins-style:hover {
  background: #1a1a1a !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  transform: translateY(-1px) !important;
}

.ins-style:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

/* 弹窗样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease-out;
}

.dialog-content {
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 400px;
  overflow: hidden;
  animation: slideUp 0.3s ease-out;
}

.dialog-header {
  padding: 24px 24px 16px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}

.dialog-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.dialog-body {
  padding: 24px;
}

.dialog-footer {
  padding: 16px 24px 24px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.cancel-btn {
  flex: 1;
  background: #fff !important;
  border: 1px solid #ddd !important;
  color: #666 !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  padding: 12px 20px !important;
  transition: all 0.3s ease !important;
}

.cancel-btn:hover {
  background: #f5f5f5 !important;
  border-color: #ccc !important;
}

.confirm-btn {
  flex: 1;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 12px 20px !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 视频弹窗样式 */
.video-dialog-content {
  background: white;
  border-radius: 8px;
  width: 600px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease-out;
}

.video-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #ebeef5;
}

.video-dialog-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.close-btn {
  color: #909399;
}

.video-dialog-body {
  padding: 24px;
  text-align: left;
}

.form-item {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #606266;
}

.upload-area {
  border: 2px dashed #dcdfe6;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s;
}

.upload-area:hover {
  border-color: #409eff;
}

.cover-upload {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-upload {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-placeholder {
  text-align: center;
  padding: 20px;
}

.upload-icon {
  font-size: 32px;
  color: #c0c4cc;
  margin-bottom: 12px;
}

.upload-text {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #606266;
}

.upload-hint {
  margin: 0;
  font-size: 12px;
  color: #909399;
}

.video-cover-preview {
  position: relative;
  width: 100%;
  height: 100%;
}

.video-cover-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-cover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.video-cover-preview:hover .video-cover-overlay {
  opacity: 1;
}

.video-info {
  display: flex;
  align-items: center;
  padding: 16px;
  width: 100%;
}

.file-icon {
  font-size: 24px;
  color: #409eff;
  margin-right: 12px;
}

.file-details {
  flex: 1;
  margin-right: 12px;
}

.file-name {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: #303133;
  word-break: break-all;
}

.file-size {
  margin: 0;
  font-size: 12px;
  color: #909399;
}

.video-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px 24px;
  border-top: 1px solid #ebeef5;
}

/* 视频预览样式 */
.video-preview-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.video-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
  background: #000;
}

/* 视频预览信息样式 */
.video-preview-info {
  margin: 0;
}

.video-preview-info .file-name {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: white;
  word-break: break-all;
}

.video-preview-info .file-size {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

/* 重新选择按钮样式 */
.video-reselect-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
}

.reselect-button {
  background: rgba(0, 0, 0, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  backdrop-filter: blur(4px);
}

.reselect-button:hover {
  background: rgba(0, 0, 0, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* 视频信息叠加层 */
.video-info-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  padding: 12px;
  border-radius: 0 0 4px 4px;
}

/* 简化的视频列表样式 */
.video-list-simple {
  padding: 0;
}

.video-item-simple {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;
}

.video-item-simple:hover {
  background-color: #f8f9fa;
}

.video-item-simple:last-child {
  border-bottom: none;
}

.video-number {
  font-size: 14px;
  color: #666;
  margin-right: 12px;
  min-width: 30px;
}

.video-details {
  flex: 1;
}

.video-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.video-title {
  font-size: 14px;
  color: #333;
  flex: 1;
  margin-right: 16px;
}

.video-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  padding: 4px 12px !important;
  font-size: 12px !important;
  height: 28px !important;
}

/* 响应式 */
@media (max-width: 768px) {
  .dual-upload-row { 
    grid-template-columns: 1fr; 
  }
  
  .video-dialog-content {
    width: 95vw;
    margin: 20px;
  }
  
  .video-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .video-actions {
    align-self: flex-end;
  }
}
</style>
