<template>
  <div class="video-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="title-wrapper">
        <el-icon :size="28"><VideoCamera /></el-icon>
        <h1>视频服务</h1>
      </div>
      <p class="subtitle">为您精选优质养老视频内容</p>
    </div>

    <!-- 顶部搜索栏 -->
    <div class="search-bar">
      <el-input
        v-model="searchQuery"
        placeholder="搜索视频..."
        class="search-input"
        clearable
      >
        <template #prefix>
          <el-icon class="search-icon"><Search /></el-icon>
        </template>
        <template #append>
          <el-button type="primary" :icon="Search" @click="handleSearch">
            <span class="button-text">搜索</span>
          </el-button>
        </template>
      </el-input>
      <div class="hot-searches">
        <span class="label">热门搜索：</span>
        <el-tag
          v-for="tag in hotSearches"
          :key="tag"
          size="small"
          effect="plain"
          class="hot-tag"
          @click="searchQuery = tag"
        >
          {{ tag }}
        </el-tag>
      </div>
    </div>

    <!-- 视频分类标签 -->
    <div class="category-tags">
      <el-tabs 
        v-model="activeCategory" 
        @tab-change="handleCategoryChange"
        class="custom-tabs"
      >
        <el-tab-pane label="推荐" name="recommended">
          <template #label>
            <div class="tab-label">
              <el-icon><VideoPlay /></el-icon>
              <span>推荐</span>
            </div>
          </template>
          <video-grid :videos="recommendedVideos" />
        </el-tab-pane>
        <el-tab-pane label="最新" name="latest">
          <video-grid :videos="latestVideos" />
        </el-tab-pane>
        <el-tab-pane label="热门" name="popular">
          <video-grid :videos="popularVideos" />
        </el-tab-pane>
        <el-tab-pane label="收藏" name="favorites">
          <video-grid :videos="favoriteVideos" />
        </el-tab-pane>
        <el-tab-pane label="历史" name="history">
          <video-grid :videos="historyVideos" />
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 视频推荐区域 -->
    <div v-if="activeCategory === 'recommended'" class="featured-section">
      <div class="section-title">
        <el-icon><Star /></el-icon>
        <h2>精选推荐</h2>
        <el-tag type="warning" effect="plain" class="featured-tag">
          <el-icon><Trophy /></el-icon>
          <span>精品内容</span>
        </el-tag>
      </div>
      <el-carousel 
        :interval="4000" 
        type="card" 
        height="300px"
        :autoplay="true"
        class="featured-carousel"
      >
        <el-carousel-item v-for="video in featuredVideos" :key="video.id">
          <div class="featured-video" @click="playVideo(video)">
            <img :src="video.thumbnail" :alt="video.title">
            <div class="featured-info">
              <h3>{{ video.title }}</h3>
              <p>{{ video.description }}</p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 视频列表区域 -->
    <div class="video-section">
      <div class="section-header">
        <div class="section-title">
          <el-icon>
            <component :is="getCategoryIcon" />
          </el-icon>
          <h2>{{ getCategoryTitle }}</h2>
        </div>
        <el-select 
          v-model="sortBy" 
          placeholder="排序方式" 
          @change="handleSort"
          class="sort-select"
        >
          <el-option label="最新发布" value="latest" />
          <el-option label="最多播放" value="views" />
          <el-option label="最多点赞" value="likes" />
        </el-select>
      </div>

      <div class="video-grid">
        <video-card
          v-for="video in displayVideos"
          :key="video.id"
          :video="video"
          @click="playVideo(video)"
          @favorite="toggleFavorite"
        />
      </div>

      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :total="totalVideos"
          layout="prev, pager, next"
          @current-change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { Search, Star, VideoPlay, Calendar, Histogram as Fire, Collection, Timer, VideoCamera, Trophy } from '@element-plus/icons-vue'
import VideoCard from '@/components/video/VideoCard.vue'
import VideoGrid from '@/components/video/VideoGrid.vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const searchQuery = ref('')
const activeCategory = ref('recommended')
const sortBy = ref('latest')
const currentPage = ref(1)
const pageSize = ref(12)

// 模拟数据
const featuredVideos = ref([
  {
    id: 1,
    title: '健康生活指南',
    description: '日常保健小技巧',
    thumbnail: 'https://picsum.photos/800/450',
    duration: '10:30',
    views: 1500,
    likes: 230,
    date: '2024-01-15'
  },
  {
    id: 2,
    title: '老年人居家运动指南',
    description: '适合老年人的居家健身方法',
    thumbnail: 'https://picsum.photos/800/451',
    duration: '15:20',
    views: 2800,
    likes: 450,
    date: '2024-01-16'
  },
  {
    id: 3,
    title: '营养健康饮食课堂',
    description: '专业营养师教您科学饮食',
    thumbnail: 'https://picsum.photos/800/452',
    duration: '12:45',
    views: 3500,
    likes: 520,
    date: '2024-01-17'
  }
])

