<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="flex items-center justify-between">
				<div class="flex items-center space-x-3">
					<div :class="connectionStatus === 'connected' ? 'bg-green-500' : connectionStatus === 'connecting' ? 'bg-yellow-500' : 'bg-red-500'" class="w-3 h-3 rounded-full" />
					<span class="text-sm font-medium text-gray-700 dark:text-gray-300">
						{{ connectionStatusText }}
					</span>
				</div>
				<UButton
					:variant="connectionStatus === 'connected' ? 'soft' : 'solid'"
					:color="connectionStatus === 'connected' ? 'primary' : 'secondary'"
					size="sm"
					@click="toggleConnection"
				>
					{{ connectionStatus === 'connected' ? '断开连接' : '连接' }}
				</UButton>
			</div>
			<div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
				<p>视频播放器地址: {{ playerAddress }}</p>
			</div>
		</UCard>

		<!-- 视频预览区域 -->
		<UCard>
			<template #header>
				<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
					视频预览
				</h2>
			</template>
			<div class="bg-black rounded-lg aspect-video flex items-center justify-center">
				<div v-if="currentVideo" class="text-center">
					<UIcon name="i-heroicons-film" class="w-16 h-16 text-gray-400 mx-auto mb-2" />
					<p class="text-white text-sm">
						{{ currentVideo }}
					</p>
				</div>
				<div v-else class="text-center">
					<UIcon name="i-heroicons-video-camera-slash" class="w-16 h-16 text-gray-600 mx-auto mb-2" />
					<p class="text-gray-400 text-sm">
						暂无视频
					</p>
				</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 class="flex justify-center space-x-4">
					<UButton :disabled="!isConnected" color="success" size="lg" @click="playVideo">
						<UIcon name="i-heroicons-play" class="w-5 h-5 mr-2" />
						播放
					</UButton>
					<UButton :disabled="!isConnected" color="warning" size="lg" @click="pauseVideo">
						<UIcon name="i-heroicons-pause" class="w-5 h-5 mr-2" />
						暂停
					</UButton>
					<UButton :disabled="!isConnected" color="error" size="lg" @click="stopVideo">
						<UIcon name="i-heroicons-stop" class="w-5 h-5 mr-2" />
						停止
					</UButton>
				</div>

				<!-- 进度控制 -->
				<div class="space-y-2">
					<label class="text-sm font-medium text-gray-700 dark:text-gray-300">播放进度</label>
					<div class="flex items-center space-x-4">
						<URange v-model="progress" :min="0" :max="100" :disabled="!isConnected" class="flex-1" />
						<span class="text-sm text-gray-600 dark:text-gray-400 min-w-[3rem]">{{ progress }}%</span>
					</div>
				</div>

				<!-- 音量控制 -->
				<div class="space-y-2">
					<label class="text-sm font-medium text-gray-700 dark:text-gray-300">音量</label>
					<div class="flex items-center space-x-4">
						<UIcon name="i-heroicons-speaker-x-mark" class="w-5 h-5 text-gray-400" />
						<URange v-model="volume" :min="0" :max="100" :disabled="!isConnected" class="flex-1" />
						<UIcon name="i-heroicons-speaker-wave" class="w-5 h-5 text-gray-400" />
						<span class="text-sm text-gray-600 dark:text-gray-400 min-w-[3rem]">{{ volume }}%</span>
					</div>
				</div>

				<!-- 额外功能 -->
				<div class="flex flex-wrap gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
					<UButton :disabled="!isConnected" :variant="isLooping ? 'solid' : 'outline'" size="sm" @click="toggleLoop">
						<UIcon name="i-heroicons-arrow-path" class="w-4 h-4 mr-1" />
						循环播放
					</UButton>
					<UButton :disabled="!isConnected" variant="outline" size="sm" @click="toggleFullscreen">
						<UIcon name="i-heroicons-arrows-pointing-out" class="w-4 h-4 mr-1" />
						全屏
					</UButton>
					<UButton variant="outline" size="sm" @click="openVideoFile">
						<UIcon name="i-heroicons-folder-open" class="w-4 h-4 mr-1" />
						打开文件
					</UButton>
				</div>
			</div>
		</UCard>

		<!-- 播放列表 -->
		<UCard>
			<template #header>
				<div class="flex items-center justify-between">
					<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
						播放列表
					</h2>
					<UButton variant="ghost" size="sm" color="error" @click="clearPlaylist">
						<UIcon name="i-heroicons-trash" class="w-4 h-4 mr-1" />
						清空
					</UButton>
				</div>
			</template>
			<div class="space-y-2">
				<div v-if="playlist.length === 0" class="text-center py-8 text-gray-500 dark:text-gray-400">
					<UIcon name="i-heroicons-queue-list" class="w-12 h-12 mx-auto mb-2 text-gray-300" />
					<p>播放列表为空</p>
				</div>
				<div v-else>
					<div
						v-for="(item, index) in playlist"
						:key="index"
						class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg"
					>
						<div class="flex items-center space-x-3">
							<UIcon name="i-heroicons-film" class="w-5 h-5 text-gray-400" />
							<span class="text-sm font-medium">{{ item }}</span>
						</div>
						<div class="flex space-x-1">
							<UButton size="xs" variant="ghost" @click="playVideoFromPlaylist(index)">
								<UIcon name="i-heroicons-play" class="w-4 h-4" />
							</UButton>
							<UButton size="xs" variant="ghost" color="error" @click="removeFromPlaylist(index)">
								<UIcon name="i-heroicons-x-mark" class="w-4 h-4" />
							</UButton>
						</div>
					</div>
				</div>
			</div>
		</UCard>
	</div>
