<!-- =============================================================================
// 企微IT智能服务台 — AI助手面板容器组件（v5.3 重构）
// =============================================================================
// 说明：坐席工作台右侧的AI助手面板
// 功能：上下两区域布局
//   上方 ~1/3：🤖 AI 智能推荐区（1-3张推荐卡片）
//   下方 ~2/3：快速回复区（复用 QuickReplyPanel）
// ============================================================================= -->

<template>
  <div class="ai-assistant-panel">
    <!-- ================================================================== -->
    <!-- 上方 ~1/3 区域 — 🤖 AI 智能推荐区 -->
    <!-- ================================================================== -->
    <div class="ai-recommend-section">
      <!-- 标题栏 -->
      <div class="ai-recommend-header">
        <span class="ai-recommend-bar"></span>
        <span class="ai-recommend-title">🤖 AI 智能推荐</span>
      </div>

      <!-- 推荐卡片列表 -->
      <div v-if="recommendations.length > 0" class="ai-recommend-list">
        <AiSuggestReply
          v-for="(rec, index) in recommendations"
          :key="index"
          :recommendation="rec"
          :index="index"
          @select="handleSelectRecommendation"
        />
      </div>

      <!-- 无推荐时提示 -->
      <div v-else class="ai-recommend-empty">
        暂无推荐
      </div>
    </div>

    <!-- 分隔线 -->
    <div class="ai-section-divider"></div>

    <!-- ================================================================== -->
    <!-- 下方 ~2/3 区域 — 快速回复区 -->
    <!-- ================================================================== -->
    <div class="quick-reply-section">
      <QuickReplyPanel @use-template="handleUseTemplate" />
    </div>
  </div>
</template>

<script setup lang="ts">
// ============================================================================
// 导入
// ============================================================================
import { ref, computed, onMounted } from 'vue'
import AiSuggestReply from './AiSuggestReply.vue'
import QuickReplyPanel from './QuickReplyPanel.vue'
import { useConversationStore } from '@/stores/conversation'
import type { DraftResult } from '@/api/wingman'

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

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

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

/** 会话 Store */
const conversationStore = useConversationStore()

/** AI 推荐列表（Mock 数据，后续由 AI 引擎填充） */
const recommendations = ref<AiRecommendation[]>([])

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

/**
 * 从当前会话的 AI 草稿生成推荐列表
 * 将 draft 数据映射为推荐卡片格式
 */
const loadRecommendationsFromDraft = computed(() => {
  const convId = conversationStore.currentConversationId
  if (!convId) return []

  // 尝试从 AI 草稿缓存中获取推荐
  const convDrafts = conversationStore.aiDrafts.get(convId)
  if (!convDrafts || convDrafts.size === 0) return []

  const result: AiRecommendation[] = []
  convDrafts.forEach((draft: DraftResult) => {
    result.push({
      title: 'AI 回复建议',
      content: draft.content,
      confidence: draft.confidence,
    })
  })
  return result
})

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

/**
 * 处理 AI 推荐卡片的选择
 * 将推荐内容填充到对话输入框
 *
 * @param content - 推荐内容
 */
function handleSelectRecommendation(content: string): void {
  conversationStore.pendingReplyText = content
}

/**
 * 处理快速回复模板的"使用"事件
 * 将模板内容填充到对话输入框
 *
 * @param content - 模板内容（已替换变量）
 */
function handleUseTemplate(content: string): void {
  conversationStore.pendingReplyText = content
}

/**
 * 加载 AI 推荐数据
 * 优先从草稿缓存获取，否则使用 Mock 数据
 */
function loadRecommendations(): void {
  const fromDraft = loadRecommendationsFromDraft.value
  if (fromDraft.length > 0) {
    recommendations.value = fromDraft
    return
  }

  // Mock 数据：当无真实 AI 推荐时展示示例
  if (conversationStore.currentConversationId) {
    recommendations.value = [
      {
        title: '重置密码流程',
        content: '您好，密码重置可通过企业门户自助操作：访问 portal.company.com → 忘记密码 → 按提示完成重置。如无法自助，请提供工号，我帮您后台重置。',
        confidence: 0.92,
      },
      {
        title: 'VPN 连接故障排查',
        content: 'VPN 连接问题常见原因：1) 网络切换后未重连；2) 证书过期。请先尝试：断开 VPN → 重启客户端 → 重新连接。如仍失败，请提供错误截图。',
        confidence: 0.85,
      },
    ]
  } else {
    recommendations.value = []
  }
}

// ============================================================================
// 生命周期
// ============================================================================

onMounted(() => {
  loadRecommendations()
})
</script>

<style scoped>
.ai-assistant-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- 上方 AI 推荐区 ---- */
.ai-recommend-section {
  flex: 0 0 auto;
  max-height: 33%;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-recommend-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  flex-shrink: 0;
}

.ai-recommend-bar {
  width: 3px;
  height: 12px;
  background-color: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}

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

.ai-recommend-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px 8px;
}

.ai-recommend-empty {
  text-align: center;
  padding: 16px;
  color: var(--text-tertiary);
  font-size: 13px;
}

/* ---- 分隔线 ---- */
.ai-section-divider {
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

/* ---- 下方快速回复区 ---- */
.quick-reply-section {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
</style>
