<template>
  <div class="resources-page">
    <!-- 横幅图区域 -->
    <div class="banner-section">
      <div class="banner-container">
        <img src="/images/Featured_resources/精选资源轮播.png" alt="精选资源横幅" class="banner-image" />
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <div class="container">
        <!-- 精选视频区域 -->
        <section class="featured-videos">
          <h2 class="section-title">精选视频</h2>

          <!-- 加载状态 -->
          <div v-if="loading" class="loading-container">
            <div class="loading-spinner"></div>
            <p>正在加载精选资源...</p>
          </div>

          <!-- 错误状态 -->
          <div v-else-if="error" class="error-container">
            <p class="error-message">{{ error }}</p>
            <button @click="fetchFeaturedResources" class="retry-button">重试</button>
          </div>

          <!-- 精选视频网格 -->
          <div v-else class="featured-grid">
            <div v-for="video in featuredVideos" :key="video.id" class="featured-card" @click="handleVideoClick(video)">
              <div class="card-image">
                <img
                  :src="video.thumbnailUrl || video.image"
                  :alt="video.name || video.title"
                  class="video-thumbnail"
                />
                <div v-if="video.type === 0 && video.duration" class="duration-badge">
                  <img src="/images/Featured_resources/duration.png" alt="时长" class="duration-icon">
                  {{ formatDuration(video.duration) }}
                </div>
                <div v-if="video.type === 0" class="play-button">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M8 5V19L19 12L8 5Z" fill="white" />
                  </svg>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">{{ video.name || video.title }}</h3>
              </div>
            </div>
          </div>
        </section>

        <!-- 全部视频区域 -->
        <section class="all-videos">
          <h2 class="section-title">全部视频</h2>
          <!-- 筛选标签 -->
          <div class="filter-tabs">
            <button v-for="tab in videoTabs" :key="tab.id"
              :class="['filter-tab', { active: activeVideoTab === tab.id }]" @click="activeVideoTab = tab.id">
              {{ tab.name }}
            </button>
          </div>
          <!-- 视频网格 -->
          <div class="video-grid">
            <div v-for="video in allVideos" :key="video.id" class="video-card" @click="handleVideoClick(video)">
              <div class="card-image">
                <img :src="video.image" :alt="video.title" class="video-thumbnail" />
                <div class="duration-badge">
                  <img src="/images/Featured_resources/duration.png" alt="时长" class="duration-icon">
                  42:52
                </div>
                <div class="play-button">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                    <path d="M8 5V19L19 12L8 5Z" fill="white" />
                  </svg>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">{{ video.title }}</h3>
              </div>
            </div>
          </div>
          <div class="load-more">
            <button class="load-more-btn">查看更多</button>
          </div>
        </section>

        <!-- 全部图片区域 -->
        <section class="all-images">
          <h2 class="section-title">全部图片</h2>
          <!-- 筛选标签 -->
          <div class="filter-tabs">
            <button v-for="tab in imageTabs" :key="tab.id"
              :class="['filter-tab', { active: activeImageTab === tab.id }]" @click="activeImageTab = tab.id">
              {{ tab.name }}
            </button>
          </div>
          <!-- 图片网格 -->
          <div class="image-grid">
            <div v-for="image in allImages" :key="image.id" class="image-card">
              <div class="card-image">
                <img :src="image.image" :alt="image.title" class="image-thumbnail" />
              </div>
              <div class="card-content">
                <h3 class="card-title">{{ image.title }}</h3>
              </div>
            </div>
          </div>
          <div class="load-more">
            <button class="load-more-btn">查看更多</button>
          </div>
        </section>
      </div>
    </div>

    <!-- 视频播放弹窗 -->
    <div v-if="showVideoModal" class="video-modal-overlay" @click="closeVideoModal">
      <div class="video-modal" @click.stop>
        <div class="video-modal-header">
          <h3 class="video-modal-title">{{ currentVideo?.name || currentVideo?.title || '视频播放' }}</h3>
          <button class="close-btn" @click="closeVideoModal">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
            </svg>
          </button>
        </div>
        <div class="video-modal-body">
          <DPlayerVideo ref="videoPlayerRef" :video-url="currentVideoUrl" :placeholder-image="currentVideo?.thumbnailUrl || currentVideo?.image"
            :placeholder-text="'点击播放视频'" :title="currentVideo?.name || currentVideo?.title || '视频播放'" @play="handleVideoPlay"
            @pause="handleVideoPause" @ended="handleVideoEnded" @error="handleVideoError" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted } from 'vue'
import DPlayerVideo from '@/components/course/DPlayerVideo.vue'
import { ResourceApi, type FeaturedResource } from '@/api/modules/resource'

