<template>
  <div>
    <NSelect
      :value="modelValue"
      :options="options"
      placeholder="选择模型"
      @update:value="onChange"
    />
    <div
      v-if="selected"
      class="text-xs text-neutral-500 mt-1"
    >
      {{ capLabel }}（{{ selected.context_window.toLocaleString() }} ctx）
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { NSelect } from 'naive-ui'

import { modelsApi } from '@/api/models'
import type { LLMModel } from '@/api/llmAdmin'

const props = defineProps<{ modelValue?: string }>()
const emit = defineEmits<{ 'update:modelValue': [v: string] }>()

const models = ref<LLMModel[]>([])

onMounted(async () => {
  models.value = await modelsApi.list(true)
})

const options = computed(() =>
  models.value.map((m) => ({ label: m.display_name, value: m.id })),
)
const selected = computed(() =>
  models.value.find((m) => m.id === props.modelValue),
)
const capLabel = computed(() => {
  if (!selected.value) return ''
  const c = selected.value.capabilities
  const parts: string[] = []
  if (c.image) parts.push('图片')
  if (c.pdf) parts.push('PDF')
  if (c.audio) parts.push('音频')
  if (c.reasoning) parts.push('Thinking')
  return parts.length > 0 ? parts.join(' · ') : '纯文本'
})

function onChange(v: string) {
  emit('update:modelValue', v)
}
</script>
