<template>
  <div class="image-to-video-create-page">
    <!-- 顶部导航栏 -->
    <header class="top-header">
      <div class="header-left">
        <button class="back-btn" @click="goBack">
          ← 首页
        </button>
      </div>
      <div class="header-right">
        <div class="credits-info">
          <div class="credits-circle">25</div>
          <span>| 首购优惠</span>
        </div>
        <div class="notification-icon">
          🔔
          <div class="notification-badge">5</div>
        </div>
        <div class="user-avatar" @click="toggleUserMenu" ref="userAvatarRef">
          👤
        </div>
      </div>
    </header>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 左侧设置面板 -->
      <div class="left-panel">
        <!-- 创作模式标签 -->
        <div class="creation-tabs">
          <div class="tab" @click="goToTextToVideo">文生视频</div>
          <div class="tab active">图生视频</div>
          <div class="tab" @click="goToStoryboard">分镜视频</div>
        </div>

        <!-- 图片输入区域 -->
        <div class="image-input-section">
          <div class="image-upload-area">
            <div class="upload-box" @click="uploadFirstFrame">
              <div class="upload-icon">+</div>
              <div class="upload-text">首帧</div>
            </div>
            <div class="arrow-icon">↔</div>
            <div class="upload-box optional" @click="uploadLastFrame">
              <div class="upload-icon">+</div>
              <div class="upload-text">尾帧 (可选)</div>
            </div>
          </div>
          
          <!-- 已上传的图片预览 -->
          <div class="image-preview" v-if="firstFrameImage || lastFrameImage">
            <div class="preview-item" v-if="firstFrameImage">
              <img :src="firstFrameImage" alt="首帧" />
              <button class="remove-btn" @click="removeFirstFrame">×</button>
            </div>
            <div class="preview-item" v-if="lastFrameImage">
              <img :src="lastFrameImage" alt="尾帧" />
              <button class="remove-btn" @click="removeLastFrame">×</button>
            </div>
          </div>
        </div>

        <!-- 文本输入区域 -->
        <div class="text-input-section">
          <textarea 
            v-model="inputText"
            placeholder="结合图片,描述想要生成的内容"
            class="text-input"
            rows="6"
          ></textarea>
          <div class="optimize-btn">
            <button class="optimize-button" @click="optimizePromptHandler" :disabled="!inputText.trim() || optimizingPrompt">
              ✨ {{ optimizingPrompt ? '优化中...' : '一键优化' }}
            </button>
          </div>
        </div>

        <!-- 视频设置 -->
        <div class="video-settings">
          <div class="setting-item">
            <label>比例</label>
            <select v-model="aspectRatio" class="setting-select">
              <option value="16:9">16:9</option>
              <option value="4:3">4:3</option>
              <option value="1:1">1:1</option>
              <option value="3:4">3:4</option>
              <option value="9:16">9:16</option>
            </select>
          </div>
          
          <div class="setting-item">
            <label>时长</label>
            <select v-model="duration" class="setting-select">
              <option value="5">5s</option>
              <option value="10">10s</option>
              <option value="15">15s</option>
              <option value="30">30s</option>
            </select>
          </div>
          
          <div class="setting-item">
            <label>高清模式 (1080P)</label>
            <div class="hd-setting">
              <input type="checkbox" v-model="hdMode" class="hd-switch">
              <span class="cost-text">开启消耗20积分</span>
            </div>
          </div>
        </div>

        <!-- 生成按钮 -->
        <div class="generate-section">
          <button class="generate-btn" @click="startGenerate">
            开始生成
          </button>
        </div>
      </div>

      <!-- 右侧预览区域 -->
      <div class="right-panel">
        <div class="preview-area">
          <!-- 任务状态显示 -->
          <div class="task-status" v-if="currentTask">
            <div class="status-header">
              <h3>{{ getStatusText(taskStatus) }}</h3>
              <div class="task-id">图生视频 {{ formatDate(currentTask.createdAt) }}</div>
            </div>
            
            <!-- 任务描述 -->
            <div class="task-description">
              {{ inputText }}
            </div>
            
            <!-- 视频预览区域 -->
            <div class="video-preview-container">
              <!-- 生成中的状态 -->
              <div v-if="inProgress" class="generating-container">
                <div class="generating-placeholder">
                  <div class="generating-text">生成中</div>
                  <div class="progress-bar-large">
                    <div class="progress-fill-large" :style="{ width: taskProgress + '%' }"></div>
                  </div>
                </div>
              </div>
              
              <!-- 完成状态 -->
              <div v-else-if="taskStatus === 'COMPLETED'" class="completed-container">
                <!-- 任务信息头部 -->
                <div class="task-info-header">
                  <div class="task-checkbox">
                    <input type="checkbox" id="inProgress" v-model="showInProgress">
                    <label for="inProgress">进行中</label>
                  </div>
                </div>
                
                <!-- 视频播放区域 -->
                <div class="video-player-container">
                  <div class="video-player">
                    <video 
                      v-if="currentTask.resultUrl" 
                      :src="currentTask.resultUrl" 
                      controls 
                      class="result-video"
                      poster=""
                    ></video>
                    <div v-else class="no-video-placeholder">
                      <div class="no-video-text">视频生成完成，但未获取到视频链接</div>
                    </div>
                    
                    <!-- 水印选择覆盖层 -->
                    <div class="watermark-overlay">
                      <div class="watermark-options">
                        <div class="watermark-option">
                          <input type="radio" id="withWatermark" name="watermark" value="with" v-model="watermarkOption">
                          <label for="withWatermark">带水印</label>
                        </div>
                        <div class="watermark-option">
                          <input type="radio" id="withoutWatermark" name="watermark" value="without" v-model="watermarkOption">
                          <label for="withoutWatermark">不带水印 会员专享</label>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                
                <!-- 操作按钮区域 -->
                <div class="result-actions">
                  <button class="action-btn primary" @click="createSimilar">做同款</button>
                  <button class="action-btn primary" @click="submitWork">投稿</button>
                  <div class="action-icons">
                    <button class="icon-btn" @click="downloadVideo" title="下载视频">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
                      </svg>
                    </button>
                    <button class="icon-btn" @click="deleteWork" title="删除作品">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
              
              <!-- 失败状态 -->
              <div v-else-if="taskStatus === 'FAILED'" class="failed-container">
                <div class="failed-placeholder">
                  <div class="failed-icon">❌</div>
                  <div class="failed-text">生成失败</div>
                  <div class="failed-desc">请检查输入内容或重试</div>
                </div>
                <div class="result-actions">
                  <button class="action-btn primary" @click="retryTask">重新生成</button>
                </div>
              </div>
              
              <!-- 其他状态 -->
              <div v-else class="status-placeholder">
                <div class="status-text">{{ getStatusText(taskStatus) }}</div>
              </div>
            </div>
            
            <!-- 任务控制 -->
            <div class="task-controls" v-if="inProgress">
              <button class="cancel-btn" @click="cancelTask">取消任务</button>
            </div>
          </div>
          
          <!-- 默认提示 -->
          <div class="preview-content" v-else>
            <div class="preview-placeholder">
              <div class="placeholder-text">开始创作您的第一个作品吧!</div>
              <div class="placeholder-tips">
                <p>• 上传首帧图片</p>
                <p>• 输入描述文字</p>
                <p>• 选择视频参数</p>
                <p>• 点击开始生成</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 用户菜单下拉 -->
    <Teleport to="body">
      <div v-if="showUserMenu" class="user-menu-teleport" :style="menuStyle">
        <div class="menu-item" @click="goToProfile">
          <el-icon><User /></el-icon>
          <span>个人资料</span>
        </div>
        <div class="menu-item" @click="goToMyWorks">
          <el-icon><VideoCamera /></el-icon>
          <span>我的作品</span>
        </div>
        <div class="menu-item" @click="goToSubscription">
          <el-icon><Star /></el-icon>
          <span>会员订阅</span>
        </div>
        <div class="menu-item" @click="goToSettings">
          <el-icon><Setting /></el-icon>
          <span>系统设置</span>
        </div>
        <div class="menu-divider"></div>
        <div class="menu-item logout" @click="logout">
          <el-icon><SwitchButton /></el-icon>
          <span>退出登录</span>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup>
