<template>
  <div class="bg-white">
    <select
      v-model="selectedLocale"
      :disabled="isChanging"
      class="text-black px-2 py-1 rounded-md"
      :class="{ 'opacity-50 cursor-not-allowed': isChanging }"
      @change="switchLanguage"
    >
      <option
        v-for="localeOption in availableLanguages"
        :key="localeOption"
        :value="localeOption"
      >
        {{ localeOption }}
      </option>
    </select>
    <span v-if="isChanging" class="ml-2 text-sm text-gray-500">
      변경 중...
    </span>
  </div>
</template>

<script setup lang="ts">
const gameDataStore = useGameDataStore()

// 사용 가능한 언어 목록
const availableLanguages = computed(() => {
  return gameDataStore.gameData?.lang_codes || ['ko']
})

const { locale, setLocale } = useI18n()
const switchLocalePath = useSwitchLocalePath()
const router = useRouter()
const pageDataStore = usePageDataStore()

const selectedLocale = ref(locale.value)
const isChanging = ref(false)

// 언어 변경 함수 (CSR 방식)
const switchLanguage = async () => {
  if (!selectedLocale.value || isChanging.value) return
  
  isChanging.value = true
  
  try {
    // URL 경로를 통해 언어 변경
    const path = switchLocalePath(selectedLocale.value)
    if (path) {
      // 페이지 데이터 초기화 (새로운 언어로 다시 로드되도록)
      pageDataStore.clearPageData()
      
      // 언어 변경 및 라우팅
      await setLocale(selectedLocale.value)
      // await router.push(path)
      
      // 페이지 새로고침을 통해 데이터 재로드 보장
      await nextTick()
      window.location.reload()
    }
  } catch {
    // 오류 발생 시 이전 언어로 복원
    selectedLocale.value = locale.value
  } finally {
    isChanging.value = false
  }
}

// locale이 변경될 때 selectedLocale도 동기화
watch(locale, newLocale => {
  selectedLocale.value = newLocale
})
</script>
