import { createFileRoute, useRouter } from "@tanstack/react-router";
import z from "zod";
import { Button } from "../components/ui/button";
import { Card, CardContent, CardHeader } from "../components/ui/card";
import { trackLstEvent } from "../lib/umami.utils";

export const Route = createFileRoute("/app-down")({
	validateSearch: z.object({
		redirect: z.string().optional(),
	}),

	component: RouteComponent,
});

function RouteComponent() {
	const search = Route.useSearch();
	const redirectPath = search.redirect ?? "/";
	const router = useRouter();
	const click = () => {
		trackLstEvent("app_down_click", {
			module: "app",
			action: "click",
			label: "redirect",
			page: window.location.pathname,
		});
		router.navigate({ to: redirectPath, replace: true });
	};
	return (
		<div className="flex items-center justify-center bg-background text-foreground">
			<Card>
				<CardHeader>
					<p className="text-2xl">Oops, you shouldn't have done that</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>
				</CardContent>
				<div className=" flex justify-center">
					<Button
						className="mt-5 rounded-md bg-primary px-4 py-2 text-primary-foreground"
						onClick={click}
					>
						Refresh
					</Button>
				</div>
			</Card>
		</div>
	);
}