import { ref, reactive, onUnmounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElLoading } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { User, VideoCamera, Star, Setting, SwitchButton } from '@element-plus/icons-vue'
import { imageToVideoApi } from '@/api/imageToVideo'
import { optimizePrompt } from '@/api/promptOptimizer'

const router = useRouter()
const userStore = useUserStore()

// 表单数据
const inputText = ref('')
const aspectRatio = ref('16:9')
const duration = ref('5')
const hdMode = ref(false)
const inProgress = ref(false)

// 图片上传
const firstFrameImage = ref('')
const lastFrameImage = ref('')
const firstFrameFile = ref(null)
const lastFrameFile = ref(null)

// 任务状态
const currentTask = ref(null)
const taskProgress = ref(0)
const taskStatus = ref('')
const stopPolling = ref(null)
const showInProgress = ref(false)
const watermarkOption = ref('without')
const optimizingPrompt = ref(false) // 优化提示词状态

// 用户菜单相关
const showUserMenu = ref(false)
const userAvatarRef = ref(null)

// 计算菜单位置
const menuStyle = computed(() => {
  if (!userAvatarRef.value || !showUserMenu.value) return {}
  
  const rect = userAvatarRef.value.getBoundingClientRect()
  return {
    position: 'fixed',
    top: `${rect.bottom + 8}px`,
    right: `${window.innerWidth - rect.right}px`,
    zIndex: 99999
  }
})

