<!-- =============================================================================
// 企微IT智能服务台 — 消息气泡组件
// =============================================================================
// 说明：单条消息的气泡展示
// 根据 sender_type 区分：
//   - employee: 靠左灰底
//   - agent: 靠右蓝底白字
//   - ai: 靠左绿底+AI标签
//   - system: 居中灰字
// 图片消息显示缩略图，文件消息显示文件图标+名称
// 时间戳显示
// 对于 employee 消息，如果存在 AI 草稿，在下方显示草稿气泡
// ============================================================================= -->

<template>
  <div class="message-row" :class="`message-row-${message.sender_type}`">
    <!-- 系统消息（居中灰字） -->
    <template v-if="message.sender_type === 'system'">
      <div class="message-bubble message-system">
        {{ message.content }}
      </div>
    </template>

    <!-- 非系统消息 -->
    <template v-else>
      <!-- 发送者名称 -->
      <div class="message-sender-name">
        {{ senderLabel }}
        <!-- AI消息带AI标签 -->
        <span v-if="message.sender_type === 'ai'" class="ai-tag">AI</span>
      </div>

      <!-- 消息气泡 -->
      <div class="message-bubble" :class="`message-${message.sender_type}`"
        @mouseenter="showCopyBtn = true"
        @mouseleave="showCopyBtn = false"
      >
        <!-- 引用回复摘要（当此消息回复了某条消息时显示） -->
        <div v-if="message.reply_to_id && replyToContent" class="reply-quote" @click.stop="$emit('scrollToMessage', message.reply_to_id)">
          <div class="reply-quote-bar"></div>
          <div class="reply-quote-text">
            <span class="reply-quote-sender">{{ replyToSender }}</span>
            {{ replyToContent }}
          </div>
        </div>

        <!-- 文本消息 -->
        <template v-if="message.msg_type === 'text'">
          <div style="white-space: pre-wrap;">{{ message.content }}</div>
        </template>

        <!-- 图片消息：显示缩略图（可点击查看大图） -->
        <template v-else-if="message.msg_type === 'image'">
          <div class="image-message" @click="previewImage">
            <img
              v-if="message.media_url || message.extra_data?.pic_url"
              :src="message.media_url || message.extra_data?.pic_url"
              :alt="message.file_name || '图片'"
              class="image-thumbnail"
              loading="lazy"
            />
            <!-- 无URL时显示占位卡片 -->
            <div v-else class="media-card">
              <div class="media-icon">🖼️</div>
              <div class="media-info">
                <span class="media-type-label">图片消息</span>
                <span v-if="message.file_name" class="media-filename">{{ message.file_name }}</span>
              </div>
            </div>
          </div>
        </template>

        <!-- 文件消息：显示文件卡片 -->
        <template v-else-if="message.msg_type === 'file'">
          <a
            v-if="message.media_url"
            :href="message.media_url"
            target="_blank"
            class="media-card media-card-link"
          >
            <div class="media-icon">📎</div>
            <div class="media-info">
              <span class="media-type-label">{{ message.file_name || '文件消息' }}</span>
              <span v-if="message.file_size" class="media-size">{{ formatFileSize(message.file_size) }}</span>
            </div>
          </a>
          <!-- 无URL时显示纯卡片 -->
          <div v-else class="media-card">
            <div class="media-icon">📎</div>
            <div class="media-info">
              <span class="media-type-label">{{ message.file_name || '文件消息' }}</span>
              <span v-if="message.file_size" class="media-size">{{ formatFileSize(message.file_size) }}</span>
            </div>
          </div>
        </template>

        <!-- 其他非文本消息（语音/视频/位置等）：显示通用媒体卡片 -->
        <template v-else>
          <div class="media-card">
            <div class="media-icon">{{ mediaIcon }}</div>
            <div class="media-info">
              <span class="media-type-label">{{ mediaTypeLabel }}</span>
              <span v-if="message.file_name" class="media-filename">{{ message.file_name }}</span>
              <span v-if="message.file_size" class="media-size">{{ formatFileSize(message.file_size) }}</span>
            </div>
          </div>
        </template>

        <!-- 操作按钮组（hover 显示）：复制 + 回复 -->
        <div v-if="showCopyBtn" class="bubble-actions">
          <button
            v-if="message.msg_type === 'text'"
            class="action-btn"
            title="复制消息"
            @click.stop="copyMessage"
          >
            {{ copySuccess ? '✓' : '📋' }}
          </button>
          <button
            class="action-btn"
            title="回复"
            @click.stop="$emit('reply', message)"
          >
            ↩
          </button>
        </div>
      </div>

      <!-- 时间戳 -->
      <div class="message-time">{{ formatMessageTime }}</div>

      <!-- AI 草稿气泡（仅对员工消息显示） -->
      <AiDraftBubble
        v-if="message.sender_type === 'employee' && draftForMessage"
        :conversation-id="message.conversation_id"
        :message-id="message.id"
        :content="draftForMessage.content"
        :confidence="draftForMessage.confidence"
      />
    </template>
  </div>
</template>

<script setup lang="ts">
// ============================================================================
// 导入
// ============================================================================
import { computed, ref } from 'vue'
import { useClipboard } from '@vueuse/core'
import type { Message } from '@/api/message'
import type { DraftResult } from '@/api/wingman'
import { useConversationStore } from '@/stores/conversation'
import AiDraftBubble from './AiDraftBubble.vue'

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

interface Props {
  /** 消息对象 */
  message: Message
}

const props = defineProps<Props>()

