<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
		<view class="page">
			<!-- 自定义导航栏 -->
			<view class="nav" :style="{ paddingTop: navPaddingTop + 'px', height: navTotalHeight + 'px' }">
				<view class="nav-back" @tap="goBack">
					<view class="nav-back-icon"></view>
				</view>
				<text class="nav-title">我的聊天室</text>
				<view class="nav-capsule"></view>
			</view>

			<!-- 用户筛选组件（仅非guest用户可见） -->
			<view class="filter-section" v-if="!isGuest" :style="{ marginTop: navTotalHeight + 'px' }">
				<view class="filter-label">选择用户：</view>
				<view class="filter-content">
					<view class="guest-selector" @tap="showGuestSelector = true">
						<text v-if="selectedGuestId" class="selected-guest">
							{{ guestsList.find(g => g.userId === selectedGuestId)?.name || '请选择用户' }}
						</text>
						<text v-else class="placeholder">请选择用户</text>
						<view class="selector-arrow">▼</view>
					</view>
					<view class="btn-group">
						<view class="reset-btn" @tap="clearGuestSelect">重置</view>
						<view class="query-btn" @tap="handleQuery">查询</view>
					</view>
				</view>
			</view>

			<!-- 聊天室列表 -->
			<scroll-view class="list" scroll-y="true"
				:style="{ marginTop: navTotalHeight + (isGuest ? 0 : 44) + 'px' }"
				@scrolltolower="handleScrollToLower">
				<view class="room-card" v-for="(room, index) in chatRooms" :key="index" @tap="enterRoom(room)">
					<view class="room-avatar">
						<text class="avatar-text">{{ room.guestName?.charAt(0) || '客' }}</text>
					</view>
					<view class="room-info">
						<view class="room-header">
							<text class="room-name">{{ room.roomName || '聊天室' }}</text>
							<text class="room-time">{{ formatTime(room.lastMessageTime) }}</text>
						</view>
						<view class="room-footer">
							<text class="last-message">{{ getPlainTextPreview(room.lastMessage) }}</text>
							<view class="unread-badge" v-if="room.unreadCount && room.unreadCount > 0">
								<text class="badge-text">{{ room.unreadCount > 99 ? '99+' : room.unreadCount }}</text>
							</view>
						</view>
					</view>
					<view class="room-status" :class="getStatusClass(room.status)">
						<text class="status-dot"></text>
						<text class="status-text">{{ getStatusText(room.status) }}</text>
					</view>
				</view>

				<!-- 空状态 -->
				<view class="empty-state" v-if="chatRooms.length === 0">
					<text class="empty-icon">💬</text>
					<text class="empty-text">暂无聊天室</text>
					<text class="empty-hint">点击"联系人工"创建新聊天室</text>
				</view>
				
				<!-- 加载更多提示 -->
				<view class="load-more" v-if="loading">
					<text class="load-text">加载中...</text>
				</view>
				<view class="load-more" v-else-if="!hasMore && chatRooms.length > 0">
					<text class="load-text">没有更多数据了</text>
				</view>
			</scroll-view>

			<!-- 用户选择弹窗 -->
			<view class="modal-mask" v-if="showGuestSelector" @tap="showGuestSelector = false"></view>
			<view class="modal-content" v-if="showGuestSelector">
				<view class="modal-header">
					<text class="modal-title">选择用户</text>
				</view>
				<view class="modal-body">
					<view class="guest-item" v-for="guest in guestsList" :key="guest.userId"
						@tap="handleGuestSelect(guest)">
						<text class="guest-name">{{ guest.name }} {{ guest.phone || '无电话' }}</text>
					</view>
					<view class="empty-item" v-if="guestsList.length === 0">
						<text>暂无可选用户</text>
					</view>
				</view>
			</view>
		</view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup lang="ts">
	import { ref, onMounted, onUnmounted, computed } from 'vue'
	import { workcaseChatAPI } from '@/api'
	import { guestAPI } from '@/api/sys/guest'
	import type { ChatRoomVO, TbChatRoomDTO, PageRequest, ChatRoomMessageVO, TbGuestDTO } from '@/types'
	import { wsClient } from '@/utils/websocket'
	import { WS_HOST } from '@/config'

	// 导航栏
	const navPaddingTop = ref<number>(0)
	const navHeight = ref<number>(44)
	const navTotalHeight = ref<number>(44)
	const capsuleHeight = ref<number>(32)

	// 加载状态
	const loading = ref<boolean>(false)
	const loadingUsers = ref<boolean>(false)

	// 聊天室列表
	const chatRooms = ref<ChatRoomVO[]>([])

	// 分页相关
	const currentPage = ref<number>(1)
	const pageSize = ref<number>(10)
	const total = ref<number>(0)
	const hasMore = ref<boolean>(true)

	// 用户筛选相关
	const isGuest = ref(true)
	const guestsList = ref<TbGuestDTO[]>([])
	const selectedGuestId = ref<string>('')
	const showGuestSelector = ref<boolean>(false)

	// 计算属性：根据选中的用户ID筛选聊天室
	const filteredChatRooms = computed(() => {
		if (!selectedGuestId.value) {
			return chatRooms.value
		}
		return chatRooms.value.filter(room => room.guestId === selectedGuestId.value)
	})

	// 生命周期
	onMounted(async () => {
		const windowInfo = uni.getWindowInfo()
		const statusBarHeight = windowInfo.statusBarHeight || 20

		// #ifdef MP-WEIXIN
		try {
			const menuButton = uni.getMenuButtonBoundingClientRect()
			navPaddingTop.value = menuButton.top
			capsuleHeight.value = menuButton.height
			navHeight.value = menuButton.bottom + 8
		} catch (e) {
			navPaddingTop.value = statusBarHeight
			navHeight.value = navPaddingTop.value + 44
		}
		// #endif
		// #ifndef MP-WEIXIN
		navPaddingTop.value = statusBarHeight
		navHeight.value = navPaddingTop.value + 44
		// #endif

		// 设置导航栏总高度
		navTotalHeight.value = navHeight.value

		// 检查用户类型
		checkUserType()

		// 加载聊天室列表
		loadChatRooms()

		// 初始化WebSocket
		initWebSocket()
	})

	// 组件卸载时断开WebSocket
	onUnmounted(() => {
		disconnectWebSocket()
	})

	// 检查用户类型
	function checkUserType() {
		try {
			const userInfo = uni.getStorageSync('userInfo')
			const parsedUserInfo = typeof userInfo === 'string' ? JSON.parse(userInfo) : userInfo
			isGuest.value = parsedUserInfo.status === 'guest'

			// 如果是非guest用户，加载可选人员列表
			if (!isGuest.value) {
				loadGuestsList()
			}
		} catch (error) {
			console.error('检查用户类型失败:', error)
			isGuest.value = true
		}
	}

	// 加载可选人员列表
	async function loadGuestsList() {
		loadingUsers.value = true
		try {
			const res = await guestAPI.listGuest()
			if (res.success && res.dataList) {
				guestsList.value = res.dataList
			}
		} catch (error) {
			console.error('加载可选人员列表失败:', error)
		} finally {
			loadingUsers.value = false
		}
	}

	// 加载聊天室列表
	async function loadChatRooms(isLoadMore = false) {
		// 如果正在加载或没有更多数据，直接返回
		if (loading.value || (!isLoadMore && !hasMore.value)) return
		
		loading.value = true
		try {
			// 获取当前用户ID
			const userId = uni.getStorageSync('userId') || ''
			
			// 计算当前页码
			const currentPageNum = isLoadMore ? currentPage.value + 1 : 1

			const pageRequest : PageRequest<TbChatRoomDTO> = {
				filter: {
					guestId: isGuest.value ? userId : selectedGuestId.value // 如果是guest用户，查询自己的聊天室；否则根据选中的用户ID查询
				},
				pageParam: {
					page: currentPageNum,
					pageSize: pageSize.value
				}
			}

			const res = await workcaseChatAPI.getChatRoomPage(pageRequest)
			if (res.success && res.pageDomain?.dataList) {
				const newRooms = res.pageDomain.dataList
				total.value = res.pageDomain?.pageParam?.total || 0
				
				// 根据是否加载更多来处理数据
				if (isLoadMore) {
					// 加载更多：追加数据
					chatRooms.value = [...chatRooms.value, ...newRooms]
					currentPage.value++
				} else {
					// 刷新：替换数据
					chatRooms.value = newRooms
					currentPage.value = 1
				}
				
				// 判断是否还有更多数据
				hasMore.value = chatRooms.value.length < total.value
			}
		} catch (error) {
			console.error('加载聊天室列表失败:', error)
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			})
			// 如果是加载更多失败，保持hasMore不变
			if (!isLoadMore) {
				hasMore.value = false
			}
		} finally {
			loading.value = false
		}
	}

	// 处理滚动到底部事件
	function handleScrollToLower() {
		if (hasMore.value && !loading.value) {
			loadChatRooms(true)
		}
	}

	// 处理用户选择
	function handleGuestSelect(guest : TbGuestDTO) {
		selectedGuestId.value = guest.userId || ''
		showGuestSelector.value = false
		// 重置分页状态
		hasMore.value = true
		loadChatRooms() // 根据选中的用户重新加载聊天室列表
	}

	// 清除用户选择
	function clearGuestSelect() {
		selectedGuestId.value = ''
		// 重置分页状态
		hasMore.value = true
		loadChatRooms() // 重新加载所有聊天室列表
	}

	// 查询聊天室列表
	function handleQuery() {
		// 重置分页状态
		hasMore.value = true
		loadChatRooms() // 根据当前筛选条件重新加载聊天室列表
	}

	// 格式化时间（兼容 iOS）
	function formatTime(time ?: string) : string {
		if (!time) return ''
		// iOS 不支持 "yyyy-MM-dd HH:mm:ss" 格式，需要转换为 "yyyy-MM-ddTHH:mm:ss"
		const iosCompatibleTime = time.replace(' ', 'T')
		const date = new Date(iosCompatibleTime)
		if (isNaN(date.getTime())) return ''

		const now = new Date()
		const diff = now.getTime() - date.getTime()

		if (diff < 60000) return '刚刚'
		if (diff < 3600000) return Math.floor(diff / 60000) + '分钟前'
		if (diff < 86400000) return Math.floor(diff / 3600000) + '小时前'
		if (diff < 172800000) return '昨天'

		return `${date.getMonth() + 1}/${date.getDate()}`
	}

	// 去除markdown语法并截取前10个字符
	function getPlainTextPreview(text ?: string) : string {
		if (!text) return '暂无消息'

		// 去除markdown语法
		let plainText = text
			// 去除代码块
			.replace(/```[\s\S]*?```/g, '[代码]')
			// 去除行内代码
			.replace(/`([^`]+)`/g, '$1')
			// 去除粗体
			.replace(/\*\*([^\*]+)\*\*/g, '$1')
			// 去除斜体
			.replace(/\*([^\*]+)\*/g, '$1')
			// 去除链接
			.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
			// 去除标题标记
			.replace(/^#{1,6}\s+/gm, '')
			// 去除列表标记
			.replace(/^[*-]\s+/gm, '')
			// 去除多余的空白字符
			.replace(/\s+/g, ' ')
			.trim()

		// 截取前10个字符
		if (plainText.length > 10) {
			return plainText.substring(0, 10) + '...'
		}

		return plainText
	}

	// 获取状态样式类
	function getStatusClass(status ?: string) : string {
		switch (status) {
			case 'active': return 'status-active'
			case 'waiting': return 'status-waiting'
			case 'closed': return 'status-closed'
			default: return 'status-waiting'
		}
	}

	// 获取状态文本
	function getStatusText(status ?: string) : string {
		switch (status) {
			case 'active': return '进行中'
			case 'waiting': return '等待中'
			case 'closed': return '已关闭'
			default: return '未知'
		}
	}

	// 进入聊天室
	function enterRoom(room : ChatRoomVO) {
		room.unreadCount = 0
		uni.navigateTo({
			url: `/pages/chatRoom/chatRoom/chatRoom?roomId=${room.roomId}&workcaseId=${room.workcaseId || ''}`
		})
	}

	// 返回上一页
	function goBack() {
		uni.navigateBack()
	}

	// ==================== WebSocket连接管理 ====================

	// 初始化WebSocket连接
	async function initWebSocket() {
		try {
			const token = uni.getStorageSync('token') || ''
			if (!token) {
				console.warn('[chatRoomList] 未找到token，跳过WebSocket连接')
				return
			}

			// 构建WebSocket URL
			// 开发环境：ws://localhost:8180 或 ws://192.168.x.x:8180
			// 生产环境：wss://your-domain.com
			const protocol = 'wss:' // 开发环境使用ws，生产环境改为wss
			// 小程序使用原生WebSocket端点（不是SockJS端点）
			const wsUrl = `${protocol}//${WS_HOST}/urban-lifeline/workcase/ws/chat?token=${encodeURIComponent(token)}`

			console.log('[chatRoomList] 开始连接WebSocket')
			await wsClient.connect(wsUrl, token)

			// 订阅聊天室列表更新频道
			wsClient.subscribe('/topic/chat/list-update', handleListUpdate)
			console.log('[chatRoomList] WebSocket连接成功，已订阅列表更新频道')
		} catch (error) {
			console.error('[chatRoomList] WebSocket连接失败:', error)
		}
	}

	// 断开WebSocket连接
	function disconnectWebSocket() {
		try {
			wsClient.disconnect()
			console.log('[chatRoomList] WebSocket已断开')
		} catch (error) {
			console.error('[chatRoomList] 断开WebSocket失败:', error)
		}
	}

	// 处理列表更新消息
	async function handleListUpdate(message : ChatRoomMessageVO) {
		console.log('[chatRoomList] 收到列表更新消息:', message)

		// 更新对应聊天室的lastMessage和lastMessageTime
		const roomIndex = chatRooms.value.findIndex((r : ChatRoomVO) => r.roomId === message.roomId)
		if (roomIndex !== -1) {
			// 查询当前用户在该聊天室的未读数
			let unreadCount = 0
			try {
				const userInfo = uni.getStorageSync('userInfo')
				const userId = typeof userInfo === 'string' ? JSON.parse(userInfo).userId : userInfo?.userId
				if (userId) {
					const unreadResult = await workcaseChatAPI.getUnreadCount(message.roomId, userId)
					if (unreadResult.success && unreadResult.data !== undefined) {
						unreadCount = unreadResult.data
					}
				}
			} catch (error) {
				console.error('[chatRoomList] 查询未读数失败:', error)
			}

			chatRooms.value[roomIndex] = {
				...chatRooms.value[roomIndex],
				lastMessage: message.content || '',
				lastMessageTime: message.sendTime || '',
				unreadCount: unreadCount
			}

			// 将更新的聊天室移到列表顶部
			const updatedRoom = chatRooms.value[roomIndex]
			chatRooms.value.splice(roomIndex, 1)
			chatRooms.value.unshift(updatedRoom)
		}
	}
