<template>
  <div class="relative">
    <BackButton />
    <!-- 卡片1: 视频播放器区域 -->
    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
      <el-skeleton :rows="5" animated :loading="loading" :throttle="{ leading: 0, trailing: 300 }">
        <template #template>
          <!-- 标题区 -->
          <div class="p-4 pb-3">
            <div class="flex items-center justify-between">
              <el-skeleton-item variant="text" style="width: 60%; height: 24px" />
              <el-skeleton-item variant="button" style="width: 32px; height: 32px" />
            </div>

            <!-- 时间 / 播放 / 地区 -->
            <div class="flex gap-2 mt-3">
              <el-skeleton-item variant="text" style="width: 160px" />
              <el-skeleton-item variant="text" style="width: 80px" />
              <el-skeleton-item variant="text" style="width: 60px" />
            </div>
          </div>

          <!-- 视频区域 16:9 -->
          <div class="w-full aspect-video px-4">
            <el-skeleton-item variant="image" style="width: 100%; height: 100%" />
          </div>

          <!-- UP主 + 操作区 -->
          <div class="bg-white rounded-xl shadow-sm p-4">
            <div class="flex items-center justify-between flex-wrap gap-4">
              <!-- 左侧 UP主 -->
              <div class="flex items-center gap-3">
                <el-skeleton-item variant="circle" style="width: 48px; height: 48px" />
                <div>
                  <el-skeleton-item variant="text" style="width: 120px; height: 16px" />
                </div>
              </div>

              <!-- 右侧按钮区 -->
              <div class="flex items-center gap-4">
                <!-- 点赞 -->
                <div class="flex items-center gap-2">
                  <el-skeleton-item variant="circle" style="width: 24px; height: 24px" />
                  <el-skeleton-item variant="text" style="width: 24px" />
                </div>

                <!-- 收藏 -->
                <div class="flex items-center gap-2">
                  <el-skeleton-item variant="circle" style="width: 24px; height: 24px" />
                  <el-skeleton-item variant="text" style="width: 24px" />
                </div>

                <!-- 评论 -->
                <div class="flex items-center gap-2">
                  <el-skeleton-item variant="circle" style="width: 24px; height: 24px" />
                  <el-skeleton-item variant="text" style="width: 24px" />
                </div>

                <!-- 打赏按钮 -->
                <el-skeleton-item variant="button" style="width: 100px; height: 36px" />

                <!-- 更多 -->
                <el-skeleton-item variant="circle" style="width: 32px; height: 32px" />
              </div>
            </div>
          </div>
        </template>
        <template #default>
          <!-- 标题区 -->
          <div class="p-4 pb-3">
            <h1
              class="text-xl md:text-2xl font-medium text-gray-900 mb-2 leading-snug flex items-center justify-between"
            >
              {{ videoDetail?.title }}
              <ActionMore :articleDetail="videoDetail" />
            </h1>
            <div class="flex items-center text-14px text-gray-500 gap-2 flex-wrap">
              <span class="flex items-center">
                {{ dayjs(videoDetail?.createTime * 1000).format('YYYY-MM-DD HH:mm') }}
              </span>
              ·
              <span class="flex items-center">
                {{ formatNumber(videoDetail?.playCount) }}播放
              </span>
              ·
              <span class="flex items-center">
                {{ videoDetail?.region }}
              </span>
            </div>
          </div>

          <!-- 视频 16/ 9 -->
          <div class="mx-4">
            <video
              ref="videoRef"
              :src="videoDetail?.videoUrl"
              class="aspect-video w-100%"
              controls
              @play="handlePlay"
              @pause="handlePause"
            ></video>
          </div>
          <div class="bg-white rounded-xl shadow-sm p-4">
            <div class="flex items-center justify-between flex-wrap gap-4">
              <!-- 左侧：UP主信息 -->
              <div class="flex items-center gap-3">
                <img
                  @click="
                    jumpToUserHomePage({
                      userId: videoDetail?.createUserId,
                      type: ArticleTypeEnum.VIDEO,
                    })
                  "
                  :src="videoDetail?.createUserAvatar"
                  class="w-12 h-12 rounded-full object-cover cursor-pointer hover:opacity-80 transition-opacity ring-2 ring-gray-100"
                />
                <div class="flex flex-col">
                  <h3
                    class="text-base font-semibold text-gray-900 cursor-pointer hover:text-blue-500 transition-colors"
                  >
                    {{ videoDetail?.createUserName }}
                  </h3>
                </div>
              </div>

              <!-- 右侧：互动按钮 -->
              <div class="flex items-center">
                <!-- 浏览量 -->
                <el-button
                  text
                  class="flex items-center gap-2 transition-colors hover:text-blue-500"
                  @click="handleLike(videoDetail)"
                >
                  <el-icon size="20">
                    <svg-icon :name="videoDetail?.hasPraised ? 'praise_fill' : 'praise'"></svg-icon>
                  </el-icon>
                  <span class="text-base" :class="{ 'text-blue-500': videoDetail?.hasPraised }">{{
                    videoDetail?.praiseCount || 0
                  }}</span>
                </el-button>

                <!-- 收藏 -->
                <el-button
                  text
                  class="flex items-center gap-2 transition-colors hover:text-blue-500"
                  @click="handleCollect(videoDetail)"
                >
                  <el-icon size="20">
                    <svg-icon
                      :name="videoDetail?.hasCollect ? 'collection_fill' : 'collection'"
                    ></svg-icon>
                  </el-icon>
                  <span class="text-base" :class="{ 'text-blue-500': videoDetail?.hasCollect }">{{
                    videoDetail?.collectionCount || 0
                  }}</span>
                </el-button>

                <!-- 评论 -->
                <el-button
                  text
                  class="flex items-center gap-2 transition-colors hover:text-blue-500"
                  @click="() => commentRef?.scrollToCommentBox?.()"
                >
                  <el-icon size="20">
                    <svg-icon name="comment"></svg-icon>
                  </el-icon>
                  <span class="text-base">{{ videoDetail?.replyCount || 0 }}</span>
                </el-button>
                <!-- 打赏 -->
                <el-button
                  text
                  class="reward-button flex items-center gap-2 px-4 py-2 rounded-lg bg-white/40 hover:bg-white/70 border border-blue-100/30 hover:border-blue-200/50 transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-blue-100/50"
                  @click="handleReward"
                >
                  <!-- 金币容器 - 带多重动画 -->
                  <div class="coin-wrapper relative">
                    <!-- 改进版金币图标 - 立体金币设计 -->
                    <svg class="coin-icon" viewBox="0 0 24 24" width="18" height="18">
                      <defs>
                        <!-- 金色渐变 -->
                        <linearGradient id="coinGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                          <stop offset="0%" style="stop-color: #fef3c7" />
                          <stop offset="30%" style="stop-color: #fde68a" />
                          <stop offset="70%" style="stop-color: #fcd34d" />
                          <stop offset="100%" style="stop-color: #f59e0b" />
                        </linearGradient>

                        <!-- 高光效果 -->
                        <radialGradient id="highlight" cx="35%" cy="35%">
                          <stop offset="0%" style="stop-color: #ffffff; stop-opacity: 0.9" />
                          <stop offset="50%" style="stop-color: #ffffff; stop-opacity: 0.3" />
                          <stop offset="100%" style="stop-color: #ffffff; stop-opacity: 0" />
                        </radialGradient>
                      </defs>

                      <!-- 外圈装饰 -->
                      <circle
                        cx="12"
                        cy="12"
                        r="10.5"
                        fill="none"
                        stroke="#f59e0b"
                        stroke-width="0.8"
                        opacity="0.4"
                      />

                      <!-- 金币主体 -->
                      <circle
                        cx="12"
                        cy="12"
                        r="9.5"
                        fill="url(#coinGradient)"
                        stroke="#d97706"
                        stroke-width="1.5"
                      />

                      <!-- 内圈装饰线 -->
                      <circle
                        cx="12"
                        cy="12"
                        r="8"
                        fill="none"
                        stroke="#fbbf24"
                        stroke-width="0.5"
                        opacity="0.6"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="6.5"
                        fill="none"
                        stroke="#f59e0b"
                        stroke-width="0.3"
                        opacity="0.5"
                      />

                      <!-- 星形图案（代替¥符号） -->
                      <path
                        d="M12 5 L13 9 L17 9 L14 11.5 L15 15 L12 13 L9 15 L10 11.5 L7 9 L11 9 Z"
                        fill="#d97706"
                        opacity="0.8"
                      />

                      <!-- 高光 -->
                      <circle cx="12" cy="12" r="9.5" fill="url(#highlight)" opacity="0.5" />
                    </svg>

                    <!-- 悬停时的光晕效果 -->
                    <div class="coin-glow absolute inset-0 rounded-full"></div>

                    <!-- 闪光粒子效果 -->
                    <div class="sparkle sparkle-1"></div>
                    <div class="sparkle sparkle-2"></div>
                    <div class="sparkle sparkle-3"></div>
                  </div>

                  <span class="ml-2 reward-number font-medium text-gray-700">{{
                    videoDetail?.rewardNum
                  }}</span>
                  <span class="ml-1 reward-text text-sm text-gray-600">打赏</span>
                </el-button>

                <!-- 更多 -->
                <button
                  class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-50 rounded-lg transition-all"
                >
                  <i class="i-carbon-overflow-menu-horizontal text-2xl"></i>
                </button>
              </div>
            </div>
          </div>
        </template>
      </el-skeleton>
    </div>

    <!-- 卡片3: 简介与标签 -->
    <div class="bg-white rounded-lg shadow-sm p-5 mt-5">
      <h2 class="text-lg font-semibold text-gray-900 mb-3">视频简介</h2>

      <!-- 简介文本 -->
      <div class="text-base text-gray-700 leading-7 whitespace-pre-wrap mb-1">
        {{ videoDetail?.content }}
      </div>

      <!-- 标签 -->
      <div
        v-if="videoDetail?.tagNameList?.length"
        class="flex flex-wrap gap-2 mt-4 pt-1 border-t border-gray-100"
      >
        <span
          v-for="tag in videoDetail?.tagNameList"
          :key="tag"
          class="px-3 py-1 text-sm bg-gradient-to-r from-cyan-100 to-blue-100 text-cyan-600 rounded-full hover:shadow-md transition-all cursor-pointer"
        >
          # {{ tag }}
        </span>
      </div>
    </div>

    <Comment
      ref="commentRef"
      :id="videoId"
      v-model:total="videoDetail.replyCount"
      :type="ArticleTypeEnum.VIDEO"
      class="mt-5"
    />
    <RewardDialog ref="rewardDialogRef" v-model:rewardNum="videoDetail.rewardNum" />
  </div>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'

