import type { Metadata } from "next";
import { HorizontalNav, VerticalNav } from "../_components/Nav";
import { redirect } from "next/navigation";
import { getServerSession } from "../api/auth/[...nextauth]/auth";
import { EmailVerification } from "_components/EmailVerification";
import { FirstPath } from "./_components/FirstPath";
import { Penalty } from "_components/Penalty";

import { Footer } from "(app)/_components/Footer";

export const metadata: Metadata = {
	title: "VAR: Hub",
	description: "Virtual Air Rescue Hub",
};

export default async function RootLayout({
	children,
}: Readonly<{
	children: React.ReactNode;
}>) {
	const session = await getServerSession();

	if (!session) redirect(`/login`);

	return (
		<div
			className="min-h-screen"
			style={{
				backgroundImage: "url('/bg.png')",
				backgroundSize: "cover",
			}}
		>
			<div className="absolute h-screen w-screen bg-opacity-30"></div>
			{/* Card */}
			<div className="text-neutral-content flex h-screen w-full max-w-full items-center justify-center text-center">
				<div className="bg-base-100 mx-5 flex max-h-full max-w-[1600px] flex-col rounded-xl p-4 shadow-2xl xl:mx-12">
					{/* Top Navbar */}
					<HorizontalNav />

					{/* Hauptlayout: Sidebar + Content (nimmt Resthöhe ein) */}
					<div className="flex grow overflow-hidden">
						{/* Linke Sidebar */}
						<VerticalNav />

						{/* Scrollbarer Content-Bereich */}
						<div className="bg-base-100 ml-4 h-full w-full max-w-full flex-grow overflow-auto rounded-lg px-6 shadow-md">
							<Penalty />
							{!session?.user.emailVerified && (
								<div className="mb-4">
									<EmailVerification />
								</div>
							)}
							{!session.user.pathSelected && <FirstPath />}

							{children}
						</div>
					</div>

					<Footer />
				</div>
			</div>
		</div>
	);
}