<template>
  <div class="fullPage">
    <!-- 预加载状态 -->
    <div v-if="isLoading" class="loading-container">
      <LoadingContent>{{ t('loading') }}...</LoadingContent>
    </div>

    <!-- 主要内容 -->
    <div
      v-else
      style="width: 100vw; height: 100vh; overflow-y: auto; position: relative"
      class="scrollY"
    >
      <!-- 页面背景 -->
      <BackgroundLayer :useCanvas="true" :backgroundImages="[imageUrl(getBgImgName('bg'))]" />

      <!-- 页面内容 -->
      <div
        style="
          width: 100vw;
          position: relative;
          z-index: 2;
          margin-top: 110vw;
          display: flex;
          flex-direction: column;
          gap: 2vw;
        "
      >
        <img
          v-smart-img
          :src="imageUrl('helpBt')"
          alt=""
          class="helpBt"
          @click="openPopup('help')"
        />

        <!-- 倒计时 -->
        <div style="padding: 23vw 4vw 3vw">
          <itemCenter :imgUrl="imageUrl('timeBg')" style="" :contentStyle="timeContentStyle">
            <div
              style="
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                direction: ltr;
              "
            >
              <div class="timeBoxItem">
                <div class="timeText" style="">{{ Days }}D</div>
              </div>
              <div class="timeBoxItem">
                <div class="timeText" style="">{{ Hours }}</div>
              </div>
              <div class="timeBoxItem">
                <div class="timeText" style="">{{ Minutes }}</div>
              </div>
              <div class="timeBoxItem">
                <div class="timeText" style="">{{ Seconds }}</div>
              </div>
            </div>
          </itemCenter>
        </div>

        <!-- 模块切换按钮 -->
        <div style="display: flex">
          <!-- 排行榜模块按钮 -->
          <div style="flex: 1" @click="handleBt('rank')">
            <img
              v-show="RankingShow"
              v-smart-img
              :src="imageUrl(getImgName('rankBtActive'))"
              alt=""
              style="width: 100%; display: block"
            />
            <img
              v-show="!RankingShow"
              v-smart-img
              :src="imageUrl(getImgName('rankBt'))"
              alt=""
              style="width: 100%; display: block"
            />
          </div>

          <!-- 奖励模块按钮 -->
          <div style="flex: 1" @click="handleBt('reward')">
            <img
              v-show="!RankingShow"
              v-smart-img
              :src="imageUrl(getImgName('rewardBtActive'))"
              alt=""
              style="width: 100%; display: block"
            />
            <img
              v-show="RankingShow"
              v-smart-img
              :src="imageUrl(getImgName('rewardBt'))"
              alt=""
              style="width: 100%; display: block"
            />
          </div>
        </div>

        <!-- 排行榜模块 -->
        <div
          v-show="rankingShow"
          style="display: flex; flex-direction: column; align-items: center; gap: 2vw"
        >
          <!-- 前三名 -->
          <itemCenter
            :imgUrl="imageUrl('topBg')"
            style="margin-top: 2vw"
            :contentStyle="topRankingContentStyle"
          >
            <!-- 第二名 -->
            <div
              style="
                flex: 1;
                min-width: 0;

                align-self: stretch;
                display: flex;
                align-items: flex-end;
              "
              @click.stop="viewUserInfo(RankingHasTop3[1].userId)"
            >
              <TopUser
                ranking="2"
                :BorderImgUrl="imageUrl('frameTop2')"
                :avatarUrl="RankingHasTop3[1].userAvatar"
                :name="RankingHasTop3[1].userName"
                :distributionValue="RankingHasTop3[1].amount"
                style="width: 100%"
              />
            </div>

            <!-- 第一名 -->
            <div
              style="
                flex: 1.1;
                min-width: 0;

                align-self: stretch;
                display: flex;
                align-items: flex-end;
              "
              @click="viewUserInfo(RankingHasTop3[0].userId)"
            >
              <TopUser
                ranking="1"
                :BorderImgUrl="imageUrl('frameTop1')"
                :avatarUrl="RankingHasTop3[0].userAvatar"
                :name="RankingHasTop3[0].userName"
                :distributionValue="RankingHasTop3[0].amount"
                style="width: 100%"
              />
            </div>

            <!-- 第三名 -->
            <div
              style="
                flex: 1;
                min-width: 0;

                align-self: stretch;
                display: flex;
                align-items: flex-end;
              "
              @click.stop="viewUserInfo(RankingHasTop3[2].userId)"
            >
              <TopUser
                ranking="3"
                :BorderImgUrl="imageUrl('frameTop3')"
                :avatarUrl="RankingHasTop3[2].userAvatar"
                :name="RankingHasTop3[2].userName"
                :distributionValue="RankingHasTop3[2].amount"
                style="width: 100%"
              />
            </div>
          </itemCenter>

          <!-- 第四名开始 -->
          <div
            v-for="(listItem, index) in showRanking"
            :key="listItem.userId"
            style="width: 95vw; display: flex; flex-direction: column; gap: 1vw"
          >
            <!-- 基本信息 -->
            <itemCenter
              style="min-height: 0vw"
              :imgUrl="imageUrl('rankingItmeBg')"
              :contentStyle="`padding: 0 3vw`"
              :lazy="true"
              @click="viewUserInfo(listItem.userId)"
            >
              <!-- 基本信息 -->
              <div
                style="
                  flex: 1;
                  min-width: 0;

                  display: flex;
                  justify-content: space-around;
                  align-items: center;

                  gap: 2vw;
                "
              >
                <!-- 排名 -->
                <div style="display: flex; justify-content: center">
                  <div style="color: #ffe601; font-weight: 500">
                    {{ listItem?.rank }}
                  </div>
                </div>

                <!-- 头像 -->
                <div style="width: 12vw; margin: 0 1vw; position: relative; z-index: 0">
                  <img
                    :src="listItem?.userAvatar || ''"
                    alt=""
                    style="
                      display: block;
                      width: 100%;

                      aspect-ratio: 1/1;
                      border-radius: 50%;
                      object-fit: cover;
                    "
                    @error="handleAvatarImageError"
                  />
                </div>

                <!-- 名称、id -->
                <div style="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1vw">
                  <div
                    style="
                      color: #fff;
                      font-weight: 700;
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    "
                    class="s4-x3"
                  >
                    {{ listItem?.userName }}
                  </div>
                  <div style="color: #ffedc2; font-weight: 500" class="s4-x3">
                    {{ $t('user_id_prefix') }} {{ listItem?.specialAccount || listItem?.account }}
                  </div>
                </div>
              </div>

              <!-- 贡献值 -->
              <div
                style="
                  width: auto;
                  min-width: 0;

                  display: flex;
                  align-items: center;
                "
              >
                <img
                  v-smart-img
                  src="/src/assets/icon/Aslan/coin.png"
                  alt=""
                  style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
                />
                <div style="color: #ffedc2; font-weight: 600" class="Textlittle">
                  {{ listItem?.amount || 0 }}
                </div>
              </div>
            </itemCenter>
          </div>
        </div>

        <!-- 前三奖励模块 -->
        <div
          v-show="rewardsShow"
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4vw;
            padding-bottom: 10vw;
          "
        >
          <div
            v-for="(rewardsTop, index) in rankingRewards"
            style="display: flex; flex-direction: column; align-items: center; gap: 4vw"
          >
            <!-- 排名标题 -->
            <img
              v-smart-img
              :src="imageUrl(`rewardTitleTop${index + 1}`)"
              alt=""
              style="width: 50vw"
            />

            <!-- 奖励列表 -->
            <div
              style="padding: 0 2vw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw"
            >
              <div
                v-for="(reward, index) in rewardsTop.rewards"
                style="
                  height: 100%;
                  align-self: stretch;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  gap: 1vw;
                "
              >
                <!-- 奖品图 -->
                <itemCenter :imgUrl="imageUrl('giftItemBg')" style="width: 100%">
                  <!-- 奖励图片 -->
                  <img
                    :src="reward.cover || ''"
                    alt=""
                    style="
                      display: block;
                      min-width: 0;
                      width: 80%;
                      height: 100%;
                      object-fit: contain;
                    "
                    @error="(e) => handleRewardImageError(e, reward.type)"
                  />
                </itemCenter>

                <!-- 数值 -->
                <div
                  style="
                    width: 80%;
                    height: 5.5vw;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <div style="min-width: 0; font-size: 1.2em; font-weight: 600; color: #fff">
                    {{ formatRewardDisplay(reward.type, reward) }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 我的排名占位 -->
      <div v-show="rankingShow" style="height: 25vw"></div>

      <!-- 我的排名 -->
      <itemCenter
        v-show="rankingShow"
        style="min-height: 22.3vw; position: fixed; bottom: -1vw; z-index: 3"
        :imgUrl="imageUrl('myRankingBg')"
        :contentStyle="`padding: 0 3vw 0`"
      >
        <!-- 基本信息 -->
        <div
          style="
            flex: 1;
            min-width: 0;

            display: flex;
            justify-content: space-around;
            align-items: center;

            gap: 3vw;
          "
        >
          <!-- 排名 -->
          <div style="display: flex; justify-content: center">
            <div style="color: #ffe601; font-weight: 500">
              {{ myRanking.rank || 999 }}
            </div>
          </div>

          <!-- 头像 -->
          <img
            :src="myRanking.userAvatar || ''"
            alt=""
            style="
              display: block;
              width: 15vw;
              aspect-ratio: 1/1;
              border-radius: 50%;
              object-fit: cover;
            "
            @error="handleAvatarImageError"
          />

          <!-- 名称 -->
          <div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
            <div style="display: flex; min-width: 0">
              <div
                style="
                  color: #fff;
                  font-size: 1em;
                  font-weight: 700;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  direction: ltr;
                "
              >
                {{ myRanking.userName }}
              </div>
            </div>
          </div>
        </div>

        <!-- 贡献值 -->
        <div
          style="
            width: auto;
            min-width: 0;

            display: flex;
            align-items: center;
          "
        >
          <div style="display: flex; justify-content: center; align-items: center">
            <img
              v-smart-img
              src="/src/assets/icon/Aslan/coin.png"
              alt=""
              style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
            />
            <div style="color: #ffedc2; font-weight: 600">
              {{ myRanking.amount || 0 }}
            </div>
          </div>
        </div>
      </itemCenter>

      <!-- 弹窗遮罩层 -->
      <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
        <!-- 居中弹窗 -->
        <div
          style="
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
          "
          @click="closedPopup"
        >
          <itemCenter
            v-if="helpShow"
            :imgUrl="imageUrl(getImgName('helpInfo'))"
            :contentStyle="``"
            @click.stop
          >
            <!-- 关闭按钮 -->
            <img
              v-smart-img
              :src="imageUrl('closeBt')"
              alt=""
              class="close-btn"
              @click="closedPopup"
            />
          </itemCenter>
        </div>
      </maskLayer>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { connectToApp } from '@/utils/appConnector.js'
import { useI18n } from 'vue-i18n'
import { viewUserInfo } from '@/utils/appBridge.js'
import { useLangStore } from '@/stores/lang'
import { getPngUrl } from '@/config/imagePaths.js'
import { preloadImages } from '@/utils/image/imagePreloader.js'
import { handleAvatarImageError, handleRewardImageError } from '@/utils/image/imageHandler.js'
import { formatRewardDisplay } from '@/utils/rewardFormatter.js'

import { getThisWeekRewardsAndGifts, getRankingListAndMyRanking } from '@/api/activity.js'

import TopUser from './components/topUser.vue'
import BackgroundLayer from '@/components/BackgroundLayer.vue'
import itemCenter from '@/components/itemCenter.vue'
import maskLayer from '@/components/MaskLayer.vue'

// 预加载状态
const isLoading = ref(true)

const { t } = useI18n()

const langStore = useLangStore()
// 当前语言类型
const currentLangType = computed(() => {
  return langStore.selectedLang?.type || 'en'
})

// 获取 OSS 图片 URL
const imageUrl = (filename) => getPngUrl('Activities/PokerAce/', filename)

// 根据语言获取图片名
const getBgImgName = (filename) => {
  return currentLangType.value === 'ar' ? `${filename}_ar` : filename
}
// 根据语言获取图片名
const getImgName = (filename) => {
  return currentLangType.value === 'en' ? filename : `${filename}_${currentLangType.value}`
}

const activityId = ref('2047505567719723009') // 活动ID
const activityType = ref(17) // 活动类型
const cycleKey = ref('20260424') // 周期键
// 测试用参数
// const activityId = ref('2001207026499137537') // 活动ID
// const activityType = ref(10) // 活动类型

const topRankingContentStyle = computed(() => {
  const baseStyle = 'gap:8vw;padding: 0 9vw 26vw;'
  return currentLangType.value === 'ar' ? `${baseStyle}flex-direction:row-reverse` : baseStyle
})

const timeContentStyle = computed(() => {
  return currentLangType.value === 'ar'
    ? 'width:96vw;left:auto;right:50%;transform: translateX(50%);'
    : 'width:96vw;left:50%;transform: translateX(-50%);'
})

// 弹窗展示
const helpShow = ref(false) // 帮助
const maskLayerShow = computed(() => {
  return helpShow.value
})

// 模块切换展示
const rankingShow = ref(true)
const rewardsShow = ref(false)

const handleBt = (type) => {
  rankingShow.value = type === 'rank'
  rewardsShow.value = type === 'reward'
}

const RankingShow = computed(() => rankingShow.value)

// 排行榜数据
const Ranking = ref([])
const myRanking = ref({})
const rankingRewards = ref([])

const normalizeRankingUser = (user = {}) => {
  return {
    ...user,
    userId: user.userId || user.uid || '',
    userAvatar: user.userAvatar || user.avatar || '',
    userName: user.userName || user.nickname || '',
    amount: user.amount ?? user.quantity ?? 0,
    rank: user.rank ?? user.ranking ?? '',
    account: user.account || '',
    specialAccount: user.specialAccount || '',
  }
}

const RankingHasTop3 = computed(() => {
  const top3 = Ranking.value.filter((_, index) => index < 3)
  if (top3.length < 3) {
    top3.push(
      ...Array.from({ length: 3 - top3.length }, () => ({
        userAvatar: '',
        userName: '',
        account: '',
        specialAccount: '',
        amount: '',
      })),
    )
  }
  return top3
})

const showRanking = computed(() => {
  return Ranking.value.filter((_, index) => index >= 3)
})

// 倒计时
const Days = ref(0)
const Hours = ref('00')
const Minutes = ref('00')
const Seconds = ref('00')
let countdownTimer = null

const ACTIVITY_END_TIME = new Date(2026, 4, 1, 5, 0, 0).getTime()

const formatTime = (value) => String(value).padStart(2, '0')

const calculateCountdown = () => {
  const diff = ACTIVITY_END_TIME - Date.now()

  if (diff <= 0) {
    Days.value = 0
    Hours.value = '00'
    Minutes.value = '00'
    Seconds.value = '00'

    if (countdownTimer) {
      clearInterval(countdownTimer)
      countdownTimer = null
    }
    return
  }

  const totalSeconds = Math.floor(diff / 1000)
  Days.value = Math.floor(totalSeconds / (24 * 3600))
  Hours.value = formatTime(Math.floor((totalSeconds % (24 * 3600)) / 3600))
  Minutes.value = formatTime(Math.floor((totalSeconds % 3600) / 60))
  Seconds.value = formatTime(totalSeconds % 60)
}

const startCountdown = () => {
  calculateCountdown()
  countdownTimer = setInterval(calculateCountdown, 1000)
}

// 打开弹窗
const openPopup = (type) => {
  closedPopup() // 先关闭所有弹窗
  switch (type) {
    case 'help':
      helpShow.value = true
      break
    default:
      break
  }
}

// 关闭弹窗
const closedPopup = () => {
  helpShow.value = false
}

// 获取排行榜
const getRanking = async () => {
  const data = {
    activityType: activityType.value,
    cycleKey: cycleKey.value,
  }

  const resRanking = await getRankingListAndMyRanking(data)
  if (resRanking.status && resRanking.body) {
    myRanking.value = normalizeRankingUser(resRanking.body?.currentUserRank || {})
    Ranking.value = (resRanking.body?.rankingList || []).map((item) => normalizeRankingUser(item))
  } else {
    myRanking.value = {}
    Ranking.value = []
  }
}

// 获取奖励列表
const getGameReward = async () => {
  const resRewardsAndGifts = await getThisWeekRewardsAndGifts(activityId.value)
  if (resRewardsAndGifts.status && resRewardsAndGifts.body) {
    rankingRewards.value = (resRewardsAndGifts.body.butOneRewards || []).slice(0, 3)
  } else {
    rankingRewards.value = []
  }
}

// 刷新页面数据
const initData = async () => {
  await Promise.all([getRanking(), getGameReward()])
}

// 预加载关键图片
const preloadCriticalImages = async () => {
  const criticalImages = [
    imageUrl(getBgImgName('bg')),
    imageUrl('helpBt'),
    imageUrl('timeBg'),
    imageUrl(getImgName('rankBtActive')),
    imageUrl(getImgName('rankBt')),
    imageUrl(getImgName('rewardBtActive')),
    imageUrl(getImgName('rewardBt')),
    imageUrl('topBg'),
    imageUrl('frameTop1'),
    imageUrl('frameTop2'),
    imageUrl('frameTop3'),
    imageUrl('rankingItmeBg'),
    imageUrl('rewardTitleTop1'),
    imageUrl('rewardTitleTop2'),
    imageUrl('rewardTitleTop3'),
    imageUrl('giftItemBg'),
    imageUrl('myRankingBg'),
    imageUrl('closeBt'),
    imageUrl(getImgName('helpInfo')),
  ]

  await preloadImages(criticalImages)
}

// 完成预加载
const completePreloading = async () => {
  try {
    // 执行所有初始化操作
    await Promise.all([initData(), preloadCriticalImages()])
  } catch (error) {
    console.error('预加载过程中发生错误:', error)
  } finally {
    // 无论成功或失败都结束加载状态
    isLoading.value = false
  }
}

// 使用工具函数连接 APP
const connectToAppHandler = async () => {
  await connectToApp(() => {
    // 连接成功回调
    completePreloading() // 完成预加载
  })
}

onMounted(async () => {
  handleBt('rank')
  startCountdown()
  await connectToAppHandler()
})

onUnmounted(() => {
  if (countdownTimer) {
    clearInterval(countdownTimer)
    countdownTimer = null
  }
})
</script>

<style lang="scss" scoped>
* {
  color: #fff;
}

.fullPage {
  position: relative;
  background: #000000;
}

.bg {
  width: 100vw;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.background-overlay {
  position: absolute;
  inset: 236vw 0 0;
  background-image: var(--bg2-url);
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
  z-index: 0;
}

/* 加载动画样式 */
.loading-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #666;
}

.scrollY::-webkit-scrollbar {
  display: none;
}

[dir='rtl'] .flipImg {
  transform: scaleX(-1);
}

.helpBt {
  display: block;
  width: 10vw;
  object-fit: cover;
  position: absolute;
  z-index: 3;
  top: 0;
  right: 3vw;
}

[dir='rtl'] .helpBt {
  right: unset;
  left: 3vw;
}

.timeBoxItem {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.timeText {
  color: #fff;
  font-weight: 590;
  font-size: 1.8em;
  font-style: italic;
}

.close-btn {
  display: block;
  width: 8vw;
  position: absolute;
  z-index: 9;

  top: 14vw;
  right: 10vw;
}

[dir='rtl'] .close-btn {
  left: 10vw;
  right: auto;
}

@media screen and (max-width: 360px) {
  * {
    font-size: 10px;
  }
}

@media screen and (min-width: 360px) {
  * {
    font-size: 12px;
  }
}

@media screen and (min-width: 768px) {
  * {
    font-size: 24px;
  }
}

@media screen and (min-width: 1024px) {
  * {
    font-size: 32px;
  }
}
</style>
