<template>
  <header class="header">
    <BlocksStoveGnb class="min-h-[48px]" />
  </header>
  <section class="inspection-section">
    <clientOnly>
      <!-- 로고 -->
      <div class="inspection-logo">
        <img
          :src="logoImgUrl"
          alt="logo"
          class="w-full h-full object-contain"
        />
      </div>

      <div class="inspection-content">
        <!-- 점검 메시지 -->

        <h1 class="inspection-title text-lg md:text-2xl">
          {{ tm('Inspection_Now_Maintenance') }}
        </h1>

        <div class="inspection-cards">
          <!-- 점검 시간 카드 -->
          <div
            v-if="webInspectionData"
            class="inspection-card inspection-time-card"
          >
            <h2 class="card-title text-base text-md md:text-lg">
              {{ tm('Inspection_Maintenance_Time') }}
            </h2>
            <div class="inspection-time text-sm md:text-base font-medium">
              <div
                v-dompurify-html="getLocaleTimezone('', '')"
                class="time-row"
              ></div>
            </div>
          </div>

          <!-- 온스토브 & 다운로드 카드 -->
          <div class="inspection-bottom-cards">
            <!-- 온스토브 카드 -->
            <div class="inspection-card inspection-stove-card">
              <h3
                :class="{ 'text-center': !launchingStatus }"
                class="card-title text-base md:text-lg"
              >
                <span
                  v-if="!launchingStatus"
                  v-dompurify-html="tm('Inspection_Game_During_Maintenance')"
                ></span>
                <span
                  v-else
                  v-dompurify-html="tm('org_Inspection_During_Maintenance')"
                  class="block text-left"
                ></span>
              </h3>
              <div class="button-group justify-center">
                <AtomsButton
                  variant="outlined"
                  class="flex-1 size-extra-small md:size-small"
                  @click="handleCommunityClick"
                >
                  <span class="text">{{ tm('Inspection_Community_Btn') }}</span>
                  <AtomsIconsLongArrowRightLine :size="16" color="#1F1F1F" />
                </AtomsButton>
                <BlocksButtonLauncher
                  v-if="launchingStatus"
                  type="single"
                  platform="pc"
                  class="inspection-launcher"
                  :icon-component="AtomsIconsPlayRoundFill"
                  :icon-props="{ size: 16, color: '#332C2A' }"
                >
                  {{ tm('Txt_Game_Start') }}
                </BlocksButtonLauncher>
              </div>
            </div>

            <!-- 다운로드 카드 -->
            <div
              v-if="launchingStatus"
              class="inspection-card inspection-download-card"
            >
              <h3 class="card-title text-base md:text-lg">
                {{
                  t('Inspection_Txt_Download', {
                    gameName: gameData?.game_name,
                  })
                }}
              </h3>
              <div class="flex flex-row gap-3 flex-wrap">
                <template
                  v-for="(market, index) in enabledMarkets"
                  :key="index"
                >
                  <BlocksButtonLauncher
                    :type="market === 'pc' ? 'default' : 'single'"
                    variant="outlined"
                    :platform="market"
                    :class="[
                      { 'flex-1': market === 'pc' },
                      { 'flex-1': market !== 'pc' && !device.isDesktop },
                      'size-extra-small md:size-small',
                    ]"
                  >
                    {{ getButtonText(market) }}
                  </BlocksButtonLauncher>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </clientOnly>
  </section>
</template>

<script setup lang="ts">
import { globalDateFormat } from '@seed-next/date'
import AtomsIconsPlayRoundFill from '#layers/components/atoms/icons/PlayRoundFill.vue'
import type { Platform } from '#layers/types/components/button'

const config = useRuntimeConfig()
const stoveApiUrl = config.public.stoveApiUrl as string

const dataResourcesUrl = config.public.dataResourcesUrl as string
const multilingualFileName = 'STOVE_PUBTEMPLATE_homepage_brand_inspection.json'
// Multilingual
const resultGetMultilingual = await useGetMultilingual({
  baseApiUrl: dataResourcesUrl,
  fileName: multilingualFileName,
})

const { t, tm, locale }: any = useI18n({
  useScope: 'local',
  messages: Object(resultGetMultilingual?.value?.multilingual),
})

const device = useDevice()
const loadingStore = useLoadingStore()
const { webInspectionData, getInspectionDataExternal } =
  useGetInspectionDataExternal()
const gameDataStore = useGameDataStore()
const { gameData } = storeToRefs(gameDataStore)
await getInspectionDataExternal({
  baseApiUrl: stoveApiUrl,
  gameId: gameData.value.game_id,
})

