import { App, Plugin, PluginSettingTab, Setting, TFile, Notice } from 'obsidian';

interface VitePressExporterSettings {
	docsPath: string;
	assetsPath: string;
}

const DEFAULT_SETTINGS: VitePressExporterSettings = {
	docsPath: 'docs',
	assetsPath: 'docs/assets'
}

export default class VitePressExporterPlugin extends Plugin {
	settings: VitePressExporterSettings;

	async onload() {
		await this.loadSettings();

		// 添加导出命令
		this.addCommand({
			id: 'export-to-vitepress',
			name: 'Export current note to VitePress',
			callback: () => {
				this.exportCurrentNote();
			}
		});

		// 添加功能区按钮
		this.addRibbonIcon('upload', 'Export to VitePress', () => {
			this.exportCurrentNote();
		});

		// 添加设置面板
		this.addSettingTab(new VitePressExporterSettingTab(this.app, this));

		console.log('VitePress Exporter plugin loaded');
	}

	onunload() {
		console.log('VitePress Exporter plugin unloaded');
	}

	async loadSettings() {
		this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
	}

	async saveSettings() {
		await this.saveData(this.settings);
	}

	// 导出当前笔记
	async exportCurrentNote() {
		const activeFile = this.app.workspace.getActiveFile();

		if (!activeFile) {
			new Notice('No active file found');
			return;
		}

		if (activeFile.extension !== 'md') {
			new Notice('Current file is not a markdown file');
			return;
		}

		new Notice(`Exporting ${activeFile.name} to VitePress...`);

		try {
			await this.exportNote(activeFile);
			new Notice(`Successfully exported ${activeFile.name} to VitePress`);
		} catch (error) {
			console.error('Export failed:', error);
			new Notice(`Export failed: ${error.message}`);
		}
	}

	// 导出单个笔记
	async exportNote(file: TFile) {
		const { vault } = this.app;

		// 使用 binary 模式读取文件以保留原始格式（包括行尾空格）
		const contentBuffer = await vault.readBinary(file);
		const content = new TextDecoder().decode(contentBuffer);

		// 1. 扫描并复制所有资源文件（传入文件对象用于路径解析）
		const updatedContent = await this.processAssets(content, file);

		// 2. 处理 canvas 引用（暂时保留，后续实现）
		// const finalContent = await this.processCanvases(updatedContent);

		// 3. 写入到 docs 目录（使用 binary 模式保留原始格式）
		const docsPath = `${this.settings.docsPath}/${file.name}`;
		const updatedBuffer = new TextEncoder().encode(updatedContent);
		await vault.adapter.writeBinary(docsPath, updatedBuffer);

		console.log(`Exported ${file.name} to ${docsPath}`);
	}

	// 处理资源文件
	async processAssets(content: string, sourceFile: TFile): Promise<string> {
		const { vault, metadataCache } = this.app;

		console.log('Processing assets for file:', sourceFile.path);

		// 使用 Obsidian API 获取文件的所有嵌入和链接
		const cache = metadataCache.getCache(sourceFile.path);

		console.log('Cache:', cache);
		console.log('Embeds:', cache?.embeds);
		console.log('Links:', cache?.links);

		if (!cache) {
			console.log('No cache found for file');
			return content;
		}

		const assetsToCopy = new Set<string>();
		const canvasFiles = new Set<string>();

		// 收集嵌入文件（图片等）
		if (cache.embeds) {
			for (const embed of cache.embeds) {
				console.log('Processing embed:', embed);
				const resolvedLink = metadataCache.getFirstLinkpathDest(embed.link, sourceFile.path);
				console.log('Resolved link for embed:', resolvedLink?.path);
				if (resolvedLink) {
					// 检查是否是 canvas 文件
					if (resolvedLink.extension === 'canvas') {
						canvasFiles.add(resolvedLink.path);
					} else {
						assetsToCopy.add(resolvedLink.path);
					}
				}
			}
		}

		// 收集普通链接（可选，如果也想复制链接的文件）
		if (cache.links) {
			for (const link of cache.links) {
				const resolvedLink = metadataCache.getFirstLinkpathDest(link.link, sourceFile.path);
				// 只复制本地文件链接，不包括其他 md 文件
				if (resolvedLink && resolvedLink.extension !== 'md') {
					assetsToCopy.add(resolvedLink.path);
				}
			}
		}

		console.log('Assets to copy:', Array.from(assetsToCopy));
		console.log('Canvas files to render:', Array.from(canvasFiles));

		// 处理 Canvas 文件：渲染为图片
		for (const canvasPath of canvasFiles) {
			try {
				const canvasFile = vault.getAbstractFileByPath(canvasPath);
				if (canvasFile instanceof TFile) {
					const renderedImage = await this.renderCanvasToImage(canvasFile);
					if (renderedImage) {
						const imageFileName = canvasFile.name.replace('.canvas', '.png');
						// 图片保存到 docs/assets/
						const imagePath = `${this.settings.assetsPath}/${imageFileName}`;

						// 确保目标目录存在
						await vault.adapter.mkdir(this.settings.assetsPath);

						// 写入渲染的图片
						await vault.adapter.writeBinary(imagePath, renderedImage);

						// 更新内容中的 canvas 引用，使用相对路径 assets/xxx.png
						content = this.updateCanvasLinksInContent(content, canvasFile, canvasPath, imageFileName);

						console.log(`Successfully rendered canvas: ${canvasPath} -> ${imagePath}`);
					}
				}
			} catch (error) {
				console.error(`Failed to render canvas ${canvasPath}:`, error);
			}
		}

		// 复制资源文件到 docs/assets
		for (const assetPath of assetsToCopy) {
			try {
				const sourceFile = vault.getAbstractFileByPath(assetPath);
				console.log('Source file for asset:', sourceFile);

				if (sourceFile instanceof TFile) {
					// 使用 binary 读取模式来保留文件原始内容
					const assetContent = await vault.readBinary(sourceFile);
					const fileName = sourceFile.name;
					const destPath = `${this.settings.assetsPath}/${fileName}`;

					console.log('Copying asset:', assetPath, '->', destPath);

					// 确保目标目录存在
					await vault.adapter.mkdir(this.settings.assetsPath);

					// 写入资源文件（使用 binary 模式）
					await vault.adapter.writeBinary(destPath, assetContent);

					// 更新内容中的资源路径（使用更智能的替换）
					content = this.updateLinksInContent(content, sourceFile, assetPath, fileName);

					console.log(`Successfully copied asset: ${assetPath} -> ${destPath}`);
				}
			} catch (error) {
				console.error(`Failed to copy asset ${assetPath}:`, error);
			}
		}

		return content;
	}