// 视频播放弹窗相关状态
const showVideoModal = ref(false)
const currentVideo = ref<any>(null)
const currentVideoUrl = ref('')
const videoPlayerRef = ref<InstanceType<typeof DPlayerVideo>>()

// 视频源配置
const VIDEO_CONFIG = {
  // 本地视频（当前使用）
  LOCAL: '/video/first.mp4',
  // HLS流（服务器准备好后使用）
  HLS: 'http://110.42.96.65:55513/learn/index.m3u8'
}

// 精选视频数据
const featuredVideos = ref<FeaturedResource[]>([])
const loading = ref(false)
const error = ref('')

// 视频筛选标签
const videoTabs = ref([
  { id: 'all', name: '全部' },
  { id: 'educational', name: '中小学教育资源' },
  { id: 'training', name: '师资培训' },
  { id: 'technology', name: '技术资源' },
  { id: 'management', name: '管理资源' }
])

const activeVideoTab = ref('all')

// 全部视频数据
const allVideos = ref([
  {
    id: 1,
    title: '北京工业大学内部资源之一',
    image: '/images/Featured_resources/全部视频1.png',
    videoUrl: VIDEO_CONFIG.LOCAL
  },
  {
    id: 2,
    title: '北京工业大学内部资源之一',
    image: '/images/Featured_resources/全部视频2.png',
    videoUrl: VIDEO_CONFIG.LOCAL
  },
  {
    id: 3,
    title: '西安工业大学内部资源之一',
    image: '/images/Featured_resources/全部视频3.png',
    videoUrl: VIDEO_CONFIG.LOCAL
  },
  {
    id: 4,
    title: '北京工业大学内部资源之一',
    image: '/images/Featured_resources/全部视频4.png',
    videoUrl: VIDEO_CONFIG.LOCAL
  },
  {
    id: 5,
    title: '中国工业大学内部资源之一',
    image: '/images/Featured_resources/全部视频5.png',
    videoUrl: VIDEO_CONFIG.LOCAL
  },
  {
    id: 6,
    title: '西安工业大学内部资源之一',
    image: '/images/Featured_resources/全部视频6.png',
    videoUrl: VIDEO_CONFIG.LOCAL
  },
  {
    id: 7,
    title: '西安工业大学内部资源之一',
    image: '/images/Featured_resources/全部视频7.png',
    videoUrl: VIDEO_CONFIG.LOCAL
  },
  {
    id: 8,
    title: '内蒙古工业大学内部资源之一',
    image: '/images/Featured_resources/全部视频8.png',
    videoUrl: VIDEO_CONFIG.LOCAL
  }
])

// 图片筛选标签
const imageTabs = ref([
  { id: 'all', name: '全部' },
  { id: 'educational', name: '中小学教育资源' },
  { id: 'training', name: '师资培训' },
  { id: 'technology', name: '技术资源' },
  { id: 'management', name: '管理资源' }
])

const activeImageTab = ref('all')

// 全部图片数据
const allImages = ref([
  {
    id: 1,
    title: '中国工业大学内部资源之一',
    image: '/images/Featured_resources/全部图片1.png'
  },
  {
    id: 2,
    title: '西安工业大学内部资源之一',
    image: '/images/Featured_resources/全部图片2.png'
  },
  {
    id: 3,
    title: '西安工业大学内部资源之一',
    image: '/images/Featured_resources/全部图片3.png'
  },
  {
    id: 4,
    title: '内蒙古工业大学内部资源之一',
    image: '/images/Featured_resources/全部图片4.png'
  },
  {
    id: 5,
    title: '北京工业大学内部资源之一',
    image: '/images/Featured_resources/全部图片5.png'
  },
  {
    id: 6,
    title: '北京工业大学内部资源之一',
    image: '/images/Featured_resources/全部图片6.png'
  },
  {
    id: 7,
    title: '西安工业大学内部资源之一',
    image: '/images/Featured_resources/全部图片7.png'
  },
  {
    id: 8,
    title: '内蒙古工业大学内部资源之一',
    image: '/images/Featured_resources/全部图片8.png'
  }
])

// 获取精选资源数据
const fetchFeaturedResources = async () => {
  try {
    loading.value = true
    error.value = ''

    const response = await ResourceApi.getFeaturedResources()
    if (response.code === 200 && response.data?.result) {
      featuredVideos.value = response.data.result
      console.log('✅ 精选资源加载成功:', featuredVideos.value)
    } else {
      throw new Error(response.message || '获取精选资源失败')
    }
  } catch (err: any) {
    error.value = err.message || '获取精选资源失败'
    console.error('❌ 获取精选资源失败:', err)
  } finally {
    loading.value = false
  }
}

