<template>
  <el-select
    :model-value="modelValue"
    :loading="loading"
    :placeholder="placeholder"
    :disabled="disabled"
    :clearable="clearable"
    :teleported="true"
    :popper-options="{ modifiers: [{ name: 'flip', enabled: true }, { name: 'preventOverflow', enabled: true }] }"
    @update:model-value="handleChange"
  >
    <el-option
      v-for="provider in providers"
      :key="provider.name"
      :label="provider.display_name"
      :value="provider.name"
    >
      <div class="provider-option">
        <span class="provider-name">{{ provider.display_name }}</span>
        <span v-if="provider.description" class="provider-desc">{{ provider.description }}</span>
      </div>
    </el-option>
  </el-select>
</template>

<script setup lang="ts">
import type { EmbeddingProviderInfo } from '@/types/embedding'

const props = withDefaults(
  defineProps<{
    modelValue?: string
    providers: EmbeddingProviderInfo[]
    loading?: boolean
    disabled?: boolean
    clearable?: boolean
    placeholder?: string
  }>(),
  {
    modelValue: '',
    loading: false,
    disabled: false,
    clearable: false,
    placeholder: '请选择嵌入模型提供者'
  }
)

const emit = defineEmits<{
  'update:modelValue': [value: string]
  change: [provider: EmbeddingProviderInfo | undefined]
}>()

const handleChange = (value: string) => {
  emit('update:modelValue', value)
  const selectedProvider = props.providers.find((p) => p.name === value)
  emit('change', selectedProvider)
}
</script>

<style scoped>
.provider-option {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  padding: 4px 0;
}

.provider-name {
  font-weight: 500;
  color: var(--text-primary);
}

.provider-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.4;
}
</style>
