<template>
	<div class="sidebar">
		<!-- 顶部品牌区 -->
		<div class="sidebar-brand">
			<div class="brand-logo">
				<el-icon class="brand-icon"><ChatDotRound /></el-icon>
				<span class="brand-name">AI 助手</span>
			</div>
			<el-tooltip content="新建对话" placement="right">
				<button class="new-chat-icon-btn" @click="handleNewChat">
					<el-icon><EditPen /></el-icon>
				</button>
			</el-tooltip>
		</div>

		<!-- Tab 切换 -->
		<div class="sidebar-tabs">
			<button class="tab-btn" :class="{ active: activeTab === 'history' }" @click="activeTab = 'history'">
				<el-icon><ChatLineRound /></el-icon>
				对话记录
			</button>
			<button class="tab-btn" :class="{ active: activeTab === 'workspace' }" @click="activeTab = 'workspace'">
				<el-icon><FolderOpened /></el-icon>
				工作空间
			</button>
		</div>

		<!-- 对话记录面板 -->
		<div v-show="activeTab === 'history'" class="panel">
			<div v-if="historyList.length" class="panel-list">
				<div
					v-for="item in visibleHistory"
					:key="item.id"
					class="history-item"
					:class="{ active: activeHistoryId === item.id }"
					@click="handleSelectHistory(item.id)"
				>
					<el-icon class="item-icon"><ChatLineRound /></el-icon>
					<div class="item-body">
						<div class="item-title">{{ item.title }}</div>
						<div class="item-time">{{ item.time }}</div>
					</div>
					<button class="item-del-btn" @click.stop="handleDeleteHistory(item.id)">
						<el-icon><Delete /></el-icon>
					</button>
				</div>
				<button v-if="historyShowCount < historyList.length" class="load-more-btn" @click="historyShowCount += HISTORY_PAGE">
					<el-icon><ArrowDown /></el-icon>
					展开更多 ({{ historyList.length - historyShowCount }} 条)
				</button>
			</div>
			<div v-else class="panel-empty">暂无对话记录</div>
		</div>

		<!-- 工作空间面板 -->
		<div v-show="activeTab === 'workspace'" class="panel" v-loading="treeLoading">
			<el-empty v-if="!treeLoading && treeNodes.length === 0" :image-size="48" description="暂无内容" />
			<div v-else class="panel-list">
				<div v-for="dateNode in visibleWorkspace" :key="dateNode.id" class="tree-date-group">
					<div class="tree-date-label">{{ dateNode.label }}</div>
					<div v-for="flowNode in dateNode.children" :key="flowNode.id" class="tree-flow-group">
						<div class="tree-flow-label">
							<el-icon><Promotion /></el-icon>
							<span>{{ flowNode.label }}</span>
						</div>
						<div v-for="fileNode in flowNode.children" :key="fileNode.id" class="tree-file-item">
							<el-icon class="file-type-icon">
								<component :is="getFileIcon(fileNode.fileType)" />
							</el-icon>
							<span class="file-name">{{ fileNode.label }}</span>
							<div v-if="fileNode.fileUrl" class="file-actions">
								<button class="file-action-btn" @click.stop="handlePreviewNode(fileNode)">预览</button>
								<button class="file-action-btn" @click.stop="handleDownloadNode(fileNode)">下载</button>
							</div>
						</div>
					</div>
				</div>
				<button v-if="workspaceShowCount < treeNodes.length" class="load-more-btn" @click="workspaceShowCount += WORKSPACE_PAGE">
					<el-icon><ArrowDown /></el-icon>
					展开更多 ({{ treeNodes.length - workspaceShowCount }} 条)
				</button>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { Delete, ChatDotRound, ChatLineRound, EditPen, ArrowDown, Promotion, Document, VideoPlay, Headset, Picture, FolderOpened } from '@element-plus/icons-vue';

interface TreeNode {
	id: string;
	label: string;
	nodeType: string;
	children?: TreeNode[];
	fileUrl?: string;
	workflowId?: number | string;
	fileType?: string;
	sessionId?: string;
}

interface HistoryItem {
	id: number;
	title: string;
	time: string;
}

interface Props {
	activeMenu: string;
	activeHistoryId: number;
	historyList: HistoryItem[];
	treeNodes: TreeNode[];
	treeLoading: boolean;
}

