import React, { Suspense } from "react";
import { Loader2 } from "lucide-react";

import AppShell from "@/components/app-shell/AppShell";
import AuthProvider from "@/components/auth/AuthProvider";

/**
 * Protected layout (RHL-020)
 *
 * Best practice for `useSearchParams()`:
 * - AuthProvider uses `useSearchParams()` (client hook).
 * - During production builds, static prerendering requires a Suspense boundary
 *   above the component using `useSearchParams()`.
 *
 * This Suspense fallback will be part of the initial HTML for static rendering.
 * After hydration, AuthProvider takes over and performs the session check.
 */

function AuthProviderFallback() {
	return (
		<div className="min-h-screen w-full px-4">
			<div className="mx-auto flex min-h-screen max-w-md items-center justify-center">
				<div className="flex items-center gap-3 text-sm text-muted-foreground">
					<Loader2 className="h-4 w-4 animate-spin" />
					<span>Sitzung wird vorbereitet…</span>
				</div>
			</div>
		</div>
	);
}

export default function ProtectedLayout({ children }) {
	return (
		<Suspense fallback={<AuthProviderFallback />}>
			<AuthProvider>
				<AppShell>{children}</AppShell>
			</AuthProvider>
		</Suspense>
	);
}