// 导航函数
const goBack = () => {
  router.push('/')
}

const goToTextToVideo = () => {
  router.push('/text-to-video/create')
}

const goToStoryboard = () => {
  alert('分镜视频功能开发中')
}

// 用户菜单相关方法
const toggleUserMenu = () => {
  showUserMenu.value = !showUserMenu.value
}

const goToProfile = () => {
  showUserMenu.value = false
  router.push('/profile')
}

const goToMyWorks = () => {
  showUserMenu.value = false
  router.push('/works')
}

const goToSubscription = () => {
  showUserMenu.value = false
  router.push('/subscription')
}

const goToSettings = () => {
  showUserMenu.value = false
  router.push('/settings')
}

const logout = () => {
  showUserMenu.value = false
  userStore.logout()
  router.push('/login')
}

// 图片上传处理
const uploadFirstFrame = () => {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = 'image/*'
  input.onchange = (e) => {
    const file = e.target.files[0]
    if (file) {
      // 验证文件大小（最大10MB）
      if (file.size > 10 * 1024 * 1024) {
        ElMessage.error('图片文件大小不能超过10MB')
        return
      }
      
      // 验证文件类型
      if (!file.type.startsWith('image/')) {
        ElMessage.error('请选择有效的图片文件')
        return
      }
      
      firstFrameFile.value = file
      const reader = new FileReader()
      reader.onload = (e) => {
        firstFrameImage.value = e.target.result
      }
      reader.readAsDataURL(file)
    }
  }
  input.click()
}

const uploadLastFrame = () => {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = 'image/*'
  input.onchange = (e) => {
    const file = e.target.files[0]
    if (file) {
      // 验证文件大小（最大10MB）
      if (file.size > 10 * 1024 * 1024) {
        ElMessage.error('图片文件大小不能超过10MB')
        return
      }
      
      // 验证文件类型
      if (!file.type.startsWith('image/')) {
        ElMessage.error('请选择有效的图片文件')
        return
      }
      
      lastFrameFile.value = file
      const reader = new FileReader()
      reader.onload = (e) => {
        lastFrameImage.value = e.target.result
      }
      reader.readAsDataURL(file)
    }
  }
  input.click()
}

const removeFirstFrame = () => {
  firstFrameImage.value = ''
  firstFrameFile.value = null
}

const removeLastFrame = () => {
  lastFrameImage.value = ''
  lastFrameFile.value = null
}

