<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useI18nStore } from '@/stores/i18n'
import { SUPPORTED_LOCALES, type SupportedLocale } from '@/locales'

const { t } = useI18n()
const i18nStore = useI18nStore()
const open = ref(false)

function select(code: SupportedLocale) {
  i18nStore.setLocale(code)
  open.value = false
}

function toggle() {
  open.value = !open.value
}

function onBlur() {
  setTimeout(() => { open.value = false }, 150)
}
</script>

<template>
  <div class="lang-wrap" @blur.capture="onBlur">
    <button
      class="lang-btn icon-btn"
      :title="t('lang.title')"
      :aria-expanded="open"
      aria-haspopup="listbox"
      @click="toggle"
    >
      <!-- Globe icon -->
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"/>
        <path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
      </svg>
    </button>

    <Transition name="lang-drop">
      <div v-if="open" class="lang-dropdown" role="listbox" :aria-label="t('lang.title')">
        <button
          v-for="locale in SUPPORTED_LOCALES"
          :key="locale.code"
          class="lang-option"
          :class="{ 'is-active': locale.code === i18nStore.current }"
          role="option"
          :aria-selected="locale.code === i18nStore.current"
          @click="select(locale.code)"
        >
          <span class="lang-native">{{ locale.nativeLabel }}</span>
          <span v-if="locale.code === i18nStore.current" class="lang-check">✓</span>
        </button>
      </div>
    </Transition>
  </div>
</template>

<style scoped>
.lang-wrap {
  position: relative;
}

.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-md);
  transition: color 0.2s;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.lang-btn:hover {
  color: #fff;
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 6px 0;
  z-index: 300;
}

.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  gap: 8px;
}
.lang-option:hover {
  background: rgba(240, 185, 11, 0.08);
}
.lang-option.is-active {
  color: var(--color-primary);
}

.lang-native {
  font-size: 14px;
  color: inherit;
  white-space: nowrap;
}
.lang-option:not(.is-active) .lang-native {
  color: rgba(255, 255, 255, 0.75);
}

.lang-check {
  font-size: 13px;
  color: var(--color-primary);
  flex-shrink: 0;
}

/* Transition */
.lang-drop-enter-active,
.lang-drop-leave-active {
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.lang-drop-enter-from,
.lang-drop-leave-to {
  opacity: 0;
  transform: translateY(-4px);
}
</style>
