<template>
  <div class="fullPage">
    <GeneralHeader :title="t('cp_reward')" :isHomePage="true" color="black" class="page-header" />

    <div v-if="isLoading" class="loading-container">
      <LoadingSpinner />
      <p>{{ t('loading') }}...</p>
    </div>

    <div v-show="!isLoading" class="reward-content">
      <img
        v-for="imageName in rewardImages"
        :key="imageName"
        v-smart-img
        :src="imageUrl(getImgName(imageName))"
        alt=""
        class="reward-image"
      />
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { connectToApp } from '@/utils/appConnector.js'
import { useI18n } from 'vue-i18n'
import { useLangStore } from '@/stores/lang'
import { getWebpUrl } from '@/config/imagePaths.js'
import { preloadImages } from '@/utils/image/imagePreloader.js'
import GeneralHeader from '@/components/GeneralHeader.vue'

const isLoading = ref(true)
const rewardImages = ['CP1', 'CP2', 'CP3']

const { t } = useI18n()
const langStore = useLangStore()

const currentLangType = computed(() => {
  return langStore.selectedLang?.type || 'en'
})

const imageUrl = (filename) => getWebpUrl('Activities/CPReward/', filename)

const getImgName = (filename) => {
  return currentLangType.value === 'en' ? filename : `${filename}_${currentLangType.value}`
}

const preloadCriticalImages = async () => {
  await preloadImages(rewardImages.map((imageName) => imageUrl(getImgName(imageName))))
}

const completePreloading = async () => {
  try {
    await preloadCriticalImages()
  } catch (error) {
    console.error('Image preloading failed:', error)
  } finally {
    isLoading.value = false
  }
}

const connectToAppHandler = async () => {
  await connectToApp(() => {
    completePreloading()
  })
}

onMounted(() => {
  connectToAppHandler()
})
</script>

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

.fullPage {
  width: 100vw;
  height: 100vh;
  background-image: url(../../assets/images/Azizi/secondBg.png);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

.page-header {
  position: relative;
  z-index: 999;
  background: transparent;
}

.loading-container {
  width: 100vw;
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #666;
  overflow: hidden;
  position: relative;
}

.reward-content {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.reward-content::-webkit-scrollbar {
  display: none;
}

.reward-image {
  display: block;
  width: 100vw;
  object-fit: cover;
}

@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>
