<template>
	<view class="chat-sidebar-container">
		<view class="status-bar"></view>
		<view class="sidebar-header">
			<view class="user-profile-card" @click="openUserCardVisible">
				<view class="left">
					<view v-if="UserAvatar" class="avatar-preview">
						<image :src="UserAvatar" mode="aspectFill"></image>
					</view>
					<view v-else class="avatar-placeholder">
						<uni-icons type="contact-filled" size="50" color="#007aff"></uni-icons>
					</view>


				</view>
				<view class="center">
					<text>欢迎回来</text>
					<text>{{UserName}}</text>
				</view>
				<view class="right">
					<view class="status-dot"></view>
					<view class="status-text"><text>在线</text></view>
				</view>

			</view>
			<view class="new-chat-btn" @click="goContactPages">
				<text>+ 聊天列表</text>
			</view>
		</view>
		<view class="chat-history">
			<view class="history-header">
				<view class="history-title-section">
					<text>历史会话</text>
					<text>{{UserConversations.length}}个对话</text>
				</view>
				<view class="history-management">
					<view v-if="!isSelectMode" class="history-management-btn iconfont icon-jia icon-jia-style"
						@click="openNewChatModal"></view>
					<view v-if="!isSelectMode" class="history-management-btn iconfont icon-duoxuan icon-duoxuan-style"
						@click="toggleSelectMode"></view>
					<view v-if="!isSelectMode" class="history-management-btn iconfont icon-saochu icon-saochu-style" @click="clearAllConversations">
					</view>
					<view v-if="isSelectMode && selectedHistoryIds.length > 0"
						class="history-management-btn iconfont icon-shanchu icon-shanchu-style"
						@click="deleteConversations"></view>
					<view v-if="isSelectMode"
						class="history-management-btn iconfont icon-total_selection icon-total_selection-style"
						:class="{active:isAllHistorySelected}" @click="toggleSelectAllHistory"></view>
					<view v-if="isSelectMode" class="history-management-btn iconfont icon-quxiao icon-quxiao-style"
						@click="toggleSelectMode"></view>

				</view>
			</view>
			<view v-if="!isSelectMode" class="history-search-wrap">
				<view class="history-search-inner" :class="{'has-value' : chatHistoryQuery || isHistorySearchFocused}">
					<uni-icons type="search"
						:class="[chatHistoryQuery || isHistorySearchFocused ? 'chat-search-icon' : 'search-icon']"></uni-icons>
					<input v-model="chatHistoryQuery" @focus="isHistorySearchFocused=true"
						@blur="isHistorySearchFocused=false" type="text" placeholder="搜索会话..." />
				</view>
			</view>
			<view class="chat-history-list">
				<!-- ai对话列表 -->
				<view v-if="chatType === 0" v-for="chat in UserConversations" :key="chat._id" :data-chat-id="chat._id"
					class="chat-history-card"
					:class="{'is-select-chat': currentChatId === chat._id || selectedHistoryIds.includes(chat._id)}"
					@click="isSelectMode ?  toggleHistorySelect(chat._id) : selectChat(chat._id)">
					<view v-if="isSelectMode" class="history-chat-checkbox">
						<uni-icons v-if="selectedHistoryIds.includes(chat._id)" type="checkmarkempty" size="20"
							color="#007aff"></uni-icons>
					</view>
					<view class="history-chat-avatar">
						<uni-icons type="chat-filled" size="26" color="#007aff"></uni-icons>
					</view>
					<view v-if="chat.agent_id">
						{{chat.agent_data.title}}
					</view>
					<view v-else>{{chat.title}}</view>
				</view>
				<!-- 好友对话列表 -->
				<view v-if="chatType === 1" v-for="chat in UserConversations" :key="chat.sessionId"
					:data-chat-id="chat.sessionId" class="chat-history-card"
					:class="{'is-select-chat': currentChatId === chat.sessionId || selectedHistoryIds.includes(chat.sessionId)}"
					@click="isSelectMode ?  toggleHistorySelect(chat.sessionId) : selectChat(chat.sessionId,chat.receiver)">
					<view v-if="isSelectMode" class="history-chat-checkbox">
						<uni-icons v-if="selectedHistoryIds.includes(chat.sessionId)" type="checkmarkempty" size="20"
							color="#007aff"></uni-icons>
					</view>
					<view class="history-chat-avatar">
						<image v-if="chat.avatar" :src="chat.avatar" class="friend-avatar" mode="aspectFill"></image>
					</view>

					<view>{{chat.friendNickName}}</view>
				</view>
				<!-- 群聊对话列表 -->
				<view v-if="chatType === 2" v-for="chat in UserConversations" :key="chat.id" :data-chat-id="chat.id"
					class="chat-history-card"
					:class="{'is-select-chat': currentChatId === chat.id || selectedHistoryIds.includes(chat.id)}"
					@click="isSelectMode ?  toggleHistorySelect(chat.id) : selectChat(chat.id)">
					<view v-if="isSelectMode" class="history-chat-checkbox">
						<uni-icons v-if="selectedHistoryIds.includes(chat.id)" type="checkmarkempty" size="20"
							color="#007aff"></uni-icons>
					</view>
					<view class="history-chat-avatar">
						<view class="iconfont icon-qunliao" style="font-size: 80rpx; color: #fff;"></view>
					</view>

					<view>{{chat.name}}</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		onUnmounted,
		ref,
		toRef
	} from 'vue'

	import {
		deleteConversation
	} from '@/utils/cloud-api.js'
	import {
		getToken
	} from '@/utils/user-info.js'

	import {
		getUserInfo
	} from '@/utils/cloud-api.js'

	defineOptions({
		name: "ChatSidebar"
	})

	// 接收Chat.vue传过来的数据
	// 定义props,接收父组件传过来的数据
	const props = defineProps({
		chatList: {
			type: Array,
			required: true
		},
		showNewChatModal: {
			type: Boolean,
			default: false
		},
		currentSessionId: {
			type: [String, Number],
			required: true
		},
		chatType: {
			type: Number,
			required: true
		}
	})

	const emit = defineEmits([
		'update:showNewChatModal',
		'update:currentSessionId',
		'refresh-conversations',
		'update:chatType'
	])

	const UserConversations = toRef(props, 'chatList')
	const showNewChatModal = toRef(props, 'showNewChatModal')
	const chatType = toRef(props, 'chatType')

	// 打开用户资料卡
	const openUserCardVisible = () => {
		uni.navigateTo({
			url: '/pages/UserProfileModal/UserProfileModal'
		})
	}

	// 选择模式
	const isSelectMode = ref(false)

	// 已选历史会话id列表
	const selectedHistoryIds = ref([])
	// 删除会话
	const deleteConversations = () => {
		if(selectedHistoryIds.value.length === 0) return
		uni.showModal({
			title:'确认删除',
			content:`确定要删除全部 ${selectedHistoryIds.value.length} 个对话吗？此操作不可恢复。`,
			confirmText: '确认删除',
			confirmColor: '#ff0000',
			success: async(res) => {
				if(res.confirm) {
					try {
						const userToken = getToken();
						await deleteConversation(userToken, selectedHistoryIds.value)
						// 4. 删除成功提示
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
						selectedHistoryIds.value = []
						isSelectMode.value = false
						// 通知父组件刷新会话列表
						emit('refresh-conversations')
					} catch (error) {
						// 6. 统一捕获错误，防止崩溃
						console.error('删除会话失败：', error)
						uni.showToast({
							title: '删除失败，请重试',
							icon: 'none'
						})
					}
				}
			}
		})
		
	}
	
	// 删除所有会话
	const clearAllConversations = () => {
		if (!UserConversations.value.length) {
			uni.showToast({ title: '没有可删除的会话', icon: 'none' })
			return
		}
		uni.showModal({
			title: '确认删除',
			content: `确定要删除全部 ${UserConversations.value.length} 个对话吗？此操作不可恢复。`,
			confirmText: '删除全部',
			confirmColor: '#ff0000',
			success: async (res) => {
				if (res.confirm) {
					try {
						const userToken = getToken()
						const allIds = UserConversations.value.map(item => item._id)
						await deleteConversation(userToken, allIds)
						uni.showToast({ title: '已删除全部对话', icon: 'success' })
						emit('refresh-conversations')
					} catch (error) {
						console.error('清空全部对话失败：', error)
						uni.showToast({ title: '删除失败，请重试', icon: 'none' })
					}
				}
			}
		})
	}

	// 是否全选历史会话
	const isAllHistorySelected = computed(() => {
		return UserConversations.value.length > 0 && selectedHistoryIds.value.length === UserConversations.value
			.length
	})

	// 当前选择的聊天会话
	const currentChatId = toRef(props, 'currentSessionId')
	// 选择聊天会话
	const selectChat = (chatId, receiverId = '') => {
		console.log("选择的id是：", chatId);
		if (receiverId) {
			uni.setStorageSync('receiverId', receiverId)
		}
		uni.setStorageSync('currentSessionId', chatId)
		emit('update:currentSessionId', chatId)
	}


	// 新建会话
	const openNewChatModal = () => {
		console.log("点击了新建会话");
		emit('update:showNewChatModal', true)
	}

	const goContactPages = () => {
		uni.navigateTo({
			url: '/pages/ContactPages/ContactPages'
		})
	}

	// 会话历史搜索
	const chatHistoryQuery = ref('')
	const isHistorySearchFocused = ref(false)

	// ======批量处理历史会话操作方法=========
	// 切换多选模式
	const toggleSelectMode = () => {
		isSelectMode.value = !isSelectMode.value;
		if (!isSelectMode.value) {
			selectedHistoryIds.value = []
		}
	}

	// 多选模式下选择历史会话
	const toggleHistorySelect = (chatId) => {
		const index = selectedHistoryIds.value.indexOf(chatId)
		if (index === -1) {
			selectedHistoryIds.value.push(chatId)
		} else {
			selectedHistoryIds.value.splice(index, 1)
		}
	}

	// 切换全选会话
	const toggleSelectAllHistory = () => {
		if (isAllHistorySelected.value) {
			selectedHistoryIds.value = []
		} else {
			selectedHistoryIds.value = UserConversations.value.map(chat => chat._id)
		}
	}
	const UserToken = ref('')
	const UserAvatar = ref('')
	const UserName = ref('')

	onMounted(async () => {
		UserToken.value = getToken()
		const UserInfo = await getUserInfo(UserToken.value)
		UserAvatar.value = UserInfo.avatar || ''
		UserName.value = UserInfo.username || ''
		console.log("菜单收到的会话列表：",UserConversations.value);
	})