import {
  getArticleDetail,
  addOrCanceArticlelCollect,
  addOrCanceArticlelLike,
  addVideoPlayCount,
} from '@/api'
import type { ArticleItemDto } from '@/api/article/types'

import Comment from '@/components/common/Comment/index.vue'
import RewardDialog from './components/rewardDialog.vue'
import ActionMore from '@/components/common/ActionMore/index.vue'
import BackButton from '@/components/common/BackButton/index.vue'
import { useNavigation } from '@/hooks'
import { ArticleTypeEnum } from '@/constants'
import { push } from 'notivue'
const route = useRoute()
const videoId = Number(route.params.id)
const { jumpToUserHomePage } = useNavigation()
// 视频详情
const videoDetail = ref({} as ArticleItemDto)
const loading = computed(() => !videoDetail.value.title)

const commentRef = useTemplateRef<InstanceType<typeof Comment> | null>('commentRef')
const rewardDialogRef = useTemplateRef<InstanceType<typeof RewardDialog> | null>('rewardDialogRef')

// 格式化数字
const formatNumber = (num: number) => {
  if (!num) return 0
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + '万'
  }
  return num
}

// 播放 记录播放量 + 1
const handlePlay = async () => {
  await addVideoPlayCount(videoDetail.value.id)
  videoDetail.value.playCount = videoDetail.value.playCount + 1
}

