<template>
  <div class="w-40">
    <Combobox as="div" v-model="selected" @update:modelValue="query = ''">
      <div class="relative mt-1">
        <!-- Input now uses displayValue(lang) to include the flag -->
        <ComboboxInput
          class="w-full rounded-md bg-white dark:bg-gray-800 py-1.5 pr-10 pl-3 text-sm text-gray-900 dark:text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500"
          @input="query = $event.target.value"
          :display-value="(lang :any ) => displayValue(lang)"
          placeholder="Select..."
        />

        <ComboboxButton
          class="absolute inset-y-0 right-0 flex items-center pr-2 text-gray-400"
          aria-label="Toggle language menu"
        >
          <ChevronUpDownIcon class="h-5 w-5" aria-hidden="true" />
        </ComboboxButton>

        <!-- Options panel above input -->
        <ComboboxOptions
          v-if="filteredLanguages.length > 0"
          class="absolute z-10 bottom-full mb-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-gray-800 py-1 shadow-lg ring-1 ring-black/10 focus:outline-none text-sm"
        >
          <ComboboxOption
            v-for="lang in filteredLanguages"
            :key="lang.id"
            :value="lang"
            as="template"
            v-slot="{ active, selected }"
          >
            <li
              :class="[
                'relative cursor-default select-none py-2 pl-3 pr-9 flex items-center gap-x-2',
                active
                  ? 'bg-indigo-600 text-white'
                  : 'text-gray-900 dark:text-gray-100',
              ]"
            >
              <span class="text-lg">{{ lang.flag }}</span>
              <span :class="['block truncate', selected && 'font-semibold']">
                {{ lang.label }}
              </span>

              <span
                v-if="selected"
                :class="[
                  'absolute inset-y-0 right-0 flex items-center pr-4',
                  active ? 'text-white' : 'text-indigo-600',
                ]"
              >
                <CheckIcon class="h-5 w-5" aria-hidden="true" />
              </span>
            </li>
          </ComboboxOption>
        </ComboboxOptions>
      </div>
    </Combobox>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import {
  Combobox,
  ComboboxButton,
  ComboboxInput,
  ComboboxOption,
  ComboboxOptions,
} from '@headlessui/vue';
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid';

// 1) Language options now include a `flag` property
const languageOptions = [
  { id: 'ko', label: '한국어', flag: '🇰🇷' },
  { id: 'en', label: 'English', flag: '🇺🇸' },
];

// 2) vue-i18n hook
const { locale } = useI18n();

// 3) Combobox state
const query = ref('');
const selected = ref(
  languageOptions.find((lang) => lang.id === locale.value) || languageOptions[0]
);

// 4) Compute filtered list based on `query`
const filteredLanguages = computed(() => {
  if (query.value === '') {
    return languageOptions;
  }
  return languageOptions.filter((lang) =>
    lang.label.toLowerCase().includes(query.value.toLowerCase())
  );
});

// 5) Whenever `selected` changes, update i18n’s locale
watch(selected, (newLang) => {
  if (newLang && newLang.id) {
    locale.value = newLang.id as 'ko' | 'en';
  }
});

// Helper to display “🇰🇷 한국어” or “🇺🇸 English” in the input
function displayValue(lang: { flag: string; label: string } | null) {
  return lang ? `${lang.flag} ${lang.label}` : '';
}
</script>

<style scoped>
/* No extra CSS needed—Tailwind handles positioning and styling */
</style>