// 事件（模板中使用 $emit 触发）
defineEmits<{
  /** 点击引用回复摘要，滚动到被回复的消息 */
  (e: 'scrollToMessage', messageId: string): void
  /** 点击回复按钮，回复某条消息 */
  (e: 'reply', message: Message): void
}>()

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

const conversationStore = useConversationStore()

// ============================================================================
// 剪贴板相关（消息复制功能）
// ============================================================================

/** useClipboard：VueUse 提供的剪贴板操作组合函数 */
const { copy } = useClipboard()

/** 是否显示复制按钮（鼠标悬停时显示） */
const showCopyBtn = ref(false)

/** 复制成功反馈标识（1.5秒后自动消失） */
const copySuccess = ref(false)

/**
 * 复制消息内容到剪贴板。
 * 使用 VueUse 的 useClipboard 封装，兼容各浏览器。
 * 复制成功后显示 ✓ 图标 1.5 秒。
 */
async function copyMessage(): Promise<void> {
  try {
    await copy(props.message.content)
    copySuccess.value = true
    setTimeout(() => {
      copySuccess.value = false
    }, 1500)
  } catch (err) {
    console.error('复制失败:', err)
  }
}

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

/** 发送者标签文字 */
const senderLabel = computed(() => {
  const labelMap: Record<string, string> = {
    employee: props.message.sender_name || '员工',
    agent: props.message.sender_name || '我',
    ai: 'AI助手',
  }
  return labelMap[props.message.sender_type] || '未知'
})

/** 格式化消息时间 */
const formatMessageTime = computed(() => {
  if (!props.message.created_at) return ''
  const date = new Date(props.message.created_at)
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  return `${hours}:${minutes}`
})

/** 获取当前消息的 AI 草稿数据 */
const draftForMessage = computed<DraftResult | null>(() => {
  if (props.message.sender_type !== 'employee') return null
  if (!props.message.conversation_id) return null

  return conversationStore.getDraft(
    props.message.conversation_id,
    props.message.id
  )
})

// ==================================================================
// 非文本消息相关计算属性
// ==================================================================

/** 消息类型对应的 Emoji 图标 */
const mediaIcon = computed(() => {
  const icons: Record<string, string> = {
    image: '🖼️',
    voice: '🎤',
    video: '🎬',
    file: '📎',
    location: '📍',
  }
  return icons[props.message.msg_type] || '📄'
})

/** 消息类型对应的中文标签 */
const mediaTypeLabel = computed(() => {
  const labels: Record<string, string> = {
    image: '图片消息',
    voice: '语音消息',
    video: '视频消息',
    file: '文件消息',
    location: '位置消息',
  }
  return labels[props.message.msg_type] || '媒体消息'
})

/**
 * 格式化文件大小为人类可读字符串。
 *
 * @param bytes - 文件大小（字节）
 * @returns 格式化后的字符串，如 "1.5 MB"
 */
function formatFileSize(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
}

/**
 * 图片预览：点击图片缩略图时，在新标签页打开大图。
 * 使用浏览器原生能力，无需引入图片预览组件。
 */
function previewImage(): void {
  const url = props.message.media_url || props.message.extra_data?.pic_url
  if (url) {
    window.open(url, '_blank')
  }
}

// ============================================================================
// 引用回复相关计算属性
// ============================================================================

/** 被回复的消息内容摘要（截取前50字） */
const replyToContent = computed(() => {
  if (!props.message.reply_to_id) return ''
  // 从 store 的消息列表中查找被回复的消息
  const repliedMsg = conversationStore.messages.find(
    (m: Message) => m.id === props.message.reply_to_id
  )
  if (!repliedMsg) return '...'
  // 截取前50字作为摘要
  const text = repliedMsg.content || ''
  return text.length > 50 ? text.substring(0, 50) + '...' : text
})

/** 被回复的消息发送者 */
const replyToSender = computed(() => {
  if (!props.message.reply_to_id) return ''
  const repliedMsg = conversationStore.messages.find(
    (m: Message) => m.id === props.message.reply_to_id
  )
  if (!repliedMsg) return ''
  return repliedMsg.sender_name || '未知'
})
</script>

<style scoped>
/* ============================================================================
// 非文本消息媒体卡片样式
// ============================================================================ */

.media-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  min-width: 180px;
  max-width: 260px;
}

.media-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.media-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.media-type-label {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}

.media-filename {
  font-size: 12px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-size {
  font-size: 11px;
  color: var(--text-placeholder);
}

/* 操作按钮组 — 悬停在消息气泡上时显示 */
.message-bubble {
  position: relative;
}

.bubble-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 2px;
  z-index: 2;
}

.action-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: var(--bg-tertiary);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s, background 0.2s;
  padding: 0;
}

.action-btn:hover {
  opacity: 1;
  background: var(--accent-soft);
}

/* ============================================================================
// 图片消息样式
// ============================================================================ */

.image-message {
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  max-width: 280px;
}

.image-thumbnail {
  display: block;
  max-width: 280px;
  max-height: 200px;
  object-fit: contain;
  border-radius: 6px;
  transition: opacity 0.2s;
}

.image-thumbnail:hover {
  opacity: 0.9;
}

/* 文件消息卡片链接样式 */
.media-card-link {
  text-decoration: none;
  color: inherit;
  transition: background 0.2s, border-color 0.2s;
}

.media-card-link:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* ============================================================================
// 引用回复样式
// ============================================================================ */

.reply-quote {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 6px 8px;
  margin-bottom: 6px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.reply-quote:hover {
  background: var(--accent-soft);
}

.reply-quote-bar {
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
}

.reply-quote-text {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.reply-quote-sender {
  color: var(--accent);
  font-weight: 500;
  margin-right: 4px;
}
</style>
