<template>
	<aside :class="['h-full box-border flex flex-col transition-all duration-300', sidebarCollapsed ? 'w-16' : 'w-50']">
		<div class="flex items-center justify-center m-2">
			<img v-if="!sidebarCollapsed" class="w-10 h-10 rounded-md" src="@assets/images/login/white_logo.png" />
			<div v-if="!sidebarCollapsed" class="font-bold text-gray-80">YINIAN</div>
			<RiSidebarFoldLine
				v-if="!sidebarCollapsed"
				class="ml-auto cursor-pointer hover:text-[#2B7FFF]"
				@click="sidebarCollapsed = true"
			/>
			<RiSideBarLine
				v-else
				class="cursor-pointer hover:text-[#2B7FFF]"
				@click="sidebarCollapsed = false"
			/>
		</div>

		<div
			class="flex items-center justify-center m-2 bg-white rounded-lg p-2.5 border-[#E5E8EE] shadow-sm text-center cursor-pointer hover:bg-[#F5F7FA] hover:text-[#2B7FFF] hover:border-[#2B7FFF]"
			@click="addNewChat">
			<RiAddLine  />
			<span v-if="!sidebarCollapsed" class="whitespace-nowrap">新对话</span>
		</div>

		<div v-if="!sidebarCollapsed" class="overflow-y-auto p-2">
			<template v-for="bucket in sessionBuckets">
				<div v-if="bucket.sessions.length > 0" :key="bucket.key" class="mb-2 last:mb-0">
					<div class="px-2 pb-1 text-[11px] font-medium text-gray-400 tracking-tight">
						{{ bucket.label }}
					</div>
					<ul class="list-none">
						<li v-for="item in bucket.sessions" :key="item.conversationId" @click="selectedHistoryMessage(item.conversationId)"
							:class="[
								'flex items-center gap-2 p-2 text-gray-600 rounded-lg cursor-pointer transition-colors',
								item.conversationId === selectedConversationId ? 'bg-white shadow-sm border-[#E5E8EE] py-1.5 relative z-10' : 'hover:bg-gray-200'
							]">
							<span class="w-2 h-2 rounded-full bg-[#BEDBFF] flex-none"></span>
							<div class="flex-1 min-w-0">
								<div class="truncate text-sm">{{ item.conversationTitle }}</div>
							</div>

							<el-dropdown v-if="item.conversationId === selectedConversationId" placement="bottom-end">
								<el-icon class="el-icon--right">
									...
								</el-icon>
								<template #dropdown>
									<el-dropdown-menu>
										<el-dropdown-item @click="renameHistoryMessage(item.conversationId)">重命名</el-dropdown-item>
										<el-dropdown-item @click="deleteHistoryMessage(item.conversationId)">删除</el-dropdown-item>
									</el-dropdown-menu>
								</template>
							</el-dropdown>
						</li>
					</ul>
				</div>
			</template>
		</div>
	</aside>

	<!-- 重命名对话框 -->
	<el-dialog v-model="renameDialogFormVisible" title="重命名对话" width="500">
		<el-form :model="newMessageName">
			<el-form-item label="对话名称" :label-width="formLabelWidth">
				<el-input v-model="newMessageName" autocomplete="off" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="renameDialogFormVisible = false">取消</el-button>
				<el-button type="primary" @click="submitNameChange">确定</el-button>
			</div>
		</template>
	</el-dialog>

	<!-- 删除确认对话框 -->
	<el-dialog v-model="deleteDialogVisible" title="温馨提示" width="500">
		<span>您确定删除该会话吗？删除后将无法恢复！</span>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="deleteDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitDelete">确定</el-button>
			</div>
		</template>
	</el-dialog>

</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
import { RiSideBarLine, RiSidebarFoldLine, RiArrowDownSLine, RiAddLine } from '@remixicon/vue'
import { getSessionList, deleteSession, updateSession } from '../../api/SessionsApi';

type SessionBucketKey =
	| 'today'
	| 'yesterday'
	| 'withinWeek'
	| 'withinTwoWeeks'
	| 'withinMonth'
	| 'older';

