<template>
	<div class="pages online-users-page">
		<!-- 统计卡片 -->
		<div class="stats-cards">
			<a-row :gutter="16">
				<a-col :span="6">
					<a-card>
						<a-statistic title="在线用户总数" :value="onlineCount" :value-style="{ color: '#3f8600' }">
							<template #prefix>
								<UserOutlined style="font-size: 24px" />
							</template>
						</a-statistic>
					</a-card>
				</a-col>
				<a-col :span="18">
					<a-card>
						<a-form layout="inline" :model="searchForm">
							<a-form-item label="刷新间隔">
								<a-select v-model:value="refreshInterval" style="width: 150px" @change="handleRefreshIntervalChange">
									<a-select-option :value="0">不自动刷新</a-select-option>
									<a-select-option :value="5000">5秒</a-select-option>
									<a-select-option :value="10000">10秒</a-select-option>
									<a-select-option :value="30000">30秒</a-select-option>
									<a-select-option :value="60000">60秒</a-select-option>
								</a-select>
							</a-form-item>
							<a-form-item>
								<a-space>
									<a-button type="primary" @click="handleRefresh" :loading="loading">
										<template #icon><ReloadOutlined /></template>
										刷新
									</a-button>
									<a-button @click="handleRefreshAllOffline">
										<template #icon><StopOutlined /></template>
										全部下线
									</a-button>
								</a-space>
							</a-form-item>
						</a-form>
					</a-card>
				</a-col>
			</a-row>
		</div>

		<!-- 工具栏 -->
		<div class="tool-bar">
			<div class="left-panel">
				<a-space>
					<a-input v-model:value="searchForm.keyword" placeholder="用户名" allow-clear style="width: 200px" />
					<a-button type="primary" @click="handleSearch">
						<template #icon><SearchOutlined /></template>
						搜索
					</a-button>
					<a-button @click="handleReset">
						<template #icon><RedoOutlined /></template>
						重置
					</a-button>
				</a-space>
			</div>
		</div>

		<!-- 表格内容 -->
		<div class="table-content">
			<sc-table ref="tableRef" :columns="columns" :data-source="tableData" :loading="loading" :pagination="pagination" :row-key="rowKey" @refresh="refreshTable">
				<template #status="{ record }">
					<a-tag :color="record.is_online ? 'success' : 'default'">
						{{ record.is_online ? '在线' : '离线' }}
					</a-tag>
				</template>
				<template #lastActive="{ record }">
					{{ formatDate(record.last_active_at) }}
				</template>
				<template #action="{ record }">
					<a-space>
						<a-button type="link" size="small" @click="handleViewSessions(record)"> 查看会话 </a-button>
						<a-popconfirm title="确定强制该用户下线吗？" @confirm="handleOffline(record)">
							<a-button type="link" size="small" danger> 强制下线 </a-button>
						</a-popconfirm>
						<a-button type="link" size="small" danger @click="handleOfflineAll(record)"> 全部下线 </a-button>
					</a-space>
				</template>
			</sc-table>
		</div>

		<!-- 会话详情弹窗 -->
		<sessions-dialog v-if="dialog.sessions" ref="sessionsDialogRef" @success="handleSessionsSuccess" @closed="dialog.sessions = false" />
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { message, Modal } from 'ant-design-vue'
import { UserOutlined, SearchOutlined, RedoOutlined, ReloadOutlined, StopOutlined } from '@ant-design/icons-vue'
import scTable from '@/components/scTable/index.vue'
import sessionsDialog from './sessions.vue'
import authApi from '@/api/auth'

defineOptions({
	name: 'authOnlineUsers',
})

// 表格引用
const tableRef = ref(null)

// 搜索表单
const searchForm = reactive({
	keyword: '',
})

// 表格数据
const tableData = ref([])
const loading = ref(false)
const pagination = reactive({
	current: 1,
	pageSize: 20,
	total: 0,
	showSizeChanger: true,
	showQuickJumper: true,
	showTotal: (total) => `共 ${total} 条`,
})

// 行key
const rowKey = 'id'

// 在线用户数量
const onlineCount = ref(0)

// 刷新定时器
const refreshInterval = ref(30000) // 默认30秒
let refreshTimer = null

// 对话框状态
const dialog = reactive({
	sessions: false,
})

// 弹窗引用
const sessionsDialogRef = ref(null)

// 表格列配置
const columns = [
	{
		title: '#',
		dataIndex: '_index',
		key: '_index',
		width: 60,
		align: 'center',
	},
	{ title: '用户名', dataIndex: 'username', key: 'username', width: 150 },
	{ title: '真实姓名', dataIndex: 'real_name', key: 'real_name', width: 150 },
	{ title: '邮箱', dataIndex: 'email', key: 'email', width: 200 },
	{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 150 },
	{
		title: '状态',
		dataIndex: 'status',
		key: 'status',
		width: 100,
		align: 'center',
		slot: 'status',
	},
	{
		title: '最后活跃时间',
		dataIndex: 'last_active_at',
		key: 'last_active_at',
		width: 180,
		slot: 'lastActive',
	},
	{
		title: '最后登录IP',
		dataIndex: 'last_login_ip',
		key: 'last_login_ip',
		width: 150,
	},
	{
		title: '操作',
		dataIndex: 'action',
		key: 'action',
		width: 200,
		align: 'center',
		slot: 'action',
		fixed: 'right',
	},
]

