<template>
  <el-tooltip
    :content="tooltipText"
    :disabled="canSelect"
    placement="top"
  >
    <el-select
      :model-value="modelValue"
      size="small"
      class="thinking-level-selector"
      :class="{ 'is-unsupported': !canSelect }"
      :disabled="disabled || !canSelect"
      @update:model-value="onLevelChange"
      :placeholder="placeholderText"
    >
      <el-option
        v-for="opt in availableLevels"
        :key="opt.value"
        :label="opt.label"
        :value="opt.value"
      />
    </el-select>
  </el-tooltip>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import type { ThinkLevel, ModelThinkingCapability } from '../types/index';

const props = defineProps<{
  modelValue: ThinkLevel;
  disabled?: boolean;
  capability: ModelThinkingCapability;
}>();

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

const LABEL_MAP: Record<string, string> = {
  off: '关闭',
  minimal: '极简',
  low: '低',
  medium: '中等',
  high: '高',
  adaptive: '自适应',
};

/** 是否可以选择（levels 有 2 个以上选项才可选） */
const canSelect = computed(() => {
  return props.capability.supported && props.capability.levels.length > 1;
});

const tooltipText = computed(() => {
  if (!props.capability.supported) return '当前模型不支持思考';
  if (props.capability.levels.length <= 1) return '当前模型思考级别不可调';
  return '';
});

const placeholderText = computed(() => {
  if (!props.capability.supported) return '不支持思考';
  if (props.capability.levels.length <= 1) return '级别不可调';
  return '思考级别';
});

const availableLevels = computed(() => {
  return props.capability.levels.map(l => ({
    value: l,
    label: '💭 ' + (LABEL_MAP[l] || l),
  }));
});

function onLevelChange(val: ThinkLevel) {
  emit('update:modelValue', val);
  emit('change', val);
}
</script>

<style lang="scss" scoped>
.thinking-level-selector {
  width: 110px;

  :deep(.el-input__inner) {
    font-size: 12px;
  }

  &.is-unsupported {
    opacity: 0.5;
  }
}
</style>
