"use client";
import { useState, useEffect } from "react";
import styled, { keyframes } from "styled-components";
import { ny } from "@/lib/utils";
import { ChevronLeft, InfoIcon } from "lucide-react";
import { Button } from "./ui/button";
import { CopyButton } from "./ui/copy-button";
import Particles from "./ui/particles";
import confetti from "canvas-confetti";
import { releases, releaseTree } from "@/lib/releases";
import { InfoCircledIcon } from "@radix-ui/react-icons";
import Link from "next/link";
const BASE_URL =
	"https://github.com/zen-browser/desktop/releases/latest/download";

import SparklesText from "./ui/sparkles-text";
const field_enter = keyframes`
  0% {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(10px);
  }
  1% {
    max-height: 100%;
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
`;

const field_exit = keyframes`
  from {
    display: flex;
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  99% {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(10px);
  }
  100% {
    display: none;
  }
`;

const FormField = styled.div<{ enter: boolean; out: boolean }>`
	max-height: 0;
	flex-direction: column;
	margin-top: 3rem;
	opacity: 0;
	width: 100%;
	animation: 0.2s ease-in-out forwards
		${({ enter, out }) => (enter ? field_enter : out ? field_exit : "")} !important;
	animation-delay: ${({ enter }) => (enter ? "0.4s" : "0s")};
`;

const FieldTitle = styled.div`
	font-size: 1.35rem;
	font-weight: 500;
`;

const FieldDescription = styled.div`
	font-size: 1rem;
	color: #666;
	margin-bottom: 1rem;
`;

