<!-- =============================================================================
// 企微IT智能服务台 — H5用户端消息气泡组件
// =============================================================================
// 说明：根据消息类型渲染不同样式的消息气泡
//   - 员工消息：靠右蓝底白字 (var(--accent))
//   - 坐席消息：靠左白底+边框，显示坐席名称
//   - AI消息：靠左绿底 (#07C160) + "[AI回复]" 标签
//   - 系统消息：居中灰字
// 同步坐席端功能：
//   - 图片消息：缩略图展示（点击查看大图）
//   - 文件消息：文件卡片展示（点击下载）
//   - 引用回复：蓝色竖线 + 发送者 + 摘要
//   - 消息复制：长按/点击复制按钮
// ============================================================================= -->

<template>
  <!-- 系统消息：居中灰色文字 -->
  <div v-if="msg.message_type === 'system'" class="message-bubble message-bubble--system">
    <span class="message-bubble__system-text">{{ msg.content }}</span>
  </div>

  <!-- 员工/坐席/AI 消息：气泡样式 -->
  <div
    v-else
    class="message-bubble"
    :class="bubbleClass"
    @mouseenter="showActions = true"
    @mouseleave="showActions = false"
  >
    <!-- 发送者名称（坐席和 AI 消息显示在左侧） -->
    <div v-if="msg.message_type !== 'employee'" class="message-bubble__sender">
      <!-- AI 消息显示 [AI回复] 标签 -->
      <span v-if="msg.message_type === 'ai'" class="message-bubble__ai-tag">[AI回复]</span>
      <span class="message-bubble__sender-name">{{ senderName }}</span>
    </div>

    <!-- 消息内容气泡 -->
    <div class="message-bubble__content" :class="contentClass">
      <!-- 引用回复摘要（当此消息回复了某条消息时显示） -->
      <div
        v-if="msg.reply_to_id && replyToContent"
        class="reply-quote"
        @click.stop="$emit('scrollToMessage', msg.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="!msg.msg_type || msg.msg_type === 'text'">
        <p class="message-bubble__text" style="white-space: pre-wrap;">{{ msg.content }}</p>
      </template>

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

      <!-- 文件消息：显示文件卡片 -->
      <template v-else-if="msg.msg_type === 'file'">
        <a
          v-if="msg.media_url"
          :href="msg.media_url"
          target="_blank"
          class="media-card media-card--link"
          @click.stop
        >
          <div class="media-card__icon">📎</div>
          <div class="media-card__info">
            <span class="media-card__label">{{ msg.file_name || '文件消息' }}</span>
            <span v-if="msg.file_size" class="media-card__size">{{ formatFileSize(msg.file_size) }}</span>
          </div>
        </a>
        <!-- 无 URL 时显示纯卡片 -->
        <div v-else class="media-card">
          <div class="media-card__icon">📎</div>
          <div class="media-card__info">
            <span class="media-card__label">{{ msg.file_name || '文件消息' }}</span>
            <span v-if="msg.file_size" class="media-card__size">{{ formatFileSize(msg.file_size) }}</span>
          </div>
        </div>
      </template>

      <!-- 其他非文本消息（语音/视频等）：显示通用媒体卡片 -->
      <template v-else>
        <div class="media-card">
          <div class="media-card__icon">{{ mediaIcon }}</div>
          <div class="media-card__info">
            <span class="media-card__label">{{ mediaTypeLabel }}</span>
            <span v-if="msg.file_name" class="media-card__name">{{ msg.file_name }}</span>
            <span v-if="msg.file_size" class="media-card__size">{{ formatFileSize(msg.file_size) }}</span>
          </div>
        </div>
      </template>

      <!-- 操作按钮组（hover/长按 显示）：复制 -->
      <div v-if="showActions" class="message-bubble__actions">
        <button
          v-if="!msg.msg_type || msg.msg_type === 'text'"
          class="action-btn"
          title="复制消息"
          @click.stop="copyMessage"
        >
          {{ copySuccess ? '✓' : '📋' }}
        </button>
      </div>
    </div>

    <!-- 消息时间 -->
    <div class="message-bubble__time" :class="timeClass">
      {{ formatTime(msg.created_at) }}
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * MessageBubble 消息气泡组件
 * 根据消息类型（employee/agent/ai/system）和内容类型（text/image/file）渲染不同样式
 * 同步坐席端功能：图片消息、文件消息、引用回复、消息复制
 * @prop msg - 消息对象
 */

