<template>
  <el-select
    :model-value="displayValue"
    :loading="loading"
    :placeholder="computedPlaceholder"
    :disabled="disabled"
    :clearable="clearable"
    :teleported="true"
    :popper-class="popperClass"
    :popper-options="{ modifiers: [{ name: 'flip', enabled: true }, { name: 'preventOverflow', enabled: true }, { name: 'computeStyles', options: { adaptive: false, gpuAcceleration: false } }] }"
    @update:model-value="handleChange"
    @clear="handleClear"
  >
    <el-option
      v-for="provider in providers"
      :key="provider.name"
      :label="provider.display_name"
      :value="provider.name"
    >
      <div class="provider-option">
        <div class="provider-info">
          <span class="provider-name">{{ provider.display_name }}</span>
          <span v-if="provider.description" class="provider-desc">{{ provider.description }}</span>
        </div>
        <el-tag v-if="provider.name === currentProvider" type="success" size="small" effect="plain" class="current-tag">
          当前配置
        </el-tag>
        <el-tag v-else-if="provider.name === modelValue" type="primary" size="small" effect="plain" class="selected-tag">
          已选择
        </el-tag>
      </div>
    </el-option>
  </el-select>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { LLMProviderInfo } from '@/api/llm'

const popperClass = 'llm-selector-popper'

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

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

const displayValue = computed(() => {
  return props.modelValue || ''
})

const computedPlaceholder = computed(() => {
  if (props.modelValue) {
    return props.placeholder
  }
  if (props.currentProvider) {
    const current = props.providers.find(p => p.name === props.currentProvider)
    return `默认: ${current?.display_name || props.currentProvider}`
  }
  return props.placeholder
})

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

const handleClear = () => {
  emit('update:modelValue', '')
  emit('change', undefined)
}
</script>

<style>
.llm-selector-popper {
  min-width: 320px !important;
  z-index: 9999 !important;
}

.llm-selector-popper .el-select-dropdown__wrap {
  max-height: 400px;
}

.llm-selector-popper .el-select-dropdown__item {
  height: auto;
  padding: 8px 12px;
  line-height: 1.5;
}
</style>

<style scoped>
.provider-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 4px 0;
  gap: 12px;
}

.provider-info {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.provider-name {
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.provider-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.current-tag {
  flex-shrink: 0;
  margin-left: 8px;
  white-space: nowrap;
}

.selected-tag {
  flex-shrink: 0;
  margin-left: 8px;
  white-space: nowrap;
}
</style>
