import dynamic from "next/dynamic";
import type { ReactNode } from "react";
import { CloudsField } from "@/components/clouds-field";
import MotionPageWrapper from "@/components/motion-page-wrapper";
import { Navigation } from "@/components/navigation";
import { SiteFooter } from "@/components/site-footer";
import { SiteHeader } from "@/components/site-header";
import { TopHeader } from "@/components/top-header";
import { auth } from "@/lib/auth";

const RadioPlayerGate = dynamic(
	() => import("@/components/public/radio-player-gate"),
	{
		loading: () => (
			<div className="animate-pulse bg-[var(--admin-surface)] rounded h-12" />
		),
	},
);

/**
 * Public site chrome. Route group `(site)` keeps this off `/admin` and `/client`,
 * so housekeeping is never constrained by the public max-w-7xl grid.
 */
export default async function SiteLayout({
	children,
}: {
	children: ReactNode;
}) {
	const session = await auth();

	return (
		<>
			<CloudsField />
			{session?.user?.id ? (
				<>
					<div data-theme-block="top_header">
						<TopHeader session={session} />
					</div>
					<div data-theme-block="site_header">
						<SiteHeader />
					</div>
					<div data-theme-block="navigation">
						<Navigation session={session} />
					</div>
				</>
			) : null}
			<main>
				<div
					data-theme-block="content_grid"
					className="mx-auto mt-4 grid max-w-7xl grid-cols-12 gap-x-3 gap-y-5 px-3 py-3 sm:px-4 sm:py-4 md:mt-0 md:px-6 md:py-6 md:gap-y-6"
				>
					<div className="col-span-12 min-w-0">
						<div data-theme-block="page_transition">
							<MotionPageWrapper>{children}</MotionPageWrapper>
						</div>
					</div>
				</div>
			</main>
			<div data-theme-block="footer">
				<SiteFooter />
			</div>
			<div data-theme-block="radio_player">
				<RadioPlayerGate />
			</div>
		</>
	);
}