<template>
  <div class="min-h-[100vh] flex flex-col bg-[#F0F0F0] pb-12">
    <LayoutsStoveHeader />

    <Transition name="fade">
      <div
        v-if="!isLoading"
        class="flex-1 flex items-center justify-center p-25"
      >
        <div class="flex flex-col items-center gap-6 w-full">
          <!-- Stove Logo -->
          <div class="flex items-center justify-center h-7">
            <img
              src="/images/common/logo-stove.svg"
              alt="Stove"
              class="h-full w-auto"
            />
          </div>

          <!-- Error Icon and Text -->
          <div class="flex flex-col items-center gap-4 w-full">
            <!-- Error Icon -->
            <div class="flex items-center justify-center">
              <img
                src="/images/common/img_error.png"
                alt="Error"
                class="w-40 h-40 md:w-60 md:h-60"
              />
            </div>

            <!-- Error Text -->
            <div class="flex flex-col items-center gap-2 w-full">
              <h1
                class="font-medium text-xl md:text-2xl leading-[1.5] tracking-[-0.03em] text-center text-[#1F1F1F] m-0"
              >
                <span v-dompurify-html="errorTitle"></span>
              </h1>
              <p
                v-dompurify-html="errorMsg"
                class="font-normal text-sm md:text-base leading-[1.7] md:leading-[1.625] tracking-[-0.03em] text-center text-[#666666] m-0"
              ></p>
            </div>
          </div>

          <!-- Home Button -->
          <AtomsButton
            type="action"
            button-size="size-small md:size-large"
            background-color="#FC4420"
            text-color="#FFFFFF"
            @click="handleError"
          >
            <span
              v-dompurify-html="`${gameName} ${tm('Error_Official_Page')}`"
            ></span>
          </AtomsButton>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script setup lang="ts">
interface ErrorProps {
  error?: {
    statusCode?: number
    statusMessage?: string
    message?: string
  }
}

// Configuration
const runtimeConfig = useRuntimeConfig()
const dataResourcesUrl = runtimeConfig.public.dataResourcesUrl as string
const multilingualFileName = 'STOVE_PUBTEMPLATE_homepage_brand_error.json'

// Multilingual
const resultGetMultilingual = await useGetMultilingual({
  baseApiUrl: dataResourcesUrl,
  fileName: multilingualFileName,
})
const { tm }: any = useI18n({
  useScope: 'local',
  messages: Object(resultGetMultilingual?.value?.multilingual),
})

const props = withDefaults(defineProps<ErrorProps>(), {
  error: () => ({}),
})
const nuxtError = useError()
const currentError = computed(() => props.error || nuxtError.value)

const isLoading = ref(true)

const errorTitle = ref('')
const errorMsg = ref('')

const gameDataStore = useGameDataStore()
const { gameName } = storeToRefs(gameDataStore)

//error clear 함수 생성
const localePath = useLocalePath()

// const handleError = () => clearError({ redirect: '/' })
const handleError = () => {
  window.location.href = localePath('/')
}
const handleBack = () => {
  // 에러 상태를 클리어하고 이전 페이지로 이동
  // popstate 이벤트가 이미 발생한 경우이므로 추가 동작 불필요
  // 키보드 백스페이스의 경우에만 명시적으로 뒤로가기 실행
  window.location.href = localePath('/')
  // navigateTo(`${router.currentRoute.value.path}`)
}

// 백스페이스 키 처리
const handleKeydown = (e: KeyboardEvent) => {
  if (
    e.key === 'Backspace' &&
    !['INPUT', 'TEXTAREA'].includes((e.target as HTMLElement).tagName)
  ) {
    e.preventDefault()
    handleBack()
  }
}
// 500 에러 발생 시 /error 페이지로 리다이렉트
onMounted(() => {
  const statusCode = currentError.value?.statusCode
  console.log('🚀 ~ statusCode:', nuxtError)

  if (statusCode === 500) {
    errorTitle.value = tm('Error_500_Inconvenience')
    errorMsg.value = tm('Error_500_Sorry')
  } else {
    errorTitle.value = tm('Error_404_Not_Found')
    errorMsg.value = tm('Error_404_Not_Found2')
  }

  nextTick(() => {
    isLoading.value = false
  })

  window.addEventListener('keydown', handleKeydown)
  window.addEventListener('popstate', handleBack)
})
onUnmounted(() => {
  window.removeEventListener('keydown', handleKeydown)
  window.removeEventListener('popstate', handleBack)
})
</script>
