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 { getLatestChangelog } from "(app)/_components/ChangelogActions";
import { OpenChangelogOnPageload } from "(app)/_components/Changelog";

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`);

	const latestChangelog = !session.user.changelogAck ? await getLatestChangelog() : null;

	return (
		<div
			className="hero min-h-screen"
			style={{
				backgroundImage: "url('/bg.png')",
			}}
		>
			<div className="hero-overlay bg-opacity-30"></div>
			{/* Card */}
			<div className="hero-content text-neutral-content m-10 h-full w-full max-w-full text-center">
				<div className="card bg-base-100 ml-24 mr-24 flex h-full max-h-[calc(100vh-13rem)] min-h-full w-full flex-col p-4 shadow-2xl">
					{/* 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 />}
							{session.user.pathSelected && latestChangelog && (
								<OpenChangelogOnPageload latestChangelog={latestChangelog} />
							)}
							{children}
						</div>
					</div>

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