<!-- =============================================================================
// 企微IT智能服务台 — AI 草稿气泡组件（内嵌在对话流中）
// =============================================================================
// 说明：在员工消息下方显示 AI 草稿气泡
// 特殊样式：浅蓝底色(#F0F9FF) + 左侧蓝色竖线 + 🤖 AI建议 标记
// 操作按钮：[采纳]/[编辑]/[忽略]
// ============================================================================= -->

<template>
  <transition name="ai-draft-fade">
    <div v-if="visible" class="ai-draft-bubble">
      <!-- 标题行 -->
      <div class="ai-draft-header">
        <span class="ai-draft-icon">🤖</span>
        <span class="ai-draft-label">AI建议</span>
        <span v-if="confidence > 0" class="ai-draft-confidence">
          置信度 {{ Math.round(confidence * 100) }}%
        </span>
      </div>

      <!-- 草稿内容 -->
      <div class="ai-draft-content">
        {{ content }}
      </div>

      <!-- 操作按钮 -->
      <div class="ai-draft-actions">
        <el-button size="small" type="primary" @click="handleAccept">
          采纳
        </el-button>
        <el-button size="small" @click="handleEdit">
          编辑
        </el-button>
        <el-button size="small" text @click="handleIgnore">
          忽略
        </el-button>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
// ============================================================================
// 导入
// ============================================================================
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useConversationStore } from '@/stores/conversation'

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

interface Props {
  /** 会话ID */
  conversationId: string
  /** 消息ID（草稿关联的员工消息） */
  messageId: string
  /** 草稿内容 */
  content: string
  /** 置信度 */
  confidence: number
}

const props = defineProps<Props>()

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

const conversationStore = useConversationStore()

/** 是否可见（用于淡出动画） */
const visible = ref(true)

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

/**
 * 采纳草稿 — 将内容填入 ReplyBox
 */
function handleAccept(): void {
  conversationStore.acceptDraft(props.conversationId, props.messageId)
  ElMessage.success('草稿已填入回复框')
}

/**
 * 编辑草稿 — 将内容填入 ReplyBox 并聚焦
 */
function handleEdit(): void {
  conversationStore.editDraft(props.conversationId, props.messageId)
  ElMessage.success('草稿已填入回复框，可直接编辑')
}

/**
 * 忽略草稿 — 带淡出动画移除
 */
function handleIgnore(): void {
  // 触发淡出动画
  visible.value = false
  // 动画结束后从 store 移除
  setTimeout(() => {
    conversationStore.ignoreDraft(props.conversationId, props.messageId)
  }, 300)
}
</script>

<style scoped>
.ai-draft-bubble {
  margin-top: 4px;
  margin-left: 4px;
  margin-bottom: 8px;
  background-color: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 10px 12px;
  max-width: 85%;
  position: relative;
}

.ai-draft-header {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}

.ai-draft-icon {
  font-size: 14px;
}

.ai-draft-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

.ai-draft-confidence {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: 4px;
}

.ai-draft-content {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-draft-actions {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

/* 淡出动画 */
.ai-draft-fade-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.ai-draft-fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>
