import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
import { ShieldBan } from "lucide-react";

import Header from "@/components/header";
import {
	Empty,
	EmptyContent,
	EmptyDescription,
	EmptyHeader,
	EmptyMedia,
	EmptyTitle,
} from "@/components/ui/empty";
import { getAuthInfo } from "@/functions/auth";

export const Route = createFileRoute("/home")({
	component: RouteComponent,
	beforeLoad: async () => {
		const auth = await getAuthInfo();
		if (!auth.isAuthenticated) {
			throw redirect({
				to: "/login",
				search: {
					reason: "UNAUTHENTICATED",
				},
			});
		}
		return auth;
	},
});

function RouteComponent() {
	const context = Route.useRouteContext();

	if (context.isUserBanned) {
		return (
			<Header>
				<main className="flex flex-1 flex-col gap-6">
					<Empty>
						<EmptyContent>
							<EmptyHeader>
								<EmptyMedia variant="icon">
									<ShieldBan />
								</EmptyMedia>
								<EmptyTitle>Account Banned</EmptyTitle>
								<EmptyDescription>
									{context.banReason || "Your account has been banned."}
								</EmptyDescription>
							</EmptyHeader>
						</EmptyContent>
					</Empty>
				</main>
			</Header>
		);
	}

	return (
		<Header>
			<main className="flex flex-1 flex-col gap-6">
				<Outlet />
			</main>
		</Header>
	);
}
