<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">
				<div class="flex items-center space-x-4">
					<div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
						<UIcon name="i-heroicons-tv" class="w-8 h-8 text-blue-600 dark:text-blue-400" />
					</div>
					<div>
						<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
							{{ appInfo.name }}
						</h3>
						<p class="text-gray-600 dark:text-gray-400">
							版本 {{ appInfo.version }}
						</p>
					</div>
				</div>

				<div class="space-y-2">
					<p class="text-gray-700 dark:text-gray-300">
						{{ appInfo.description }}
					</p>
					<p class="text-sm text-gray-600 dark:text-gray-400">
						构建时间: {{ appInfo.buildDate }}
					</p>
					<p class="text-sm text-gray-600 dark:text-gray-400">
						作者: {{ appInfo.author }}
					</p>
				</div>
			</div>
		</UCard>

		<!-- 技术栈 -->
		<UCard>
			<template #header>
				<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
					技术栈
				</h2>
			</template>
			<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
				<div class="space-y-3">
					<h4 class="font-medium text-gray-900 dark:text-white">
						UI
					</h4>
					<div class="space-y-2">
						<div class="flex items-center space-x-3">
							<div class="w-6 h-6 bg-green-100 dark:bg-green-900 rounded flex items-center justify-center">
								<div class="w-3 h-3 bg-green-500 rounded" />
							</div>
							<span class="text-sm">Nuxt 4 </span>
						</div>
						<div class="flex items-center space-x-3">
							<div class="w-6 h-6 bg-cyan-100 dark:bg-cyan-900 rounded flex items-center justify-center">
								<div class="w-3 h-3 bg-cyan-500 rounded" />
							</div>
							<span class="text-sm">Tailwind CSS - 原子化 CSS 框架</span>
						</div>
					</div>
				</div>

				<div class="space-y-3">
					<h4 class="font-medium text-gray-900 dark:text-white">
						应用
					</h4>
					<div class="space-y-2">
						<div class="flex items-center space-x-3">
							<div class="w-6 h-6 bg-orange-100 dark:bg-orange-900 rounded flex items-center justify-center">
								<div class="w-3 h-3 bg-orange-500 rounded" />
							</div>
							<span class="text-sm">Tauri 2 - 跨平台桌面应用框架</span>
						</div>
						<div class="flex items-center space-x-3">
							<div class="w-6 h-6 bg-red-100 dark:bg-red-900 rounded flex items-center justify-center">
								<div class="w-3 h-3 bg-red-500 rounded" />
							</div>
							<span class="text-sm">Rust - 系统级编程语言</span>
						</div>
						<div class="flex items-center space-x-3">
							<div class="w-6 h-6 bg-purple-100 dark:bg-purple-900 rounded flex items-center justify-center">
								<div class="w-3 h-3 bg-purple-500 rounded" />
							</div>
							<span class="text-sm">WebSocket - 实时通信协议</span>
						</div>
					</div>
				</div>
			</div>
		</UCard>

		<!-- 功能特性 -->
		<UCard>
			<template #header>
				<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
					功能特性
				</h2>
			</template>
			<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
				<div class="space-y-2">
					<div class="flex items-center space-x-2">
						<UIcon name="i-heroicons-check-circle" class="w-5 h-5 text-green-500" />
						<span class="text-sm">远程视频播放控制</span>
					</div>
					<div class="flex items-center space-x-2">
						<UIcon name="i-heroicons-check-circle" class="w-5 h-5 text-green-500" />
						<span class="text-sm">实时播放进度同步</span>
					</div>
					<div class="flex items-center space-x-2">
						<UIcon name="i-heroicons-check-circle" class="w-5 h-5 text-green-500" />
						<span class="text-sm">音量调节控制</span>
					</div>
					<div class="flex items-center space-x-2">
						<UIcon name="i-heroicons-check-circle" class="w-5 h-5 text-green-500" />
						<span class="text-sm">播放列表管理</span>
					</div>
				</div>
				<div class="space-y-2">
					<div class="flex items-center space-x-2">
						<UIcon name="i-heroicons-check-circle" class="w-5 h-5 text-green-500" />
						<span class="text-sm">循环播放设置</span>
					</div>
					<div class="flex items-center space-x-2">
						<UIcon name="i-heroicons-check-circle" class="w-5 h-5 text-green-500" />
						<span class="text-sm">全屏控制</span>
					</div>
					<div class="flex items-center space-x-2">
						<UIcon name="i-heroicons-check-circle" class="w-5 h-5 text-green-500" />
						<span class="text-sm">自动重连功能</span>
					</div>
				</div>
			</div>
		</UCard>

		<!-- 系统要求 -->
		<UCard>
			<template #header>
				<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
					系统要求
				</h2>
			</template>
			<div class="space-y-4">
				<div>
					<h4 class="font-medium text-gray-900 dark:text-white mb-2">
						支持的平台
					</h4>
					<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
						<div class="flex items-center space-x-2 text-sm">
							<UIcon name="i-heroicons-computer-desktop" class="w-5 h-5 text-gray-500" />
							<span>Windows 10/11</span>
						</div>
						<div class="flex items-center space-x-2 text-sm">
							<UIcon name="i-heroicons-computer-desktop" class="w-5 h-5 text-gray-500" />
							<span>macOS 10.15+</span>
						</div>
						<div class="flex items-center space-x-2 text-sm">
							<UIcon name="i-heroicons-computer-desktop" class="w-5 h-5 text-gray-500" />
							<span>Linux (x64)</span>
						</div>
						<div class="flex items-center space-x-2 text-sm">
							<UIcon name="i-heroicons-device-phone-mobile" class="w-5 h-5 text-gray-500" />
							<span>Android 8.0+</span>
						</div>
						<div class="flex items-center space-x-2 text-sm">
							<UIcon name="i-heroicons-device-phone-mobile" class="w-5 h-5 text-gray-500" />
							<span>iOS 13.0+</span>
						</div>
					</div>
				</div>

				<div>
					<h4 class="font-medium text-gray-900 dark:text-white mb-2">
						网络要求
					</h4>
					<ul class="text-sm text-gray-600 dark:text-gray-400 space-y-1">
						<li>• 与视频播放器处于同一局域网</li>
						<li>• TCP/IP 网络连接</li>
						<li>• 端口访问权限 (默认 8080)</li>
					</ul>
				</div>
			</div>
		</UCard>

		<!-- 开源许可 -->
		<UCard>
			<template #header>
				<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
					开源许可
				</h2>
			</template>
			<div class="space-y-3">
				<p class="text-sm text-gray-600 dark:text-gray-400">
					本软件基于 MIT 许可证开源，您可以自由使用、修改和分发。
				</p>
				<div class="flex space-x-4">
					<UButton variant="outline" size="sm">
						<UIcon name="i-heroicons-code-bracket" class="w-4 h-4 mr-2" />
						查看源码
					</UButton>
					<UButton variant="outline" size="sm">
						<UIcon name="i-heroicons-document-text" class="w-4 h-4 mr-2" />
						许可协议
					</UButton>
				</div>
			</div>
		</UCard>

		<!-- 反馈和支持 -->
		<UCard>
			<template #header>
				<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
					反馈和支持
				</h2>
			</template>
			<div class="space-y-4">
				<p class="text-sm text-gray-600 dark:text-gray-400">
					遇到问题或有建议？欢迎通过以下方式联系我们：
				</p>
				<div class="flex flex-wrap gap-2">
					<UButton variant="outline" size="sm">
						<UIcon name="i-heroicons-bug-ant" class="w-4 h-4 mr-2" />
						报告问题
					</UButton>
					<UButton variant="outline" size="sm">
						<UIcon name="i-heroicons-light-bulb" class="w-4 h-4 mr-2" />
						功能建议
					</UButton>
					<UButton variant="outline" size="sm">
						<UIcon name="i-heroicons-question-mark-circle" class="w-4 h-4 mr-2" />
						使用帮助
					</UButton>
				</div>
			</div>
		</UCard>
	</div>
</template>

<script lang="ts" setup>
	interface AppInfo {
		name: string
		version: string
		description: string
		author: string
		buildDate: string
	}

	const { app } = useAppConfig();

	// 应用信息
	const appInfo = ref<AppInfo>({
		name: app.name,
		version: app.version,
		description: app.description,
		author: app.author,
		buildDate: new Date().toLocaleDateString("zh-CN")
	});

	// 页面加载时获取构建信息
	onMounted(async () => {
		try {
			// TODO: 调用 Tauri API 获取应用构建信息
			console.log("获取应用信息");
		} catch (error) {
			console.error("获取应用信息失败:", error);
		}
	});
</script>