// 格式化时长显示
const formatDuration = (seconds: number): string => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60

  if (hours > 0) {
    return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
  } else {
    return `${minutes}:${secs.toString().padStart(2, '0')}`
  }
}

// 解析视频URL（支持多清晰度）
const parseVideoUrls = (fileUrl: string): string[] => {
  if (!fileUrl) return []
  return fileUrl.split(',').map(url => url.trim()).filter(url => url)
}

// 获取最佳视频URL
const getBestVideoUrl = (fileUrl: string): string => {
  console.log('🔍 解析视频URL:', fileUrl)
  const urls = parseVideoUrls(fileUrl)
  console.log('🔍 解析后的URL数组:', urls)

  if (urls.length === 0) {
    console.warn('⚠️ 没有有效的视频URL，使用本地视频作为备用')
    return VIDEO_CONFIG.LOCAL
  }

  // 优先选择720p，如果没有则选择第一个
  const preferredUrl = urls.find(url => url.includes('720p')) || urls[0]
  console.log('✅ 选择的视频URL:', preferredUrl)
  return preferredUrl
}

// 视频播放相关方法
const handleVideoClick = async (video: FeaturedResource) => {
  // 只有视频类型才能播放
  if (video.type !== 0) {
    console.log('这是图片资源，不能播放')
    return
  }

  console.log('🎬 点击视频:', video.name)
  console.log('🔍 视频数据:', {
    id: video.id,
    name: video.name,
    type: video.type,
    fileUrl: video.fileUrl,
    thumbnailUrl: video.thumbnailUrl
  })

  currentVideo.value = video

  // 获取最佳视频URL
  const videoUrl = getBestVideoUrl(video.fileUrl)
  currentVideoUrl.value = videoUrl

  console.log('🎯 最终使用的视频URL:', currentVideoUrl.value)

  showVideoModal.value = true

  // 等待弹窗显示后初始化播放器
  await nextTick()
  if (videoPlayerRef.value) {
    console.log('🔧 初始化播放器，URL:', currentVideoUrl.value)
    await videoPlayerRef.value.initializePlayer(currentVideoUrl.value)
  }
}

const closeVideoModal = () => {
  showVideoModal.value = false
  currentVideo.value = null
  currentVideoUrl.value = ''

  // 销毁播放器实例
  if (videoPlayerRef.value) {
    videoPlayerRef.value.destroy()
  }
}

// 图片加载处理
const handleImageError = (event: Event) => {
  const img = event.target as HTMLImageElement
  console.error('❌ 图片加载失败:', img.src)
  // 设置默认图片
  img.src = '/images/Featured_resources/default-thumbnail.png'
}

const handleImageLoad = (event: Event) => {
  const img = event.target as HTMLImageElement
  console.log('✅ 图片加载成功:', img.src)
}

// 页面初始化
onMounted(() => {
  fetchFeaturedResources()
})

// DPlayer 事件处理方法
const handleVideoPlay = () => {
  console.log('视频开始播放')
}

const handleVideoPause = () => {
  console.log('视频暂停')
}

const handleVideoEnded = () => {
  console.log('视频播放结束')
}

const handleVideoError = (error: any) => {
  console.error('视频播放错误:', error)
  // 可以在这里处理错误，比如自动切换到本地视频
  if (currentVideoUrl.value !== VIDEO_CONFIG.LOCAL) {
    currentVideoUrl.value = VIDEO_CONFIG.LOCAL
  }
}
</script>

<style scoped>
.resources-page {
  min-height: 100vh;
  background: #F5F8FB;
}

/* 横幅图区域 */
.banner-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.banner-container {
  position: relative;
  height: auto;
}

.banner-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 主要内容区域 */
.main-content {
  padding: 0 0 40px 0;
}

.container {
  margin: 0 auto;
  /* padding: 0 20px; */
}

.section-title {
  font-size: 36px;
  color: #333;
  margin: 0 0 30px 0;
  text-align: center;
}

/* 精选视频区域 */
.featured-videos {
  margin-bottom: 80px;
}

/* 加载和错误状态 */
.loading-container,
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #0088D1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-message {
  color: #ff4757;
  font-size: 16px;
  margin-bottom: 16px;
}

.retry-button {
  background: #0088D1;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.retry-button:hover {
  background: #0066A1;
}

.featured-grid {
  margin: 0 auto;
  width: 1420px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.featured-card {
  background: white;
  border-radius: 5px;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
}

.featured-card:hover {
  transform: translateY(-2px);
}

.card-image {
  position: relative;
  height: 245px;
  background: #f5f5f5;
  overflow: hidden;
}

.video-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e0e0e0 0%, #f0f0f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-placeholder::after {
  content: '图片占位';
  color: #999;
  font-size: 14px;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 1;
}