// locale에 따라 뒤에 KST 또는 UTC 추가 ko, en, zh-tw, ja
// ko: (KST)
// en: (UTC)
// zh-tw: 台灣時間 (KST)
// ja: (JST)
// 나머지: (KST)
const getLocaleTimezone = (localeType: string, region) => {
  const tsStartDate = webInspectionData.value?.ts_start_date || 0
  const tsEndDate = webInspectionData.value?.ts_end_date || 0
  const currentLocale = localeType || locale.value

  const timezoneMap: Record<string, string> = {
    ko: 'KST',
    en: 'UTC',
    ja: 'JST',
    'zh-tw': '台灣時間',
    'zh-cn': 'CST',
    th: 'ICT',
  }
  const timezone = timezoneMap[currentLocale] || 'KST'
  const defaultRegion = currentLocale === 'ko' ? 'KR' : ''

  const formatDate = (date: Date, loc: string, reg: string) =>
    `${globalDateFormat(date, loc, reg || defaultRegion, { useFullDate: true })}`

  const localTime = `${formatDate(new Date(tsStartDate), currentLocale, region || '')} <br class="md:hidden">~ ${formatDate(new Date(tsEndDate), currentLocale, region || '')} (${timezone})`
  const utcTime = `${formatDate(new Date(tsStartDate), 'en', region || '')} <br class="md:hidden">~ ${formatDate(new Date(tsEndDate), 'en', region || '')} (UTC)`

  return currentLocale === 'en' ? utcTime : `${localTime}<br>${utcTime}`
}

const launchingStatus = computed(() => {
  return webInspectionData.value?.launching_status
})

const enabledMarkets = computed(() => {
  const markets = getSupportedPlatforms(
    gameData.value.platform_type,
    gameData.value.os_type
  ) as Platform[]

  if (device.isMobile) {
    // markets에 pc가 있다면 지우기
    markets.splice(markets.indexOf('pc'), 1)

    if (device.isAndroid) {
      markets.splice(markets.indexOf('app_store'), 1)
    }
    if (device.isApple) {
      markets.splice(markets.indexOf('google_play'), 1)
    }
  }

  return markets
})

const logoImgUrl = computed(() => {
  const currentLocale = locale.value || 'ko'
  const localeData = (webInspectionData.value as any)?.[currentLocale]
  return formatPathHost(localeData?.img_json.bi_large)
})

const communityUrl = computed(() => {
  const currentLocale = locale.value || 'ko'
  const localeData = (webInspectionData.value as any)?.[currentLocale]
  return localeData?.url_json?.community
})

const handleCommunityClick = () => {
  window.open(communityUrl.value, '_blank')
}

const getButtonText = (platform: string) => {
  const platformKeyMap: Record<string, string> = {
    pc: 'platform_pc',
    google_play: 'platform_google_play',
    app_store: 'platform_app_store',
  }

  if (platform !== 'pc' && device.isDesktop) {
    return ''
  }

  const key = platformKeyMap[platform]
  return key ? tm(key) : ''
}

onMounted(() => {
  loadingStore.stopFullLoading()
})

definePageMeta({
  middleware: ['inspection'],
  layout: 'only-stove',
})
</script>

<style scoped>
.inspection-section {
  @apply flex flex-col items-center gap-10 px-10 py-[120px] pb-[200px] min-h-[calc(100vh-48px)];
  background-color: #f0f0f0;
}

.inspection-logo {
  @apply w-[944px] h-[50px] flex-shrink-0;
}

.inspection-logo img {
  @apply w-full h-full object-contain;
}

.inspection-content {
  @apply flex flex-col items-center gap-10 w-full max-w-[944px];
}

.inspection-title {
  @apply text-center font-bold tracking-[-0.72px] text-[#1F1F1F];
}

.inspection-cards {
  @apply flex flex-col gap-5 w-full;
}

.inspection-card {
  @apply bg-white rounded-2xl px-4 py-6 md:p-8;
}

.inspection-time-card {
  @apply flex flex-col items-center gap-4;
}

.card-title {
  @apply text-center leading-[30px] font-bold tracking-[-0.6px] text-[#1F1F1F];
}

.inspection-time {
  @apply flex flex-col items-center gap-0 md:gap-2;
}

.time-row {
  @apply text-center leading-[26px] font-medium tracking-[-0.48px] text-[#1F1F1F];
}

.inspection-bottom-cards {
  @apply flex flex-row gap-5 w-full;
}

.inspection-stove-card,
.inspection-download-card {
  @apply flex flex-col justify-between gap-4 flex-1;
}

.inspection-stove-card .card-title {
  @apply leading-[26px] font-bold tracking-[-0.54px] text-[#1F1F1F];
}

.inspection-download-card .card-title {
  @apply text-left leading-[26px] font-bold tracking-[-0.54px] text-[#1F1F1F];
}

.inspection-content-text {
  @apply text-left leading-[26px] font-medium tracking-[-0.48px] text-[#1F1F1F];
  white-space: pre-line;
}

.button-group {
  @apply flex flex-row gap-3;
}

@media (max-width: 1024px) {
  .inspection-section {
    @apply px-5 py-20 pb-32;
  }

  .inspection-logo {
    @apply w-full max-w-[944px];
  }

  .inspection-time-card {
    @apply w-full;
  }

  .inspection-bottom-cards {
    @apply flex-col;
  }

  .inspection-stove-card,
  .inspection-download-card {
    @apply w-full;
  }
}
.inspection-download-card .btn-platform-pc {
  @apply w-auto flex-1;
}

.button-group:deep(.btn-base .text) {
  @apply mr-[2px] md:mr-[4px] text-[#1F1F1F];
}

.button-group:deep(.inspection-launcher.btn-base) {
  @apply flex-1 bg-[var(--primary)] px-[20px];
}
.button-group:deep(.inspection-launcher.btn-base .icon-platform) {
  @apply hidden;
}
</style>