</script>

<style lang="scss" scoped>
	@import "./chatRoomList.scss";

	// 用户筛选组件样式
	.filter-section {
		position: fixed;
		top: var(--nav-height);
		left: 0;
		right: 0;
		height: 44px;
		background: #fff;
		border-bottom: 1px solid #eee;
		padding: 0 16px;
		display: flex;
		flex-direction: row;
		align-items: center;
		z-index: 10;
	}

	.filter-label {
		font-size: 14px;
		color: #333;
		margin-right: 8px;
	}

	.filter-content {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 8px;
	}

	.guest-selector {
		flex: 1;
		height: 32px;
		border: 1px solid #ddd;
		border-radius: 16px;
		padding: 0 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #f9f9f9;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.guest-selector:active {
		background: #e9e9e9;
		border-color: #bbb;
	}

	.selected-guest {
		font-size: 14px;
		color: #333;
	}

	.placeholder {
		font-size: 14px;
		color: #999;
	}

	.selector-arrow {
		font-size: 12px;
		color: #666;
		transition: transform 0.3s ease;
	}

	.filter-section:active .selector-arrow {
		transform: rotate(180deg);
	}

	/* 按钮组样式 */
	.btn-group {
		display: flex;
		flex-direction: row;
		gap: 8px;
	}

	.reset-btn,
	.query-btn {
		height: 32px;
		padding: 0 16px;
		border-radius: 16px;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.reset-btn {
		background: #f5f5f5;
		border: 1px solid #ddd;
		color: #666;
	}

	.reset-btn:active {
		background: #e9e9e9;
		border-color: #bbb;
	}

	.query-btn {
		background: #1989fa;
		border: 1px solid #1989fa;
		color: #fff;
	}

	.query-btn:active {
		background: #0066cc;
		border-color: #0066cc;
	}

	// 弹窗样式
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1000;
		animation: fadeIn 0.3s ease;
	}

	.modal-content {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
		max-width: 400px;
		background: #fff;
		border-radius: 20px;
		box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
		z-index: 1001;
		animation: slideUp 0.3s ease;
		overflow: hidden;
	}

	/* 弹窗动画 */
	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes slideUp {
		from {
			opacity: 0;
			transform: translate(-50%, -45%);
		}

		to {
			opacity: 1;
			transform: translate(-50%, -50%);
		}
	}

	.modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 18px 20px;
		border-bottom: 1px solid #f0f0f0;
		background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
	}

	.modal-title {
		font-size: 18px;
		font-weight: 600;
		color: #333;
	}

	.modal-close {
		font-size: 24px;
		color: #999;
		cursor: pointer;
		transition: all 0.3s ease;
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}

	.modal-close:active {
		background: #f0f0f0;
		color: #666;
		transform: rotate(90deg);
	}

	.modal-body {
		max-height: 350px;
		overflow-y: auto;
		padding: 0;
	}

	/* 滚动条样式 */
	.modal-body::-webkit-scrollbar {
		width: 6px;
	}

	.modal-body::-webkit-scrollbar-track {
		background: #f1f1f1;
	}

	.modal-body::-webkit-scrollbar-thumb {
		background: #c1c1c1;
		border-radius: 3px;
	}

	.modal-body::-webkit-scrollbar-thumb:hover {
		background: #a8a8a8;
	}

	.guest-item {
		display: flex;
		flex-direction: row;
		padding: 16px 20px;
		cursor: pointer;
		transition: all 0.3s ease;
		border-bottom: 1px solid #f5f5f5;
	}

	.guest-item:last-child {
		border-bottom: none;
	}

	.guest-item:active {
		background-color: #f8f8f8;
		transform: translateX(5px);
	}

	.guest-item:active .guest-name {
		color: #1989fa;
	}

	.guest-name {
		font-size: 16px;
		font-weight: 500;
		color: #333;
		margin-bottom: 6px;
		transition: color 0.3s ease;
	}

	.guest-phone {
		font-size: 14px;
		color: #666;
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.empty-item {
		padding: 30px 20px;
		text-align: center;
		color: #999;
		font-size: 14px;
		background: #fafafa;
	}

	.empty-item::before {
		content: "👤";
		font-size: 48px;
		display: block;
		margin-bottom: 12px;
		opacity: 0.5;
	}

	/* 加载更多样式 */
	.load-more {
		padding: 20px;
		text-align: center;
		background: #fff;
		border-top: 1px solid #eee;
		margin-top: 0;
	}

	.load-text {
		font-size: 14px;
		color: #999;
	}
</style>