import type { Metadata } from "next";
import { DiscordLogoIcon, InstagramLogoIcon, ReaderIcon } from "@radix-ui/react-icons";
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 YoutubeSvg from "./resources/_components/youtube_wider.svg";
import FacebookSvg from "./resources/_components/facebook.svg";
import Image from "next/image";

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="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 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">
							<Penalty />
							{!session?.user.emailVerified && (
								<div className="mb-4">
									<EmailVerification />
								</div>
							)}
							{!session.user.pathSelected && <FirstPath />}
							{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="https://virtualairrescue.com/impressum/" className="hover:text-primary">
								Impressum
							</a>
							<a href="https://virtualairrescue.com/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.gg/yn7uXmmNnG"
									target="_blank"
									rel="noopener noreferrer"
									className="hover:text-primary"
								>
									<DiscordLogoIcon className="w-5 h-5" />
								</a>
							</div>

							<div className="tooltip tooltip-top" data-tip="YouTube">
								<a
									href="https://www.youtube.com/@VirtualAirRescue"
									target="_blank"
									rel="noopener noreferrer"
									className="hover:text-primary text-white"
								>
									<Image src={YoutubeSvg} className="invert w-5 h5" alt="Youtube Icon" />
								</a>
							</div>

							<div className="tooltip tooltip-top" data-tip="Facebook">
								<a
									href="https://www.facebook.com/people/Virtual-Air-Rescue/100090867294041/#"
									target="_blank"
									rel="noopener noreferrer"
									className="hover:text-primary text-white"
								>
									<Image src={FacebookSvg} className="invert w-5 h5" alt="Youtube Icon" />
								</a>
							</div>

							<div className="tooltip tooltip-top" data-tip="Instagram">
								<a
									href="https://www.instagram.com/virtualairrescue/"
									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="https://docs.virtualairrescue.com/" className="hover:text-primary">
									<ReaderIcon className="w-5 h-5" />
								</a>
							</div>
						</div>
					</footer>
				</div>
			</div>
		</div>
	);
}