function getSessionBucket(activityMs: number, nowMs: number): SessionBucketKey {
	if (!activityMs || activityMs <= 0) return 'older';
	const now = new Date(nowMs);
	const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
	const startOfYesterday = startOfToday - 24 * 60 * 60 * 1000;

	if (activityMs >= startOfToday) return 'today';
	if (activityMs >= startOfYesterday) return 'yesterday';

	const daysAgo = (startOfToday - activityMs) / (24 * 60 * 60 * 1000);
	if (daysAgo <= 7) return 'withinWeek';
	if (daysAgo <= 14) return 'withinTwoWeeks';
	if (daysAgo <= 30) return 'withinMonth';
	return 'older';
}

const sidebarCollapsed = ref(false)
const deleteDialogVisible = ref(false)
const renameDialogFormVisible = ref(false)
const newMessageName = ref('')
const formLabelWidth = '100px'
const nowMs = ref(Date.now())
let timer: number | undefined

interface HistoryMessage {
	conversationId: string;
	conversationTitle: string;
	updatedAt?: number;
}

/// 记录选择的历史消息ID
const selectedConversationId = ref<string>('')

/// 历史消息分组数据
const groups = ref<Array<HistoryMessage>>([])

const sessionBuckets = computed(() => {
	const buckets: Array<{ key: SessionBucketKey; label: string; sessions: HistoryMessage[] }> = [
		{ key: 'today', label: '今天', sessions: [] },
		{ key: 'yesterday', label: '昨天', sessions: [] },
		{ key: 'withinWeek', label: '近7天', sessions: [] },
		{ key: 'withinTwoWeeks', label: '近14天', sessions: [] },
		{ key: 'withinMonth', label: '近30天', sessions: [] },
		{ key: 'older', label: '更早', sessions: [] },
	];
	const map = {} as Record<SessionBucketKey, typeof buckets[number]>;
	for (const b of buckets) {
		map[b.key] = b;
	}

	for (const session of [...groups.value].sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0))) {
		const bucketKey = getSessionBucket(session.updatedAt || 0, nowMs.value);
		map[bucketKey].sessions.push(session);
	}
	return buckets;
});

/// 定义事件
const emit = defineEmits(['new-chat', 'select-chat'])

/// 添加新对话
const addNewChat = () => {
	console.log('add new chat')
	updateNewChat()
}

const updateNewChat = () => {
	// 触发新对话事件
	emit('new-chat')
	// 清空选择的历史消息ID
	selectedConversationId.value = ''
	// 获取最新的历史会话列表
	getHistoryConversationList()
}

/// 选择历史消息
const selectedHistoryMessage = (conversationId: string) => {
	selectedConversationId.value = conversationId
	emit('select-chat', conversationId)
}

/// 重命名历史消息
const renameHistoryMessage = (conversationId: string) => {
	console.log('rename message', conversationId)
	renameDialogFormVisible.value = true
}

/// 删除历史消息
const deleteHistoryMessage = (conversationId: string) => {
	console.log('delete message', conversationId)
	deleteDialogVisible.value = true
}

/// 提交重命名
const submitNameChange = async () => {
	console.log('submit name change', newMessageName.value)
	renameDialogFormVisible.value = false
	const res = await updateSession({
		session_id: selectedConversationId.value,
		title: newMessageName.value
	})
	if (res && res.success) {
		updateNewChat()
	}
}

/// 提交删除
const submitDelete = async () => {
	console.log('submit delete')
	deleteDialogVisible.value = false
	const res = await deleteSession({
		session_id: selectedConversationId.value
	})
	if (res && res.success) {
		updateNewChat()
	}
}

/// 页面加载时获取历史会话列表
onMounted(() => {
	getHistoryConversationList()
	timer = window.setInterval(() => {
		nowMs.value = Date.now()
	}, 60 * 1000)
})

onBeforeUnmount(() => {
	if (timer) clearInterval(timer)
})

/// 获取历史会话列表
const getHistoryConversationList = async () => {
	const list = await getSessionList({ limit: 50, offset: 0 })
	if (!list || !list.sessions) return;
	// 使用整体赋值替换 push，避免重复累加
	groups.value = list.sessions.map((item: any) => ({
		conversationId: item.session_id,
		conversationTitle: item.title,
		updatedAt: item.updated_at ? new Date(item.updated_at).getTime() : Date.now(),
	}))
}

</script>