export default function DownloadPage() {
	const [platform, setPlatform] = useState<string | null>(null);
	const [architecture, setArchitecture] = useState<string | null>(null);
	const [windowsDownloadType, setWindowsDownloadType] = useState<string | null>(
		null,
	);
	const [linuxDownloadType, setLinuxDownloadType] = useState<string | null>(
		null,
	);

	const [selectedPlatform, setSelectedPlatform] = useState("");
	const [selectedArchitecture, setSelectedArchitecture] = useState("specific");
	const [selectedWindowsDownloadType, setSelectedWindowsDownloadType] =
		useState("installer");
	const [selectedLinuxDownloadType, setSelectedLinuxDownloadType] =
		useState("portable");

	const [hasDownloaded, setHasDownloaded] = useState(false);

	const [flowIndex, setFlowIndex] = useState(0);
	useEffect(() => {
		let userAgent: string = "";
		if (typeof window !== "undefined") {
			userAgent = window.navigator.userAgent;
		}
		if (userAgent.includes("Win")) {
			setSelectedPlatform("Windows");
		}
		if (userAgent.includes("Mac")) {
			setSelectedPlatform("MacOS");
		}
		if (userAgent.includes("Linux")) {
			setSelectedPlatform("Linux");
		}
	}, []);
	const throwConfetti = () => {
		const end = Date.now() + 3 * 1000; // 3 seconds
		const colors = ["#a786ff", "#fd8bbc", "#eca184", "#f8deb1"];
		const frame = () => {
			if (Date.now() > end) return;

			confetti({
				particleCount: 2,
				angle: 60,
				spread: 55,
				startVelocity: 60,
				origin: { x: 0, y: 0.5 },
				colors,
			});
			confetti({
				particleCount: 2,
				angle: 120,
				spread: 55,
				startVelocity: 60,
				origin: { x: 1, y: 0.5 },
				colors,
			});
			requestAnimationFrame(frame);
		};
		frame();
	};

	const startDownload = () => {
		let releaseTarget: string;
		if (selectedLinuxDownloadType === "flatpak") {
			window.open(
				"https://dl.flathub.org/repo/appstream/io.github.zen_browser.zen.flatpakref",
			);
			releaseTarget = "flatpak";
		} else {
			const platform = releaseTree[selectedPlatform.toLowerCase()];
			let arch: string = selectedArchitecture;
			if (selectedPlatform === "MacOS") {
				releaseTarget = platform[arch];
			} else {
				releaseTarget =
					platform[arch][
						selectedPlatform === "Windows"
							? (selectedWindowsDownloadType as string)
							: (selectedLinuxDownloadType as string)
					];
			}
			console.log("Downloading: ");
			console.log("platform: ", selectedPlatform);
			console.log("compat: ", arch);
			window.location.replace(`${BASE_URL}/${releases[releaseTarget]}`);
		}
		setHasDownloaded(true);
		throwConfetti();
	};

	const continueFlow = () => {
		if (flowIndex === 0) setPlatform(selectedPlatform);
		if (flowIndex === 1) setArchitecture(selectedArchitecture);
		if (flowIndex === 2 || (flowIndex === 1 && platform === "MacOS")) {
			setWindowsDownloadType(selectedWindowsDownloadType);
			setLinuxDownloadType(selectedLinuxDownloadType);
			startDownload();
		}
		setFlowIndex(flowIndex + 1);
	};

	const goBackFlow = () => {
		if (flowIndex === 1) {
			setPlatform(null);
		} else if (flowIndex === 2) {
			setArchitecture(null);
		} else if (flowIndex === 3) {
			setWindowsDownloadType(null);
			setSelectedWindowsDownloadType("installer");
			setLinuxDownloadType(null);
			setSelectedLinuxDownloadType("portable");
		}
		if (flowIndex > 0) setFlowIndex(flowIndex - 1);
	};

	const changeToFlatpak = () => {
		setSelectedLinuxDownloadType("flatpak");
	};

	const linuxAppimageBashScript =
		"bash <(curl https://updates.zen-browser.app/appimage.sh)";

	const linuxFlatpakScript =
		"flatpak install flathub io.github.zen_browser.zen";

	return (
		<>
			<link
				rel="stylesheet"
				type="text/css"
				href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"
			/>
			<link
				rel="stylesheet"
				type="text/css"
				href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"
			/>
			<link
				rel="stylesheet"
				type="text/css"
				href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"
			/>

			<div className="relative flex h-screen w-full flex-col items-center justify-center overflow-hidden lg:flex-row">
				<div className="mx-auto flex w-full flex-col justify-center p-10 md:p-20 lg:w-1/2 lg:p-0 2xl:w-1/3">
					{(hasDownloaded && (
						<div className="mt-20 flex flex-col items-start">
							<h1 className="text-6xl font-bold">Downloaded! ❤️</h1>
							<p className="mt-3 text-muted-foreground">
								Your download of Zen Browser will begin shortly. Enjoy browsing
								the web with Zen!
							</p>
							<div className="mt-5 flex items-center font-bold">
								<a href="https://github.com/zen-browser">Source Code</a>
								<a
									className="ml-5"
									href="https://patreon.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
								>
									Donate
								</a>
								<a className="ml-5" href="/release-notes/latest">
									Release Notes
								</a>
							</div>
							{selectedLinuxDownloadType === "appimage" && (
								<div className="mt-10 rounded-md border bg-surface p-5 shadow">
									<div className="flex items-center">
										<InfoIcon className="size-4" />
										<p className="ml-3 font-bold">AppImage users?</p>
									</div>
									<p className="mt-2 text-muted-foreground">
										If you're using an AppImage, you can use the automatic
										installer, check it out{" "}
									</p>
									<pre className="mt-2 flex items-center justify-between rounded-md bg-background p-2 text-muted-foreground">
										{linuxAppimageBashScript}
										<CopyButton valueToCopy={linuxAppimageBashScript} />
									</pre>
								</div>
							)}
							{selectedLinuxDownloadType === "flatpak" && (
								<div className="mt-10 rounded-md border bg-surface p-5 shadow">
									<div className="flex items-center">
										<InfoIcon className="size-4" />
										<p className="ml-3 font-bold">Flatpak users?</p>
									</div>
									<p className="mt-2 text-muted-foreground">
										If you're using Flatpak, you can install Zen Browser with
										the following command
									</p>
									<pre className="mt-2 flex items-center justify-between rounded-md bg-background p-2 text-muted-foreground">
										{linuxFlatpakScript}
										<CopyButton valueToCopy={linuxFlatpakScript} />
									</pre>
								</div>
							)}
						</div>
					)) || (
						<>
							<h1 className="flex flex-col text-6xl font-bold lg:flex-row">
								Download <SparklesText className="mx-2" text="Zen" />
							</h1>
							<p className="mt-3 text-muted-foreground">
								We're thrilled for you to experience Zen Browser. First, let us
								know which device you're using. This will only take a moment, we
								promise.
							</p>
						</>
					)}
					{/*Changes for the Choose your platform as checkbox looks old*/}
					<div className="relative w-full">
						{platform === null && (
							<FormField enter={platform === null} out={platform !== null}>
								<FieldTitle>Platform</FieldTitle>
								<FieldDescription>
									Choose the platform you want to download Zen for.
								</FieldDescription>
								<div className="flex">
									<div
										onClick={() => setSelectedPlatform("Windows")}
										className={ny(
											"mr-2 flex cursor-pointer select-none flex-col items-center justify-center rounded-lg border bg-background",
											selectedPlatform === "Windows" ? "border-blue-400" : "",
										)}
										style={{
											height: "11.25rem",
											width: "18.75rem",
										}}
									>
										<i
											className="devicon-windows8-original rounded-lg border border-blue-400 p-2"
											style={{ marginBottom: "10px" }}
										></i>
										<div className="font-bold">Windows</div>
									</div>

									<div
										onClick={() => setSelectedPlatform("Linux")}
										className={ny(
											"mr-2 flex cursor-pointer select-none flex-col items-center justify-center rounded-lg border bg-background",
											selectedPlatform === "Linux" ? "border-yellow-400" : "",
										)}
										style={{
											height: "11.25rem",
											width: "18.75rem",
										}}
									>
										<i
											className="devicon-linux-plain rounded-lg border border-yellow-400 p-2"
											style={{ marginBottom: "10px" }}
										></i>
										<div className="font-bold">Linux</div>
									</div>

									<div
										onClick={() => setSelectedPlatform("MacOS")}
										className={ny(
											"flex cursor-pointer select-none flex-col items-center justify-center rounded-lg border bg-background",
											selectedPlatform === "MacOS" ? "border-purple-400" : "",
										)}
										style={{
											height: "11.25rem",
											width: "18.75rem",
										}}
									>
										<i
											className="devicon-apple-original rounded-lg border border-purple-400 p-2"
											style={{ marginBottom: "10px" }}
										></i>
										<div className="font-bold">MacOS</div>
									</div>
								</div>
							</FormField>
						)}
						{/* Architecture */}
						{(platform === "Windows" || platform === "Linux") &&
							flowIndex === 1 && (
								<FormField
									enter={
										platform === "Windows" ||
										(platform === "Linux" && flowIndex === 1)
									}
									out={
										platform !== "Windows" &&
										platform !== "Linux" &&
										flowIndex >= 1
									}
								>
									<FieldTitle>Select Architecture</FieldTitle>
									<FieldDescription>
										Choose the architecture of your device, either optimized or
										generic.
									</FieldDescription>
									<div className="flex items-stretch justify-center">
										<div
											onClick={() => setSelectedArchitecture("specific")}
											className={ny(
												"mb-2 flex flex-1 cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
												selectedArchitecture === "specific"
													? "border-blue-400"
													: "",
											)}
										>
											<h1 className="my-2 text-5xl opacity-40 dark:opacity-20">
												🚀
											</h1>
											<h1 className="my-2 text-2xl font-semibold">Optimized</h1>
											<p className="mx-auto text-center text-muted-foreground">
												Blazing fast and compatible with modern devices
											</p>
										</div>
										<div
											onClick={() => setSelectedArchitecture("generic")}
											className={ny(
												"mb-2 ml-10 flex flex-1 cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
												selectedArchitecture === "generic"
													? "border-blue-400"
													: "",
											)}
										>
											<h1 className="my-2 text-5xl opacity-40 dark:opacity-20">
												👴
											</h1>
											<h1 className="my-2 text-2xl font-semibold">Generic</h1>
											<p className="mx-auto text-center text-muted-foreground">
												Slow but compatible with older devices.
											</p>
										</div>
									</div>
								</FormField>
							)}
						{platform === "MacOS" && flowIndex === 1 && (
							<FormField
								enter={platform === "MacOS"}
								out={platform !== "MacOS"}
							>
								<FieldTitle>Download Zen for MacOS</FieldTitle>
								<FieldDescription>
									Click the button below to download Zen for MacOS.
								</FieldDescription>
								<div className="flex items-center justify-center">
									<div
										onClick={() => setSelectedArchitecture("specific")}
										className={ny(
											"mb-2 flex h-64 w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
											selectedArchitecture === "specific"
												? "border-blue-400"
												: "",
										)}
									>
										<h1 className="my-2 text-5xl opacity-40 dark:opacity-20">
											🍏
										</h1>
										<h1 className="my-2 text-2xl font-semibold">AArch64</h1>
										<p className="mx-auto text-center text-muted-foreground">
											64-bit ARM architecture, for Apple's M Series Chips
										</p>
									</div>
									<div
										onClick={() => setSelectedArchitecture("generic")}
										className={ny(
											"mb-2 ml-10 flex h-64 w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
											selectedArchitecture === "generic"
												? "border-blue-400"
												: "",
										)}
									>
										<h1 className="my-2 text-5xl font-bold opacity-40 dark:opacity-20">
											x64
										</h1>
										<h1 className="my-2 text-2xl font-semibold">Intel</h1>
										<p className="mx-auto text-center text-muted-foreground">
											64-bit Intel architecture, for older Macs
										</p>
									</div>
								</div>
							</FormField>
						)}
						{flowIndex === 2 && platform === "Windows" && (
							<FormField
								enter={platform === "Windows" && flowIndex === 2}
								out={platform !== "Windows" && flowIndex >= 2}
							>
								<FieldTitle className="text-2xl">
									Download Zen for Windows {selectedArchitecture}
								</FieldTitle>
								<FieldDescription>
									Choose the type of download you want for Zen for Windows.
								</FieldDescription>
								<div className="flex items-center justify-center">
									<div
										onClick={() => setSelectedWindowsDownloadType("installer")}
										className={ny(
											"mb-2 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
											selectedWindowsDownloadType === "installer"
												? "border-blue-400"
												: "",
										)}
									>
										<h1 className="my-2 text-5xl opacity-40 dark:opacity-20">
											🚀
										</h1>
										<h1 className="my-2 text-2xl font-semibold">Installer</h1>
										<p className="mx-auto text-center text-muted-foreground">
											Install Zen with a setup wizard
										</p>
									</div>
									<div
										onClick={() => setSelectedWindowsDownloadType("portable")}
										className={ny(
											"mb-2 ml-10 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
											selectedWindowsDownloadType === "portable"
												? "border-blue-400"
												: "",
										)}
									>
										<h1 className="my-2 text-5xl opacity-40 dark:opacity-20">
											📦
										</h1>
										<h1 className="my-2 text-2xl font-semibold">Portable</h1>
										<p className="mx-auto text-center text-muted-foreground">
											Download Zen as a ZIP file
										</p>
									</div>
								</div>
							</FormField>
						)}
						{flowIndex === 2 && platform === "Linux" && (
							<FormField
								enter={platform === "Linux" && flowIndex === 2}
								out={platform !== "Linux" && flowIndex >= 2}
							>
								<FieldTitle className="text-2xl">
									Download Zen for Linux {selectedArchitecture}
								</FieldTitle>
								<FieldDescription>
									Choose the type of download you want for Zen for Linux.
								</FieldDescription>
								<div className="flex items-stretch justify-center">
									<div
										onClick={() => setSelectedLinuxDownloadType("appimage")}
										className={ny(
											"mb-2 flex flex-1 cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
											selectedLinuxDownloadType === "appimage"
												? "border-blue-400"
												: "",
										)}
									>
										<h1 className="my-2 text-5xl opacity-40 dark:opacity-20">
											🚀
										</h1>
										<h1 className="my-2 text-2xl font-semibold">AppImage</h1>
										<p className="mx-auto text-center text-muted-foreground">
											Install Zen with a setup wizard
										</p>
									</div>
									<div
										onClick={() => setSelectedLinuxDownloadType("portable")}
										className={ny(
											"mb-2 ml-5 flex flex-1 cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
											selectedLinuxDownloadType === "portable"
												? "border-blue-400"
												: "",
										)}
									>
										<h1 className="my-2 text-5xl opacity-40 dark:opacity-20">
											📦
										</h1>
										<h1 className="my-2 text-2xl font-semibold">Portable</h1>
										<p className="mx-auto text-center text-muted-foreground">
											Download Zen as a ZIP file
										</p>
									</div>
									<div
										onClick={() => changeToFlatpak()}
										className={ny(
											"mb-2 ml-5 flex flex-1 cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
											selectedLinuxDownloadType === "flatpak"
												? "border-blue-400"
												: "",
										)}
									>
										<h1 className="my-2 text-5xl opacity-40 dark:opacity-20">
											🧑‍💻
										</h1>
										<h1 className="my-2 text-2xl font-semibold">Flatpak</h1>
										<p className="mx-auto text-center text-muted-foreground">
											Install Zen from the Flatpak repository.
										</p>
									</div>
								</div>
							</FormField>
						)}
					</div>
					{!hasDownloaded && (
						<div className="mt-5 flex items-center justify-between">
							<Button
								variant="ghost"
								onClick={() => goBackFlow()}
								className={ny(
									"opacity-70",
									platform === null ? "invisible" : "",
								)}
							>
								<ChevronLeft className="size-4" />
								Back
							</Button>
							<Button
								onClick={() => continueFlow()}
								disabled={selectedPlatform === null}
							>
								{(flowIndex === 1 && platform === "MacOS") || flowIndex === 2
									? "Download 🥳"
									: "Continue"}
							</Button>
						</div>
					)}
					{(platform === "Linux" || platform === "Windows") &&
						flowIndex === 1 && (
							<div className="mt-5 flex items-center">
								<InfoCircledIcon className="mr-2 size-4" />
								<p className="text-muted-foreground">
									Confused about which build to choose?{" "}
									<a
										href="https://docs.zen-browser.app/guides/generic-optimized"
										target="_blank"
										className="text-blue-400"
									>
										System requirements
									</a>
									.
								</p>
							</div>
						)}
				</div>
			</div>
			<Particles
				className="absolute inset-0 -z-10 hidden dark:block"
				quantity={50}
				ease={70}
				size={0.05}
				staticity={70}
				color="#ffffff"
			/>
			<Particles
				className="absolute inset-0 -z-10 block dark:hidden"
				quantity={30}
				ease={70}
				size={0.05}
				staticity={70}
				color="#000000"
			/>
		</>
	);
}