.duration-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #9CAEB8;
  color: white;
  font-size: 16px;
  padding: 2px 8px;
  border-radius: 6px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}

.duration-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.play-button:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translate(-50%, -50%) scale(1.1);
}

.card-content {
  padding: 20px 15px;
}

.card-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 筛选标签 */
.filter-tabs {
  display: flex;
  gap: 20px;
  margin: 0 auto 30px auto;
  justify-content: center;
  align-items: center;
  width: fit-content;
}

.filter-tab {
  padding: 8px 16px;
  border: none;
  background: #F2F2F2;
  color: #878787;
  font-size: 18px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
  white-space: nowrap;
  font-weight: 400;
  border-radius: 30px;
}

.filter-tab:hover {
  color: #4A90E2;
}

.filter-tab.active {
  background: #EEF9FF;
  color: #0088D1;
  font-weight: 500;
}

/* 全部视频区域 */
.all-videos {
  width: 100vw;
  padding: 40px 0;
  background-color: #fff;
  margin-bottom: 80px;
}

.video-grid {
  width: 1420px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.video-card {
  background: white;
  border-radius: 5px;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.video-card .card-image {
  height: 245px;
}

.video-card .play-button {
  width: 40px;
  height: 40px;
}

/* 全部图片区域 */
.all-images {
  margin-bottom: 40px;
}

.image-grid {
  margin: auto;
  width: 1420px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.image-card {
  background: white;
  border-radius: 5px;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
}

.image-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.image-card .card-image {
  height: 240px;
}

/* 查看更多按钮 */
.load-more {
  text-align: center;
}

.load-more-btn {
  padding: 12px 32px;
  background: none;
  border: none;
  color: #292C2E;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.3s;
}

.load-more-btn:hover {
  background: #f8f9fa;
  border-color: #4A90E2;
  color: #4A90E2;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .container {
    padding: 0 16px;
  }

  .featured-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .video-grid,
  .image-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .banner-title {
    font-size: 28px;
  }
}

@media (max-width: 768px) {
  .banner-section {
    height: 300px;
  }

  .banner-title {
    font-size: 24px;
  }

  .main-content {
    padding: 40px 0;
  }

  .featured-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .video-grid,
  .image-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .section-title {
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
  }

  .filter-tabs {
    overflow-x: auto;
    gap: 16px;
    justify-content: flex-start;
    padding: 0 20px;
  }

  .filter-tab {
    padding: 6px 16px;
    font-size: 13px;
    flex-shrink: 0;
  }

  .featured-videos,
  .all-videos {
    margin-bottom: 60px;
  }

  .loading-container,
  .error-container {
    padding: 40px 20px;
  }
}

@media (max-width: 480px) {
  .banner-image {
    max-height: 250px;
    object-fit: cover;
  }

  .container {
    padding: 0 12px;
  }

  .video-grid,
  .image-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .card-image {
    height: 160px;
  }

  .video-card .card-image,
  .image-card .card-image {
    height: 120px;
  }

  .section-title {
    font-size: 18px;
    text-align: center;
  }

  .filter-tabs {
    margin-bottom: 20px;
    gap: 12px;
  }

  .filter-tab {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* 视频播放弹窗样式 */
.video-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.video-modal {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  max-width: 90vw;
  max-height: 90vh;
  width: 1000px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.video-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.video-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
  line-height: 1.4;
}

.close-btn {
  background: none;
  border: none;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  color: #666;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  background: #e5e7eb;
  color: #333;
}

.video-modal-body {
  padding: 0;
  background: #000;
  position: relative;
  height: 60vh;
  min-height: 400px;
}

/* 播放按钮显示样式 */
.play-button {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.featured-card:hover .play-button,
.video-card:hover .play-button {
  opacity: 1;
}

.featured-card .play-button {
  width: 48px;
  height: 48px;
}

.video-card .play-button {
  width: 40px;
  height: 40px;
}

/* 响应式设计 - 弹窗 */
@media (max-width: 768px) {
  .video-modal {
    width: 95vw;
    max-width: none;
  }

  .video-modal-header {
    padding: 16px 20px;
  }

  .video-modal-title {
    font-size: 16px;
  }

  .video-modal-body {
    height: 50vh;
    min-height: 300px;
  }
}

@media (max-width: 480px) {
  .video-modal-overlay {
    padding: 10px;
  }

  .video-modal {
    width: 100%;
  }

  .video-modal-header {
    padding: 12px 16px;
  }

  .video-modal-title {
    font-size: 14px;
  }

  .video-modal-body {
    height: 40vh;
    min-height: 250px;
  }
}
</style>
