<script lang="ts">
export interface SearchSelectOption {
  value: string
  label?: string
}
</script>

<script setup lang="ts">
import { computed, ref, nextTick } from 'vue'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'

const props = withDefaults(
  defineProps<{
    options: SearchSelectOption[]
    modelValue: string
    placeholder?: string
    searchPlaceholder?: string
    emptyText?: string
    maxHeight?: string
    disabled?: boolean
  }>(),
  {
    placeholder: 'Select...',
    searchPlaceholder: 'Search...',
    emptyText: 'No items found',
    maxHeight: '300px',
    disabled: false,
  }
)

const emit = defineEmits<{
  'update:modelValue': [value: string]
}>()

const searchQuery = ref('')
const isOpen = ref(false)
const listRef = ref<HTMLElement | null>(null)

const filteredOptions = computed(() => {
  if (!searchQuery.value) return props.options
  const query = searchQuery.value.toLowerCase()
  return props.options.filter(opt => {
    const label = opt.label || opt.value
    return label.toLowerCase().includes(query)
  })
})

const selectedLabel = computed(() => {
  if (!props.modelValue) return ''
  const opt = props.options.find(o => o.value === props.modelValue)
  return opt?.label || props.modelValue
})

const showTooltip = computed(() => {
  return !isOpen.value && props.modelValue && selectedLabel.value.length > 15
})

function selectOption(value: string) {
  emit('update:modelValue', value)
  isOpen.value = false
}

function scrollToSelected() {
  nextTick(() => {
    if (listRef.value && props.modelValue) {
      const selectedEl = listRef.value.querySelector('[data-selected="true"]')
      if (selectedEl) {
        selectedEl.scrollIntoView({ block: 'center' })
      }
    }
  })
}

function handleOpenChange(open: boolean) {
  if (props.disabled) return
  isOpen.value = open
  if (open) {
    scrollToSelected()
  } else {
    searchQuery.value = ''
  }
}
</script>

<template>
  <Tooltip :disabled="!showTooltip">
    <TooltipTrigger as-child>
      <div class="w-full min-w-0">
        <DropdownMenu :open="isOpen" @update:open="handleOpenChange">
        <DropdownMenuTrigger as-child :disabled="disabled">
          <button
            type="button"
            class="flex w-full max-w-full items-center justify-between overflow-hidden rounded-md border border-input bg-background px-2 py-1 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
            :disabled="disabled"
          >
            <span v-if="!modelValue" class="body-333 min-w-0 flex-1 truncate text-left text-muted-foreground">
              {{ placeholder }}
            </span>
            <span v-else class="body-333 min-w-0 flex-1 truncate text-left">
              {{ selectedLabel }}
            </span>
            <i class="dku-icon-chevron-down-12 ml-1 shrink-0 opacity-50" />
          </button>
        </DropdownMenuTrigger>
        <DropdownMenuContent
          class="w-[--reka-dropdown-menu-trigger-width] min-w-[200px] p-0"
          align="start"
        >
          <!-- Search input -->
          <div class="flex items-center border-b px-3 py-2">
            <i class="dku-icon-search-16 mr-2 shrink-0 opacity-50" />
            <input
              v-model="searchQuery"
              type="text"
              :placeholder="searchPlaceholder"
              class="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
            />
          </div>

          <!-- Options list -->
          <div
            ref="listRef"
            class="overflow-y-auto p-1"
            :style="{ maxHeight }"
          >
            <div
              v-if="filteredOptions.length === 0"
              class="py-6 text-center text-sm text-muted-foreground"
            >
              {{ emptyText }}
            </div>
            <button
              v-for="option in filteredOptions"
              :key="option.value"
              type="button"
              class="body-333 relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
              :data-selected="modelValue === option.value"
              @click.stop="selectOption(option.value)"
            >
              <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
                <i
                  v-if="modelValue === option.value"
                  class="dku-icon-checkmark-16 text-primary"
                />
              </span>
              <span :class="{ 'font-medium': modelValue === option.value }">
                {{ option.label || option.value }}
              </span>
            </button>
          </div>
        </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </TooltipTrigger>
    <TooltipContent>
      {{ selectedLabel }}
    </TooltipContent>
  </Tooltip>
</template>
