"use client";

import { useEffect, useState, useSyncExternalStore } from "react";
import {
	closeGameLaunch,
	getGameLaunchState,
	subscribeGameLaunch
} from "@/components/providers/game-launch-store";
import { openDownloadDialog } from "@/components/providers/download-dialog-store";
import { Button } from "@/components/ui/button";
import { X } from "lucide-react";
import { RobloxLogoIcon } from "@/components/roblox/RobloxIcons";

export function GameLaunchDialog() {
	const state = useSyncExternalStore(
		subscribeGameLaunch,
		getGameLaunchState,
		getGameLaunchState
	);

	const [launchTimeouted, setLaunchTimeouted] = useState<boolean>(false);

	function detectOS() {
		if (typeof navigator === "undefined") return "Unknown";
		const nav = navigator as Navigator & {
			userAgentData?: { platform?: string };
		};
		const platform = nav.userAgentData?.platform || nav.platform || "";
		const ua = nav.userAgent || "";
		const haystack = `${platform} ${ua}`;
		if (/windows/i.test(haystack)) return "Windows";
		if (/mac os x|macintosh|macos/i.test(haystack)) return "Mac";
		if (/linux/i.test(haystack)) return "Linux";
		return "Unknown";
	}

	function handleDownloadClick() {
		const os = detectOS();
		const canDownload = os === "Windows" || os === "Mac";
		const url = canDownload
			? "https://www.roblox.com/download/client"
			: null;
		openDownloadDialog(url);
		closeGameLaunch();
		if (!canDownload || !url) return;
		try {
			window.open(url, "_blank", "noopener,noreferrer");
		} catch {}
	}

	useEffect(() => {
		if (!state.isOpen) {
			setLaunchTimeouted(false);
			return;
		}

		const timeout = setTimeout(() => {
			setLaunchTimeouted(true);
		}, 5000); // 5 seconds

		return () => clearTimeout(timeout);
	}, [state.isOpen]);

	if (!state.isOpen) return null;

	return (
		<div
			className="fixed inset-0 z-200 flex items-center justify-center bg-mantle/70 backdrop-blur-sm pointer-events-auto"
			onClick={closeGameLaunch}
		>
			<div
				className="panel-blur relative w-[92vw] max-w-sm"
				onClick={(event) => event.stopPropagation()}
			>
				<Button
					variant="ghost"
					size="icon"
					onClick={closeGameLaunch}
					aria-label="Close launcher"
					className="absolute right-3 top-3"
				>
					<X className="h-4 w-4" />
				</Button>
				<div className="flex flex-col items-center gap-4 px-6 py-8 text-center">
					<div className="h-20 w-20 flex items-center justify-center rounded-2xl bg-blue/20 ring-1 ring-blue/30">
						<RobloxLogoIcon className="h-10 w-10 text-blue" />
					</div>
					<div className="space-y-1">
						<p className="text-2xl font-semibold text-text">
							{!launchTimeouted ? (
								<>
									Roblox is now loading.
									<br />
									Get ready!
								</>
							) : (
								<>
									Download Roblox to play millions of
									experiences.
								</>
							)}
						</p>
					</div>
					{launchTimeouted ? (
						<Button
							onClick={handleDownloadClick}
							className="w-full rounded-full z-50"
						>
							Download Roblox
						</Button>
					) : (
						<Button
							disabled
							variant="secondary"
							className="w-full rounded-full"
						>
							<div className="h-4 w-4 rounded-full border-2 border-white/70 border-t-transparent animate-spin" />
						</Button>
					)}
				</div>
			</div>
		</div>
	);
}