import { computed, ref } from 'vue'
import { useClipboard } from '@vueuse/core'
import { showToast } from 'vant'
import type { Message } from '@/api/conversation'

const props = defineProps<{
  /** 消息对象 */
  msg: Message
}>()

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

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

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

/** 是否显示操作按钮（鼠标悬停时显示） */
const showActions = ref(false)

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

/**
 * 复制消息内容到剪贴板。
 * 复制成功后显示 ✓ 图标 1.5 秒，并弹出 Vant Toast 提示。
 */
async function copyMessage(): Promise<void> {
  try {
    await copy(props.msg.content)
    copySuccess.value = true
    showToast('已复制')
    setTimeout(() => {
      copySuccess.value = false
    }, 1500)
  } catch (err) {
    console.error('复制失败:', err)
  }
}

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

/** 气泡容器的 CSS 类名 */
const bubbleClass = computed(() => {
  const classes = [`message-bubble--${props.msg.message_type}`]
  // 乐观更新：发送中/失败状态添加额外样式
  if (props.msg.status === 'sending') {
    classes.push('message-bubble--sending')
  } else if (props.msg.status === 'failed') {
    classes.push('message-bubble--failed')
  }
  return classes.join(' ')
})

/** 消息内容的 CSS 类名 */
const contentClass = computed(() => {
  return `message-bubble__content--${props.msg.message_type}`
})

/** 时间的 CSS 类名（员工消息时间靠右，其他靠左） */
const timeClass = computed(() => {
  return props.msg.message_type === 'employee'
    ? 'message-bubble__time--right'
    : 'message-bubble__time--left'
})

/** 发送者名称 */
const senderName = computed(() => {
  if (props.msg.message_type === 'agent') {
    return props.msg.sender_name || 'IT坐席'
  }
  if (props.msg.message_type === 'ai') {
    return 'AI助手'
  }
  return props.msg.sender_name
})

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

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

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

/** 被回复的消息内容摘要（截取前50字） */
const replyToContent = computed(() => {
  if (!props.msg.reply_to_id) return ''
  // H5 端暂从 store 的消息列表查找（消息列表可能不包含被引用消息）
  // 找不到时显示省略号
  return '...'
})

/** 被回复的消息发送者 */
const replyToSender = computed(() => {
  if (!props.msg.reply_to_id) return ''
  return ''
})

// ============================================================================
// 工具方法
// ============================================================================

/**
 * 格式化时间显示
 * 将 ISO 时间字符串格式化为 HH:mm 格式
 * @param isoTime ISO 格式的时间字符串
 * @returns 格式化后的时间（如 "14:30"）
 */
function formatTime(isoTime: string): string {
  if (!isoTime) return ''
  const date = new Date(isoTime)
  const hours = date.getHours().toString().padStart(2, '0')
  const minutes = date.getMinutes().toString().padStart(2, '0')
  return `${hours}:${minutes}`
}

/**
 * 格式化文件大小为人类可读字符串
 * @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.msg.media_url || props.msg.extra_data?.pic_url
  if (url) {
    window.open(url, '_blank')
  }
}
</script>

<style scoped>
/* ============================================================================
// 消息气泡容器（通用）
// ============================================================================ */
.message-bubble {
  display: flex;
  flex-direction: column;
  padding: 4px 16px;
  max-width: 100%;
}

/* ====== 员工消息：靠右 ====== */
.message-bubble--employee {
  align-items: flex-end;
}

/* ====== 坐席消息：靠左 ====== */
.message-bubble--agent {
  align-items: flex-start;
}

/* ====== AI 消息：靠左 ====== */
.message-bubble--ai {
  align-items: flex-start;
}

/* ====== 系统消息：居中 ====== */
.message-bubble--system {
  align-items: center;
  padding: 8px 16px;
}

