<!-- =============================================================================
// 企微IT智能服务台 — AI 智能推荐卡片组件（v5.3 重构）
// =============================================================================
// 说明：右栏上方 AI 推荐区的单张推荐卡片
// 功能：
//   1. 方案名称 + 置信度药丸
//   2. 推荐内容（2行截断）
//   3. Ctrl+N 快捷键提示
//   4. 点击 → conversationStore.pendingReplyText = content
// ============================================================================= -->

<template>
  <div
    class="ai-suggest-card"
    @click="handleSelect"
  >
    <!-- 卡片头：方案名称 + 置信度药丸 -->
    <div class="ai-card-header">
      <span class="ai-card-title">{{ recommendation.title }}</span>
      <span class="ai-card-confidence" :style="confidenceStyle">
        {{ confidencePercent }}%
      </span>
    </div>

    <!-- 卡片文本：2行截断 -->
    <div class="ai-card-text">
      {{ recommendation.content }}
    </div>

    <!-- 快捷键提示 -->
    <div class="ai-card-shortcut">
      Ctrl+{{ index + 1 }}
    </div>
  </div>
</template>

<script setup lang="ts">
// ============================================================================
// 导入
// ============================================================================
import { computed } from 'vue'
import { useConversationStore } from '@/stores/conversation'

// ============================================================================
// 类型
// ============================================================================

/** AI 推荐项类型（与 AiAssistantPanel 一致） */
interface AiRecommendation {
  /** 方案名称 */
  title: string
  /** 推荐内容 */
  content: string
  /** 置信度（0-1） */
  confidence: number
}

// ============================================================================
// Props
// ============================================================================

interface Props {
  /** 推荐数据 */
  recommendation: AiRecommendation
  /** 推荐索引（0-based，用于快捷键 Ctrl+1/2/3） */
  index: number
}

const props = defineProps<Props>()

// ============================================================================
// Emits
// ============================================================================

interface Emits {
  /** 选中推荐事件 */
  (e: 'select', content: string): void
}

const emit = defineEmits<Emits>()

// ============================================================================
// 状态
// ============================================================================

const conversationStore = useConversationStore()

// ============================================================================
// 计算属性
// ============================================================================

/** 置信度百分比（整数） */
const confidencePercent = computed<number>(() => {
  return Math.round(props.recommendation.confidence * 100)
})

/** 置信度药丸样式（颜色根据置信度变化） */
const confidenceStyle = computed(() => {
  const percent = confidencePercent.value
  let bgColor = 'var(--accent-soft)'
  let textColor = 'var(--accent)'

  if (percent >= 85) {
    bgColor = 'var(--accent-soft)'
    textColor = 'var(--accent)'
  } else if (percent >= 60) {
    bgColor = 'rgba(230, 162, 60, 0.1)'
    textColor = 'var(--color-warning)'
  } else {
    bgColor = 'rgba(144, 147, 153, 0.1)'
    textColor = 'var(--text-tertiary)'
  }

  return {
    backgroundColor: bgColor,
    color: textColor,
  }
})

// ============================================================================
// 方法
// ============================================================================

/**
 * 处理推荐卡片的选择
 * 将推荐内容填充到对话输入框
 */
function handleSelect(): void {
  conversationStore.pendingReplyText = props.recommendation.content
  emit('select', props.recommendation.content)
}
</script>

<style scoped>
.ai-suggest-card {
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: var(--radius-md);
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.ai-suggest-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.ai-suggest-card:active {
  transform: scale(0.99);
}

/* ---- 卡片头 ---- */
.ai-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.ai-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.ai-card-confidence {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 10px;
  margin-left: 8px;
  line-height: 1.6;
}

/* ---- 卡片文本 ---- */
.ai-card-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- 快捷键提示 ---- */
.ai-card-shortcut {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity 0.2s;
}

.ai-suggest-card:hover .ai-card-shortcut {
  opacity: 1;
}
</style>
