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

import z from "zod";

import { useSession } from "../lib/auth-client";
import { trackLstEvent } from "../lib/umami.utils";

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

	component: Index,
});

function Index() {
	const { isPending } = useSession();

	if (isPending)
		return <div className="flex justify-center mt-10">Loading...</div>;
	// if (!session) return <button>Sign In</button>
	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/ocp`;
	} else {
		url = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
	}

	//test tracking
	const click = () => {
		trackLstEvent("silly_click", {
			module: "silly",
			action: "click",
			label: "rick rolled",
			page: window.location.pathname,
		});
	};

	// const checkConfig = () => {
	// 	console.log(runtimeConfig);
	// 	trackLstEvent("config_click", {
	// 		module: "app",
	// 		action: "click",
	// 		label: "configCheck",
	// 		page: window.location.pathname,
	// 	});
	// };

	return (
		<div className="flex justify-center m-10 flex-col">
			<h3 className="w-2xl text-3xl">Welcome Lst - V3</h3>
			<br></br>
			<p>
				This is active in your plant today due to having warehousing activated
				and new functions needed to be introduced, you should be still using LST
				as you were before.
			</p>
			<br></br>
			<p>
				If you dont know why you are here and looking for One Click Print{" "}
				<a href={`${url}`} target="_blank" rel="noopener">
					<b>
						<strong>Click</strong>
					</b>
				</a>{" "}
				<button onClick={click} type="button">
					<a
						href={`https://www.youtube.com/watch?v=dQw4w9WgXcQ`}
						target="_blank"
						rel="noopener"
					>
						<b>
							<strong> Here</strong>
						</b>
					</a>
				</button>
			</p>
			{/* {session && session.user.role === "systemAdmin" && (
				<Button onClick={checkConfig}>Check config</Button>
			)} */}
		</div>
	);
}