<template>
  <div class="max-w-4xl mx-auto px-4 py-12">
    <div v-if="!article" class="text-center py-20">
      <h1 class="text-3xl font-bold mb-4">{{ $t('errors.missingTranslation.title') }}</h1>
      <p class="text-gray-600 mb-8">{{ $t('errors.missingTranslation.message') }}</p>
      <div class="mb-8">
        <p class="font-semibold mb-4">{{ $t('errors.missingTranslation.availableLanguages') }}</p>
        <div class="flex justify-center space-x-4">
          <NuxtLink 
            v-for="lang in availableLanguages"
            :key="lang"
            :to="getLanguagePath(lang)"
            class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
          >
            {{ lang.toUpperCase() }}
          </NuxtLink>
        </div>
      </div>
      <NuxtLink :to="localePath('/blog')" class="text-blue-600 hover:text-blue-800">
        ← Back to Blog
      </NuxtLink>
    </div>
    
    <article v-else>
      <header class="mb-8">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">{{ article.title }}</h1>
        <div class="flex items-center justify-between mb-6">
          <time class="text-gray-600">{{ formatDate(article.date) }}</time>
          <div class="flex space-x-2">
            <span 
              v-for="tag in article.tags" 
              :key="tag"
              class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm"
            >
              {{ tag }}
            </span>
          </div>
        </div>
      </header>
      
      <div class="prose prose-lg max-w-none">
        <ContentRenderer :value="article" />
      </div>
      
      <!-- 语言切换 -->
      <div class="mt-12 pt-8 border-t border-gray-200">
        <h3 class="text-lg font-semibold mb-4">Available Languages:</h3>
        <div class="flex space-x-4">
          <NuxtLink 
            v-for="lang in availableLanguages"
            :key="lang"
            :to="getLanguagePath(lang)"
            class="px-4 py-2 border rounded hover:bg-gray-50"
            :class="{ 'bg-blue-600 text-white': lang === locale }"
          >
            {{ getLanguageName(lang) }}
          </NuxtLink>
        </div>
      </div>
    </article>
  </div>
</template>

<script setup>
const { locale } = useI18n()
const route = useRoute()
const localePath = useLocalePath()

// 尝试获取当前语言的文章
const { data: article } = await useAsyncData(`blog-${route.params.slug}`, () => 
  queryContent(`/${locale.value}`)
    .where({ slug: route.params.slug })
    .findOne()
    .catch(() => null)
)

// 获取所有可用语言
const availableLanguages = ['en', 'zh', 'zh-hant']

const formatDate = (date) => {
  return new Date(date).toLocaleDateString(locale.value, {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

const getLanguageName = (lang) => {
  const names = {
    'en': 'English',
    'zh': '简体中文',
    'zh-hant': '繁體中文'
  }
  return names[lang] || lang
}

const getLanguagePath = (lang) => {
  // 英文是默认语言，不需要添加语言路径
  if (lang === 'en') {
    return `/blog/${route.params.slug}`
  }
  return `/${lang}/blog/${route.params.slug}`
}

// SEO设置
if (article.value) {
  useSeoMeta({
    title: article.value.title,
    description: article.value.description,
    ogTitle: article.value.title,
    ogDescription: article.value.description
  })
}
</script>