const recommendedVideos = ref([
  {
    id: 4,
    title: '每日健康操',
    thumbnail: 'https://picsum.photos/800/453',
    duration: '08:30',
    views: 1200,
    likes: 180,
    date: '2024-01-18'
  },
  {
    id: 5,
    title: '中医养生知识讲座',
    thumbnail: 'https://picsum.photos/800/454',
    duration: '20:15',
    views: 4500,
    likes: 680,
    date: '2024-01-19'
  },
  {
    id: 6,
    title: '老年人心理健康指导',
    thumbnail: 'https://picsum.photos/800/455',
    duration: '16:40',
    views: 2300,
    likes: 340,
    date: '2024-01-20'
  }
])

const latestVideos = ref([
  {
    id: 7,
    title: '智能设备使用教程',
    thumbnail: 'https://picsum.photos/800/456',
    duration: '11:20',
    views: 1800,
    likes: 260,
    date: '2024-01-21'
  },
  {
    id: 8,
    title: '防诈骗知识讲解',
    thumbnail: 'https://picsum.photos/800/457',
    duration: '14:50',
    views: 5600,
    likes: 890,
    date: '2024-01-22'
  }
])

const popularVideos = ref([
  {
    id: 9,
    title: '老年人体育运动指南',
    thumbnail: 'https://picsum.photos/800/458',
    duration: '18:30',
    views: 8900,
    likes: 1200,
    date: '2024-01-20',
    isFavorite: true
  },
  {
    id: 10,
    title: '健康饮食与营养搭配',
    thumbnail: 'https://picsum.photos/800/459',
    duration: '25:15',
    views: 7600,
    likes: 980,
    date: '2024-01-19',
    isFavorite: true
  }
])

const favoriteVideos = ref([
  {
    id: 11,
    title: '居家养老服务指南',
    thumbnail: 'https://picsum.photos/800/460',
    duration: '16:45',
    views: 3200,
    likes: 520,
    date: '2024-01-18',
    isFavorite: true
  },
  {
    id: 12,
    title: '老年人心理健康课程',
    thumbnail: 'https://picsum.photos/800/461',
    duration: '22:10',
    views: 4100,
    likes: 730,
    date: '2024-01-17',
    isFavorite: true
  },
  {
    id: 13,
    title: '智能家居使用教程',
    thumbnail: 'https://picsum.photos/800/462',
    duration: '19:30',
    views: 2800,
    likes: 450,
    date: '2024-01-16',
    isFavorite: true
  }
])

const historyVideos = ref([
  {
    id: 14,
    title: '老年人手机使用技巧',
    thumbnail: 'https://picsum.photos/800/463',
    duration: '13:20',
    views: 2100,
    likes: 380,
    date: '2024-01-23',
    watchedAt: '2024-01-23T15:30:00'
  },
  {
    id: 15,
    title: '养生保健知识讲座',
    thumbnail: 'https://picsum.photos/800/464',
    duration: '28:45',
    views: 5300,
    likes: 860,
    date: '2024-01-22',
    watchedAt: '2024-01-23T14:20:00'
  },
  {
    id: 16,
    title: '老年人理财安全指南',
    thumbnail: 'https://picsum.photos/800/465',
    duration: '20:15',
    views: 4200,
    likes: 690,
    date: '2024-01-21',
    watchedAt: '2024-01-23T10:15:00'
  },
  {
    id: 17,
    title: '家庭医疗保健常识',
    thumbnail: 'https://picsum.photos/800/466',
    duration: '17:40',
    views: 3800,
    likes: 570,
    date: '2024-01-20',
    watchedAt: '2024-01-22T16:45:00'
  }
])

// 计算属性
const getCategoryTitle = computed(() => {
  const titles = {
    recommended: '推荐视频',
    latest: '最新视频',
    popular: '热门视频',
    favorites: '我的收藏',
    history: '观看历史'
  }
  return titles[activeCategory.value]
})