// 开始生成视频
const startGenerate = async () => {
  // 检查是否已有任务在进行中
  if (inProgress.value) {
    ElMessage.warning('已有任务在进行中，请等待完成或取消当前任务')
    return
  }
  
  // 验证表单
  if (!firstFrameFile.value) {
    ElMessage.error('请上传首帧图片')
    return
  }
  
  if (!inputText.value.trim()) {
    ElMessage.error('请输入描述文字')
    return
  }
  
  // 验证描述文字长度
  if (inputText.value.trim().length > 500) {
    ElMessage.error('描述文字不能超过500个字符')
    return
  }
  
  // 显示加载状态
  const loading = ElLoading.service({
    lock: true,
    text: '正在创建任务...',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  
  try {
    // 准备请求参数
    const params = {
      firstFrame: firstFrameFile.value,
      lastFrame: lastFrameFile.value,
      prompt: inputText.value.trim(),
      aspectRatio: aspectRatio.value,
      duration: parseInt(duration.value),
      hdMode: hdMode.value
    }
    
    // 调用API创建任务
    const response = await imageToVideoApi.createTask(params)
    
    if (response.data && response.data.success) {
      currentTask.value = response.data.data
      inProgress.value = true
      taskProgress.value = 0
      taskStatus.value = 'PENDING'
      
      ElMessage.success('任务创建成功，开始处理...')
      
      // 开始轮询任务状态
      startPollingTask()
      
    } else {
      ElMessage.error(response.data?.message || '创建任务失败')
    }
    
  } catch (error) {
    console.error('创建任务失败:', error)
    ElMessage.error('创建任务失败，请重试')
  } finally {
    loading.close()
  }
}

// 开始轮询任务状态
const startPollingTask = () => {
  if (!currentTask.value) return
  
  stopPolling.value = imageToVideoApi.pollTaskStatus(
    currentTask.value.taskId,
    // 进度回调
    (progressData) => {
      if (progressData && typeof progressData.progress === 'number') {
        taskProgress.value = progressData.progress
      }
      if (progressData && progressData.status) {
        taskStatus.value = progressData.status
      }
      console.log('任务进度:', progressData)
    },
    // 完成回调
    (taskData) => {
      inProgress.value = false
      taskProgress.value = 100
      taskStatus.value = 'COMPLETED'
      ElMessage.success('视频生成完成！')
      
      // 可以在这里跳转到结果页面或显示结果
      console.log('任务完成:', taskData)
    },
    // 错误回调
    (error) => {
      inProgress.value = false
      taskStatus.value = 'FAILED'
      ElMessage.error('视频生成失败：' + error.message)
      console.error('任务失败:', error)
    }
  )
}

// 取消任务
const cancelTask = async () => {
  if (!currentTask.value) return
  
  try {
    const response = await imageToVideoApi.cancelTask(currentTask.value.taskId)
    
    if (response.data && response.data.success) {
      inProgress.value = false
      taskStatus.value = 'CANCELLED'
      ElMessage.success('任务已取消')
      
      // 停止轮询
      if (stopPolling.value) {
        stopPolling.value()
        stopPolling.value = null
      }
    } else {
      ElMessage.error(response.data?.message || '取消失败')
    }
    
  } catch (error) {
    console.error('取消任务失败:', error)
    ElMessage.error('取消任务失败')
  }
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'PENDING': '等待中',
    'PROCESSING': '处理中',
    'COMPLETED': '已完成',
    'FAILED': '失败',
    'CANCELLED': '已取消'
  }
  return statusMap[status] || '未知'
}

// 获取状态样式类
const getStatusClass = (status) => {
  const classMap = {
    'PENDING': 'status-pending',
    'PROCESSING': 'status-processing',
    'COMPLETED': 'status-completed',
    'FAILED': 'status-failed',
    'CANCELLED': 'status-cancelled'
  }
  return classMap[status] || ''
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  return `${year}年${month}月${day}日 ${hours}:${minutes}`
}

// 优化提示词
const optimizePromptHandler = async () => {
  if (!inputText.value.trim()) {
    ElMessage.warning('请输入提示词')
    return
  }
  
  // 长度检查
  if (inputText.value.length > 2000) {
    ElMessage.warning('提示词过长，请控制在2000字符以内')
    return
  }
  
  try {
    optimizingPrompt.value = true
    const loading = ElLoading.service({
      lock: false,
      text: '正在优化提示词，请稍候...',
      background: 'rgba(0, 0, 0, 0.3)'
    })
    
    const response = await optimizePrompt(inputText.value.trim(), 'image-to-video')
    
    loading.close()
    
    if (response.data && response.data.success) {
      const data = response.data.data
      const optimized = data.optimizedPrompt
      
      // 检查是否真正优化了
      if (data.optimized && optimized !== inputText.value.trim()) {
        inputText.value = optimized
        ElMessage.success('提示词优化成功！')
      } else {
        ElMessage.warning('提示词已优化，但可能无明显变化')
      }
    } else {
      ElMessage.error(response.data?.message || '优化失败')
    }
  } catch (error) {
    console.error('优化提示词失败:', error)
    
    let errorMessage = '优化提示词失败'
    if (error.response) {
      const status = error.response.status
      if (status === 400) {
        errorMessage = error.response.data?.message || '请求参数错误'
      } else if (status === 408 || error.code === 'ECONNABORTED') {
        errorMessage = '请求超时，请稍后重试'
      } else if (status >= 500) {
        errorMessage = '服务器错误，请稍后重试'
      } else {
        errorMessage = error.response.data?.message || '优化失败'
      }
    } else if (error.request) {
      errorMessage = '网络错误，请检查网络连接'
    } else {
      errorMessage = error.message || '优化失败'
    }
    
    ElMessage.error(errorMessage)
  } finally {
    optimizingPrompt.value = false
  }
}

// 创建同款
const createSimilar = () => {
  // 保持当前设置，重新生成
  startGenerate()
}

// 下载视频
const downloadVideo = () => {
  if (currentTask.value && currentTask.value.resultUrl) {
    const link = document.createElement('a')
    link.href = currentTask.value.resultUrl
    link.download = `video_${currentTask.value.taskId}.mp4`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    ElMessage.success('开始下载视频')
  } else {
    ElMessage.error('视频链接不可用')
  }
}

// 重新生成
const retryTask = () => {
  // 重置状态
  currentTask.value = null
  inProgress.value = false
  taskProgress.value = 0
  taskStatus.value = ''
  
  // 重新开始生成
  startGenerate()
}

// 投稿功能
const submitWork = () => {
  if (!currentTask.value) {
    ElMessage.error('没有可投稿的作品')
    return
  }
  
  // 这里可以调用投稿API
  ElMessage.success('投稿成功！')
  console.log('投稿作品:', currentTask.value)
}

// 删除作品
const deleteWork = () => {
  if (!currentTask.value) {
    ElMessage.error('没有可删除的作品')
    return
  }
  
  // 确认删除
  ElMessage.confirm('确定要删除这个作品吗？', '确认删除', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 这里可以调用删除API
    currentTask.value = null
    taskStatus.value = ''
    ElMessage.success('作品已删除')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 组件卸载时清理资源
onUnmounted(() => {
  // 停止轮询
  if (stopPolling.value) {
    stopPolling.value()
    stopPolling.value = null
  }
})
</script>

<style scoped>
.image-to-video-create-page {
  height: 100vh;
  background: #0a0a0a;
  color: #fff;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 顶部导航栏 */
.top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  background: #0a0a0a;
  border-bottom: 1px solid #1f1f1f;
  min-height: 60px;
}

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

.back-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-weight: 500;
}

.back-btn:hover {
  background: #1a1a1a;
  transform: translateX(-2px);
}

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

.credits-info {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.credits-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.notification-icon {
  position: relative;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.notification-icon:hover {
  background: #1a1a1a;
}

.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #ef4444;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #374151, #1f2937);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  transition: transform 0.2s ease;
}

.user-avatar:hover {
  transform: scale(1.05);
}

/* 用户菜单样式 */
.user-menu-teleport {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 8px 0;
  min-width: 200px;
  z-index: 99999;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #333;
  font-size: 14px;
}

.menu-item:hover {
  background: #f5f7fa;
  color: #667eea;
}

.menu-item.logout {
  color: #f56565;
}

.menu-item.logout:hover {
  background: #fef2f2;
  color: #e53e3e;
}

.menu-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 4px 0;
}

.menu-item .el-icon {
  margin-right: 12px;
  font-size: 16px;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 0;
  height: calc(100vh - 100px);
}

/* 左侧面板 */
.left-panel {
  background: #1a1a1a;
  border-right: 1px solid #2a2a2a;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow-y: auto;
}

/* 创作模式标签 */
.creation-tabs {
  display: flex;
  gap: 4px;
  background: #0a0a0a;
  padding: 4px;
  border-radius: 12px;
}

.tab {
  flex: 1;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #9ca3af;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.tab.active {
  background: #3b82f6;
  color: #fff;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.tab:hover:not(.active) {
  background: #2a2a2a;
  color: #fff;
}

/* 图片输入区域 */
.image-input-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.image-upload-area {
  display: flex;
  align-items: center;
  gap: 16px;
}

.upload-box {
  flex: 1;
  aspect-ratio: 1;
  background: #0a0a0a;
  border: 2px dashed #2a2a2a;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.upload-box:hover {
  border-color: #3b82f6;
  background: #1a1a1a;
}

.upload-box.optional {
  opacity: 0.7;
}

.upload-icon {
  font-size: 32px;
  color: #6b7280;
  font-weight: 300;
  margin-bottom: 8px;
}

.upload-text {
  font-size: 14px;
  color: #9ca3af;
  font-weight: 500;
}

.arrow-icon {
  font-size: 20px;
  color: #6b7280;
  font-weight: bold;
}

.image-preview {
  display: flex;
  gap: 16px;
}

.preview-item {
  flex: 1;
  position: relative;
  aspect-ratio: 1;
}

.preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
}

/* 文本输入区域 */
.text-input-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.text-input {
  width: 100%;
  min-height: 120px;
  padding: 16px;
  background: #0a0a0a;
  border: 2px solid #2a2a2a;
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  transition: all 0.2s ease;
  font-family: inherit;
}

.text-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.text-input::placeholder {
  color: #6b7280;
}

.optimize-btn {
  display: flex;
  justify-content: flex-end;
}

.optimize-button {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.optimize-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* 视频设置 */
.video-settings {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.setting-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.setting-item label {
  font-size: 14px;
  color: #e5e7eb;
  font-weight: 600;
}

.setting-select {
  padding: 12px 16px;
  background: #0a0a0a;
  border: 2px solid #2a2a2a;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.setting-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.setting-select:hover {
  border-color: #374151;
}

.hd-setting {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hd-switch {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #3b82f6;
}

.cost-text {
  font-size: 13px;
  color: #9ca3af;
  font-weight: 500;
}

/* 生成按钮 */
.generate-section {
  margin-top: auto;
}

.generate-btn {
  width: 100%;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff;
  border: none;
  padding: 16px 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.generate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
}

.generate-btn:active {
  transform: translateY(0);
}

.generate-btn:disabled {
  background: #6b7280;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 右侧面板 */
.right-panel {
  background: #0a0a0a;
  padding: 32px;
  display: flex;
  flex-direction: column;
}

.preview-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.status-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.status-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #3b82f6;
}

.status-checkbox label {
  font-size: 14px;
  color: #e5e7eb;
  cursor: pointer;
  font-weight: 500;
}

.preview-content {
  flex: 1;
  background: #1a1a1a;
  border: 2px solid #2a2a2a;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.preview-content:hover {
  border-color: #374151;
}

.preview-placeholder {
  text-align: center;
  padding: 40px;
}

.placeholder-text {
  font-size: 18px;
  color: #6b7280;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 20px;
}

.placeholder-tips {
  text-align: left;
  color: #9ca3af;
  font-size: 14px;
  line-height: 1.8;
}

.placeholder-tips p {
  margin: 8px 0;
}

/* 任务状态样式 */
.task-status {
  background: #1a1a1a;
  border: 2px solid #2a2a2a;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}

.status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #2a2a2a;
}

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

.task-id {
  color: #9ca3af;
  font-size: 12px;
  font-family: monospace;
}

.status-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-item .label {
  color: #9ca3af;
  font-size: 14px;
  font-weight: 500;
}

.status-item .value {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

/* 状态颜色 */
.status-pending {
  color: #f59e0b !important;
}

.status-processing {
  color: #3b82f6 !important;
}

.status-completed {
  color: #10b981 !important;
}

.status-failed {
  color: #ef4444 !important;
}

.status-cancelled {
  color: #6b7280 !important;
}

/* 进度条 */
.progress-bar {
  width: 100%;
  height: 8px;
  background: #2a2a2a;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  border-radius: 4px;
  transition: width 0.3s ease;
  position: relative;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: progress-shine 2s infinite;
}

@keyframes progress-shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* 任务操作按钮 */
.task-actions {
  display: flex;
  gap: 12px;
}

.cancel-btn {
  background: #ef4444;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-btn:hover {
  background: #dc2626;
  transform: translateY(-1px);
}

/* 任务描述样式 */
.task-description {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 16px;
  margin: 15px 0;
  font-size: 14px;
  line-height: 1.6;
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, 0.1);
  max-height: 120px;
  overflow-y: auto;
}

/* 视频预览容器 */
.video-preview-container {
  background: #1a1a1a;
  border: 2px solid #2a2a2a;
  border-radius: 12px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px 0;
  overflow: hidden;
}

/* 生成中状态 */
.generating-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.generating-placeholder {
  text-align: center;
  padding: 40px;
}

.generating-text {
  font-size: 18px;
  color: #3b82f6;
  font-weight: 600;
  margin-bottom: 20px;
}

.progress-bar-large {
  width: 200px;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill-large {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* 完成状态 */
.completed-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* 任务信息头部 */
.task-info-header {
  margin-bottom: 15px;
}

.task-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #3b82f6;
}

.task-checkbox label {
  font-size: 14px;
  color: #e5e7eb;
  cursor: pointer;
  font-weight: 500;
}

/* 视频播放容器 */
.video-player-container {
  flex: 1;
  position: relative;
  margin-bottom: 20px;
}

.video-player {
  position: relative;
  width: 100%;
  height: 100%;
  background: #1a1a1a;
  border-radius: 12px;
  overflow: hidden;
}

.result-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

.no-video-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
}

.no-video-text {
  font-size: 16px;
  font-weight: 500;
}

/* 水印选择覆盖层 */
.watermark-overlay {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 8px;
  padding: 12px;
  backdrop-filter: blur(10px);
}

.watermark-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.watermark-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

.watermark-option input[type="radio"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #3b82f6;
}

.watermark-option label {
  font-size: 13px;
  color: #e5e7eb;
  cursor: pointer;
  font-weight: 500;
}

/* 操作按钮区域 */
.result-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.action-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.action-btn.primary {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
}

.action-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.action-icons {
  display: flex;
  gap: 8px;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e5e7eb;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.icon-btn svg {
  width: 16px;
  height: 16px;
}

/* 失败状态 */
.failed-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.failed-placeholder {
  text-align: center;
  margin-bottom: 20px;
}

.failed-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.failed-text {
  font-size: 20px;
  color: #ef4444;
  font-weight: 600;
  margin-bottom: 8px;
}

.failed-desc {
  font-size: 14px;
  color: #9ca3af;
}

/* 其他状态 */
.status-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-text {
  font-size: 18px;
  color: #9ca3af;
  font-weight: 500;
}

/* 任务控制 */
.task-controls {
  margin-top: 15px;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-content {
    grid-template-columns: 350px 1fr;
  }
  
  .left-panel {
    padding: 24px;
  }
  
  .right-panel {
    padding: 24px;
  }
}

@media (max-width: 1024px) {
  .main-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  
  .left-panel {
    border-right: none;
    border-bottom: 1px solid #2a2a2a;
    padding: 20px;
  }
  
  .right-panel {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .top-header {
    padding: 16px 20px;
  }
  
  .header-right {
    gap: 16px;
  }
  
  .left-panel {
    padding: 16px;
    gap: 24px;
  }
  
  .right-panel {
    padding: 16px;
  }
  
  .creation-tabs {
    flex-direction: column;
    gap: 8px;
  }
  
  .tab {
    text-align: left;
  }
  
  .image-upload-area {
    flex-direction: column;
    gap: 12px;
  }
  
  .arrow-icon {
    transform: rotate(90deg);
  }
}
</style>