const handlePause = () => {
  // 记录暂停
}

// 点赞
const handleLike = async (item: ArticleItemDto) => {
  await addOrCanceArticlelLike(item.id)
  item.hasPraised = !item.hasPraised
  item.praiseCount = item.hasPraised ? item.praiseCount + 1 : item.praiseCount - 1
  push.success(item.hasPraised ? '点赞成功' : '取消点赞')
}

// 收藏
const handleCollect = async (item: ArticleItemDto) => {
  await addOrCanceArticlelCollect(item.id)
  item.hasCollect = !item.hasCollect
  item.collectionCount = item.hasCollect ? item.collectionCount + 1 : item.collectionCount - 1
  push.success(item.hasCollect ? '收藏成功' : '取消收藏')
}

// 打赏
const handleReward = () => {
  rewardDialogRef.value?.open(videoDetail.value.id)
}

onMounted(async () => {
  const { data } = await getArticleDetail(videoId)
  console.log(data)
  videoDetail.value = data
})
</script>
<style scoped>
/* 按钮整体动画 */
/* 保持之前的所有动画样式不变 */
.reward-button {
  position: relative;
  overflow: visible;
}

.coin-wrapper {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.coin-icon {
  font-size: 88px;
  animation: coin-float 2.5s ease-in-out infinite;
  transition: all 0.3s ease;
}

.reward-button:hover .coin-icon {
  animation:
    coin-spin 0.6s ease-in-out,
    coin-float 2.5s ease-in-out infinite;
}

@keyframes coin-float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-3px) rotate(5deg);
  }
}

@keyframes coin-spin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.coin-glow {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.4) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s ease;
}

.reward-button:hover .coin-glow {
  opacity: 1;
  transform: scale(1.5);
  animation: glow-pulse 1.5s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.8);
  }
}

.sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fbbf24;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.reward-button:hover .sparkle {
  animation: sparkle-burst 0.8s ease-out;
}

.sparkle-1 {
  top: -2px;
  left: 50%;
  animation-delay: 0s;
  --tx: 0;
  --ty: -10px;
}

.sparkle-2 {
  top: 50%;
  right: -2px;
  animation-delay: 0.15s;
  --tx: 10px;
  --ty: 0;
}

.sparkle-3 {
  bottom: -2px;
  left: 50%;
  animation-delay: 0.3s;
  --tx: 0;
  --ty: 10px;
}

@keyframes sparkle-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) scale(1);
  }
}

.reward-number {
  transition: all 0.2s ease;
}

.reward-button:hover .reward-number {
  animation: number-bounce 0.5s ease;
}

@keyframes number-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-3px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-2px);
  }
}

.reward-text {
  transition: all 0.3s ease;
}

.reward-button:hover .reward-text {
  color: #3b82f6;
  transform: translateX(2px);
}

.reward-button:active {
  transform: scale(0.95);
}

.reward-button:active .coin-icon {
  animation: coin-click 0.3s ease;
}

@keyframes coin-click {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.85) rotate(15deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
</style>
