<template>
  <div class="p-8">
    <h1 class="text-2xl font-bold mb-4">{{ t('messages.title_test_lang') }}</h1>
    
    <div class="mb-6">
      <h2 class="text-lg font-semibold mb-2">{{ t('messages.welcome') }}</h2>
      <p><strong>{{ t('messages.GameData_load_status') }}:</strong> 
        <span :class="isGameDataLoaded ? 'text-green-600' : 'text-red-600'">
          {{ isGameDataLoaded ? '로드됨' : '로드되지 않음' }}
        </span>
      </p>
      <p><strong>{{ t('messages.current_language') }}:</strong> {{ $i18n.locale.value }}</p>
      <p><strong>{{ t('messages.default_language') }}:</strong> {{ gameDataStore.gameData?.default_lang_code || 'N/A' }}</p>
      <p><strong>{{ t('messages.available_languages') }}:</strong> {{ availableLanguages.join(', ') }}</p>
      <p><strong>{{ t('messages.current_url') }}:</strong> {{ $route.path }}</p>
    </div>

    <div class="mb-6">
      <h2 class="text-lg font-semibold mb-2">언어 전환:</h2>
      <LanguageSwitcher />
    </div>

    <div class="mb-6">
      <h2 class="text-lg font-semibold mb-2">직접 링크 테스트:</h2>
      <div class="space-x-4">
        <NuxtLink 
          v-for="lang in availableLanguages" 
          :key="lang"
          :to="`/${lang}/test-lang`"
          class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
        >
          {{ lang.toUpperCase() }} 페이지로 이동
        </NuxtLink>
        <NuxtLink 
          :to="`/ja/test-lang`"
          class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
        >
        ja 페이지로 이동
        </NuxtLink>
      </div>
    </div>

    <div class="mb-6">
      <h2 class="text-lg font-semibold mb-2">GameData 정보:</h2>
      <div v-if="isGameDataLoaded" class="space-y-2">
        <p><strong>게임 ID:</strong> {{ gameDataStore.gameData?.game_id }}</p>
        <p><strong>게임 코드:</strong> {{ gameDataStore.gameData?.game_code }}</p>
        <p><strong>S3 폴더명:</strong> {{ gameDataStore.gameData?.s3_folder_name }}</p>
        <p><strong>디자인 테마:</strong> {{ gameDataStore.gameData?.design_theme }}</p>
        <p><strong>전체:</strong> {{ gameDataStore.gameData?.key_color_codes?.join(', ') }}</p>
      </div>
      <pre class="bg-gray-100 p-4 rounded text-sm overflow-auto max-h-80">{{ gameDataInfo }}</pre>
    </div>

    <div class="mb-6">
      <h2 class="text-lg font-semibold mb-2">동적 언어 설정 테스트:</h2>
      <div class="space-y-2">
        <p><strong>현재 i18n 설정:</strong></p>
        <ul class="list-disc list-inside ml-4">
          <li>사용 가능한 언어: {{ $i18n.availableLocales.map((l: any) => l.code || l).join(', ') }}</li>
          <li>기본 언어: {{ $i18n.defaultLocale }}</li>
          <li>현재 언어: {{ $i18n.locale.value }}</li>
        </ul>
        <p class="text-sm text-gray-600 mt-2">
          GameData에서 가져온 lang_codes가 동적으로 i18n 설정에 반영되었는지 확인하세요.
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import LanguageSwitcher from '../../layers/components/atoms/LanguageSwitcher.vue';

const { t, locale, locales } = useI18n();
const gameDataStore = useGameDataStore();

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



// GameData가 로드되었는지 확인
const isGameDataLoaded = computed(() => {
  return !!gameDataStore.gameData
})
// GameData 정보를 JSON으로 표시
const gameDataInfo = computed(() => {
  if (!gameDataStore.gameData) {
    return 'GameData가 로드되지 않았습니다.';
  }
  
  return JSON.stringify({
    game_id: gameDataStore.gameData.game_id,
    game_code: gameDataStore.gameData.game_code,
    s3_folder_name: gameDataStore.gameData.s3_folder_name,
    default_lang_code: gameDataStore.gameData.default_lang_code,
    lang_codes: gameDataStore.gameData.lang_codes,
    design_theme: gameDataStore.gameData.design_theme,
    key_color_codes: gameDataStore.gameData.key_color_codes,
    use_game_font: gameDataStore.gameData.use_game_font,
    ga_code: gameDataStore.gameData.ga_code,
    favicon_path: gameDataStore.gameData.favicon_path
  }, null, 2);
});

// 페이지 메타 설정
useHead({
  title: `언어 테스트 - ${locale.value.toUpperCase()}`
});



</script>
