<template>
  <div class="splash-container" :class="{ 'fade-out': isExiting }">
    <!-- 背景视频 -->
    <video
        v-show="!use_image_bg"
        ref="videoPlayer"
        class="background-video"
        autoplay
        muted
        loop
        playsinline
        webkit-playsinline
        preload="auto"
        @error="on_video_error"
        @stalled="on_video_error"
        @abort="on_video_error"
        @emptied="on_video_error"
        @loadeddata="on_video_loaded"
    >
        <source :src="videoUrl" type="video/mp4" />
    </video>

    <!-- 图片降级背景（视频不可用时显示） -->
    <div
        v-if="use_image_bg"
        class="background-image"
        :style="{ backgroundImage: 'url(' + imgUrl + ')' }"
    ></div>

    <!-- 黑色半透明蒙板 -->
    <div class="overlay"></div>

    <!-- 初始加载指示器 - 水滴波纹效果 -->
    <div class="initial-loader">
      <div class="water-drop"></div>
      <div class="ripple ripple-1"></div>
      <div class="ripple ripple-2"></div>
      <div class="ripple ripple-3"></div>
      <div class="ripple ripple-4"></div>
    </div>

    <!-- 内容层 -->
    <div class="splash-content">
      <!-- 左上角Logo -->
      <div class="logo-section animate-fade-in-up">
        <img src="https://cdn.ipadbiz.cn/stdj/icon/%E5%90%AF%E5%8A%A8%E9%A1%B5logo@2x.png" alt="三坛大戒" class="logo-image" />
      </div>

      <!-- 底部按钮 -->
      <div class="bottom-section animate-fade-in-up-delay">
        <div class="enter-button" @click="enterApp">
          <img src="https://cdn.ipadbiz.cn/stdj/icon/%E8%BF%9B%E5%85%A5%E4%BC%A0%E6%88%92%E7%8E%B0%E5%9C%BA@2x.png" alt="进入传戒现场" class="enter-image" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const isExiting = ref(false)
const videoPlayer = ref(null)
const use_image_bg = ref(false)
const is_video_ready = ref(false)

// TODO: 视频配置
const videoUrl = ref('https://cdn.ipadbiz.cn/stdj/video/sample-10s.mp4')
const imgUrl = ref('https://cdn.ipadbiz.cn/stdj/images/%E5%90%AF%E5%8A%A8%E9%A1%B5%E6%B5%B7%E6%8A%A5%E8%83%8C%E6%99%AF@2x.png')

// 进入应用函数
/**
 * 进入应用
 * 说明：触发淡出动画后跳转到首页
 */
const enterApp = () => {
    isExiting.value = true
    // 等待淡出动画完成后跳转
    setTimeout(() => {
        router.push('/home')
    }, 500)
}

onMounted(() => {
    const video = videoPlayer.value
    if (video) {
        // 尝试播放视频
        const playPromise = video.play()

        if (playPromise !== undefined) {
            playPromise.catch(error => {
                // 自动播放被阻止：在微信环境下尝试通过 WeixinJSBridge 播放
                // 说明：避免控制台输出引起诊断问题
                void error
                const ua = navigator.userAgent.toLowerCase()
                if (ua.match(/MicroMessenger/i) && typeof window.WeixinJSBridge !== 'undefined') {
                    window.WeixinJSBridge.invoke('getNetworkType', {}, () => {
                        video.play()
                    })
                }
                // 若短时间内仍无法播放，降级为图片背景，避免黑屏
                setTimeout(() => {
                    if (!is_video_ready.value) {
                        enable_image_fallback()
                    }
                }, 1200)
            })
        }

        // 监听微信JSBridgeReady事件
        document.addEventListener('WeixinJSBridgeReady', () => {
            video.play()
        }, false)
    }

    // 兜底：在一定时间内仍未加载完成则切换到图片背景
    // setTimeout(() => {
    //     if (!is_video_ready.value) {
    //         enable_image_fallback()
    //     }
    // }, 5000)
})

/**
 * 视频加载成功回调
 * 说明：标记视频已可播放，用于取消降级处理
 */