/* ============================================================================
// 系统消息
// ============================================================================ */
.message-bubble__system-text {
  font-size: 12px;
  color: var(--color-system-text);
  background-color: var(--color-system-bg);
  padding: 4px 12px;
  border-radius: 10px;
  max-width: 80%;
  text-align: center;
  line-height: 1.5;
}

/* ============================================================================
// 发送者信息
// ============================================================================ */

/* 发送者名称行 */
.message-bubble__sender {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
  padding-left: 4px;
}

/* AI 标签 */
.message-bubble__ai-tag {
  display: inline-block;
  font-size: 10px;
  color: var(--color-ai-tag-text);
  background-color: var(--color-ai-tag-bg);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 500;
}

/* 发送者名称 */
.message-bubble__sender-name {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* ============================================================================
// 消息内容气泡
// ============================================================================ */

/* 通用内容气泡 */
.message-bubble__content {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 12px;
  word-break: break-word;
  line-height: 1.5;
  position: relative;
}

/* 员工消息内容：蓝底白字 */
.message-bubble__content--employee {
  background-color: var(--color-employee-bg);
  border-top-right-radius: 4px;
}

/* 坐席消息内容：白底+边框（与坐席端一致的边框样式） */
.message-bubble__content--agent {
  background-color: var(--color-agent-bg);
  border-top-left-radius: 4px;
  border: 1px solid var(--color-agent-border);
}

/* AI 消息内容：绿底 */
.message-bubble__content--ai {
  background-color: var(--color-ai-bg);
  border-top-left-radius: 4px;
}

/* ============================================================================
// 消息文字颜色
// ============================================================================ */
.message-bubble__text {
  font-size: 14px;
  margin: 0;
}

/* 员工消息文字：白色 */
.message-bubble__content--employee .message-bubble__text {
  color: var(--bg-secondary);
}

/* 坐席消息文字 */
.message-bubble__content--agent .message-bubble__text {
  color: var(--text-primary);
}

/* AI 消息文字 */
.message-bubble__content--ai .message-bubble__text {
  color: var(--color-ai-text);
}

/* ============================================================================
// 消息时间
// ============================================================================ */
.message-bubble__time {
  font-size: 10px;
  color: var(--text-placeholder);
  margin-top: 3px;
}

/* 时间靠右（员工消息） */
.message-bubble__time--right {
  text-align: right;
  padding-right: 4px;
}

/* 时间靠左（坐席/AI 消息） */
.message-bubble__time--left {
  text-align: left;
  padding-left: 4px;
}

/* ============================================================================
// 引用回复样式（同步坐席端 ReplyQuote）
// ============================================================================ */
.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;
}

/* ============================================================================
// 图片消息样式
// ============================================================================ */
.image-message {
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  max-width: 220px;
}

.image-message__thumbnail {
  display: block;
  max-width: 220px;
  max-height: 180px;
  object-fit: contain;
  border-radius: 6px;
  transition: opacity 0.2s;
}

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

/* ============================================================================
// 文件消息媒体卡片样式
// ============================================================================ */
.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: 160px;
  max-width: 240px;
}

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

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

.media-card__label {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

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

/* 文件卡片链接样式 */
.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);
}

/* ============================================================================
// 操作按钮组 — 悬停在消息气泡上时显示
// ============================================================================ */
.message-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);
}

/* ============================================================================
// 乐观更新 UI - 发送状态样式
// ============================================================================ */

/* 发送中状态：半透明 + spinner */
.message-bubble--sending .message-bubble__content {
  opacity: 0.6;
}

.message-bubble--sending .message-bubble__content::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  margin-top: -6px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--text-placeholder);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 发送失败状态：红色边框 + 重试按钮 */
.message-bubble--failed .message-bubble__content {
  border: 2px solid #ee0a24;
}

.message-bubble--failed .message-bubble__content::after {
  content: '重试';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #ee0a24;
  cursor: pointer;
  padding: 2px 8px;
  border: 1px solid #ee0a24;
  border-radius: 4px;
}

.message-bubble--failed .message-bubble__content::after:hover {
  background: #ee0a24;
  color: white;
}
</style>
