<template>
	<div class="userbar">
		<!-- 菜单搜索 -->
		<a-tooltip :title="$t('common.search')">
			<a-button type="text" @click="showSearch" class="action-btn">
				<SearchOutlined />
			</a-button>
		</a-tooltip>

		<!-- 消息通知 -->
		<a-dropdown v-model:open="messageVisible" :trigger="['click']" placement="bottomRight" @openChange="handleMessageDropdownOpen">
			<a-badge :count="messageCount" :offset="[-5, 5]">
				<a-button type="text" class="action-btn">
					<BellOutlined />
				</a-button>
			</a-badge>
			<template #overlay>
				<a-card class="dropdown-card" :bordered="false">
					<template #title>
						<div class="message-header">
							<span>{{ $t('common.messages') }}</span>
							<a-space size="small">
								<a-button v-if="messageCount > 0" type="link" size="small" @click="markAllAsRead">
									{{ $t('common.markAllAsRead') }}
								</a-button>
								<a-button type="link" size="small" @click="clearMessages">
									{{ $t('common.clearAll') }}
								</a-button>
							</a-space>
						</div>
					</template>

					<!-- 消息类型筛选 -->
					<div class="message-tabs">
						<a-tabs v-model:activeKey="currentMessageType" size="small" @change="changeMessageType">
							<a-tab-pane key="all" :tab="$t('common.all')" />
							<a-tab-pane key="notification" :tab="$t('common.notification')" />
							<a-tab-pane key="task" :tab="$t('common.task')" />
							<a-tab-pane key="warning" :tab="$t('common.warning')" />
						</a-tabs>
					</div>

					<div class="message-list">
						<div v-for="msg in messages" :key="msg.id" class="message-item" :class="{ unread: !msg.is_read }" @click="handleMessageRead(msg)">
							<div class="message-content">
								<div class="message-title">{{ msg.title }}</div>
								<div class="message-content-text">
									{{ msg.content }}
								</div>
								<div class="message-time">
									{{ notificationStore.formatNotificationTime(msg.created_at) }}
								</div>
							</div>
							<a-button type="text" size="small" danger class="delete-btn" @click.stop="handleDeleteMessage(msg.id)">
								<DeleteOutlined />
							</a-button>
						</div>
						<a-empty v-if="messages.length === 0" :description="$t('common.noMessages')" />
					</div>

					<!-- 分页 -->
					<div v-if="messagesTotal > messagesPageSize" class="message-pagination">
						<a-pagination v-model:current="messagesPage" v-model:pageSize="messagesPageSize" :total="messagesTotal" size="small" :show-size-changer="false" @change="handleMessagePageChange" />
					</div>
				</a-card>
			</template>
		</a-dropdown>

		<!-- 任务列表 -->
		<a-tooltip :title="$t('common.taskCenter')">
			<a-badge :count="taskCount" :offset="[-5, 5]">
				<a-button type="text" @click="taskVisible = true" class="action-btn">
					<CheckSquareOutlined />
				</a-button>
			</a-badge>
		</a-tooltip>

		<!-- 语言切换 -->
		<a-dropdown :trigger="['click']" placement="bottomRight">
			<a-button type="text" class="action-btn">
				<GlobalOutlined />
			</a-button>
			<template #overlay>
				<a-menu @click="handleLanguageChange">
					<a-menu-item v-for="locale in i18nStore.availableLocales" :key="locale.value" :disabled="i18nStore.currentLocale === locale.value">
						<span>{{ locale.label }}</span>
					</a-menu-item>
				</a-menu>
			</template>
		</a-dropdown>

		<!-- 全屏 -->
		<a-tooltip :title="$t('common.fullscreen')">
			<a-button type="text" @click="toggleFullscreen" class="action-btn">
				<FullscreenOutlined v-if="!isFullscreen" />
				<FullscreenExitOutlined v-else />
			</a-button>
		</a-tooltip>

		<!-- 用户信息 -->
		<a-dropdown :trigger="['click']">
			<div class="user-info">
				<a-avatar :size="32" :src="userStore.user?.avatar || ''">
					{{ userStore.user?.username?.charAt(0)?.toUpperCase() || 'U' }}
				</a-avatar>
				<span class="username">{{ userStore.user?.username || 'Admin' }}</span>
				<DownOutlined />
			</div>
			<template #overlay>
				<a-menu @click="handleMenuClick">
					<a-menu-item key="profile">
						<UserOutlined />
						<span>{{ $t('common.personalCenter') }}</span>
					</a-menu-item>
					<a-menu-item key="settings">
						<SettingOutlined />
						<span>{{ $t('common.systemSettings') }}</span>
					</a-menu-item>
					<a-menu-item key="clearCache">
						<DeleteOutlined />
						<span>{{ $t('common.clearCache') }}</span>
					</a-menu-item>
					<a-menu-divider />
					<a-menu-item key="logout">
						<LogoutOutlined />
						<span>{{ $t('common.logout') }}</span>
					</a-menu-item>
				</a-menu>
			</template>
		</a-dropdown>
	</div>

	<!-- 菜单搜索弹窗 -->
	<search v-model:visible="searchVisible" />

	<!-- 任务抽屉 -->
	<task v-model:visible="taskVisible" v-model:tasks="tasks" />
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { message, Modal } from 'ant-design-vue'
import { useUserStore } from '@/stores/modules/user'
import { useI18nStore } from '@/stores/modules/i18n'
import { useNotificationStore } from '@/stores/modules/notification'
import { DownOutlined, UserOutlined, LogoutOutlined, FullscreenOutlined, FullscreenExitOutlined, BellOutlined, CheckSquareOutlined, GlobalOutlined, SearchOutlined, SettingOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { useI18n } from 'vue-i18n'
import search from './search.vue'
import task from './task.vue'

// 定义组件名称（多词命名）
defineOptions({
	name: 'UserBar',
})

const { t } = useI18n()
const router = useRouter()
const userStore = useUserStore()
const i18nStore = useI18nStore()
const notificationStore = useNotificationStore()

const isFullscreen = ref(false)
const searchVisible = ref(false)
const taskVisible = ref(false)
const messageVisible = ref(false)
const currentMessageType = ref('all')
const messagesPage = ref(1)
const messagesPageSize = ref(10)
const notificationsList = ref([])

// 未读消息数量
const messageCount = computed(() => notificationStore.unreadCount)

// 消息总数（用于分页）
const messagesTotal = computed(() => notificationStore.total)

// 从 store 获取消息数据
const messages = computed(() => notificationsList.value)

// 任务数据
const tasks = ref([
	{
		id: 1,
		title: '完成用户审核',
		priority: 'high',
		completed: false,
		time: '今天',
	},
	{
		id: 2,
		title: '更新系统文档',
		priority: 'medium',
		completed: false,
		time: '明天',
	},
	{
		id: 3,
		title: '优化数据库查询',
		priority: 'low',
		completed: true,
		time: '昨天',
	},
])

const taskCount = computed(() => tasks.value.filter((t) => !t.completed).length)

// 切换全屏
const toggleFullscreen = () => {
	if (!document.fullscreenElement) {
		document.documentElement.requestFullscreen()
		isFullscreen.value = true
	} else {
		document.exitFullscreen()
		isFullscreen.value = false
	}
}

// 监听全屏变化
const handleFullscreenChange = () => {
	isFullscreen.value = !!document.fullscreenElement
}

// 加载未读通知
const loadNotifications = async () => {
	try {
		await notificationStore.fetchUnreadCount()
		await loadUnreadNotifications()
	} catch (error) {
		console.error('加载通知失败:', error)
	}
}

// 加载未读通知列表
const loadUnreadNotifications = async () => {
	try {
		const res = await notificationStore.fetchUnreadNotifications({
			page: messagesPage.value,
			page_size: messagesPageSize.value,
			type: currentMessageType.value === 'all' ? null : currentMessageType.value,
		})
		notificationsList.value = res.list || []
	} catch (error) {
		console.error('加载未读通知列表失败:', error)
	}
}

// 加载所有通知
const loadAllNotifications = async () => {
	try {
		await notificationStore.fetchNotifications({
			page: messagesPage.value,
			page_size: messagesPageSize.value,
			type: currentMessageType.value === 'all' ? null : currentMessageType.value,
		})
		notificationsList.value = notificationStore.notifications
	} catch (error) {
		console.error('加载通知列表失败:', error)
	}
}

onMounted(() => {
	document.addEventListener('fullscreenchange', handleFullscreenChange)

	// 加载通知数据
	loadNotifications()

	// 注意：WebSocket 已在 App.vue 中统一初始化，这里不需要重复调用
	// 只需要处理消息即可，消息处理已经在 useWebSocket 中注册
})

onUnmounted(() => {
	document.removeEventListener('fullscreenchange', handleFullscreenChange)
})

// 显示搜索功能
const showSearch = () => {
	searchVisible.value = true
}

// 清除消息
const clearMessages = async () => {
	Modal.confirm({
		title: t('common.confirmClear'),
		content: t('common.confirmClearMessages'),
		okText: t('common.confirm'),
		cancelText: t('common.cancel'),
		onOk: async () => {
			try {
				await notificationStore.clearReadNotifications()
				message.success(t('common.cleared'))
				notificationsList.value = []
			} catch (error) {
				console.error('清空消息失败:', error)
			}
		},
	})
}

// 标记消息为已读
const handleMessageRead = async (msg) => {
	if (!msg.is_read) {
		try {
			await notificationStore.markAsRead(msg.id)
			// 更新本地状态
			const notification = notificationsList.value.find((n) => n.id === msg.id)
			if (notification) {
				notification.is_read = true
				notification.read_at = new Date().toISOString()
			}
		} catch (error) {
			console.error('标记已读失败:', error)
		}
	}
}

// 标记所有消息为已读
const markAllAsRead = async () => {
	Modal.confirm({
		title: '确认全部已读',
		content: '确定要将所有消息标记为已读吗？',
		okText: '确定',
		cancelText: '取消',
		onOk: async () => {
			try {
				await notificationStore.markAllAsRead()
				message.success(t('common.markedAsRead'))
				// 更新本地状态
				notificationsList.value.forEach((n) => {
					n.is_read = true
					n.read_at = n.read_at || new Date().toISOString()
				})
			} catch (error) {
				console.error('标记全部已读失败:', error)
			}
		},
	})
}

// 删除消息
const handleDeleteMessage = async (msgId) => {
	Modal.confirm({
		title: '确认删除',
		content: '确定要删除这条消息吗？',
		okText: '确定',
		cancelText: '取消',
		onOk: async () => {
			try {
				await notificationStore.deleteNotification(msgId)
				message.success('删除成功')
				// 更新本地状态
				const index = notificationsList.value.findIndex((n) => n.id === msgId)
				if (index !== -1) {
					notificationsList.value.splice(index, 1)
				}
			} catch (error) {
				console.error('删除消息失败:', error)
			}
		},
	})
}

// 切换消息类型
const changeMessageType = async (type) => {
	currentMessageType.value = type
	messagesPage.value = 1
	if (type === 'all') {
		await loadAllNotifications()
	} else {
		await loadUnreadNotifications()
	}
}

// 分页变化
const handleMessagePageChange = async (page) => {
	messagesPage.value = page
	if (currentMessageType.value === 'all') {
		await loadAllNotifications()
	} else {
		await loadUnreadNotifications()
	}
}

// 下拉框打开时加载数据
const handleMessageDropdownOpen = async (open) => {
	if (open) {
		await loadNotifications()
	}
}

// 显示任务抽屉
const showTasks = () => {
	taskVisible.value = true
}

// 切换语言
const handleLanguageChange = ({ key }) => {
	i18nStore.setLocale(key)
	message.success(t('common.languageChanged'))
}

// 处理菜单点击
const handleMenuClick = ({ key }) => {
	switch (key) {
		case 'profile':
			router.push('/ucenter')
			break
		case 'settings':
			router.push('/system/setting')
			break
		case 'clearCache':
			handleClearCache()
			break
		case 'logout':
			handleLogout()
			break
	}
}

// 清除缓存
const handleClearCache = () => {
	Modal.confirm({
		title: t('common.confirmClearCache'),
		content: t('common.clearCacheConfirm'),
		okText: t('common.confirm'),
		cancelText: t('common.cancel'),
		onOk: () => {
			try {
				// 清除 localStorage
				localStorage.clear()
				// 清除 sessionStorage
				sessionStorage.clear()
				// 清除所有缓存
				if ('caches' in window) {
					caches.keys().then((names) => {
						names.forEach((name) => {
							caches.delete(name)
						})
					})
				}
				message.success(t('common.cacheCleared'))
				// 延迟刷新页面以应用缓存清除
				setTimeout(() => {
					window.location.reload()
				}, 1000)
			} catch (error) {
				message.error(t('common.clearCacheFailed'))
				console.error('清除缓存失败:', error)
			}
		},
	})
}

// 退出登录
const handleLogout = () => {
	Modal.confirm({
		title: t('common.confirmLogout'),
		content: t('common.logoutConfirm'),
		okText: t('common.confirm'),
		cancelText: t('common.cancel'),
		onOk: async () => {
			try {
				await userStore.logout()
				message.success(t('common.logoutSuccess'))
				router.push('/login')
			} catch {
				message.error(t('common.logoutFailed'))
			}
		},
	})
}
</script>

<style scoped lang="scss">
.userbar {
	display: flex;
	align-items: center;
	gap: 12px;

	.search-input {
		width: 240px;
		margin-right: 8px;

		:deep(.ant-input) {
			background-color: rgba(255, 255, 255, 0.9);
		}
	}

	.user-info {
		display: flex;
		align-items: center;
		gap: 8px;
		cursor: pointer;
		padding: 0 12px;
		border-radius: 4px;
		transition: background-color 0.3s;

		&:hover {
			background-color: rgba(0, 0, 0, 0.04);
		}

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

	.action-btn {
		font-size: 16px;
		padding: 4px 8px;
		display: flex;
		align-items: center;
		gap: 4px;

		.lang-text {
			font-size: 14px;
		}

		&:hover {
			color: #1890ff;
		}
	}

	.task-list {
		.task-item {
			padding: 10px 0;
			border-bottom: 1px solid #f0f0f0;
			position: relative;

			&:last-child {
				border-bottom: none;
			}

			&.completed {
				text-decoration: line-through;
				color: #999;
			}
		}
	}
}

.dropdown-card {
	width: 400px;
	max-height: 540px;
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	overflow: hidden;

	:deep(.ant-card-head) {
		padding: 12px 16px;
		min-height: auto;
		border-bottom: 1px solid #e8e8e8;
		background: linear-gradient(to bottom, #fafbfc, #fff);

		.ant-card-head-title {
			padding: 0;
			width: 100%;
		}
	}

	:deep(.ant-card-body) {
		padding: 0;
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	:deep(.ant-dropdown-menu-body) {
		padding: 0;
	}
}

.message-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	font-size: 15px;
	font-weight: 600;
	color: #262626;
}

.message-tabs {
	padding: 10px 16px 8px;
	border-bottom: 1px solid #e8e8e8;
	background: #fafbfc;

	:deep(.ant-tabs) {
		.ant-tabs-nav {
			margin-bottom: 0;
			&::before {
				display: none;
			}
		}

		.ant-tabs-tab {
			padding: 6px 12px;
			margin: 0 4px;
			font-size: 13px;
			font-weight: 500;
			border-radius: 6px;
			transition: all 0.3s ease;
			color: #595959;

			&:hover {
				background-color: rgba(24, 144, 255, 0.06);
				color: #1890ff;
			}

			&.ant-tabs-tab-active {
				background-color: #e6f7ff;
				color: #1890ff;
				font-weight: 600;
			}
		}

		.ant-tabs-ink-bar {
			display: none;
		}
	}
}

.message-list {
	flex: 1;
	overflow-y: auto;
	padding: 8px;

	&::-webkit-scrollbar {
		width: 6px;
	}

	&::-webkit-scrollbar-thumb {
		background: #d9d9d9;
		border-radius: 3px;
		transition: background 0.3s;

		&:hover {
			background: #bfbfbf;
		}
	}

	&::-webkit-scrollbar-track {
		background: #f5f5f5;
		border-radius: 3px;
	}

	.message-item {
		display: flex;
		align-items: flex-start;
		padding: 14px 16px;
		margin-bottom: 6px;
		border-radius: 8px;
		border: 1px solid transparent;
		position: relative;
		cursor: pointer;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		background: #fff;

		&:hover {
			background: #f5f7fa;
			border-color: #e8e8e8;
			transform: translateY(-1px);
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

			.delete-btn {
				opacity: 1;
				transform: scale(1);
			}
		}

		&:last-child {
			margin-bottom: 0;
		}

		&.unread {
			background: linear-gradient(135deg, rgba(24, 144, 255, 0.05) 0%, rgba(24, 144, 255, 0.02) 100%);
			border: 1px solid rgba(24, 144, 255, 0.15);
			border-left: 4px solid #1890ff;
			padding-left: 14px;

			&:hover {
				background: linear-gradient(135deg, rgba(24, 144, 255, 0.08) 0%, rgba(24, 144, 255, 0.04) 100%);
				border-color: rgba(24, 144, 255, 0.25);
			}

			.message-title {
				color: #1890ff;
				font-weight: 600;
			}
		}
	}

	.message-content {
		flex: 1;
		margin-right: 32px;
		display: flex;
		flex-direction: column;
		gap: 6px;

		.message-title {
			font-size: 14px;
			color: #262626;
			font-weight: 500;
			line-height: 1.5;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			transition: color 0.3s;
		}

		.message-content-text {
			font-size: 13px;
			color: #595959;
			line-height: 1.6;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			word-break: break-word;
		}

		.message-time {
			font-size: 12px;
			color: #8c8c8c;
			font-weight: 400;
		}
	}

	.delete-btn {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 28px;
		height: 28px;
		padding: 0;
		border-radius: 6px;
		opacity: 0;
		transform: scale(0.85);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.04);

		&:hover {
			background: rgba(255, 77, 79, 0.1);
			transform: scale(1);
			opacity: 1 !important;
		}
	}

	&:deep(.ant-empty) {
		padding: 40px 20px;

		.ant-empty-description {
			color: #8c8c8c;
			font-size: 13px;
		}
	}
}

.message-pagination {
	padding: 10px 16px;
	border-top: 1px solid #e8e8e8;
	background: #fafbfc;
	display: flex;
	justify-content: center;

	:deep(.ant-pagination) {
		.ant-pagination-item {
			border-radius: 6px;
			border-color: #d9d9d9;
			transition: all 0.3s;
			font-weight: 500;

			&:hover {
				border-color: #1890ff;
				color: #1890ff;
			}

			&.ant-pagination-item-active {
				background: #1890ff;
				border-color: #1890ff;

				a {
					color: #fff;
				}
			}
		}

		.ant-pagination-prev,
		.ant-pagination-next {
			border-radius: 6px;
			transition: all 0.3s;

			&:hover {
				border-color: #1890ff;

				.ant-pagination-item-link {
					color: #1890ff;
					border-color: #1890ff;
				}
			}

			.ant-pagination-item-link {
				border-radius: 6px;
			}
		}
	}
}
</style>
