<!-- =============================================================================
// 企微IT智能服务台 — AI 推荐回复（内联）组件
// =============================================================================
// 说明：在聊天消息流中，最后一条用户消息之后、坐席回复之前
// 显示条件：仅坐席未回复时（最后一条消息是用户发的）
// 交互：点击卡片或 Ctrl+1/2/3 → 填入回复输入框
// ============================================================================= -->

<template>
  <div v-if="shouldShow" class="ai-recommend-inline">
    <div class="ai-recommend-inline__header">
      <span class="ai-recommend-inline__title">🤖 AI 推荐回复</span>
    </div>
    <div class="ai-recommend-inline__cards">
      <div
        v-for="(rec, index) in recommendations"
        :key="index"
        class="ai-recommend-card"
        :class="{ 'is-hovered': hoveredIndex === index }"
        @mouseenter="hoveredIndex = index"
        @mouseleave="hoveredIndex = -1"
        @click="handleSelect(index)"
      >
        <div class="ai-recommend-card__header">
          <span class="ai-recommend-card__name">{{ rec.name }}</span>
          <span class="ai-recommend-card__confidence">{{ rec.confidence }}%</span>
        </div>
        <div class="ai-recommend-card__text">{{ rec.content }}</div>
        <div class="ai-recommend-card__shortcut">Ctrl+{{ index + 1 }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// ============================================================================
// 导入
// ============================================================================
import { ref, computed, watch } from 'vue'
import { useConversationStore } from '@/stores/conversation'
import type { Message } from '@/api/message'

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

const conversationStore = useConversationStore()

/** 当前 hover 的卡片索引 */
const hoveredIndex = ref(-1)

/** AI 推荐数据 */
interface AiRecommendation {
  /** 方案名称 */
  name: string
  /** 置信度百分比 */
  confidence: number
  /** 推荐内容 */
  content: string
}

/** 推荐列表（Mock 数据，后续对接 wingman API） */
const recommendations = ref<AiRecommendation[]>([])

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

/** 是否应该显示推荐（最后一条消息是用户发的，且坐席未回复） */
const shouldShow = computed(() => {
  const msgs = conversationStore.messages
  if (msgs.length === 0) return false
  const lastMsg = msgs[msgs.length - 1]
  // 最后一条消息是用户发的（employee），说明坐席还没回复
  return lastMsg.sender_type === 'employee'
})

// ============================================================================
// Mock 数据生成
// ============================================================================

/**
 * 根据 Messages 生成 Mock 推荐数据
 * P0 阶段使用 Mock，后续对接 wingman API
 */
function generateMockRecommendations(messages: Message[]): void {
  if (messages.length === 0) {
    recommendations.value = []
    return
  }

  // 从最后一条用户消息提取关键词
  const lastUserMsg = [...messages].reverse().find(m => m.sender_type === 'employee')
  const content = lastUserMsg?.content?.toLowerCase() || ''

  // 基于关键词匹配 Mock 推荐方案
  if (content.includes('vpn') || content.includes('连接')) {
    recommendations.value = [
      { name: 'VPN 重连方案', confidence: 92, content: '请先断开 VPN 连接，等待10秒后重新连接。如仍然失败，请尝试切换到备用线路。' },
      { name: 'VPN 密码重置', confidence: 78, content: 'VPN 登录失败可能是密码过期导致，建议重置 VPN 密码后重试。' },
      { name: '网络环境检查', confidence: 65, content: '请检查当前网络环境是否为公司内网，VPN 仅在公司外网使用。' },
    ]
  } else if (content.includes('邮箱') || content.includes('邮件')) {
    recommendations.value = [
      { name: '邮箱容量清理', confidence: 88, content: '您的邮箱容量已接近上限，建议清理大附件邮件或联系IT申请扩容。' },
      { name: '邮箱配置检查', confidence: 75, content: '请检查 Outlook 账户设置是否正确，服务器地址为 mail.company.com。' },
      { name: '邮箱重置密码', confidence: 60, content: '如邮箱无法登录，可能是密码过期。请访问自助门户重置密码。' },
    ]
  } else if (content.includes('系统') || content.includes('登录') || content.includes('账号')) {
    recommendations.value = [
      { name: '账号解锁方案', confidence: 85, content: '您的账号可能因多次输入错误密码被锁定，请在自助门户解锁或联系IT处理。' },
      { name: '密码重置指引', confidence: 72, content: '请访问密码自助重置页面，按照提示完成密码重置。新密码需满足复杂度要求。' },
      { name: 'SSO 单点登录', confidence: 55, content: '推荐使用企业SSO单点登录，可统一管理各系统账号。' },
    ]
  } else {
    // 通用推荐
    recommendations.value = [
      { name: '通用排查方案', confidence: 80, content: '请先尝试清除浏览器缓存后重试，如问题仍存在请提供详细报错截图。' },
      { name: '远程协助方案', confidence: 65, content: '如自助排查无法解决，坐席可发起远程协助，请保持电脑开机状态。' },
      { name: '工单转交方案', confidence: 45, content: '该问题可能需要二线团队处理，我将为您创建工单并转交相关团队。' },
    ]
  }
}

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

/**
 * 选中推荐方案 → 填入回复输入框
 *
 * @param index - 推荐方案索引
 */
function handleSelect(index: number): void {
  if (index < 0 || index >= recommendations.value.length) return
  conversationStore.pendingReplyText = recommendations.value[index].content
}

// ============================================================================
// 暴露方法供快捷键调用
// ============================================================================

/**
 * 通过索引选择推荐（供 useKeyboardShortcuts 调用）
 */
function selectByIndex(index: number): void {
  handleSelect(index)
}

defineExpose({ selectByIndex })

// ============================================================================
// 监听消息变化 → 重新生成 Mock 推荐
// ============================================================================

watch(
  () => conversationStore.messages.length,
  () => {
    generateMockRecommendations(conversationStore.messages)
  },
  { immediate: true }
)
</script>

<style scoped>
/* AI 推荐容器 */
.ai-recommend-inline {
  margin: 12px 0;
  border: 1px dashed var(--accent);
  border-radius: var(--radius-lg);
  background: var(--bg-accent-soft);
  padding: 12px 16px;
}

.ai-recommend-inline__header {
  margin-bottom: 10px;
}

.ai-recommend-inline__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

/* 推荐卡片容器 */
.ai-recommend-inline__cards {
  display: flex;
  gap: 10px;
}

/* 推荐卡片 */
.ai-recommend-card {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ai-recommend-card:hover,
.ai-recommend-card.is-hovered {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.ai-recommend-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.ai-recommend-card__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

/* 置信度药丸 */
.ai-recommend-card__confidence {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--bg-secondary);
  font-weight: 600;
}

/* 推荐文本（2 行截断） */
.ai-recommend-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-recommend-card__shortcut {
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-placeholder);
  text-align: right;
}

/* 响应式：小屏幕下卡片竖排 */
@media (max-width: 768px) {
  .ai-recommend-inline__cards {
    flex-direction: column;
  }
}
</style>