const on_video_loaded = () => {
    is_video_ready.value = true
}

/**
 * 视频错误回调
 * 说明：视频加载/播放失败时触发图片降级，避免黑屏
 * @param {Event} e 事件对象
 */
const on_video_error = (e) => {
    void e
    enable_image_fallback()
}

/**
 * 启用图片降级背景
 * 说明：切换到全屏图片背景，保证用户视觉不出现黑屏
 */
const enable_image_fallback = () => {
    use_image_bg.value = true
}
</script>

<style scoped lang="less">
.splash-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
  transition: opacity 0.5s ease-out;
}

.splash-container.fade-out {
  opacity: 0;
}

/* 背景视频 */
.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    animation: backgroundFadeIn 0.8s ease-out forwards;
}

/* 图片降级背景 */
.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: backgroundFadeIn 0.8s ease-out forwards;
}

/* 黑色半透明蒙板 */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 2;
  opacity: 0;
  animation: backgroundFadeIn 0.8s ease-out 0.2s forwards;
}

/* 初始加载指示器 - 水滴波纹效果 */
.initial-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 12.5rem;
  height: 12.5rem;
  opacity: 1;
  animation: loaderFadeOut 1s ease-out 2.5s forwards;
}

/* 水滴 */
.water-drop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  background: radial-gradient(circle, #fbbf24 0%, #f59e0b 70%, #d97706 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0.625rem rgba(251, 191, 36, 0.8),
    0 0 1.25rem rgba(251, 191, 36, 0.4),
    0 0 1.875rem rgba(251, 191, 36, 0.2);
  animation: waterDrop 0.6s ease-out;
}

/* 波纹圈 */
.ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 0.125rem solid rgba(251, 191, 36, 0.6);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.ripple-1 {
  width: 1.25rem;
  height: 1.25rem;
  animation: rippleExpand 2s ease-out 0.2s infinite;
}

.ripple-2 {
  width: 2.5rem;
  height: 2.5rem;
  animation: rippleExpand 2s ease-out 0.4s infinite;
}

.ripple-3 {
  width: 3.75rem;
  height: 3.75rem;
  animation: rippleExpand 2s ease-out 0.6s infinite;
}

.ripple-4 {
  width: 5rem;
  height: 5rem;
  animation: rippleExpand 2s ease-out 0.8s infinite;
}

/* 内容层 */
.splash-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 3;
  padding: 2rem;
}

/* 左上角Logo */
.logo-section {
  align-self: flex-start;
  margin-top: 2.5rem;
  margin-left: 2.5rem;
}

.logo-image {
  width: auto;
  height: 10rem;
  max-width: 15.625rem;
  object-fit: contain;
  display: block;
}

/* 底部按钮区域 */
.bottom-section {
  align-self: center;
  margin-bottom: 3rem;
}

.enter-button {
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.enter-button:hover {
  transform: scale(1.05);
}

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

.enter-image {
  width: auto;
  height: 5rem;
  max-width: 25rem;
  object-fit: contain;
  display: block;
}

/* 动画 */
@keyframes waterDrop {
  0% {
    transform: translate(-50%, -5rem) scale(0.5);
    opacity: 0.8;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes rippleExpand {
  0% {
    width: 0;
    height: 0;
    opacity: 0.8;
    border-width: 0.1875rem;
  }
  50% {
    opacity: 0.4;
    border-width: 0.125rem;
  }
  100% {
    width: 10rem;
    height: 10rem;
    opacity: 0;
    border-width: 0.0625rem;
  }
}

@keyframes loaderFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes backgroundFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(1.875rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out 1.5s both;
}

.animate-fade-in-up-delay {
  animation: fadeInUp 0.6s ease-out 1.8s both;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .splash-content {
    padding: 1.5rem;
  }

  .logo-image {
    height: 14rem;
  }

  .enter-image {
    height: 4rem;
  }

  .bottom-section {
    margin-bottom: 2rem;
  }
}

@media (max-width: 480px) {
  .splash-content {
    padding: 1rem;
  }

  .logo-image {
    height: 13rem;
  }

  .enter-image {
    height: 3.5rem;
  }
}
</style>