<script setup lang="ts">
//! @ 实体引用浮层 — 抽自 ChatInput.vue(零行为变更)。
//!
//! 职责:@ 触发的实体引用 popover(项目/任务/灵感联想候选列表)。
//! 架构复用技能联想 popover 的 .ai-skill-popover 容器样式,仅新增组标题/类型标签。
//!
//! 父组件注入:
//! - mentionItems:联想候选(项目 + 任务 + 灵感,已按查询过滤)
//! - mentionGroups:按类型分组的候选(模板按组渲染组标题)
//! - mentionTotal:未过滤候选总数(区分"无匹配" vs "空")
//! - mentionIndex:当前高亮项在扁平列表中的下标
//! 触发:
//! - select(item):选中实体 → 替换 @query 段为 [类型: 名] 标记
//! - update:mentionIndex:鼠标 hover 时同步高亮下标

import type { MentionItem } from './MentionItem'

defineProps<{
  /** 联想候选(扁平,项目 + 任务 + 灵感) */
  mentionItems: MentionItem[]
  /** 按类型分组的候选(模板按组渲染组标题) */
  mentionGroups: { key: string; label: string; items: MentionItem[] }[]
  /** 未过滤候选总数(用于区分"无匹配" vs "空") */
  mentionTotal: number
  /** 当前高亮项在扁平列表中的下标 */
  mentionIndex: number
  /** 扁平下标查找函数(组内 item 在扁平列表中的位置,供高亮判定) */
  mentionFlatIndex: (uid: string) => number
}>()

const emit = defineEmits<{
  /** 选中实体 → 替换 @query 段为 [类型: 名] 标记 + 关闭浮层 */
  (e: 'select', item: MentionItem): void
  /** 鼠标 hover 时同步高亮下标 */
  (e: 'update:mentionIndex', index: number): void
}>()
</script>

<template>
  <!-- UX-10 §1.4: @ 实体引用浮层(@ 触发,选中插入 [类型:名] 标记,架构复用技能 popover) -->
  <div class="ai-skill-popover">
    <div v-if="!mentionItems.length" class="ai-skill-empty">
      {{ mentionTotal ? $t('aiChat.mentionNoMatch') : $t('aiChat.mentionEmpty') }}
    </div>
    <div v-else>
      <template v-for="g in mentionGroups" :key="g.key">
        <div v-if="g.items.length" class="ai-mention-group">{{ g.label }}</div>
        <div
          v-for="item in g.items"
          :key="item.uid"
          class="ai-skill-item"
          :class="{ 'ai-skill-item--active': mentionFlatIndex(item.uid) === mentionIndex }"
          @click="emit('select', item)"
          @mouseenter="emit('update:mentionIndex', mentionFlatIndex(item.uid))"
        >
          <div class="ai-skill-item-row">
            <span class="ai-mention-item-type" :class="'ai-mention-item-type--' + item.type">{{ item.typeLabel }}</span>
            <span class="ai-mention-item-name">{{ item.name }}</span>
            <span class="ai-mention-item-desc">{{ item.desc }}</span>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<style scoped>
/* ── UX-10 §1.4: @ 实体引用浮层特定样式(复用全局 .ai-skill-popover/.ai-skill-item,仅新增 mention 专有) ──
   .ai-skill-popover/.ai-skill-item/.ai-skill-empty 已提取到 styles/components.css 全局 */
.ai-mention-group {
  padding: 4px 10px 2px;
  font-size: 10px;
  font-weight: 600;
  color: var(--df-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  user-select: none;
}
.ai-mention-item-name { color: var(--df-text); font-weight: 500; flex-shrink: 0; }
.ai-mention-item-desc {
  color: var(--df-text-dim);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 类型标签小色块(项目/任务区分) */
.ai-mention-item-type {
  flex-shrink: 0;
  padding: 1px 5px;
  border-radius: var(--df-radius-sm);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: var(--df-bg-hover);
  color: var(--df-text-dim);
}
.ai-mention-item-type--project {
  background: color-mix(in srgb, var(--df-accent) 16%, transparent);
  color: var(--df-accent);
}
.ai-mention-item-type--task {
  background: color-mix(in srgb, var(--df-success) 16%, transparent);
  color: var(--df-success);
}
</style>
