<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-50">
    <div class="text-center max-w-2xl mx-auto px-4">
      <div class="mb-8">
        <div class="w-24 h-24 bg-aws-orange rounded-full flex items-center justify-center mx-auto mb-6">
          <Globe class="w-12 h-12 text-white" />
        </div>
        
        <h1 class="text-4xl font-bold text-gray-900 mb-4">
          {{ $t('blog.noTranslation') }}
        </h1>
        
        <p class="text-xl text-gray-600 mb-8">
          {{ $t('blog.noTranslationDesc') }}
        </p>
      </div>
      
      <div class="space-y-6">
        <div class="bg-white p-6 rounded-lg shadow-lg">
          <h3 class="text-lg font-semibold mb-4">Available Languages</h3>
          <div class="flex flex-wrap justify-center gap-3">
            <button 
              v-for="locale in availableLocales" 
              :key="locale.code"
              @click="switchLanguage(locale.code)"
              :class="[
                'px-4 py-2 rounded-lg border-2 transition-all duration-200',
                currentLocale === locale.code 
                  ? 'border-aws-orange bg-aws-orange text-white' 
                  : 'border-gray-300 text-gray-700 hover:border-aws-orange hover:text-aws-orange'
              ]"
            >
              {{ locale.name }}
            </button>
          </div>
        </div>
        
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <NuxtLink to="/blog" class="btn-primary">
            {{ $t('blog.backToBlog') }}
          </NuxtLink>
          
          <NuxtLink to="/" class="btn-outline">
            Go Home
          </NuxtLink>
        </div>
        
        <div class="flex justify-center space-x-6 pt-6">
          <a 
            href="https://t.me/pinnovatecloud" 
            target="_blank" 
            rel="noopener noreferrer"
            class="text-gray-600 hover:text-aws-orange transition-colors duration-200"
            title="Contact us on Telegram"
          >
            <MessageCircle class="w-6 h-6" />
          </a>
          <a 
            href="https://wa.me/19174029875" 
            target="_blank" 
            rel="noopener noreferrer"
            class="text-gray-600 hover:text-aws-orange transition-colors duration-200"
            title="Contact us on WhatsApp"
          >
            <Phone class="w-6 h-6" />
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Globe, MessageCircle, Phone } from 'lucide-vue-next'

const route = useRoute()
const { locale, locales, setLocale } = useI18n()

const currentLocale = ref(locale.value)
const requestedLocale = route.query.locale
const articlePath = route.query.article

const availableLocales = computed(() => 
  locales.value.filter(locale => locale.code !== 'en' || locale.code === currentLocale.value)
)

const switchLanguage = async (targetLocale) => {
  if (targetLocale === currentLocale.value) return
  
  try {
    await setLocale(targetLocale)
    
    // Try to navigate to the translated article
    if (articlePath) {
      const translatedPath = articlePath.replace(/^\/[a-z-]+/, `/${targetLocale}`)
      await navigateTo(translatedPath)
    } else {
      await navigateTo('/blog')
    }
  } catch (err) {
    console.error('Error switching language:', err)
  }
}

// SEO
useSeoMeta({
  title: 'Translation Not Available',
  description: 'This article is not available in your selected language.',
  robots: 'noindex, nofollow'
})
</script>
