<script setup lang="ts">
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { SUPPORTED_LOCALES, setLocale, type LocaleCode } from '@/i18n'

const { locale } = useI18n()
const isOpen = ref(false)

const currentLocale = computed(() => {
  return SUPPORTED_LOCALES.find(l => l.code === locale.value) || SUPPORTED_LOCALES[0]
})

function selectLocale(code: LocaleCode) {
  setLocale(code)
  isOpen.value = false
}

// Close dropdown when clicking outside
function handleClickOutside(event: MouseEvent) {
  const target = event.target as HTMLElement
  if (!target.closest('.language-switcher')) {
    isOpen.value = false
  }
}

// Add click listener
if (typeof window !== 'undefined') {
  document.addEventListener('click', handleClickOutside)
}
</script>

<template>
  <div class="language-switcher relative">
    <button
      class="flex items-center gap-1.5 px-2 py-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
      @click.stop="isOpen = !isOpen"
      :title="$t('settings.language')"
    >
      <img 
        :src="`https://flagcdn.com/w20/${currentLocale.flag.toLowerCase()}.png`"
        :srcset="`https://flagcdn.com/w40/${currentLocale.flag.toLowerCase()}.png 2x`"
        :alt="currentLocale.name"
        class="w-5 h-auto rounded-sm"
      >
      <span class="text-xs font-medium text-gray-600 dark:text-gray-300 uppercase">
        {{ currentLocale.code }}
      </span>
      <svg 
        class="w-3 h-3 text-gray-500 transition-transform"
        :class="{ 'rotate-180': isOpen }"
        fill="none" 
        stroke="currentColor" 
        viewBox="0 0 24 24"
      >
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
      </svg>
    </button>

    <!-- Dropdown -->
    <Transition
      enter-active-class="transition ease-out duration-100"
      enter-from-class="transform opacity-0 scale-95"
      enter-to-class="transform opacity-100 scale-100"
      leave-active-class="transition ease-in duration-75"
      leave-from-class="transform opacity-100 scale-100"
      leave-to-class="transform opacity-0 scale-95"
    >
      <div
        v-if="isOpen"
        class="absolute right-0 mt-2 w-44 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1 z-50"
      >
        <button
          v-for="loc in SUPPORTED_LOCALES"
          :key="loc.code"
          class="w-full flex items-center gap-3 px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
          :class="{
            'bg-primary-50 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400': loc.code === locale,
            'text-gray-700 dark:text-gray-200': loc.code !== locale
          }"
          @click="selectLocale(loc.code)"
        >
          <img 
            :src="`https://flagcdn.com/w20/${loc.flag.toLowerCase()}.png`"
            :srcset="`https://flagcdn.com/w40/${loc.flag.toLowerCase()}.png 2x`"
            :alt="loc.name"
            class="w-5 h-auto rounded-sm"
          >
          <span class="flex-1 text-left">{{ loc.name }}</span>
          <svg
            v-if="loc.code === locale"
            class="w-4 h-4 text-primary-600 dark:text-primary-400"
            fill="currentColor"
            viewBox="0 0 20 20"
          >
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </Transition>
  </div>
</template>
