<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 class="flex items-center justify-center font-medium text-sm leading-[1.4] tracking-[-0.03em] text-white bg-[#FC4420] border border-black/10 rounded-lg px-10 h-12 cursor-pointer transition-all duration-300 backdrop-blur-[30px] shadow-[0px_0.9131946563720703px_1.4666459560394287px_0px_rgba(0,0,0,0.06),0px_2.194533586502075px_3.5245540142059326px_0px_rgba(0,0,0,0.09)] hover:bg-[#E03D1C] hover:shadow-[0px_0.9131946563720703px_1.4666459560394287px_0px_rgba(0,0,0,0.06),0px_2.194533586502075px_3.5245540142059326px_0px_rgba(0,0,0,0.09),0px_4.1321120262146px_6.636422634124756px_0px_rgba(0,0,0,0.12)] active:translate-y-px" @click="handleError">
          <span v-dompurify-html="tm('Error_Official_Page')"></span>
        </AtomsButton>
              
        </div>
      </div>
    </Transition>
  </div>
</template>


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

const { tm } = useI18n()
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('')

//error clear 함수 생성 

const handleError = () => clearError({ redirect: '/' })



// 500 에러 발생 시 /error 페이지로 리다이렉트
onMounted(() => {
  const statusCode = currentError.value?.statusCode
  console.log("🚀 ~ 1111currentError==:", currentError.value?.message)
  console.log("🚀 ~ 1111statusCode:", statusCode)

  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
  })
})

</script>