"use client";

import { useSyncExternalStore } from "react";
import { Button } from "@/components/ui/button";
import { X } from "lucide-react";
import {
	closeDownloadDialog,
	getDownloadDialogState,
	subscribeDownloadDialog
} from "@/components/providers/download-dialog-store";
import Link from "next/link";

export function DownloadDialog() {
	const state = useSyncExternalStore(
		subscribeDownloadDialog,
		getDownloadDialogState,
		getDownloadDialogState
	);

	const isLinux =
		typeof window !== "undefined" && navigator.userAgent.includes("Linux");
	const downloadUrl = state.url ?? "https://www.roblox.com/download/client";

	if (!state.isOpen) return null;

	return (
		<div
			className="fixed inset-0 z-[90] flex items-center justify-center bg-mantle/70 backdrop-blur-sm"
			onClick={closeDownloadDialog}
		>
			<div
				className="panel-blur relative w-[94vw] max-w-4xl"
				onClick={(event) => event.stopPropagation()}
			>
				<Button
					variant="ghost"
					size="icon"
					onClick={closeDownloadDialog}
					aria-label="Close download"
					className="absolute right-3 top-3"
				>
					<X className="h-4 w-4" />
				</Button>
				<div className="px-6 py-7 sm:px-8 sm:py-8">
					<div className="max-w-3xl space-y-2">
						<h2 className="text-2xl font-semibold text-text sm:text-3xl">
							Thanks for downloading Roblox
						</h2>
						{isLinux ? (
							<p className="text-sm text-subtext0">
								Unfortunately, Roblox does not support Linux
								natively. The only way to play Roblox on Linux
								as of now is through{" "}
								<Link
									href="https://sober.vinegarhq.org"
									target="_blank"
									rel="noopener noreferrer"
									className="text-text underline underline-offset-4"
								>
									Sober
								</Link>
								.
							</p>
						) : (
							<p className="text-sm text-subtext0">
								Just follow the steps below to install Roblox.
								The download should start in a few seconds. If
								it doesn't,{" "}
								<a
									href={downloadUrl}
									target="_blank"
									rel="noopener noreferrer"
									className="text-text underline underline-offset-4"
								>
									restart the download
								</a>
								.
							</p>
						)}
					</div>
					<div className="mt-6 grid gap-6 md:grid-cols-[1.15fr,0.85fr] md:gap-8 md:divide-x md:divide-surface0/60">
						<div className="space-y-4 md:pr-8">
							<p className="text-sm font-semibold text-text">
								Install Instructions
							</p>
							<ol className="list-decimal space-y-3 pl-5 text-sm text-subtext0">
								{isLinux ? (
									<>
										<li>
											<Link
												href="https://flathub.org/en/setup"
												target="_blank"
												rel="noopener noreferrer"
												className="text-text underline underline-offset-4"
											>
												Install Flatpak
											</Link>{" "}
											using the guide provided for your
											distro.
										</li>
										<li>
											Add the Flathub repository to your
											system with following command:
											<pre className="mt-2 rounded bg-surface0 p-2 text-xs text-text">
												<code>
													flatpak remote-add
													--if-not-exists flathub
													https://flathub.org/repo/flathub.flatpakrepo
												</code>
											</pre>
										</li>
										<li>
											Install and run Sober with these
											commands:
											<pre className="mt-2 rounded bg-surface0 p-2 text-xs text-text">
												<code>
													flatpak install flathub
													org.vinegarhq.Sober
												</code>
											</pre>
											<pre className="mt-2 rounded bg-surface0 p-2 text-xs text-text">
												<code>
													flatpak run
													org.vinegarhq.Sober
												</code>
											</pre>
										</li>
									</>
								) : (
									<>
										<li>
											Once downloaded, double-click the{" "}
											<span className="font-semibold text-text">
												Roblox.exe
											</span>{" "}
											file in your Downloads folder.
										</li>
										<li>
											Double-click{" "}
											<span className="font-semibold text-text">
												RobloxPlayerInstaller
											</span>{" "}
											to install the app.
										</li>
										<li>
											Follow the instructions to install
											Roblox on your computer.
										</li>
										<li>
											Now that Roblox is installed,{" "}
											<a
												href="https://www.roblox.com/discover"
												target="_blank"
												rel="noopener noreferrer"
												className="text-text underline underline-offset-4"
											>
												join the experience
											</a>
											.
										</li>
									</>
								)}
							</ol>
						</div>
					</div>
				</div>
			</div>
		</div>
	);
}