<template>
  <div class="field-roles-selector">
    <label class="selector-label">
      字段角色
      <el-tooltip content="为字段分配角色，工具将按角色精准消费字段" placement="top">
        <el-icon class="help-icon"><QuestionFilled /></el-icon>
      </el-tooltip>
    </label>
    <el-checkbox-group v-model="selectedRoles" class="roles-checkbox-group">
      <el-checkbox
        v-for="role in availableRoles"
        :key="role.value"
        :value="role.value"
        class="role-checkbox"
      >
        <div class="role-item">
          <span class="role-label">{{ role.label }}</span>
          <el-tooltip :content="role.description" placement="top">
            <el-icon class="role-help-icon"><QuestionFilled /></el-icon>
          </el-tooltip>
        </div>
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { QuestionFilled } from '@element-plus/icons-vue'
import type { FieldRole } from '@/types/metadata'

const props = defineProps<{
  modelValue: FieldRole[]
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: FieldRole[]): void
}>()

const availableRoles: { value: FieldRole; label: string; description: string }[] = [
  {
    value: 'resource_filter',
    label: '资源过滤',
    description: '用于 KB 文档检索时的元数据过滤，kb_search_dynamic 工具将消费此类字段'
  },
  {
    value: 'slot',
    label: '运行时槽位',
    description: '对话流程中的结构化槽位，用于信息收集，memory_recall 工具将消费此类字段'
  },
  {
    value: 'prompt_var',
    label: '提示词变量',
    description: '注入到 LLM Prompt 中的变量，template_engine 将消费此类字段'
  },
  {
    value: 'routing_signal',
    label: '路由信号',
    description: '用于意图路由和风险判断的信号，intent_hint/high_risk_check 工具将消费此类字段'
  }
]

const selectedRoles = computed({
  get: () => props.modelValue || [],
  set: (val: FieldRole[]) => emit('update:modelValue', val)
})
</script>

<style scoped lang="scss">
.field-roles-selector {
  width: 100%;
}

.selector-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--el-text-color-regular);
  margin-bottom: 8px;
}

.help-icon {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  cursor: help;
}

.roles-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.role-checkbox {
  margin-right: 0 !important;
}

.role-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.role-label {
  font-size: 14px;
}

.role-help-icon {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  cursor: help;
}
</style>
