import { UNSAFE_PortalProvider } from "@react-aria/overlays";
import { useQueries } from "@tanstack/react-query";
import { NoMatch } from "@thorium/components/NotFound";
import Stars from "@thorium/components/Station/Stars";
import AppContext, { clientId, liveQueryClient, q } from "@thorium/context/AppContext";
import Button from "@thorium/ui/Button";
import { Icon } from "@thorium/ui/Icon";

import "./styles/tailwind.css";
import "@fontsource-variable/outfit";
import { useEffect, useRef } from "react";
import {
	isRouteErrorResponse,
	Links,
	Meta,
	Outlet,
	Scripts,
	ScrollRestoration,
	type MetaFunction,
} from "react-router";

import type { Route } from "./+types/root";
import icon from "./images/logo.svg?url";

export const meta: MetaFunction = () => {
	return [{ title: "Thorium Nova" }, {}];
};

export const links: Route.LinksFunction = () => {
	return [{ rel: "icon", href: icon }];
};

export function Layout({ children }: { children: React.ReactNode }) {
	const container = useRef<HTMLDivElement>(null);
	return (
		<html lang="en">
			<head>
				<meta charSet="utf-8" />
				<meta name="viewport" content="width=device-width, initial-scale=1" />
				<Meta />
				<Links />
			</head>
			<body>
				<UNSAFE_PortalProvider getContainer={() => container.current}>
					<div className="fixed top-0 z-0 h-full w-full text-white">{children}</div>
				</UNSAFE_PortalProvider>
				<div ref={container} />
				<div id="training-container" />
				<Snapshot />
				<ScrollRestoration />
				<Scripts />
			</body>
		</html>
	);
}

function Preload() {
	const preloadOptions = {
		refetchOnMount: false,
		refetchOnReconnect: false,
		refetchOnWindowFocus: false,
		staleTime: Number.POSITIVE_INFINITY,
		queryFn: ({ signal, queryKey: [pathKey, input] }: { signal: any; queryKey: any }) => {
			const path = pathKey.join(".");
			return liveQueryClient.netRequest({ path, ...input, signal });
		},
	};
	useQueries({
		queries: [
			{
				queryKey: q.ship.players.getQueryKey(),
				...preloadOptions,
			},
			{ queryKey: q.ship.player.getQueryKey({ clientId }), ...preloadOptions },
			{ queryKey: q.ship.get.getQueryKey({ clientId }), ...preloadOptions },
			{ queryKey: q.station.get.getQueryKey({ clientId }), ...preloadOptions },
			{ queryKey: q.client.get.getQueryKey({ clientId }), ...preloadOptions },
			{ queryKey: q.flight.active.getQueryKey(), ...preloadOptions },
		],
	});

	return null;
}

export default function Root() {
	useHttpRedirect();
	return (
		<AppContext>
			<Preload />
			<Outlet />
		</AppContext>
	);
}

export function HydrateFallback() {
	return (
		<Stars className="bg-linear-to-b from-black to-fuchsia-950">
			<h1 className="text-4xl font-bold">Loading Thorium Nova..</h1>
		</Stars>
	);
}

export function ErrorBoundary({ error }: { error: Error }) {
	let message = "Oops!";
	let details = "An unexpected error occurred.";
	let stack: string | undefined;

	if (isRouteErrorResponse(error)) {
		if (error.status === 404) {
			return <NoMatch />;
		}
		message = "Error";
		details = error.statusText || details;
	} else if (import.meta.env.DEV && error && error instanceof Error) {
		details = error.message;
		stack = error.stack;
	}

	return (
		<main className="container mx-auto p-4 pt-16">
			<h1>{message}</h1>
			<p>{details}</p>
			{stack && (
				<pre className="w-full overflow-x-auto p-4">
					<code>{stack}</code>
				</pre>
			)}
		</main>
	);
}

function Snapshot() {
	if (process.env.NODE_ENV === "production") return null;
	return (
		<Button
			className="btn-circle btn-sm bg-neutral/20 fixed bottom-2 left-2 z-50 backdrop-blur"
			onClick={() => {
				q.server.snapshot.netSend();
			}}
		>
			<Icon name="camera" size="md" className="text-white" />
		</Button>
	);
}

function useHttpRedirect() {
	useEffect(() => {
		if (window.location.protocol === "http:") {
			const url = new URL(window.location.href);
			const oldPathname = url.pathname;
			url.protocol = "https:";
			url.pathname = "/https";
			fetch(url)
				.then(async (res) => {
					if (res.ok) {
						const port = await res.text();
						url.pathname = oldPathname;
						if (port !== "443") {
							url.port = port;
						}
						window.location.assign(url);
					}
				})
				.catch(() => {});
		}
	}, []);
}