<!-- =============================================================================
// 企微IT智能服务台 — H5用户端聊天主页面
// =============================================================================
// 说明：响应式双栏/单栏布局
//   - 桌面端（≥500px）：左栏对话区 + 拖拽手柄 + 右栏三段式面板
//   - 手机端（<500px）：全宽单栏对话区，无右侧面板
//   - 拖拽手柄：左右栏宽度可手动调节（桌面端）
// ============================================================================= -->

<template>
  <div class="chat-view">
    <!-- 左栏：对话区（始终显示） -->
    <div
      class="chat-view__left"
      :class="{ 'chat-view__left--full': !showRightPanel }"
      :style="!isMobile && showRightPanel ? { flex: `0 0 ${leftWidth}%`, maxWidth: `${leftWidth}%` } : {}"
    >
      <ChatPanel />
    </div>

    <!-- 拖拽手柄：左右栏分隔条（仅桌面端显示） -->
    <div
      v-if="showRightPanel && !isMobile"
      class="chat-view__resize-handle"
      @mousedown="handleResizeStart"
    >
      <div class="chat-view__resize-grip"></div>
    </div>

    <!-- 右栏：三段式面板（仅桌面端显示） -->
    <div
      v-if="showRightPanel"
      class="chat-view__right"
    >
      <RightPanel />
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * ChatView 聊天主页面
 * 响应式布局：
 *   - 桌面端（≥500px）：双栏 — 左栏对话区 + 右栏三段式面板
 *   - 手机端（<500px）：单栏 — 全宽对话区，无右侧面板
 * 桌面端支持拖拽手柄手动调节左右栏宽度
 * 右侧面板三段式：AI推送区 / 常用资源标签页 / 趣味问答
 */

import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'  // 新增：useRoute 用于读取 URL 参数
import { useConversationStore } from '@/stores/conversation'
import { useEmployeeStore } from '@/stores/employee'  // 新增：检查登录状态
import { useH5WebSocket } from '@/composables/useH5WebSocket'  // H5 WebSocket
import ChatPanel from '@/components/chat/ChatPanel.vue'
import RightPanel from '@/components/assistant/RightPanel.vue'
import { joinConversation as joinConversationApi } from '@/api/conversation'  // 邀请功能

// 新增：路由实例（用于跳转登录页）
const router = useRouter()
const route = useRoute()  // 用于读取 URL 参数（邀请链接等）

// 新增：员工状态管理（用于检查登录状态）
const employeeStore = useEmployeeStore()

const store = useConversationStore()

// H5 WebSocket 连接（实时推送参与者变更、新消息等事件）
const h5ws = useH5WebSocket()

/** 当前窗口宽度 */
const windowWidth = ref<number>(window.innerWidth)

/** 左栏宽度百分比（默认60%） */
const leftWidth = ref<number>(60)

/** 是否正在拖拽调节宽度 */
const isResizing = ref<boolean>(false)

/** 是否为移动端窄屏（宽度 < 500px，与原型图对齐） */
const isMobile = computed(() => windowWidth.value < 500)

/** 是否显示右栏面板（桌面端始终显示，手机端隐藏） */
const showRightPanel = computed(() => {
  // 桌面端：始终显示右栏
  if (!isMobile.value) return true
  // 手机端：不显示右栏
  return false
})

/**
 * ── 拖拽调节左右栏宽度 ──
 * 方案：只固定左侧宽度，右侧 flex:1 自动填满，不留空白
 * 左栏最小宽度 40%，右栏最小宽度 220px
 */

/** 拖拽开始：记录初始 X 坐标和初始左栏宽度 */
function handleResizeStart(event: MouseEvent): void {
  isResizing.value = true

  const startX = event.clientX
  const startLeftWidth = leftWidth.value
  const containerWidth = windowWidth.value

  /**
   * 拖拽中：根据鼠标移动距离换算为百分比，更新左栏宽度
   */
  function handleMouseMove(e: MouseEvent): void {
    if (!isResizing.value) return

    const deltaX = e.clientX - startX
    const deltaPercent = (deltaX / containerWidth) * 100

    let newLeftWidth = startLeftWidth + deltaPercent

    // 限制最小/最大宽度：左栏 40%~80%
    newLeftWidth = Math.max(40, Math.min(80, newLeftWidth))

    leftWidth.value = newLeftWidth
  }

  /**
   * 拖拽结束：移除事件监听
   */
  function handleMouseUp(): void {
    isResizing.value = false
    document.removeEventListener('mousemove', handleMouseMove)
    document.removeEventListener('mouseup', handleMouseUp)
    document.body.style.cursor = ''
    document.body.style.userSelect = ''
  }

  document.body.style.cursor = 'col-resize'
  document.body.style.userSelect = 'none'
  document.addEventListener('mousemove', handleMouseMove)
  document.addEventListener('mouseup', handleMouseUp)
}

