<script setup lang="ts">
//! 技能联想浮层 — / 触发技能选择,从 ChatInput.vue 提取
//!
//! 职责:显示 /@ 联想浮层(Filtered skill list)、选中/清除技能、关联 i18n

import { useI18n } from 'vue-i18n'
import type { SkillInfo } from '../../api/types'

const { t } = useI18n()

defineProps<{
  /** 联想浮层是否打开 */
  skillOpen: boolean
  /** 过滤后的技能列表 */
  filteredSkills: SkillInfo[]
  /** 当前高亮索引 */
  skillIndex: number
  /** 已选技能(用于顶部 chip 展示) */
  pendingSkill: SkillInfo | null
  /** 技能查询文本 */
  skillQuery: string
}>()

const emit = defineEmits<{
  (e: 'select', skill: SkillInfo): void
  (e: 'clear'): void
  (e: 'update:skillIndex', index: number): void
}>()
</script>

<template>
  <!-- 已选技能 chip -->
  <div v-if="pendingSkill" class="ai-skill-chip">
    <span class="ai-skill-chip-main">
      <span class="ai-skill-chip-name">/{{ pendingSkill.name }}</span>
      <span v-if="pendingSkill.description" class="ai-skill-chip-desc">{{ pendingSkill.description }}</span>
      <code v-if="pendingSkill.argument_hint" class="ai-skill-chip-hint">{{ pendingSkill.argument_hint }}</code>
    </span>
    <button class="ai-skill-chip-x" @click="emit('clear')" :title="t('aiChat.clearSkill')" :aria-label="t('aiChat.clearSkill')">&times;</button>
  </div>

  <!-- 技能联想浮层 -->
  <div v-if="skillOpen" class="ai-skill-popover">
    <div v-if="!filteredSkills.length" class="ai-skill-empty">
      {{ skillQuery.length ? t('aiChat.skillNoMatch') : t('aiChat.skillNotLoaded') }}
    </div>
    <div
      v-for="(s, i) in filteredSkills"
      :key="s.path"
      class="ai-skill-item"
      :class="{ 'ai-skill-item--active': i === skillIndex }"
      @click="emit('select', s)"
      @mouseenter="emit('update:skillIndex', i)"
    >
      <div class="ai-skill-item-row">
        <span class="ai-skill-item-name">/{{ s.name }}</span>
        <span class="ai-skill-item-desc">{{ s.description }}</span>
        <span class="ai-skill-item-src">{{ s.source }}</span>
      </div>
      <code v-if="s.argument_hint" class="ai-skill-item-hint">{{ s.argument_hint }}</code>
    </div>
  </div>
</template>
