<script lang="ts">
	import { invoke  } from '@tauri-apps/api/core';
	import { open } from '@tauri-apps/plugin-dialog';
	// --- 1. 导入 Svelte 和 Tauri API ---
	import { onMount } from 'svelte';
	import { listen } from '@tauri-apps/api/event';
	import { goto } from '$app/navigation';

	let installPath = '';
	let isInstalling = false;
	let logContent = '';
	let logOutputElement: HTMLPreElement;

	// --- 2. 为进度条添加新变量 ---
	let progressPercent = 0;

	// --- 3. 定义 Rust 发送的事件结构 (可选, 但推荐) ---
	interface InstallProgress {
		message: string;
		percentage: number;
	}

	// --- 4. 启动事件监听器 ---
	onMount(() => {
		// 监听 'install_progress' 事件
		const unlisten = listen<InstallProgress>('install_progress', (event) => {
			// 使用 Rust 发来的消息更新日志
			log(event.payload.message, false); // false = 不要添加新时间戳
			// 更新进度条
			progressPercent = event.payload.percentage;
		});

		// 组件销毁时停止监听
		return () => {
			unlisten();
		};
	});


	// 1. 打开目录选择对话框
	async function selectInstallDir() {

		const defaultPath = 'C:\\Program Files';
		if (installPath !== '未选择安装路径'){
			log("开始选择安装目录");
		}

		const selected = await open({
			directory: true, // 必须选择目录
			multiple: false, // 只能选择一个
			title: '请选择安装目录',
			defaultPath: defaultPath, // 初始打开的路径
		});

		if (typeof selected === 'string') {
			//判断安装路径是否有中文字符
			if (selected.match(/[\u4e00-\u9fa5]/)) {
				alert("安装目录不能包含中文字符");
				log("安装目录不能包含中文字符");
				installPath = '';
				return;
			}
			installPath = selected + '\\DK'; // 您的逻辑
			log('已选择安装目录:'+ installPath +"，点击开始安装即可开始自动安装");
		}else if (selected === null) {
			log("未选择安装目录");
		}else{
			log("选择安装目录失败");
		}
	}

	// 2. 调用 Rust 后端命令开始安装
	async function startInstallation() {
		if (installPath === '') {
			alert('请先选择安装路径！');
			return;
		}

		isInstalling = true;
		// --- 5. 重置 UI ---
		logContent = ''; // 清空日志
		progressPercent = 0; // 重置进度条
		log("安装程序启动...");


		try {
			// 我们仍然调用 invoke，但现在它只负责启动
			// 真正的日志将通过 'install_progress' 事件传来
			const result: string = await invoke('install_game', {
				targetDir: installPath
			});


			await goto('/success')
		} catch (error) {
			console.error('安装失败:', error);
			log(`安装失败: ${error}`); // 将错误也记录到日志中
			alert(`安装失败：${error}，请重新启动或下载安装程序`);
		} finally {
			isInstalling = false;
		}
	}

	/**
	 * Svelte 版本的日志函数
	 * (修改) 添加一个选项来决定是否显示时间戳
	 */
	const  log = (message: string, showTimestamp = false) => {
		let prefix = '';
		if (showTimestamp) {
			const timestamp = new Date().toLocaleTimeString('zh-CN', { hour12: false });
			prefix = `[${timestamp}] `;
		}
		// 更新变量，而不是直接操作 DOM
		logContent += `${prefix}${message}\n`;
	}

	/**
	 * 2. Svelte 响应式语句 (自动滚动)
	 */
	$: if (logOutputElement && logContent) {
		// 自动滚动到底部
		logOutputElement.scrollTop = logOutputElement.scrollHeight;
	}


</script>

<main class="h-screen flex flex-col backdrop-blur bg-neutral-700/30">

	<div class="flex-1 pt-10 px-5 overflow-hidden relative ">
		<h1 class="textarea-xl  font-bold absolute">选择目标安装位置</h1>
		<div class="h-full  pt-10">
    <pre
			class=" overflow-y-auto h-full whitespace-pre-wrap wrap-break-word   "
			bind:this={logOutputElement}
		>
{logContent}
   </pre>
		</div>
	</div>

	<!-- --- 6. 增加底部高度以容纳进度条 --- -->
	<div class="h-40 shrink-0 p-4 border-base  ">

		{#if isInstalling}

			<div class="w-full bg-neutral-600 rounded-full h-2.5 mb-2">
				<div
					class="bg-blue-600 h-2.5 rounded-full transition-all duration-150"
					style="width: {progressPercent}%"
				></div>
			</div>

			<div class="text-center text-sm mb-2">{Math.round(progressPercent)}%</div>

		{:else}

			<div class="flex items-center">
				<input class="input flex-1" bind:value={installPath} placeholder="请选择安装路径" />

				<button class="btn" on:click={selectInstallDir} disabled={isInstalling}>
					选择安装目录
				</button>
			</div>

		{/if}


		<div class="pt-4 text-center btn-primary">
			<button class="btn  btn-block" on:click={startInstallation} disabled={isInstalling}>
				{isInstalling ? '正在安装...' : '开始安装'}
			</button>
		</div>

	</div>

</main>

<style>

</style>