<!-- =============================================================================
// 企微IT智能服务台 — H5用户端消息列表组件
// =============================================================================
// 说明：消息列表容器，包含：
//    - 进入会话自动标记已读
//    - 会话列表显示最后更新时间
//    - 未读消息角标
//    - 消息轮询
// ============================================================================= -->

<template>
  <div
    ref="listRef"
    class="message-list"
    @scroll="handleScroll"
  >
    <!-- 消息列表 -->
    <MessageItem
      v-for="msg in messages"
      :key="msg.message_id"
      :msg="msg"
      @recall="handleRecall"
      @delete="handleDelete"
    />

    <!-- 加载更多指示器 -->
    <div v-if="loading" class="message-list__loading">
      <van-loading size="20px" />
    </div>

    <!-- 无消息提示 -->
    <div v-if="!loading && messages.length === 0" class="message-list__empty">
      <div class="message-list__empty-icon">💬</div>
      <p>暂无消息</p>
      <p class="message-list__empty-hint">输入问题咨询，或 🔔 摇铃呼叫坐席</p>
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * MessageList 消息列表组件
 * 进入会话自动标记已读
 * 消息轮询
 */
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { showToast } from 'vant'
import { useConversationStore } from '@/stores/conversation'
import { pollMessages, markConversationRead, recallMessage, deleteMessage } from '@/api/message'
import MessageItem from './MessageItem.vue'

const store = useConversationStore()

/** 消息列表 DOM 引用 */
const listRef = ref<HTMLElement | null>(null)

/** 加载状态 */
const loading = ref(false)

/** 轮询定时器 */
let pollTimer: ReturnType<typeof setInterval> | null = null

/** 消息列表 */
const messages = ref(store.messages)

// ============================================================================
// 生命周期
// ============================================================================
onMounted(() => {
  // 进入会话自动标记已读
  markAsRead()

  // 启动轮询
  startPolling()
})

onUnmounted(() => {
  stopPolling()
})

// ============================================================================
// 监听
// ============================================================================
watch(
  () => store.messages,
  (newMessages) => {
    messages.value = newMessages
  },
  { deep: true }
)

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

/** 标记已读 */
async function markAsRead(): Promise<void> {
  const convId = store.currentConversation?.conversation_id
  if (!convId) return

  try {
    await markConversationRead(convId)
  } catch (error) {
    console.error('标记已读失败:', error)
  }
}

/** 启动轮询 */
function startPolling(): void {
  pollTimer = setInterval(async () => {
    await fetchNewMessages()
  }, 3000)
}

/** 停止轮询 */
function stopPolling(): void {
  if (pollTimer) {
    clearInterval(pollTimer)
    pollTimer = null
  }
}

/** 获取新消息 */
async function fetchNewMessages(): Promise<void> {
  if (store.loading) return

  const convId = store.currentConversation?.conversation_id
  if (!convId) return

  try {
    const lastMsg = messages.value[messages.value.length - 1]
    const afterMessageId = lastMsg?.message_id

    const newMessages = await pollMessages(convId, afterMessageId)

    if (newMessages && newMessages.length > 0) {
      // 添加新消息到列表
      for (const msg of newMessages) {
        store.messages.push(msg)
      }

      // 自动滚动到底部
      scrollToBottom()
    }
  } catch (error) {
    console.error('获取新消息失败:', error)
  }
}

/** 滚动到底部 */
function scrollToBottom(): void {
  nextTick(() => {
    if (listRef.value) {
      listRef.value.scrollTop = listRef.value.scrollHeight
    }
  })
}

/** 处理滚动 */
function handleScroll(): void {
  // 可以在这里实现加载更多历史消息
}

/** 处理撤回 */
async function handleRecall(messageId: string): Promise<void> {
  try {
    await recallMessage(messageId)
    showToast('消息已撤回')

    // 从列表中移除消息
    const index = messages.value.findIndex((m: any) => m.message_id === messageId)
    if (index !== -1) {
      messages.value.splice(index, 1)
    }
  } catch (error: any) {
    showToast(error?.message || '撤回失败')
  }
}

/** 处理删除 */
async function handleDelete(messageId: string): Promise<void> {
  try {
    await deleteMessage(messageId)
    showToast('消息已删除')

    // 从列表中移除消息
    const index = messages.value.findIndex((m: any) => m.message_id === messageId)
    if (index !== -1) {
      messages.value.splice(index, 1)
    }
  } catch (error: any) {
    showToast(error?.message || '删除失败')
  }
}

// 辅助函数：nextTick
function nextTick(fn: () => void): void {
  setTimeout(fn, 0)
}
</script>

<style scoped>
/* ============================================================================
// 消息列表容器
// ============================================================================ */
.message-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

/* 加载中 */
.message-list__loading {
  display: flex;
  justify-content: center;
  padding: 16px;
}

/* 空状态 */
.message-list__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.message-list__empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.message-list__empty p {
  color: var(--text-primary);
  margin: 0;
}

.message-list__empty-hint {
  font-size: 12px;
  color: var(--text-placeholder);
  margin-top: 8px;
}
</style>