interface Emits {
	(e: 'menu-change', key: string): void;
	(e: 'new-chat'): void;
	(e: 'select-history', id: number): void;
	(e: 'delete-history', id: number): void;
	(e: 'preview-node', data: TreeNode): void;
	(e: 'download-node', data: TreeNode): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const HISTORY_PAGE = 10;
const WORKSPACE_PAGE = 5;

const activeTab = ref<'history' | 'workspace'>('history');
const historyShowCount = ref(HISTORY_PAGE);
const workspaceShowCount = ref(WORKSPACE_PAGE);

const visibleHistory = computed(() => props.historyList.slice(0, historyShowCount.value));
const visibleWorkspace = computed(() => props.treeNodes.slice(0, workspaceShowCount.value));

const getFileIcon = (fileType?: string) => {
	if (!fileType) return Document;
	const t = fileType.toLowerCase();
	if (t.includes('image') || t.includes('png') || t.includes('jpg') || t.includes('gif')) return Picture;
	if (t.includes('video') || t.includes('mp4') || t.includes('webm')) return VideoPlay;
	if (t.includes('audio') || t.includes('mp3') || t.includes('wav')) return Headset;
	return Document;
};

const handleNewChat = () => emit('new-chat');
const handleSelectHistory = (id: number) => emit('select-history', id);
const handleDeleteHistory = (id: number) => emit('delete-history', id);
const handlePreviewNode = (data: TreeNode) => emit('preview-node', data);
const handleDownloadNode = (data: TreeNode) => emit('download-node', data);
</script>

<style scoped lang="scss">
.sidebar {
	width: 240px;
	flex-shrink: 0;
	background: #f8fafc;
	border-right: 1px solid #e2e8f0;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

/* 品牌区 */
.sidebar-brand {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 12px 12px;
	border-bottom: 1px solid #e2e8f0;
	flex-shrink: 0;
}

.brand-logo {
	display: flex;
	align-items: center;
	gap: 8px;
}

.brand-icon {
	font-size: 20px;
	color: #2563eb;
}

.brand-name {
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: -0.2px;
}

.new-chat-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: #64748b;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	outline: none;

	.el-icon {
		font-size: 16px;
	}

	&:hover {
		background: #e2e8f0;
		color: #0f172a;
	}
}

/* Tab 切换 */
.sidebar-tabs {
	display: flex;
	padding: 8px 8px 0;
	gap: 4px;
	flex-shrink: 0;
	border-bottom: 1px solid #e2e8f0;
}

.tab-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	height: 34px;
	border: none;
	border-radius: 8px 8px 0 0;
	background: transparent;
	color: #64748b;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	outline: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;

	.el-icon {
		font-size: 14px;
	}

	&:hover:not(.active) {
		background: #f1f5f9;
		color: #334155;
	}

	&.active {
		color: #2563eb;
		font-weight: 600;
		background: #fff;
		border-bottom-color: #2563eb;
	}
}

/* 面板通用 */
.panel {
	flex: 1;
	overflow-y: auto;
	padding: 8px 8px 12px;
	scrollbar-width: none;

	&::-webkit-scrollbar {
		display: none;
	}
}

.panel-list {
	display: flex;
	flex-direction: column;
}

.panel-empty {
	font-size: 12px;
	color: #cbd5e1;
	text-align: center;
	padding: 32px 0;
}

/* 历史记录条目 */
.history-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s;
	margin-bottom: 1px;

	&:hover {
		background: #f1f5f9;

		.item-del-btn {
			opacity: 1;
		}
	}

	&.active {
		background: #eff6ff;

		.item-icon {
			color: #2563eb;
		}

		.item-title {
			color: #1d4ed8;
			font-weight: 600;
		}
	}
}

.item-icon {
	font-size: 14px;
	color: #94a3b8;
	flex-shrink: 0;
}

.item-body {
	flex: 1;
	min-width: 0;
}

.item-title {
	font-size: 13px;
	font-weight: 500;
	color: #1e293b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.4;
}

.item-time {
	font-size: 11px;
	color: #94a3b8;
	margin-top: 1px;
}

.item-del-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: none;
	border-radius: 5px;
	background: transparent;
	color: #94a3b8;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s, background 0.15s, color 0.15s;
	flex-shrink: 0;
	outline: none;

	.el-icon {
		font-size: 13px;
	}

	&:hover {
		background: #fee2e2;
		color: #ef4444;
	}
}

/* 展开更多按钮 */
.load-more-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 100%;
	height: 32px;
	margin-top: 4px;
	border: 1px dashed #cbd5e1;
	border-radius: 8px;
	background: transparent;
	color: #64748b;
	font-size: 12px;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
	outline: none;

	.el-icon {
		font-size: 12px;
	}

	&:hover {
		border-color: #93c5fd;
		color: #2563eb;
		background: #eff6ff;
	}
}

/* 工作空间树节点 */
.tree-date-group {
	display: flex;
	flex-direction: column;
	margin-bottom: 4px;
}

.tree-date-label {
	font-size: 11px;
	font-weight: 600;
	color: #94a3b8;
	padding: 6px 4px 2px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.tree-flow-group {
	margin-bottom: 2px;
}

.tree-flow-label {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	color: #475569;

	.el-icon {
		font-size: 13px;
		color: #7c3aed;
		flex-shrink: 0;
	}

	span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.tree-file-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 8px 5px 24px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s;

	&:hover {
		background: #f1f5f9;

		.file-actions {
			opacity: 1;
		}
	}
}

.file-type-icon {
	font-size: 13px;
	color: #64748b;
	flex-shrink: 0;
}

.file-name {
	flex: 1;
	font-size: 12px;
	color: #334155;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.file-actions {
	display: flex;
	gap: 2px;
	opacity: 0;
	transition: opacity 0.15s;
	flex-shrink: 0;
}

.file-action-btn {
	border: none;
	background: transparent;
	color: #3b82f6;
	font-size: 11px;
	cursor: pointer;
	padding: 2px 4px;
	border-radius: 4px;
	outline: none;
	transition: background 0.15s;

	&:hover {
		background: #dbeafe;
	}
}
</style>
