import { useRouter } from "@tanstack/react-router";

import { Card, CardContent, CardHeader } from "./ui/card";

export default function NotFound() {
	const router = useRouter();

	let url: string;
	if (window.location.origin.includes("localhost")) {
		url = `https://www.youtube.com/watch?v=dQw4w9WgXcQ`;
	} else if (window.location.origin.includes("vms006")) {
		url = `https://${window.location.hostname.replace("vms006", "prod.alpla.net/")}lst/app/old`;
	} else {
		url = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
	}
	return (
		<div className="flex items-center justify-center bg-background text-foreground">
			<Card>
				<CardHeader>
					<p className="text-2xl">
						Oops, Looks like you hit a link you shouldn't have
					</p>
				</CardHeader>
				<CardContent>
					<p className="mt-3 text-muted-foreground">
						Your have tried to go to a page that you are not authorized to be
						at.
					</p>
					<div className="flex justify-center">
						<div>
							<a href={`${url}`} target="_blank" rel="noopener">
								<b>
									<strong>OLD - LST Home</strong>
								</b>
							</a>
						</div>
						<div>
							<button
								type="button"
								className="w-64"
								onClick={() => router.navigate({ to: "/", replace: true })}
							>
								<strong>Home</strong>
							</button>
						</div>
					</div>
				</CardContent>
			</Card>
		</div>
	);
}