import type { Metadata } from "next";
import { DiscordLogoIcon, InstagramLogoIcon, ReaderIcon } from "@radix-ui/react-icons";
import { HorizontalNav, VerticalNav } from "../_components/Nav";
import { Toaster } from "react-hot-toast";
import { redirect } from "next/navigation";
import { getServerSession } from "../api/auth/[...nextauth]/auth";
import { Error } from "_components/Error";

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?.user.isBanned)
		return <Error title="You are banned from using this service" statusCode={403} />;

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

	return (
		<div
			className="hero min-h-screen"
			style={{
				backgroundImage: "url('/bg.png')",
			}}
		>
			<div className="hero-overlay bg-opacity-30"></div>
			<div>
				<Toaster position="top-center" reverseOrder={false} />
			</div>
			{/* Card */}
			<div className="hero-content text-neutral-content text-center w-full max-w-full h-full m-10">
				<div className="card bg-base-100 shadow-2xl w-full min-h-full h-full max-h-[calc(100vh-13rem)] p-4 flex flex-col mr-24 ml-24">
					{/* Top Navbar */}
					<HorizontalNav />

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

						{/* Scrollbarer Content-Bereich */}
						<div className="flex-grow bg-base-100 px-6 rounded-lg shadow-md ml-4 overflow-auto h-full max-w-full w-full">
							{children}
						</div>
					</div>

					{/* Footer */}
					<footer className="footer flex justify-between items-center p-4 bg-base-200 mt-4 rounded-lg shadow-md">
						{/* Left: Impressum & Datenschutz */}
						<div className="flex gap-4 text-sm">
							<a href="/impressum" className="hover:text-primary">
								Impressum
							</a>
							<a href="/datenschutz" className="hover:text-primary">
								Datenschutzerklärung
							</a>
						</div>

						{/* Center: Copyright */}
						<p className="text-sm">Copyright © {new Date().getFullYear()} - Virtual Air Rescue</p>

						{/* Right: Social Icons */}
						<div className="flex gap-4">
							<div className="tooltip tooltip-top" data-tip="Discord">
								<a
									href="https://discord.com"
									target="_blank"
									rel="noopener noreferrer"
									className="hover:text-primary"
								>
									<DiscordLogoIcon className="w-5 h-5" />
								</a>
							</div>
							<div className="tooltip tooltip-top" data-tip="Instagram">
								<a
									href="https://instagram.com"
									target="_blank"
									rel="noopener noreferrer"
									className="hover:text-primary"
								>
									<InstagramLogoIcon className="w-5 h-5" />
								</a>
							</div>
							<div className="tooltip tooltip-top" data-tip="Knowledgebase">
								<a href="/docs" className="hover:text-primary">
									<ReaderIcon className="w-5 h-5" />
								</a>
							</div>
						</div>
					</footer>
				</div>
			</div>
		</div>
	);
}