	// 获取原始链接文本
	getOriginalLink(content: string, targetPath: string, sourcePath: string): string | null {
		const { metadataCache } = this.app;

		// 尝试多种可能的链接格式
		const possibleFormats = [
			// Wikilink 格式
			new RegExp(`!\\[\\[${this.escapeRegExp(targetPath)}(\\|[^\\]]*)?\\]\\]`, 'g'),
			new RegExp(`\\[\\[${this.escapeRegExp(targetPath)}(\\|[^\\]]*)?\\]\\]`, 'g'),
			// Markdown 格式
			new RegExp(`!\\[.*?\\]\\(${this.escapeRegExp(targetPath)}\\)`, 'g'),
			new RegExp(`\\[.*?\\]\\(${this.escapeRegExp(targetPath)}\\)`, 'g'),
			// 相对路径格式
			new RegExp(`!\\[\\[${this.escapeRegExp(this.getRelativePath(targetPath, sourcePath))}(\\|[^\\]]*)?\\]\\]`, 'g'),
		];

		for (const regex of possibleFormats) {
			const match = content.match(regex);
			if (match) {
				return match[0];
			}
		}

		return null;
	}

	// 更新内容中的链接
	updateLinksInContent(content: string, sourceFile: TFile, assetPath: string, newFileName: string): string {
		// 获取源文件的目录路径
		const sourceDir = sourceFile.path.substring(0, sourceFile.path.lastIndexOf('/'));
		if (!sourceDir) return content;

		// 尝试多种可能的路径格式
		const possiblePaths = [
			// 完整路径
			assetPath,
			// 相对于源文件的路径
			assetPath.substring(sourceDir.length + 1),
			// URL 编码版本
			encodeURI(assetPath),
			encodeURI(assetPath.substring(sourceDir.length + 1)),
			// 文件名
			sourceFile.name,
			encodeURI(sourceFile.name)
		];

		console.log('Trying to replace links for paths:', possiblePaths);

		// 替换 markdown 格式: ![](path) -> ![](assets/newfile.png)
		const markdownRegex = /!\[([^\]]*)\]\(([^)]+)\)/g;
		content = content.replace(markdownRegex, (match, alt, path) => {
			// 检查这个路径是否匹配我们的目标文件
			for (const testPath of possiblePaths) {
				if (path === testPath || path === testPath.replace(/^\//, '')) {
					console.log(`Found matching link: ${path} -> ${this.settings.assetsPath}/${newFileName}`);
					return `![](${this.settings.assetsPath}/${newFileName})`;
				}
			}
			return match;
		});

		// 替换 wikilink 格式: ![[path]] -> ![[assets/newfile.png]]
		const wikilinkRegex = /!\[\[([^\]]+)\]\]/g;
		content = content.replace(wikilinkRegex, (match, link) => {
			// 移除可能的别名字段
			const cleanLink = link.split('|')[0].trim();

			for (const testPath of possiblePaths) {
				if (cleanLink === testPath || cleanLink === testPath.replace(/^\//, '')) {
					console.log(`Found matching wikilink: ${cleanLink} -> ${this.settings.assetsPath}/${newFileName}`);
					return `![[${this.settings.assetsPath}/${newFileName}]]`;
				}
			}
			return match;
		});

		return content;
	}

	// 辅助函数：转义正则表达式特殊字符
	escapeRegExp(string: string): string {
		return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
	}

	// 辅助函数：获取相对路径
	getRelativePath(targetPath: string, sourcePath: string): string {
		// 简化的相对路径计算
		const targetParts = targetPath.split('/');
		const sourceParts = sourcePath.split('/');

		// 移除文件名
		sourceParts.pop();

		let commonIndex = 0;
		while (commonIndex < Math.min(targetParts.length - 1, sourceParts.length) &&
		       targetParts[commonIndex] === sourceParts[commonIndex]) {
			commonIndex++;
		}

		const relativeParts = [];
		for (let i = commonIndex; i < sourceParts.length; i++) {
			relativeParts.push('..');
		}

		return [...relativeParts, ...targetParts.slice(commonIndex)].join('/');
	}

	// 渲染 Canvas 为图片（使用 Obsidian 原生渲染）
	async renderCanvasToImage(canvasFile: TFile): Promise<Uint8Array | null> {
		try {
			console.log('🎯 Attempting to render canvas using Obsidian native rendering:', canvasFile.path);

			// 使用 Workspace API 打开 Canvas 并捕获原生渲染
			const nativeImage = await this.tryNativeCanvasCapture(canvasFile);
			if (nativeImage) {
				console.log('✅ Successfully captured native Obsidian canvas rendering');
				return nativeImage;
			}

			console.log('⚠️ Native capture failed, using placeholder');
			// 降级方案：生成占位图
			return this.generatePlaceholderImage(canvasFile);

		} catch (error) {
			console.error('❌ Error rendering canvas:', error);
			return this.generatePlaceholderImage(canvasFile);
		}
	}


	// 隐藏 Canvas UI 元素（用于导出时）
	hideCanvasUIElements(): HTMLStyleElement {
		const styleElement = document.createElement('style');
		styleElement.id = 'canvas-export-hide-ui';
		styleElement.textContent = `
			/* 隐藏 Canvas 控制按钮 */
			.canvas-control-menu,
			.canvas-card-menu,
			.canvas-node-menu-button,
			.canvas-node:hover .canvas-node-menu-button,
			.canvas-controls,
			.canvas-help-button {
				display: none !important;
			}

			/* 移除选中状态的高亮 */
			.canvas-node.is-selected,
			.canvas-node.is-focused,
			.canvas-edge.is-selected {
				box-shadow: none !important;
				outline: none !important;
			}

			/* 隐藏工具提示和弹出菜单 */
			.tooltip,
			.popover,
			.modal {
				display: none !important;
			}

			/* 隐藏滚动条但保留滚动功能 */
			.canvas-view-content::-webkit-scrollbar {
				display: none !important;
			}

			/* 确保内容不被裁切 */
			.canvas-view-content {
				overflow: visible !important;
			}

			/* Privacy Mode: 防止卡片内容因缩放被隐藏 */
			.canvas-node-content-hidden {
				display: block !important;
				opacity: 1 !important;
			}

			/* 确保所有卡片内容始终可见 */
			.canvas-node-content {
				display: block !important;
				opacity: 1 !important;
			}

			/* 防止卡片被折叠 */
			.canvas-node .canvas-node-content {
				display: block !important;
			}
		`;
		document.head.appendChild(styleElement);
		console.log('✅ Canvas UI elements hidden for export (privacy mode enabled)');
		return styleElement;
	}

	// 计算实际的 Canvas 内容尺寸和偏移
	getCanvasContentSize(canvasDom: Element): { width: number; height: number; offsetX: number; offsetY: number } {
		const nodes = canvasDom.querySelectorAll('.canvas-node');
		console.log(`📐 Found ${nodes.length} canvas nodes`);

		if (nodes.length === 0) {
			// 降级方案：使用容器尺寸
			return {
				width: (canvasDom as any).offsetWidth || 800,
				height: (canvasDom as any).offsetHeight || 600,
				offsetX: 0,
				offsetY: 0
			};
		}

		// 计算所有节点的边界框
		let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;

		nodes.forEach(node => {
			const rect = node.getBoundingClientRect();
			const canvasRect = canvasDom.getBoundingClientRect();

			// 计算相对于 Canvas 的位置
			const relativeX = rect.left - canvasRect.left;
			const relativeY = rect.top - canvasRect.top;

			minX = Math.min(minX, relativeX);
			minY = Math.min(minY, relativeY);
			maxX = Math.max(maxX, relativeX + rect.width);
			maxY = Math.max(maxY, relativeY + rect.height);
		});

		// 添加 padding
		const padding = 50;
		const offsetX = Math.max(0, minX - padding);
		const offsetY = Math.max(0, minY - padding);
		const contentWidth = maxX - minX + padding * 2;
		const contentHeight = maxY - minY + padding * 2;

		console.log(`📐 Canvas: ${contentWidth}x${contentHeight}, offset: (${offsetX}, ${offsetY})`);

		return { width: contentWidth, height: contentHeight, offsetX, offsetY };
	}


		// 通过滚动拼接捕获完整 Canvas
		async captureCanvasByScrolling(
			canvasDom: Element,
			contentSize: { width: number; height: number; offsetX: number; offsetY: number }
		): Promise<Uint8Array | null> {
			try {
				// 检查 canvasDom 本身是否就是 wrapper，或者 wrapper 是其子元素
				let canvasWrapper: HTMLElement | null = null;
				if ((canvasDom as HTMLElement).classList.contains('canvas-wrapper')) {
					console.log('📦 canvasDom itself is the wrapper');
					canvasWrapper = canvasDom as HTMLElement;
				} else {
					canvasWrapper = canvasDom.querySelector('.canvas-wrapper') as HTMLElement;
					if (!canvasWrapper) {
						console.log('❌ No canvas wrapper found');
						return null;
					}
				}

				// 使用 canvasWrapper 获取视口尺寸
				const viewportWidth = canvasWrapper.offsetWidth;
				const viewportHeight = canvasWrapper.offsetHeight;
				const totalWidth = contentSize.width;
				const totalHeight = contentSize.height;

				console.log(`📐 Viewport: ${viewportWidth}x${viewportHeight}, Total: ${totalWidth}x${totalHeight}`);

				// 如果内容小于视口，直接捕获
				if (totalWidth <= viewportWidth && totalHeight <= viewportHeight) {
					console.log('📸 Content fits in viewport, single capture');
					return null; // 让降级处理
				}

				// 计算需要分块的数量
				const cols = Math.ceil(totalWidth / viewportWidth);
				const rows = Math.ceil(totalHeight / viewportHeight);
				console.log(`🧩 Will capture ${cols}x${rows} = ${cols * rows} tiles`);
				console.log(`📍 Content offset: (${contentSize.offsetX}, ${contentSize.offsetY})`);

				// 保存原始滚动位置
				const originalScrollLeft = canvasWrapper.scrollLeft;
				const originalScrollTop = canvasWrapper.scrollTop;

				// 创建最终拼接的 Canvas
				const finalCanvas = document.createElement('canvas');
				finalCanvas.width = totalWidth;
				finalCanvas.height = totalHeight;
				const ctx = finalCanvas.getContext('2d');
				if (!ctx) {
					console.log('❌ Failed to get canvas context');
					return null;
				}

				// 填充白色背景
				ctx.fillStyle = '#ffffff';
				ctx.fillRect(0, 0, totalWidth, totalHeight);

				// @ts-ignore
				const domToImage = require('dom-to-image-more');

				// 分块捕获并拼接
				for (let row = 0; row < rows; row++) {
					for (let col = 0; col < cols; col++) {
						const x = col * viewportWidth;
						const y = row * viewportHeight;

						// 滚动到对应位置 (确保从内容起始位置开始)
						const targetScrollLeft = Math.max(0, contentSize.offsetX + x);
						const targetScrollTop = Math.max(0, contentSize.offsetY + y);
						canvasWrapper.scrollLeft = targetScrollLeft;
						canvasWrapper.scrollTop = targetScrollTop;
						console.log(`🔄 Scrolled to (${targetScrollLeft}, ${targetScrollTop})`);

						// 等待渲染
						await new Promise(resolve => setTimeout(resolve, 150));

							// 捕获当前视口
							// @ts-ignore
							const domToImage = require('dom-to-image-more');
							const tileDataUrl = await domToImage.toPng(canvasWrapper, {
								backgroundColor: '#ffffff',
								quality: 1,
								width: viewportWidth,
								height: viewportHeight
							});

							// 加载图片并绘制到最终 Canvas
							const img = await this.loadImage(tileDataUrl);
							if (img) {
								const drawWidth = Math.min(viewportWidth, totalWidth - x);
								const drawHeight = Math.min(viewportHeight, totalHeight - y);
								ctx.drawImage(img, 0, 0, drawWidth, drawHeight, x, y, drawWidth, drawHeight);
								console.log(`✅ Tile [${row},${col}] at (${x},${y}) size ${drawWidth}x${drawHeight}`);
							}
						if (img) {
							const drawWidth = Math.min(viewportWidth, totalWidth - x);
							const drawHeight = Math.min(viewportHeight, totalHeight - y);
							ctx.drawImage(img, 0, 0, drawWidth, drawHeight, x, y, drawWidth, drawHeight);
							console.log(`✅ Tile [${row},${col}] at (${x},${y}) size ${drawWidth}x${drawHeight}`);
						}
					}
				}

				// 恢复滚动位置
				canvasWrapper.scrollLeft = originalScrollLeft;
				canvasWrapper.scrollTop = originalScrollTop;

				// 转换为 Uint8Array
				const finalDataUrl = finalCanvas.toDataURL('image/png');
				const base64Data = finalDataUrl.split(',')[1];
				const binaryString = atob(base64Data);
				const bytes = new Uint8Array(binaryString.length);

				for (let i = 0; i < binaryString.length; i++) {
					bytes[i] = binaryString.charCodeAt(i);
				}

				console.log('✅ Stitched canvas complete');
				return bytes;

			} catch (error) {
				console.error('❌ Scroll and stitch failed:', error);
				return null;
			}
		}

		// 加载图片
		async loadImage(dataUrl: string): Promise<HTMLImageElement | null> {
			return new Promise((resolve) => {
				const img = new Image();
				img.onload = () => resolve(img);
				img.onerror = () => resolve(null);
				img.src = dataUrl;
			});
		}

		// 将 DataURL 转换为 Uint8Array
		dataUrlToUint8Array(dataUrl: string): Uint8Array {
			const base64Data = dataUrl.split(',')[1];
			const binaryString = atob(base64Data);
			const bytes = new Uint8Array(binaryString.length);

			for (let i = 0; i < binaryString.length; i++) {
				bytes[i] = binaryString.charCodeAt(i);
			}

			return bytes;
		}

		// 尝试捕获 Obsidian 原生 Canvas 渲染（通过临时调整视口大小）
		async tryNativeCanvasCapture(canvasFile: TFile): Promise<Uint8Array | null> {
			let uiStyleElement: HTMLStyleElement | null = null;
			let sizeStyleElement: HTMLStyleElement | null = null;
			let activeLeaf: any = null;
			let canvasWrapper: HTMLElement | null = null;
			let originalScrollLeft = 0;
			let originalScrollTop = 0;

			try {
				console.log('🔍 Step 1: Getting active workspace leaf...');

				// 获取当前活动的 leaf（不创建新窗口）
				activeLeaf = this.app.workspace.activeLeaf;
				if (!activeLeaf) {
					console.log('❌ No active leaf found');
					return null;
				}

				console.log('🔍 Step 2: Opening canvas file...');
				await activeLeaf.openFile(canvasFile);

				console.log('⏳ Step 3: Waiting for canvas render...');
				await this.waitForCanvasRender();

				console.log('🔍 Step 4: Finding canvas DOM...');
				const canvasDom = this.findCanvasDomElement();
				if (!canvasDom) {
					console.log('❌ Could not find canvas DOM element');
					return null;
				}

				console.log('✅ Found canvas DOM:', canvasDom.className, 'Size:', (canvasDom as any).offsetWidth, 'x', (canvasDom as any).offsetHeight);

				console.log('🎨 Step 5: Hiding Canvas UI elements...');
				uiStyleElement = this.hideCanvasUIElements();

				console.log('📐 Step 6: Calculating canvas content size...');
				const contentSize = this.getCanvasContentSize(canvasDom);

				// 获取 canvasWrapper
				if ((canvasDom as HTMLElement).classList.contains('canvas-wrapper')) {
					canvasWrapper = canvasDom as HTMLElement;
				} else {
					canvasWrapper = canvasDom.querySelector('.canvas-wrapper') as HTMLElement;
				}

				if (!canvasWrapper) {
					console.log('❌ Could not find canvas wrapper');
					return null;
				}

				// 保存原始滚动位置
				originalScrollLeft = canvasWrapper.scrollLeft;
				originalScrollTop = canvasWrapper.scrollTop;

				console.log(`📏 Original wrapper size: ${(canvasDom as any).offsetWidth}x${(canvasDom as any).offsetHeight}`);
				console.log(`📏 Content size: ${contentSize.width}x${contentSize.height}`);

				// 临时调整 canvas wrapper 大小以适应所有内容
				console.log('🔧 Temporarily resizing canvas wrapper to fit all content...');
				sizeStyleElement = document.createElement('style');
				sizeStyleElement.id = 'canvas-export-resize';
				sizeStyleElement.textContent = `
					/* 临时调整 canvas wrapper 大小 */
					.canvas-wrapper {
						width: ${contentSize.width + 100}px !important;
						height: ${contentSize.height + 100}px !important;
						max-width: ${contentSize.width + 100}px !important;
						max-height: ${contentSize.height + 100}px !important;
						overflow: visible !important;
					}

					/* 确保画布内容区域也扩展 */
					.canvas-view-content {
						width: ${contentSize.width + 100}px !important;
						height: ${contentSize.height + 100}px !important;
					}
				`;
				document.head.appendChild(sizeStyleElement);

				// 等待样式应用
				await new Promise(resolve => setTimeout(resolve, 100));

				// 重置滚动位置
				canvasWrapper.scrollLeft = 0;
				canvasWrapper.scrollTop = 0;

				// 等待布局更新
				await new Promise(resolve => setTimeout(resolve, 200));

				console.log('📸 Step 7: Capturing canvas...');
				// @ts-ignore
				const domToImage = require('dom-to-image-more');

				const dataUrl = await domToImage.toPng(canvasDom, {
					backgroundColor: '#ffffff',
					quality: 1,
					width: contentSize.width,
					height: contentSize.height,
					cacheBust: true
				});

				const imageData = this.dataUrlToUint8Array(dataUrl);

				console.log('✅ Capture successful!');

				return imageData;

			} catch (error) {
				console.error('❌ Native canvas capture failed:', error);
				return null;
			} finally {
				// 清理临时调整大小的样式
				if (sizeStyleElement && sizeStyleElement.parentNode) {
					sizeStyleElement.parentNode.removeChild(sizeStyleElement);
					console.log('🧹 Removed temporary resize styles');
				}

				if (uiStyleElement && uiStyleElement.parentNode) {
					uiStyleElement.parentNode.removeChild(uiStyleElement);
					console.log('🧹 Cleaned up UI hiding styles');
				}

				// 恢复滚动位置
				if (canvasWrapper) {
					canvasWrapper.scrollLeft = originalScrollLeft;
					canvasWrapper.scrollTop = originalScrollTop;
					console.log('🔄 Restored original scroll position');
				}

				console.log('🧹 Cleanup complete');
			}
		}


	// 在指定的 leaf 中查找 Canvas DOM 元素
	async findCanvasDomInLeaf(leaf: any): Promise<Element | null> {
		console.log('🔍 Searching for canvas DOM in leaf...');

		// 获取 leaf 的容器
		const container = leaf.containerEl;
		if (!container) {
			console.log('❌ Leaf has no container');
			return null;
		}

		console.log('📦 Leaf container:', container);

		// 在 leaf 容器中查找 Canvas（最多等待 20 秒）
		const maxWait = 20000;
		const startTime = Date.now();

		return new Promise(resolve => {
			const checkCanvas = () => {
				const elapsed = Date.now() - startTime;

				if (elapsed > maxWait) {
					console.log('⏰ Canvas render timeout after', maxWait, 'ms');
					resolve(null);
					return;
				}

				// 尝试多种可能的选择器（在 leaf 容器内搜索）
				const selectors = [
					'.canvas-view-content',
					'.canvas-wrapper',
					'.canvas-container',
					'[data-type="canvas"]',
					'.canvas-view'
				];

				for (const selector of selectors) {
					const canvas = container.querySelector(selector);
					if (canvas) {
						const nodes = canvas.querySelectorAll('.canvas-node');
						if (nodes.length > 0) {
							console.log(`✅ Found canvas with selector: ${selector} (${elapsed}ms) with ${nodes.length} nodes`);
							setTimeout(() => resolve(canvas), 500);
							return;
						}
					}
				}

				// 继续等待
				setTimeout(checkCanvas, 100);
			};

			console.log('⏳ Starting to wait for canvas render in leaf...');
			checkCanvas();
		});
	}
	// 等待 Canvas 渲染完成
	async waitForCanvasRender(): Promise<void> {
		return new Promise(resolve => {
			const maxWait = 20000; // 增加到 20 秒（新窗口需要更多时间)
			const startTime = Date.now();

			const checkCanvas = () => {
				const elapsed = Date.now() - startTime;

				if (elapsed > maxWait) {
					console.log('⏰ Canvas render timeout after', maxWait, 'ms');
					resolve();
					return;
				}

				// 尝试多种可能的选择器
				const selectors = [
					'.canvas-view-content',
					'.canvas-wrapper',
					'.canvas-container',
					'[data-type="canvas"]',
					'.workspace-leaf-content .canvas-view'
				];

				for (const selector of selectors) {
					const canvas = document.querySelector(selector);
					if (canvas) {
						// 检查是否有节点
						const nodes = canvas.querySelectorAll('.canvas-node');
						if (nodes.length > 0) {
							console.log(`✅ Canvas rendered using selector: ${selector} (${elapsed}ms) with ${nodes.length} nodes`);
							// 额外等待确保渲染完全完成
							setTimeout(resolve, 1000);
							return;
						}
					}
				// 继续等待
				}
				setTimeout(checkCanvas, 100);
			};

			console.log('⏳ Starting to wait for canvas render...');
			checkCanvas();
		});
	}

	// 查找 Canvas DOM 元素
	findCanvasDomElement(): Element | null {
		console.log('🔍 Searching for canvas DOM elements...');

		// 尝试多种可能的选择器
		const selectors = [
			'.canvas-view-content',
			'.canvas-wrapper',
			'.canvas-container',
			'[data-type="canvas"]',
			'.workspace-leaf-content .canvas-view',
			'.canvas-view'
		];

		for (const selector of selectors) {
			const element = document.querySelector(selector);
			if (element) {
				console.log('✅ Found canvas element with selector: "' + selector + '"');
				console.log('   Element:', element.tagName, element.className);
				// @ts-ignore - HTMLElement 类型扩展
				console.log('   Size:', element.offsetWidth, 'x', element.offsetHeight);
				console.log('   Children:', element.children.length);
				return element;
			}
		}

		console.log('❌ No canvas element found');
		return null;
	}

	// 从 Canvas JSON 渲染图片
	async renderCanvasFromJSON(canvasFile: TFile): Promise<Uint8Array | null> {
		try {
			console.log('📖 Reading canvas JSON...');
			const { vault } = this.app;

			// 读取 Canvas JSON
			const content = await vault.read(canvasFile);
			const canvasData = JSON.parse(content);

			console.log('📊 Canvas data:', canvasData);

			// 解析节点和边
			const nodes = canvasData.nodes || [];
			const edges = canvasData.edges || [];

			console.log(`📦 Found ${nodes.length} nodes and ${edges.length} edges`);

			if (nodes.length === 0) {
				console.log('⚠️ No nodes found in canvas');
				return null;
			}

			// 计算画布边界
			let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;

			for (const node of nodes) {
				const x = node.x || 0;
				const y = node.y || 0;
				const width = node.width || 200;
				const height = node.height || 100;

				minX = Math.min(minX, x);
				minY = Math.min(minY, y);
				maxX = Math.max(maxX, x + width);
				maxY = Math.max(maxY, y + height);
			}

			// 添加 padding
			const padding = 50;
			minX -= padding;
			minY -= padding;
			maxX += padding;
			maxY += padding;

			const canvasWidth = maxX - minX;
			const canvasHeight = maxY - minY;

			console.log(`📐 Canvas size: ${canvasWidth} x ${canvasHeight}`);

			// 创建 Canvas
			const canvas = document.createElement('canvas');
			canvas.width = canvasWidth;
			canvas.height = canvasHeight;
			const ctx = canvas.getContext('2d');

			if (!ctx) {
				console.log('❌ Failed to get canvas context');
				return null;
			}

			// 填充背景
			ctx.fillStyle = '#ffffff';
			ctx.fillRect(0, 0, canvasWidth, canvasHeight);

			// 绘制边（连接线）
			console.log('🔗 Drawing edges...');
			ctx.strokeStyle = '#999999';
			ctx.lineWidth = 2;

			for (const edge of edges) {
				const fromNode = nodes.find((n: any) => n.id === edge.fromNode || n.id === edge.from);
				const toNode = nodes.find((n: any) => n.id === edge.toNode || n.id === edge.to);

				if (fromNode && toNode) {
					const fromX = fromNode.x + (fromNode.width || 200) / 2 - minX;
					const fromY = fromNode.y + (fromNode.height || 100) / 2 - minY;
					const toX = toNode.x + (toNode.width || 200) / 2 - minX;
					const toY = toNode.y + (toNode.height || 100) / 2 - minY;

					ctx.beginPath();
					ctx.moveTo(fromX, fromY);
					ctx.lineTo(toX, toY);
					ctx.stroke();
				}
			}

			// 绘制节点
			console.log('🎨 Drawing nodes...');
			for (const node of nodes) {
				await this.drawCanvasNode(ctx, node, minX, minY);
			}

			console.log('💾 Converting to Uint8Array...');

			// 转换为 Uint8Array
			const dataUrl = canvas.toDataURL('image/png');
			const base64Data = dataUrl.split(',')[1];
			const binaryString = atob(base64Data);
			const bytes = new Uint8Array(binaryString.length);

			for (let i = 0; i < binaryString.length; i++) {
				bytes[i] = binaryString.charCodeAt(i);
			}

			return bytes;

		} catch (error) {
			console.error('❌ Error rendering canvas from JSON:', error);
			return null;
		}
	}

	// 绘制单个 Canvas 节点
	async drawCanvasNode(ctx: CanvasRenderingContext2D, node: any, offsetX: number, offsetY: number): Promise<void> {
		const x = (node.x || 0) - offsetX;
		const y = (node.y || 0) - offsetY;
		const width = node.width || 200;
		const height = node.height || 100;

		console.log(`   Drawing node "${node.id}" at (${x}, ${y})`);

		// 设置背景颜色
		let bgColor = '#f0f0f0';
		if (node.color) {
			const colorMap: Record<string, string> = {
				'1': '#ff6b6b',
				'2': '#4ecdc4',
				'3': '#45b7d1',
				'4': '#96ceb4',
				'5': '#ffeaa7',
				'6': '#dfe6e9'
			};
			bgColor = colorMap[node.color] || node.color;
		}

		// 绘制节点背景
		ctx.fillStyle = bgColor;
		ctx.fillRect(x, y, width, height);

		// 绘制边框
		ctx.strokeStyle = '#cccccc';
		ctx.lineWidth = 2;
		ctx.strokeRect(x, y, width, height);

		// 绘制文本内容
		if (node.type === 'text' && node.text) {
			ctx.fillStyle = '#333333';
			ctx.font = '14px sans-serif';
			ctx.textAlign = 'left';
			ctx.textBaseline = 'top';

			// 简单的文本换行处理
			const padding = 10;
			const maxWidth = width - padding * 2;
			const lineHeight = 20;

			this.wrapText(ctx, node.text, x + padding, y + padding, maxWidth, lineHeight);
		} else if (node.type === 'file' && node.file) {
			ctx.fillStyle = '#333333';
			ctx.font = 'bold 14px sans-serif';
			ctx.textAlign = 'center';
			ctx.textBaseline = 'middle';

			// 显示文件名
			const fileName = node.file.split('/').pop();
			ctx.fillText(fileName || node.file, x + width / 2, y + height / 2);
		} else if (node.label) {
			ctx.fillStyle = '#333333';
			ctx.font = 'bold 16px sans-serif';
			ctx.textAlign = 'center';
			ctx.textBaseline = 'middle';
			ctx.fillText(node.label, x + width / 2, y + height / 2);
		}
	}

	// 文本换行辅助函数
	wrapText(ctx: CanvasRenderingContext2D, text: string, x: number, y: number, maxWidth: number, lineHeight: number): void {
		const words = text.split(' ');
		let line = '';
		let currentY = y;

		for (let i = 0; i < words.length; i++) {
			const testLine = line + words[i] + ' ';
			const metrics = ctx.measureText(testLine);
			const testWidth = metrics.width;

			if (testWidth > maxWidth && i > 0) {
				ctx.fillText(line, x, currentY);
				line = words[i] + ' ';
				currentY += lineHeight;
			} else {
				line = testLine;
			}
		}

		ctx.fillText(line, x, currentY);
	}

	// 生成占位图
	generatePlaceholderImage(canvasFile: TFile): Uint8Array | null {
		try {
			const canvas = document.createElement('canvas');
			const ctx = canvas.getContext('2d');

			if (!ctx) return null;

			// 设置占位图尺寸
			canvas.width = 800;
			canvas.height = 600;

			// 绘制背景
			ctx.fillStyle = '#f0f0f0';
			ctx.fillRect(0, 0, canvas.width, canvas.height);

			// 绘制边框
			ctx.strokeStyle = '#ccc';
			ctx.lineWidth = 2;
			ctx.strokeRect(10, 10, canvas.width - 20, canvas.height - 20);

			// 绘制文字
			ctx.fillStyle = '#666';
			ctx.font = '24px Arial';
			ctx.textAlign = 'center';
			ctx.fillText('Canvas 占位图', canvas.width / 2, canvas.height / 2 - 20);

			ctx.font = '16px Arial';
			ctx.fillText(canvasFile.name, canvas.width / 2, canvas.height / 2 + 20);
			ctx.font = '14px Arial';
			ctx.fillText('（需要手动导出或等待原生渲染支持）', canvas.width / 2, canvas.height / 2 + 50);

			// 转换为 Uint8Array
			const dataUrl = canvas.toDataURL('image/png');
			const base64Data = dataUrl.split(',')[1];
			const binaryString = atob(base64Data);
			const bytes = new Uint8Array(binaryString.length);

			for (let i = 0; i < binaryString.length; i++) {
				bytes[i] = binaryString.charCodeAt(i);
			}

			return bytes;

		} catch (error) {
			console.error('Error generating placeholder image:', error);
			return null;
		}
	}

	// 更新内容中的 Canvas 链接
	updateCanvasLinksInContent(content: string, canvasFile: TFile, canvasPath: string, imageFileName: string): string {
		// 获取源文件的目录路径
		const sourceDir = canvasFile.path.substring(0, canvasFile.path.lastIndexOf('/'));
		if (!sourceDir) return content;

		// 尝试多种可能的路径格式
		const possiblePaths = [
			// 完整路径
			canvasPath,
			// 相对于源文件的路径
			canvasPath.substring(sourceDir.length + 1),
			// URL 编码版本
			encodeURI(canvasPath),
			encodeURI(canvasPath.substring(sourceDir.length + 1)),
			// 文件名（包括和不包括 .canvas 扩展名）
			canvasFile.name,
			canvasFile.name.replace('.canvas', ''),
			encodeURI(canvasFile.name),
			encodeURI(canvasFile.name.replace('.canvas', ''))
		];

		console.log('Trying to replace canvas links for paths:', possiblePaths);

		// 替换 markdown 格式: !(canvas) -> <Viewer src="assets/image.png" />
		const markdownRegex = /!\[([^\]]*)\]\(([^)]+)\)/g;
		content = content.replace(markdownRegex, (match, alt, path) => {
			// 检查这个路径是否匹配我们的 canvas 文件
			for (const testPath of possiblePaths) {
				if (path === testPath || path === testPath.replace(/^\//, '')) {
					const relativePath = this.settings.assetsPath.replace('docs/', '');
					console.log(`Found matching canvas link: ${path} -> <Viewer src="${relativePath}/${imageFileName}" />`);
					return `<Viewer src="${relativePath}/${imageFileName}" />`;
				}
			}
			return match;
		});

		// 替换 wikilink 格式: ![[canvas]] -> <Viewer src="assets/image.png" />
		const wikilinkRegex = /!\[\[([^\]]+)\]\]/g;
		content = content.replace(wikilinkRegex, (match, link) => {
			// 移除可能的别名字段
			const cleanLink = link.split('|')[0].trim();

			for (const testPath of possiblePaths) {
				if (cleanLink === testPath || cleanLink === testPath.replace(/^\//, '')) {
					const relativePath = this.settings.assetsPath.replace('docs/', '');
					console.log(`Found matching canvas wikilink: ${cleanLink} -> <Viewer src="${relativePath}/${imageFileName}" />`);
					return `<Viewer src="${relativePath}/${imageFileName}" />`;
				}
			}
			return match;
		});

		return content;
	}
}

// 设置面板
class VitePressExporterSettingTab extends PluginSettingTab {
	plugin: VitePressExporterPlugin;

	constructor(app: App, plugin: VitePressExporterPlugin) {
		super(app, plugin);
		this.plugin = plugin;
	}

	display(): void {
		const { containerEl } = this;

		containerEl.empty();

		containerEl.createEl('h2', { text: 'VitePress Exporter Settings' });

		new Setting(containerEl)
			.setName('Docs path')
			.setDesc('Path to the docs directory (relative to vault root)')
			.addText(text => text
				.setPlaceholder('docs')
				.setValue(this.plugin.settings.docsPath)
				.onChange(async (value) => {
					this.plugin.settings.docsPath = value;
					await this.plugin.saveSettings();
				}));

		new Setting(containerEl)
			.setName('Assets path')
			.setDesc('Path to the assets directory (relative to vault root)')
			.addText(text => text
				.setPlaceholder('docs/assets')
				.setValue(this.plugin.settings.assetsPath)
				.onChange(async (value) => {
					this.plugin.settings.assetsPath = value;
					await this.plugin.saveSettings();
				}));
	}
}