</template>

<script lang="ts" setup>
	interface VideoControllerState {
		connectionStatus: "connected" | "connecting" | "disconnected"
		currentVideo: string | null
		progress: number
		volume: number
		isLooping: boolean
		playlist: string[]
		playerAddress: string
	}

	// 响应式状态
	const connectionStatus = ref<VideoControllerState["connectionStatus"]>("disconnected");
	const currentVideo = ref<string | null>(null);
	const progress = ref(0);
	const volume = ref(50);
	const isLooping = ref(false);
	const playlist = ref<string[]>([]);
	const playerAddress = ref("192.168.1.100:8080");

	// 计算属性
	const isConnected = computed(() => connectionStatus.value === "connected");

	const connectionStatusText = computed(() => {
		switch (connectionStatus.value) {
		case "connected": return "已连接";
		case "connecting": return "连接中...";
		default: return "未连接";
		}
	});

	// 方法
	const toggleConnection = async () => {
		if (connectionStatus.value === "connected") {
			// 断开连接
			connectionStatus.value = "disconnected";
		} else {
			// 尝试连接
			connectionStatus.value = "connecting";
			// TODO: 在这里调用 Tauri API 进行实际连接
			setTimeout(() => {
				connectionStatus.value = "connected"; // 模拟连接成功
			}, 1000);
		}
	};

	const playVideo = async () => {
		// TODO: 调用 Tauri API
		console.log("播放视频");
	};

	const pauseVideo = async () => {
		// TODO: 调用 Tauri API
		console.log("暂停视频");
	};

	const stopVideo = async () => {
		// TODO: 调用 Tauri API
		console.log("停止视频");
	};

	const toggleLoop = async () => {
		isLooping.value = !isLooping.value;
		// TODO: 调用 Tauri API
		console.log("循环播放:", isLooping.value);
	};

	const toggleFullscreen = async () => {
		// TODO: 调用 Tauri API
		console.log("切换全屏");
	};

	const openVideoFile = async () => {
		// TODO: 调用 Tauri API 打开文件选择器
		console.log("打开文件");
		// 模拟添加到播放列表
		playlist.value.push(`示例视频${playlist.value.length + 1}.mp4`);
	};

	const playVideoFromPlaylist = async (index: number) => {
		currentVideo.value = playlist.value[index] || null;
		// TODO: 调用 Tauri API 播放指定视频
		console.log("播放:", currentVideo.value);
	};

	const removeFromPlaylist = (index: number) => {
		playlist.value.splice(index, 1);
	};

	const clearPlaylist = () => {
		playlist.value = [];
		currentVideo.value = null;
	};

	// 监听进度变化
	watch(progress, (newProgress) => {
		// TODO: 调用 Tauri API 设置播放进度
		console.log("设置进度:", newProgress);
	});

	// 监听音量变化
	watch(volume, (newVolume) => {
		// TODO: 调用 Tauri API 设置音量
		console.log("设置音量:", newVolume);
	});
</script>