const displayVideos = computed(() => {
  // 根据当前分类和排序方式返回对应的视频列表
  let videos = []
  switch (activeCategory.value) {
    case 'recommended':
      videos = recommendedVideos.value
      break
    case 'latest':
      videos = latestVideos.value
      break
    case 'popular':
      videos = popularVideos.value
      break
    case 'favorites':
      videos = favoriteVideos.value
      break
    case 'history':
      videos = historyVideos.value
      break
  }

  // 应用排序
  return sortVideos(videos)
})

const totalVideos = computed(() => displayVideos.value.length)

// 方法
const handleSearch = () => {
  if (!searchQuery.value.trim()) return
  // TODO: 实现搜索逻辑
}

const handleCategoryChange = (category: string) => {
  activeCategory.value = category
  currentPage.value = 1
  // TODO: 加载对应分类的视频
}

const handleSort = () => {
  // TODO: 实现排序逻辑
}

const handlePageChange = (page: number) => {
  currentPage.value = page
  // TODO: 加载对应页的视频
}

const playVideo = (video: any) => {
  router.push(`/video-service/play/${video.id}`)
}

const toggleFavorite = (videoId: number) => {
  // TODO: 实现收藏/取消收藏逻辑
}

const sortVideos = (videos: any[]) => {
  return [...videos].sort((a, b) => {
    switch (sortBy.value) {
      case 'views':
        return b.views - a.views
      case 'likes':
        return b.likes - a.likes
      case 'latest':
      default:
        return new Date(b.date).getTime() - new Date(a.date).getTime()
    }
  })
}

// 根据分类获取对应图标
const getCategoryIcon = computed(() => {
  const icons = {
    recommended: VideoPlay,
    latest: Calendar,
    popular: Fire,
    favorites: Collection,
    history: Timer
  }
  return icons[activeCategory.value]
})

// 热门搜索标签
const hotSearches = [
  '养生保健',
  '健康饮食',
  '运动指南',
  '心理健康',
  '智能设备'
]
</script>

<style scoped>
.video-container {
  padding: 30px;
  max-width: 1400px;
  margin: 20px auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.page-header {
  margin-bottom: 30px;
  
  .title-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    
    .el-icon {
      color: #409EFF;
    }
    
    h1 {
      font-size: 28px;
      margin: 0;
      color: #303133;
      font-weight: 600;
    }
  }
  
  .subtitle {
    margin: 0;
    color: #909399;
    font-size: 14px;
  }
}

.search-bar {
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.hot-searches {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .label {
    color: #909399;
    font-size: 13px;
  }
  
  .hot-tag {
    cursor: pointer;
    transition: all 0.3s;
    
    &:hover {
      color: #409EFF;
      border-color: #409EFF;
    }
  }
}

.search-input {
  width: 100%;
  max-width: 600px;
  
  :deep(.el-input__wrapper) {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding-left: 16px;
    height: 44px;
  }
  
  :deep(.el-input-group__append) {
    padding: 0;
    .el-button {
      border-radius: 0 8px 8px 0;
      padding: 0 24px;
      height: 44px;
      font-size: 15px;
      
      .button-text {
        margin-left: 4px;
      }
    }
  }
}

.category-tags {
  .custom-tabs {
    :deep(.el-tabs__item) {
      .tab-label {
        display: flex;
        align-items: center;
        gap: 6px;
        
        .el-icon {
          margin-right: 4px;
        }
      }
    }
  }
}

.section-title {
  position: relative;
  
  .featured-tag {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    
    .el-icon {
      color: #e6a23c;
    }
  }
}

.featured-carousel {
  :deep(.el-carousel__arrow) {
    width: 36px;
    height: 36px;
    font-size: 20px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
  }
}

.featured-video {
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      to bottom,
      transparent 50%,
      rgba(0, 0, 0, 0.7) 100%
    );
    pointer-events: none;
  }
  
  &:hover {
    transform: translateY(-4px);
    &::after {
      background: linear-gradient(
        to bottom,
        transparent 40%,
        rgba(0, 0, 0, 0.8) 100%
      );
    }
  }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  h2 {
    font-size: 20px;
    color: #303133;
  }
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  padding: 20px 0;
  
  :deep(.el-pagination) {
    justify-content: center;
  }
}

/* 响应式布局 */
@media (max-width: 768px) {
  .video-container {
    padding: 20px;
    margin: 10px;
  }
  
  .search-input {
    max-width: 100%;
  }
  
  .section-title {
    h2 {
      font-size: 18px;
    }
    
    .el-icon {
      font-size: 20px;
    }
  }
  
  .page-header {
    .title-wrapper {
      h1 {
        font-size: 24px;
      }
    }
  }
  
  .hot-searches {
    flex-wrap: wrap;
    justify-content: center;
  }
}
</style> 