<script setup lang="ts">
/**
 * 视频详情：使用 videoUrl 播放；展示元信息与专辑上下集导航。
 */
import { computed, ref } from 'vue'
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import AppNavbar from '@/components/layout/AppNavbar.vue'
import AppPageShell from '@/components/layout/AppPageShell.vue'
import { getVideo, type VideoDetailItem, type VideoItem } from '@/api'
import { resolveMediaUrl } from '@/utils/request'

const videoId = ref('')
const video = ref<VideoDetailItem | null>(null)
const loading = ref(false)

/** 播放地址：优先 videoUrl，兼容旧 url */
const videoSrc = computed(() => {
  const v = video.value
  if (!v) return ''
  return resolveMediaUrl(String(v.videoUrl || v.url || ''))
})

const posterSrc = computed(() => {
  const v = video.value
  if (!v) return ''
  return resolveMediaUrl(String(v.poster || v.cover || ''))
})

const metaLine = computed(() => {
  const v = video.value
  if (!v) return ''
  return [v.categoryName, v.createdAt].filter(Boolean).join(' · ')
})

/** 拉视频详情 */
async function loadDetail() {
  if (!videoId.value) return
  loading.value = true
  try {
    video.value = await getVideo(videoId.value)
  }
  catch (e: unknown) {
    uni.showToast({ title: e instanceof Error ? e.message : '加载失败', icon: 'none' })
  }
  finally {
    loading.value = false
  }
}

onLoad((q) => {
  videoId.value = String(q?.id || '')
  loadDetail()
})

onPullDownRefresh(async () => {
  try {
    await loadDetail()
  }
  finally {
    uni.stopPullDownRefresh()
  }
})

const openVideo = (id: string) => {
  uni.redirectTo({ url: `/subPackages/content/pages/videos/detail?id=${id}` })
}

const openAlbum = (albumId: number) => {
  uni.navigateTo({ url: `/subPackages/content/pages/videos/album?id=${albumId}` })
}

const thumb = (item: VideoItem) => resolveMediaUrl(String(item.cover || item.poster || ''))
</script>

<template>
  <AppPageShell>
    <AppNavbar :title="video?.title || '视频详情'" show-back />
    <view v-if="video" class="page-pad animate-reveal">
      <video
        v-if="videoSrc"
        class="player"
        :src="videoSrc"
        :poster="posterSrc"
        controls
        object-fit="contain"
        show-center-play-btn
      />
      <view v-else class="player placeholder text-art-muted">暂无视频地址</view>

      <view class="hero-eyebrow">Video</view>
      <view class="section-title title">{{ video.title }}</view>
      <text v-if="metaLine" class="meta text-art-muted">{{ metaLine }}</text>
      <text v-if="video.description" class="desc text-art-muted">{{ video.description }}</text>

      <view v-if="video.albumContext" class="album-nav art-card">
        <view class="album-nav-head" @click="openAlbum(video.albumContext.albumId)">
          <text class="font-mono-label text-art-accent">专辑</text>
          <text class="album-name">{{ video.albumContext.albumName }}</text>
          <wd-icon name="arrow-right" size="14px" color="rgb(136,136,136)" />
        </view>
        <scroll-view scroll-x class="nav-scroll" :show-scrollbar="false">
          <view class="nav-row">
            <view
              v-for="item in video.albumContext.prevVideos"
              :key="'p-' + item.id"
              class="nav-thumb"
              @click="openVideo(item.id)"
            >
              <image v-if="thumb(item)" class="nav-img" :src="thumb(item)" mode="aspectFill" />
              <text class="nav-title text-art-muted">上一集</text>
            </view>
            <view class="nav-thumb nav-thumb--current">
              <image v-if="posterSrc" class="nav-img" :src="posterSrc" mode="aspectFill" />
              <text class="nav-title text-art-accent">当前</text>
            </view>
            <view
              v-for="item in video.albumContext.nextVideos"
              :key="'n-' + item.id"
              class="nav-thumb"
              @click="openVideo(item.id)"
            >
              <image v-if="thumb(item)" class="nav-img" :src="thumb(item)" mode="aspectFill" />
              <text class="nav-title text-art-muted">下一集</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <wd-loading v-if="loading" />
  </AppPageShell>
</template>

<style scoped lang="scss">
.page-pad { padding: 24rpx 32rpx 80rpx; }
.player {
  width: 100%;
  height: 420rpx;
  border-radius: 16rpx;
  background: #000;
  margin-bottom: 28rpx;
}
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
}
.title { margin-bottom: 12rpx; }
.meta { display: block; font-size: 24rpx; margin-bottom: 16rpx; }
.desc { display: block; font-size: 28rpx; line-height: 1.7; }
.album-nav { margin-top: 40rpx; padding: 24rpx; }
.album-nav-head {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 20rpx;
}
.album-name { flex: 1; font-size: 28rpx; color: rgb(var(--art-text)); }
.nav-scroll { white-space: nowrap; }
.nav-row { display: inline-flex; gap: 16rpx; }
.nav-thumb {
  width: 200rpx;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}
.nav-thumb--current { opacity: 1; }
.nav-img {
  width: 200rpx;
  height: 112rpx;
  border-radius: 12rpx;
  background: rgba(127, 127, 127, 0.15);
}
.nav-title { font-size: 22rpx; }
</style>