// 加载在线用户数量
const loadOnlineCount = async () => {
	try {
		const res = await authApi.onlineUser.count.get()
		if (res.code === 200) {
			onlineCount.value = res.data || 0
		}
	} catch (error) {
		console.error('获取在线用户数量失败:', error)
	}
}

// 加载在线用户列表
const loadOnlineUsers = async () => {
	try {
		loading.value = true
		const params = {
			...searchForm,
			limit: pagination.pageSize,
		}
		const res = await authApi.onlineUser.list.get(params)
		loading.value = false

		if (res.code === 200) {
			// 添加序号
			const list = res.data?.list || []
			tableData.value = list.map((item, index) => ({
				...item,
				_index: (pagination.current - 1) * pagination.pageSize + index + 1,
			}))
			pagination.total = res.data?.total || 0
		}
	} catch (error) {
		console.error('加载在线用户列表失败:', error)
		loading.value = false
	}
}

// 刷新表格
const refreshTable = () => {
	loadOnlineCount()
	loadOnlineUsers()
}

// 搜索
const handleSearch = () => {
	pagination.current = 1
	refreshTable()
}

// 重置
const handleReset = () => {
	searchForm.keyword = ''
	pagination.current = 1
	refreshTable()
}

// 刷新按钮
const handleRefresh = () => {
	refreshTable()
	message.success('刷新成功')
}

// 刷新间隔变化
const handleRefreshIntervalChange = (value) => {
	clearRefreshTimer()
	if (value > 0) {
		startRefreshTimer(value)
	}
}

// 启动刷新定时器
const startRefreshTimer = (interval) => {
	refreshTimer = setInterval(() => {
		refreshTable()
	}, interval)
}

// 清除刷新定时器
const clearRefreshTimer = () => {
	if (refreshTimer) {
		clearInterval(refreshTimer)
		refreshTimer = null
	}
}

// 查看用户会话
const handleViewSessions = (record) => {
	dialog.sessions = true
	setTimeout(() => {
		sessionsDialogRef.value?.open().setData(record)
	}, 0)
}

// 强制用户下线（单个）
const handleOffline = async (record) => {
	try {
		const res = await authApi.onlineUser.offline.post(record.id, {})
		if (res.code === 200) {
			message.success('强制下线成功')
			refreshTable()
		} else {
			message.error(res.message || '操作失败')
		}
	} catch (error) {
		console.error('强制下线失败:', error)
		message.error('操作失败')
	}
}

// 强制用户所有设备下线
const handleOfflineAll = async (record) => {
	try {
		const res = await authApi.onlineUser.offlineAll.post(record.id)
		if (res.code === 200) {
			message.success('全部下线成功')
			refreshTable()
		} else {
			message.error(res.message || '操作失败')
		}
	} catch (error) {
		console.error('全部下线失败:', error)
		message.error('操作失败')
	}
}

// 全部下线
const handleRefreshAllOffline = () => {
	Modal.confirm({
		title: '确认操作',
		content: '确定要强制所有在线用户下线吗？',
		okText: '确定',
		cancelText: '取消',
		okType: 'danger',
		onOk: async () => {
			try {
				// 这里需要遍历所有在线用户并下线
				const onlineUsers = tableData.value.filter((user) => user.is_online)
				for (const user of onlineUsers) {
					await authApi.onlineUser.offlineAll.post(user.id)
				}
				message.success('全部下线成功')
				refreshTable()
			} catch (error) {
				console.error('全部下线失败:', error)
				message.error('操作失败')
			}
		},
	})
}

// 会话操作成功回调
const handleSessionsSuccess = () => {
	refreshTable()
}

// 格式化日期
const formatDate = (date) => {
	if (!date) return '-'
	const d = new Date(date)
	return d.toLocaleString('zh-CN', {
		year: 'numeric',
		month: '2-digit',
		day: '2-digit',
		hour: '2-digit',
		minute: '2-digit',
		second: '2-digit',
	})
}

// 初始化
onMounted(() => {
	refreshTable()
	// 启动自动刷新
	if (refreshInterval.value > 0) {
		startRefreshTimer(refreshInterval.value)
	}
})

// 组件卸载时清除定时器
onUnmounted(() => {
	clearRefreshTimer()
})
</script>

<style scoped lang="scss">
.online-users-page {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;

	.stats-cards {
		margin-bottom: 16px;

		:deep(.ant-card) {
			border-radius: 4px;
		}

		:deep(.ant-statistic-title) {
			font-size: 14px;
			color: #8c8c8c;
		}

		:deep(.ant-statistic-content) {
			font-size: 24px;
			font-weight: 500;
		}
	}

	.tool-bar {
		padding: 16px 24px;
		background: #fff;
		border-bottom: 1px solid #f0f0f0;
	}

	.table-content {
		flex: 1;
		overflow: hidden;
		background: #f5f5f5;
	}
}
</style>
