<template>
	<div class="space-y-6">
		<!-- 连接设置 -->
		<UCard>
			<template #header>
				<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
					连接设置
				</h2>
			</template>
			<div class="space-y-4">
				<UFormGroup label="视频播放器地址" description="设置要连接的视频播放器的IP地址和端口">
					<div class="flex space-x-2">
						<UInput v-model="settings.playerHost" placeholder="127.0.0.1" class="flex-1 mb-3" />
						<span class="self-center text-gray-500">:</span>
						<UInput v-model="settings.playerPort" type="number" placeholder="6666" class="w-24" />
					</div>
				</UFormGroup>

				<UFormGroup label="连接超时时间 (秒)" description="连接超时的时间设置">
					<UInput v-model.number="settings.connectionTimeout" type="number" min="1" max="60" />
				</UFormGroup>

				<UFormGroup label="自动重连" description="连接断开后是否自动尝试重连">
					<UToggle v-model="settings.autoReconnect" />
				</UFormGroup>

				<UFormGroup label="重连间隔 (秒)" description="自动重连的间隔时间">
					<UInput
						v-model.number="settings.reconnectInterval"
						type="number"
						min="1"
						max="300"
						:disabled="!settings.autoReconnect"
					/>
				</UFormGroup>
			</div>
		</UCard>

		<!-- 播放设置 -->
		<UCard>
			<template #header>
				<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
					播放设置
				</h2>
			</template>
			<div class="space-y-4">
				<UFormGroup label="默认音量" description="新视频播放时的默认音量">
					<div class="flex items-center space-x-4">
						<URange v-model="settings.defaultVolume" :min="0" :max="100" class="flex-1" />
						<span class="text-sm text-gray-600 dark:text-gray-400 min-w-[3rem]">{{ settings.defaultVolume }}%</span>
					</div>
				</UFormGroup>

				<UFormGroup label="默认循环播放" description="是否默认启用循环播放">
					<UToggle v-model="settings.defaultLoop" />
				</UFormGroup>

				<UFormGroup label="自动全屏" description="播放视频时是否自动全屏">
					<UToggle v-model="settings.autoFullscreen" />
				</UFormGroup>

				<UFormGroup label="播放完成后行为">
					<USelectMenu
						v-model="settings.playbackEndBehavior"
						:options="playbackEndOptions"
						option-attribute="label"
						value-attribute="value"
					/>
				</UFormGroup>
			</div>
		</UCard>

		<!-- 界面设置 -->
		<UCard>
			<template #header>
				<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
					界面设置
				</h2>
			</template>
			<div class="space-y-4">
				<UFormGroup label="主题模式">
					<USelectMenu
						v-model="settings.theme"
						:options="themeOptions"
						option-attribute="label"
						value-attribute="value"
					/>
				</UFormGroup>

				<UFormGroup label="语言">
					<USelectMenu
						v-model="settings.language"
						:options="languageOptions"
						option-attribute="label"
						value-attribute="value"
					/>
				</UFormGroup>

				<UFormGroup label="显示通知" description="是否显示操作通知">
					<UToggle v-model="settings.showNotifications" />
				</UFormGroup>
			</div>
		</UCard>

		<!-- 高级设置 -->
		<UCard>
			<template #header>
				<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
					高级设置
				</h2>
			</template>
			<div class="space-y-4">
				<UFormGroup label="调试模式" description="启用详细的日志记录">
					<UToggle v-model="settings.debugMode" />
				</UFormGroup>

				<UFormGroup label="缓存大小 (MB)" description="播放列表和缩略图缓存大小">
					<UInput v-model.number="settings.cacheSize" type="number" min="10" max="1000" />
				</UFormGroup>

				<UFormGroup label="网络代理" description="设置网络代理（可选）">
					<UInput v-model="settings.proxy" placeholder="http://proxy.example.com:8080" />
				</UFormGroup>
			</div>
		</UCard>

		<!-- 操作按钮 -->
		<div class="flex justify-between">
			<UButton variant="outline" color="success" @click="resetSettings">
				<UIcon name="i-heroicons-arrow-path" class="w-4 h-4 mr-2" />
				重置设置
			</UButton>
			<div class="space-x-2">
				<UButton variant="outline" @click="exportSettings">
					<UIcon name="i-heroicons-arrow-up-tray" class="w-4 h-4 mr-2" />
					导出配置
				</UButton>
				<UButton variant="outline" @click="importSettings">
					<UIcon name="i-heroicons-arrow-down-tray" class="w-4 h-4 mr-2" />
					导入配置
				</UButton>
				<UButton color="primary" @click="saveSettings">
					<UIcon name="i-heroicons-check" class="w-4 h-4 mr-2" />
					保存设置
				</UButton>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	interface AppSettings {
		playerHost: string
		playerPort: number
		connectionTimeout: number
		autoReconnect: boolean
		reconnectInterval: number
		defaultVolume: number
		defaultLoop: boolean
		autoFullscreen: boolean
		playbackEndBehavior: string
		theme: string
		language: string
		showNotifications: boolean
		debugMode: boolean
		cacheSize: number
		proxy: string
	}

	// 响应式设置数据
	const settings = ref<AppSettings>({
		playerHost: "127.0.0.1",
		playerPort: 6666,
		connectionTimeout: 10,
		autoReconnect: true,
		reconnectInterval: 5,
		defaultVolume: 50,
		defaultLoop: false,
		autoFullscreen: false,
		playbackEndBehavior: "stop",
		theme: "system",
		language: "zh-CN",
		showNotifications: true,
		debugMode: false,
		cacheSize: 100,
		proxy: ""
	});

	// 选项数据
	const playbackEndOptions = [
		{ label: "停止播放", value: "stop" },
		{ label: "播放下一个", value: "next" },
		{ label: "重复播放", value: "repeat" }
	];

	const themeOptions = [
		{ label: "跟随系统", value: "system" },
		{ label: "浅色模式", value: "light" },
		{ label: "深色模式", value: "dark" }
	];

	const languageOptions = [
		{ label: "简体中文", value: "zh-CN" },
		{ label: "English", value: "en" },
		{ label: "日本語", value: "ja" }
	];

	// 方法
	const saveSettings = async () => {
		try {
			// TODO: 调用 Tauri API 保存设置
			console.log("保存设置:", settings.value);
		// 显示成功通知
		// useToast().add({ title: '设置已保存', color: 'green' })
		} catch (error) {
			console.error("保存设置失败:", error);
		// 显示错误通知
		// useToast().add({ title: '保存失败', color: 'red' })
		}
	};

	const resetSettings = async () => {
		// 重置为默认设置
		settings.value = {
			playerHost: "127.0.0.1",
			playerPort: 6666,
			connectionTimeout: 10,
			autoReconnect: true,
			reconnectInterval: 5,
			defaultVolume: 50,
			defaultLoop: false,
			autoFullscreen: false,
			playbackEndBehavior: "stop",
			theme: "system",
			language: "zh-CN",
			showNotifications: true,
			debugMode: false,
			cacheSize: 100,
			proxy: ""
		};
	};

	const exportSettings = async () => {
		try {
			// TODO: 调用 Tauri API 导出设置到文件
			console.log("导出设置");
		} catch (error) {
			console.error("导出设置失败:", error);
		}
	};

	const importSettings = async () => {
		try {
			// TODO: 调用 Tauri API 从文件导入设置
			console.log("导入设置");
		} catch (error) {
			console.error("导入设置失败:", error);
		}
	};

	// 页面加载时读取设置
	onMounted(async () => {
		try {
			// TODO: 调用 Tauri API 读取保存的设置
			console.log("加载设置");
		} catch (error) {
			console.error("加载设置失败:", error);
		}
	});

	// 监听设置变化并自动保存关键设置
	watch(() => [settings.value.playerHost, settings.value.playerPort], async () => {
		// 自动保存连接相关设置
		await saveSettings();
	}, { debounce: 1000 });
</script>