/**
 * 监听窗口大小变化
 * 更新 windowWidth 以响应式调整布局
 */
function handleResize(): void {
  windowWidth.value = window.innerWidth
}

// 生命周期：挂载时添加 resize 监听 + 检查登录状态 + 初始化应用
onMounted(() => {
  window.addEventListener('resize', handleResize)

  // 🔒 登录状态检查：未登录则跳转登录页
  if (!employeeStore.isAuthenticated) {
    console.warn('[ChatView] 未登录，跳转登录页')
    router.push('/login')
    return
  }

  // 初始化应用（获取用户信息、会话、审批链接等）
  store.initialize()

  // 🔌 建立 WebSocket 连接（实时推送参与者变更、新消息等）
  // 做什么：登录后建立 WS 连接，替代纯轮询
  // 为什么：WS 推送比3秒轮询更实时，参与者变更可立即可见
  h5ws.connect()
})

// 📋 邀请链接处理：URL 中的 invite 和 eid 参数
// 做什么：被邀请人点击企微卡片后，自动加入会话并切换视图
// 为什么：实现邀请-加入闭环（P0-10）
// 修复（2026-06-12）：原实现使用 setTimeout(1000) 等待 store 初始化，
// 存在竞态风险（初始化超过1秒时会失败）。现改为 watch 监听 initialized 变化，
// 确保 store 完全初始化后再执行邀请加入逻辑。
const inviteId = route.query.invite as string
const eid = route.query.eid as string

if (inviteId && eid) {
  console.log(`[ChatView] 检测到邀请链接: conv=${inviteId}, eid=${eid}`)

  // 监听 store 初始化完成，然后执行邀请加入
  const stopWatch = watch(
    () => store.initialized,
    async (isInitialized) => {
      if (!isInitialized) return

      // 停止监听（只执行一次）
      stopWatch()

      try {
        // H5 专用端点通过 Token 认证获取 employee_id，无需传递 eid
        await joinConversationApi(inviteId)
        console.log('[ChatView] 已成功加入邀请的会话')
        // 切换到邀请的会话（刷新会话信息 + 加载消息）
        await store.switchToConversation(inviteId)
      } catch (err: any) {
        console.error('[ChatView] 加入会话失败:', err)
        // 如果是拒绝性错误（未被邀请/会话已结束），不切换
        const code = err?.response?.data?.code
        if (code !== 3034 && code !== 3033) {
          // 其他错误（如重复加入），仍尝试切换到该会话
          try {
            await store.switchToConversation(inviteId)
          } catch (switchErr) {
            console.error('[ChatView] 切换会话也失败:', switchErr)
          }
        }
      } finally {
        // 清理 URL 参数（避免刷新后重复加入）
        router.replace({ path: route.path, query: {} })
      }
    },
    { immediate: true }  // 如果已经初始化完成，立即执行
  )
}

// 生命周期：卸载时移除 resize 监听 + 停止轮询 + 断开WS + 清理
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  h5ws.disconnect()
  store.cleanup()
})
</script>

<style scoped>
/* 聊天主页面容器：双栏 Flex 布局 */
.chat-view {
  display: flex;
  width: 100%;
  height: 100dvh;  /* 修复：用 dvh 单位，移动端友好 */
  background-color: var(--bg-primary);
  position: relative;
}

/* 左栏：对话区 */
.chat-view__left {
  flex: 0 0 60%;
  max-width: 60%;
  height: 100%;
  overflow: hidden;
}

/* 左栏全宽（移动端右栏收起时） */
.chat-view__left--full {
  flex: 0 0 100%;
  max-width: 100%;
}

/* 拖拽手柄：左右栏分隔条 */
.chat-view__resize-handle {
  flex: 0 0 6px;
  width: 6px;
  cursor: col-resize;
  background-color: var(--border-color);
  position: relative;
  z-index: 10;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 拖拽手柄悬停和拖拽中高亮 */
.chat-view__resize-handle:hover,
.chat-view__resize-handle:active {
  background-color: var(--accent);
}

/* 拖拽手柄上的抓握指示点 */
.chat-view__resize-grip {
  width: 2px;
  height: 32px;
  border-radius: 1px;
  background-color: var(--text-placeholder);
  transition: background-color 0.2s;
}

.chat-view__resize-handle:hover .chat-view__resize-grip {
  background-color: var(--bg-secondary);
}

/* 右栏：三段式面板 */
.chat-view__right {
  flex: 1;
  height: 100%;
  overflow: hidden;
}

/* 移动端适配（<500px） */
@media (max-width: 499px) {
  /* 移动端左栏全宽 */
  .chat-view__left {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
</style>