</script>

<style lang="scss" scoped>
	.chat-sidebar-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100%;
		background-color: #f8f8f8;
		color: black;
		box-sizing: border-box;
	}


	.sidebar-header {
		padding: 40rpx;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-shrink: 0;
		justify-content: center;
		flex-direction: column;
		border-bottom: 1rpx solid #bbbbbb;
	}

	.user-profile-card {
		padding: 10rpx 20rpx;
		width: 100%;
		display: flex;
		align-items: center;
		background-color: #ffffff;
		box-sizing: border-box;
		border-radius: 30rpx;
		box-shadow: 0 0 8rpx #cccccc;
	}

	.user-profile-card .left {
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 10rpx;

		.avatar-preview {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.avatar-placeholder {
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			border-radius: 50%;
			width: 120rpx;
			height: 120rpx;
		}
	}

	.user-profile-card .center {
		flex: 1;
		height: 0;
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: center;
	}

	.user-profile-card .right {
		flex-shrink: 0;
		margin-left: 6rpx;
		display: flex;
		align-items: center;

		.status-dot {
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background-color: #10B981;
			margin-right: 16rpx;
			animation: statusDotPulse 2s ease-in-out infinite;
		}

		@keyframes statusDotPulse {

			0%,
			100% {
				box-shadow: 0 0 15rpx rgba(59, 130, 246, 0.8);
				transform: scale(1);
			}

			50% {
				box-shadow: 0 0 30rpx rgba(59, 130, 246, 0.7);
				transform: scale(1.1);
			}
		}
	}

	.new-chat-btn {
		margin-top: 20rpx;
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(to right, #3b86ff, #2463df);
		border-radius: 30rpx;
		box-shadow: 0 0 8rpx rgba(59, 134, 255, 0.6);

		text {
			font-size: 28rpx;
			font-weight: bold;
			color: #ffffff;
		}
	}

	.chat-history {
		width: 100%;
		padding: 20rpx 0;
		box-sizing: border-box;
		flex: 1;
		height: 0;
		overflow-y: auto;
		overflow-x: hidden;

		&::-webkit-scrollbar {
			width: 8rpx;
		}

		&::-webkit-scrollbar-thumb {
			background: rgba(59, 134, 255, 0.4);
			border-radius: 3rpx;
		}

		&::-webkit-scrollbar-track {
			background: transparent;
		}
	}

	.history-header {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #bbbbbb;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.history-title-section {
			display: flex;
			flex-direction: column;

		}

		.history-management {
			display: flex;

			.history-management-btn {
				margin-left: 20rpx;
				width: 60rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				background-color: rgba(221, 221, 221, 0.5);
				border-radius: 10rpx;
			}



			.icon-jia-style {
				background-color: rgba(16, 185, 129, 0.2);
				color: #059669;
			}

			.icon-duoxuan-style {
				color: #666666;
			}

			.icon-saochu-style {
				color: red;
			}

			.icon-quxiao-style {
				color: #3b86ff;
				// border: 1rpx solid #3b86ff;
				box-sizing: border-box;
			}

			.icon-total_selection-style {
				color: #666666;
			}

			.icon-total_selection-style.active {
				color: #2463df;
				background: rgba(59, 134, 255, 0.2);
			}

			.icon-shanchu-style {
				color: red;
			}
		}
	}

	.history-search-wrap {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 20rpx 30rpx 6rpx 30rpx;
		box-sizing: border-box;

		.history-search-inner {
			display: flex;
			width: 100%;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			align-items: center;
			background-color: rgba(194, 191, 211, 0.1);
			border-radius: 30rpx;

			.search-icon {
				color: #666666 !important;
				font-weight: bold;
				font-size: 36rpx !important;
			}

			.chat-search-icon {
				color: #aaaaff !important;
				font-weight: bold;
				font-size: 36rpx !important;
			}

			input {
				margin-left: 10rpx;
				box-sizing: border-box;
			}
		}

		.history-search-inner.has-value {
			background-color: #ffffff;
			border: 2rpx solid #aaaaff;
			box-shadow: 0 0 15rpx #aaaaff;
		}
	}

	.chat-history-list {
		padding: 10rpx 30rpx;

		.chat-history-card {
			display: flex;
			align-items: center;
			border: 1rpx solid #3b86ff;
			background-color: #ffffff;
			border-radius: 30rpx;
			padding: 30rpx;
			margin-top: 10rpx;
			box-sizing: border-box;

		}

		.is-select-chat {
			box-shadow: 0 0 5rpx #2463df;
			background-color: rgba(59, 134, 255, 0.1);
		}

		.history-chat-checkbox {
			width: 30rpx;
			height: 30rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1rpx solid #3b86ff;
		}

		.history-chat-avatar {
			width: 66rpx;
			height: 66rpx;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgba(59, 134, 255, 0.4);
			margin-left: 20rpx;
			box-sizing: border-box;
		}

		.friend-avatar {
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
	}
</style>