<template>
	<view class="status-bar"></view>

	<!-- ===== 新建文件夹设置弹窗 ===== -->
	<view v-if="showNewFolder" class="popup-overlay" @click="closeNewFolderModal">
		<view class="popup-card" @click.stop>
			<!-- 关闭按钮 -->
			<view class="close-popup-card" @click="closeNewFolderModal">
				<view class="iconfont icon-quxiao"></view>
			</view>
			<!-- 标题 -->
			<view class="popup-title">新建工作区目录</view>

			<!-- 目录名称输入 -->
			<view class="new-folder-name">目录名称</view>
			<view class="create-folder-name" :class="{'has-value': isNFNFocused || newFolderName}">
				<input v-model="newFolderName" @focus="isNFNFocused=true"
					@blur="isNFNFocused=false" type="text" placeholder="输入目录名称，如:项目资料/设计图" />
			</view>

			<!-- 当前路径 -->
			<view class="nf-path-label">当前路径</view>
			<view class="nf-path-display">{{ currentFolderPath }}</view>

			<!-- 路径预览 -->
			<view class="nf-path-label">路径预览</view>
			<view class="nf-path-preview">{{ folderPathPreview }}</view>

			<!-- 底部按钮 -->
			<view class="option-wrapper">
				<view class="opt-btn opt-cancel" @click="closeNewFolderModal">取消</view>
				<view class="opt-btn opt-confirm" @click="confirmCreateFolder">确认</view>
			</view>
		</view>
	</view>

	<view class="workspace-container page-container">
		<view class="workspace-header">
			<view class="custom-navbar">
				<view class="navbar-left" @click="handleBackOrCheck ">
					<view class="iconfont icon-fanhui custom-navbar-icon"></view>
					<view class="navbar-before-title workspace-text">{{isSelectFolder?'全选':navbarBeforeTitle}}</view>
				</view>

				<view class="navbar-title workspace-text">{{navbarTitle}}</view>
				<view class="navbar-right">
					<view v-if="isSelectFolder" class="navbar-right-text workspace-text" @click="handleSelectFolder()">
						完成</view>
					<view v-else class="iconfont icon-gengduo" :class="isMenuOpen ?'menu-open':'custom-navbar-icon'"
						@click="handleMenu"></view>
				</view>
				<view v-if="isMenuOpen" class="menu-card">
					<view class="menu-card-item" @click="handleSelectFolder();handleMenu()">选择</view>
					<view class="solid-line"></view>
					<view class="menu-card-item" @click="newWorkspaceFolder();handleMenu()">新建文件夹</view>
				</view>
			</view>
			<view class="search-file-warpper">
				<view class="search-file">
					<view class="iconfont icon-sousuo"></view>
					<input class="search-file-input" placeholder="搜索" @focus="handleSearchFocus"
						v-model="searchKeyword" />
				</view>
				<view v-if="isSearchFocus" class="cancel-search" @click="handleSearchFocus">取消</view>
			</view>

		</view>
		<view class="workspace-content">
			<view class="folder-null" v-if="currentFolderList.length===0">
				<view class="iconfont icon-wenjianjia"></view>
				文件夹为空
			</view>
			<view class="folder-grid" v-if="currentFolderList.length>0">
				<view class="folder-item" :class="{'select-folder':selectFileList.includes(folder.path)}"
					v-for="folder in currentFolderList" :key="folder.path"
					@click="isSelectFolder?selectFolder(folder.path):handleFolderClick(folder)"
					@longpress="handleLongPress(folder)">
					<view v-if="folder.type === 'directory'"
						class="iconfont icon-a-wenjianjiawenjian folder-item-style"></view>
					<view v-else class="iconfont folder-item-style" :class="getFileIcon(folder.extension)"></view>
					<view class="folder-name">{{folder.name}}</view>
					<view v-if="isSelectFolder" class="folder-checkbox"
						:class="{'select-folder':selectFileList.includes(folder.path)}">
						<uni-icons v-if="selectFileList.includes(folder.path)" type="checkmarkempty"
							color="#fff"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view v-if="isSelectFolder" class="workspace-footer" :class="{'folder-actions':selectFileList.length>0}">
			<view class="iconfont icon-shangchuan"></view>
			<view class="iconfont icon-fuzhi"></view>
			<view class="iconfont icon-wenjian"></view>
			<view class="iconfont icon-del"></view>
			<view class="iconfont icon-gengduo"></view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		computed
	} from 'vue';
	import {
		getWorkspaceId,
		getToken
	} from '@/utils/user-info.js'
	import {
		getWorkspaceList,
		createWorkspaceFolder,
		daleteWorkspace,
		getWorkspaceFileURL
	} from '@/utils/cloud-api.js'

	const UserToken = ref('')
	const workspaceId = ref('')
	const navbarBeforeTitle = ref('');
	const navbarTitle = ref('工作区');

	// 选择文件模式
	const isSelectFolder = ref(false);
	const selectFileList = ref([]);
	const handleSelectFolder = () => {
		if (isSelectFolder.value) {
			selectFileList.value = []
		}
		isSelectFolder.value = !isSelectFolder.value;
	}
	const selectFolder = (id) => {
		const index = selectFileList.value.indexOf(id);
		if (index !== -1) {
			selectFileList.value.splice(index, 1);
		} else {
			selectFileList.value.push(id);
		}
	}
	// 新建文件夹
	const showNewFolder = ref(false)
	const isNFNFocused = ref(false)
	const newFolderName = ref('')
	const closeNewFolderModal = () => {
		showNewFolder.value = false
		newFolderName.value = ''
	}
	const newWorkspaceFolder = () => {
		showNewFolder.value = true
	}

	// 当前文件夹路径
	const currentFolderPath = computed(() => {
		if (folderStack.value.length === 0) return '根目录'
		return '/' + folderStack.value.map(f => f.name).join('/')
	})

	// 路径预览：./ + 当前路径 + 新文件夹名
	const folderPathPreview = computed(() => {
		const folderPath = folderStack.value.map(f => f.name).join('/')
		const name = newFolderName.value.trim()
		if (name) {
			return folderPath ? `./${folderPath}/${name}` : `./${name}`
		}
		return folderPath ? `./${folderPath}/` : './'
	})

	// 确认创建文件夹
	const confirmCreateFolder = async () => {
		const name = newFolderName.value.trim()
		if (!name) {
			uni.showToast({ title: '请输入目录名称', icon: 'none' })
			return
		}
		try {
			// 拼接路径：./ 开头，如 ./项目资料/设计图
			const folderPath = folderStack.value.map(f => f.name).join('/')
			const dirPath = folderPath ? `./${folderPath}/${name}` : `./${name}`
			await createWorkspaceFolder(UserToken.value, workspaceId.value, dirPath)
			uni.showToast({ title: '创建成功', icon: 'success' })
			closeNewFolderModal()
			initCurrentFolderList()
		} catch (error) {
			console.error('创建文件夹失败：', error)
			uni.showToast({ title: '创建失败，请重试', icon: 'error' })
		}
	}

	// 长按文件
	const handleLongPress = (folder) => {
		if (isSelectFolder.value) return;
		uni.showActionSheet({
			itemList: ['重命名', '删除', '下载', '压缩'],
			success: (res) => {
				switch (res.tapIndex) {
					case 0:
						handleRename(folder);
						break;
					case 1:
						handleDelete(folder);
						break;
					case 2:
						handleDownload(folder);
						break;
					case 3:
						handleDownload(folder);
						break;
				}
			}
		})
	}

	// 重命名
	const handleRename = (folder) => {
		uni.showModal({
			title: '重命名',
			content: '请输入新名称',
			editable: true,
			placeholderText: folder.name,
			success: (res) => {
				if (res.confirm && res.content) {
					// 更新文件夹名称
					updateFolderName(folder.id, res.content);
				}
			}
		});
	};

	// // 下载文件
	// const handleDownload = async (folder) => {
	// 	// 目录不能下载
	// 	if (folder.type === 'directory') {
	// 		uni.showToast({ title: '暂不支持下载目录', icon: 'none' });
	// 		return;
	// 	}

	// 	try {
	// 		uni.showLoading({ title: '获取下载链接...' });

	// 		// 构建文件路径，去掉开头的 ./
	// 		const filePath = folder.path.startsWith('./') ? folder.path.slice(2) : folder.path;
	// 		const result = await getWorkspaceFileURL(UserToken.value, workspaceId.value, filePath);

	// 		uni.hideLoading();

	// 		// 接口返回数组，取第一个文件的 url
	// 		const fileInfo = Array.isArray(result) ? result[0] : result;
	// 		if (!fileInfo || !fileInfo.url) {
	// 			uni.showToast({ title: '获取下载链接失败', icon: 'error' });
	// 			return;
	// 		}

	// 		const downloadUrl = fileInfo.url;
	// 		const fileName = folder.name;

	// 		uni.showLoading({ title: '下载中...' });

	// 		uni.downloadFile({
	// 			url: downloadUrl,
	// 			success: (downloadRes) => {
	// 				uni.hideLoading();
	// 				if (downloadRes.statusCode === 200) {
	// 					// 保存到手机相册/文件
	// 					uni.saveFile({
	// 						tempFilePath: downloadRes.tempFilePath,
	// 						success: (saveRes) => {
	// 							uni.showToast({ title: '下载成功', icon: 'success' });
	// 							console.log('文件已保存到：', saveRes.savedFilePath);
	// 						},
	// 						fail: (err) => {
	// 							console.error('保存文件失败：', err);
	// 							uni.showToast({ title: '保存文件失败', icon: 'error' });
	// 						}
	// 					});
	// 				} else {
	// 					uni.showToast({ title: '下载失败', icon: 'error' });
	// 				}
	// 			},
	// 			fail: (err) => {
	// 				uni.hideLoading();
	// 				console.error('下载文件失败：', err);
	// 				uni.showToast({ title: '下载失败，请重试', icon: 'error' });
	// 			}
	// 		});
	// 	} catch (error) {
	// 		uni.hideLoading();
	// 		console.error('获取下载链接失败：', error);
	// 		uni.showToast({ title: '获取下载链接失败，请重试', icon: 'error' });
	// 	}
	// };
	const handleDownload = async (folder) => {
		// 目录不能下载
		if (folder.type === 'directory') {
			uni.showToast({ title: '暂不支持下载目录', icon: 'none' });
			return;
		}
	
		try {
			uni.showLoading({ title: '获取下载链接...' });
	
			// 构建文件路径，去掉开头的 ./
			const filePath = folder.path.startsWith('./') ? folder.path.slice(2) : folder.path;
			const result = await getWorkspaceFileURL(UserToken.value, workspaceId.value, filePath);
	
			uni.hideLoading();
	
			// 接口返回数组，取第一个文件的 url
			const fileInfo = Array.isArray(result) ? result[0] : result;
			if (!fileInfo || !fileInfo.url) {
				uni.showToast({ title: '获取下载链接失败', icon: 'error' });
				return;
			}
	
			const downloadUrl = fileInfo.url;
			const fileName = folder.name;
	
			uni.showLoading({ title: '下载中...' });
	
			uni.downloadFile({
				url: downloadUrl,
				name: fileName, // 重要：指定文件名，保证打开正常
				success: (downloadRes) => {
					uni.hideLoading();
					if (downloadRes.statusCode === 200) {
						// 下载成功 → 直接打开文件
						uni.openDocument({
							filePath: downloadRes.tempFilePath,
							showMenu: true, // 右上角显示 分享/保存 按钮
							success: () => {
								uni.showToast({
									title: '打开成功',
									icon: 'success'
								});
							},
							fail: (err) => {
								console.error('打开失败：', err);
								uni.showToast({
									title: '无法打开此文件',
									icon: 'error'
								});
							}
						});
					} else {
						uni.showToast({ title: '下载失败', icon: 'error' });
					}
				},
				fail: (err) => {
					uni.hideLoading();
					console.error('下载文件失败：', err);
					uni.showToast({ title: '下载失败，请重试', icon: 'error' });
				}
			});
		} catch (error) {
			uni.hideLoading();
			console.error('获取下载链接失败：', error);
			uni.showToast({ title: '获取下载链接失败，请重试', icon: 'error' });
		}
	};

	// 删除
	const handleDelete = (folder) => {
		uni.showModal({
			title: '提示',
			content: `确定要删除"${folder.name}"吗？`,
			success: async (res) => {
				if (res.confirm) {
					try {
						// 路径加 ./ 前缀
						const filePath = `./${folder.path}`
						console.log("删除的是：",filePath);
						await daleteWorkspace(UserToken.value, workspaceId.value, filePath)
						uni.showToast({ title: '删除成功', icon: 'success' })
						initCurrentFolderList()
					} catch (error) {
						console.error('删除失败：', error)
						uni.showToast({ title: '删除失败，请重试', icon: 'error' })
					}
				}
			}
		});
	};

	// const handleFolderClick = (id) => {
	// 	console.log(id);
	// }

	// 菜单
	const isMenuOpen = ref(false)
	const handleMenu = () => {
		isMenuOpen.value = !isMenuOpen.value;
	}

	// 搜索框
	const searchKeyword = ref('')
	const isSearchFocus = ref(false)
	const handleSearchFocus = () => {
		isSearchFocus.value = !isSearchFocus.value
	}

	// 根据文件后缀返回对应图标
	const getFileIcon = (ext) => {
		const iconMap = {
			'.png': 'icon-wenjiantupian',
			'.jpg': 'icon-wenjiantupian',
			'.jpeg': 'icon-wenjiantupian',
			'.gif': 'icon-wenjiantupian',
			'.svg': 'icon-SVG',
			'.bmp': 'icon-wenjiantupian',
			'.webp': 'icon-wenjiantupian',
			'.mp4': 'icon-wenjianshipin',
			'.avi': 'icon-wenjianshipin',
			'.mov': 'icon-wenjianshipin',
			'.wmv': 'icon-wenjianshipin',
			'.flv': 'icon-wenjianshipin',
			'.mkv': 'icon-wenjianshipin',
			'.mp3': 'icon-wenjianyinpin',
			'.wav': 'icon-wenjianyinpin',
			'.flac': 'icon-wenjianyinpin',
			'.aac': 'icon-wenjianyinpin',
			'.pdf': 'icon-PDF',
			'.doc': 'icon-DOC',
			'.docx': 'icon-DOC',
			'.xls': 'icon-XLS',
			'.xlsx': 'icon-XLS',
			'.ppt': 'icon-PPT',
			'.pptx': 'icon-PPT',
			'.txt': 'icon-TXT',
			'.md': 'icon-file-markdown-fill',
			'.zip': 'icon-wenjianyasuo',
			'.rar': 'icon-wenjianyasuo',
			'.7z': 'icon-wenjianyasuo',
			'.tar': 'icon-wenjianyasuo',
			'.gz': 'icon-wenjianyasuo',
			'.js': 'icon-JS',
			'.ts': 'icon-daimawenjia',
			'.vue': 'icon-daimawenjia',
			'.html': 'icon-HTML',
			'.css': 'icon-CSS',
			'.py': 'icon-daimawenjian',
			'.java': 'icon-daimawenjian',
			'.json': 'icon-JSON',
		};
		return iconMap[ext?.toLowerCase()] || 'icon-qitawenjian';
	};

	const allFoldersData = ref({})

	// 文件夹路径栈
	const folderStack = ref([]);
	// 当前显示的文件夹列表
	const currentFolderList = ref([]);
	const getCurrentFolderList = () => {
		console.log("当前路径为：", JSON.stringify(folderStack.value));
		// 当前路径：栈为空时在根目录，路径为 "."
		const currentPath = folderStack.value.length > 0 ? folderStack.value[folderStack.value.length - 1].path : '.';
		// 在根目录下，直接返回根节点的 children
		if (currentPath === '.') {
			return allFoldersData.value?.children || [];
		}
		// 递归在树中按 path 查找目标节点
		const findFolderByPath = (list, targetPath) => {
			for (const item of list) {
				if (item.path === targetPath) return item;
				if (item.type === 'directory' && item.children?.length) {
					const res = findFolderByPath(item.children, targetPath);
					if (res) return res;
				}
			}
			return null;
		};
		// 从根节点的 children 开始搜索
		const currentFolder = findFolderByPath(allFoldersData.value?.children || [], currentPath);
		return currentFolder ? currentFolder.children : [];
	}

	// 初始化当前文件夹列表
	const initCurrentFolderList = async () => {
		workspaceId.value = getWorkspaceId();
		UserToken.value = getToken();
		console.log("getWorkspaceId:", workspaceId.value);
		allFoldersData.value = await getWorkspaceList(UserToken.value, workspaceId.value);
		currentFolderList.value = getCurrentFolderList();
	};

	// 处理文件夹点击（非选择模式下进入文件夹，仅目录可点击进入）
	const handleFolderClick = (folder) => {
		if (folder.type !== 'directory') return;
		folderStack.value.push({
			path: folder.path,
			name: folder.name
		});
		navbarTitle.value = folder.name;
		navbarBeforeTitle.value = folderStack.value.length > 1 ? folderStack.value[folderStack.value.length - 2].name :
			'工作区';
		currentFolderList.value = getCurrentFolderList();
		searchKeyword.value = '';
		isSearchFocus.value = false;
	};

	// 全选/取消全选
	const handleSelectAll = () => {
		if (selectFileList.value.length === currentFolderList.value.length) {
			selectFileList.value = [];
		} else {
			selectFileList.value = currentFolderList.value.map(f => f.path);
		}
	};

	// 返回上一级
	const handleBackOrCheck = () => {
		if (isSelectFolder.value) {
			// 选择模式下点击全选/取消全选
			handleSelectAll();
			return;
		}

		if (folderStack.value.length > 0) {
			folderStack.value.pop();
			if (folderStack.value.length === 0) {
				navbarTitle.value = '工作区';
				navbarBeforeTitle.value = null;
			} else {
				navbarTitle.value = folderStack.value[folderStack.value.length - 1].name;
				navbarBeforeTitle.value = folderStack.value.length > 1 ?
					folderStack.value[folderStack.value.length - 2].name :
					'工作区';
			}
			initCurrentFolderList();
			// 返回后清空搜索
			searchKeyword.value = '';
			isSearchFocus.value = false;
		} else {
			// 已在根目录，返回到聊天界面
			uni.navigateBack({
				delta: 1,
				fail() {
					console.log("返回失败，进入兜底跳转")
					uni.reLaunch({
						url: '/pages/Chat/Chat'
					})
				}
			})
		}
	};

	onMounted(() => {
		initCurrentFolderList();
	})
</script>

<style scoped>
	@import url("WorkSpace.css");
</style>