<template>
  <div class="mt-2">
    <div class="flex items-center gap-2">
      <select 
        v-model="targetLang" 
        class="bg-gray-700 text-white text-xs px-2 py-1 rounded border border-gray-600 focus:outline-none focus:border-blue-500"
      >
        <option value="zh-TW">繁體中文</option>
        <option value="zh-CN">简体中文</option>
        <option value="ja">日本語</option>
        <option value="ko">한국어</option>
        <option value="fr">Français</option>
        <option value="en">English</option>
      </select>

      <button
        @click="translate"
        :disabled="loading || !props.text"
        class="text-xs bg-blue-900 text-blue-300 hover:bg-blue-800 px-2 py-1 rounded transition flex items-center gap-1 disabled:opacity-50"
      >
        <span v-if="loading" class="animate-pulse">翻譯中...</span>
        <span v-else>🌐 翻譯</span>
      </button>
    </div>

    <div v-if="showTranslation" class="mt-3 p-3 bg-gray-900 border border-green-600 rounded text-green-300 text-sm leading-relaxed">
      <div class="flex justify-between items-center mb-1">
        <span class="text-xs font-bold text-green-500 uppercase">Translation ({{ targetLang }})</span>
        <button @click="showTranslation = false" class="text-gray-500 hover:text-white text-xs">✕</button>
      </div>
      {{ translatedText }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { translateText } from '@/api/client'

const props = defineProps<{
  text: string
}>()

const targetLang = ref('zh-TW')
const translatedText = ref('')
const loading = ref(false)
const showTranslation = ref(false)

const translate = async () => {
  if (!props.text.trim()) return
  
  loading.value = true
  try {
    translatedText.value = await translateText(props.text, targetLang.value)
    showTranslation.value = true
  } catch (error) {
    console.error('Translation failed:', error)
  } finally {
    loading.value = false
  }
}
</script>
