SurfSense/surfsense_web/app/dashboard/layout.tsx

"use client";

import { Loader2 } from "lucide-react";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { useLLMPreferences } from "@/hooks/use-llm-configs";

interface DashboardLayoutProps {
	children: React.ReactNode;
}

export default function DashboardLayout({ children }: DashboardLayoutProps) {
	const router = useRouter();
	const { loading, error, isOnboardingComplete } = useLLMPreferences();
	const [isCheckingAuth, setIsCheckingAuth] = useState(true);

	useEffect(() => {
		// Check if user is authenticated
		const token = localStorage.getItem("surfsense_bearer_token");
		if (!token) {
			router.push("/login");
			return;
		}
		setIsCheckingAuth(false);
	}, [router]);

	useEffect(() => {
		// Wait for preferences to load, then check if onboarding is complete
		if (!loading && !error && !isCheckingAuth) {
			if (!isOnboardingComplete()) {
				router.push("/onboard");
			}
		}
	}, [loading, error, isCheckingAuth, isOnboardingComplete, router]);

	// Show loading screen while checking authentication or loading preferences
	if (isCheckingAuth || loading) {
		return (
			<div className="flex flex-col items-center justify-center min-h-screen space-y-4">
				<Card className="w-[350px] bg-background/60 backdrop-blur-sm">
					<CardHeader className="pb-2">
						<CardTitle className="text-xl font-medium">Loading Dashboard</CardTitle>
						<CardDescription>Checking your configuration...</CardDescription>
					</CardHeader>
					<CardContent className="flex justify-center py-6">
						<Loader2 className="h-12 w-12 text-primary animate-spin" />
					</CardContent>
				</Card>
			</div>
		);
	}

	// Show error screen if there's an error loading preferences
	if (error) {
		return (
			<div className="flex flex-col items-center justify-center min-h-screen space-y-4">
				<Card className="w-[400px] bg-background/60 backdrop-blur-sm border-destructive/20">
					<CardHeader className="pb-2">
						<CardTitle className="text-xl font-medium text-destructive">
							Configuration Error
						</CardTitle>
						<CardDescription>Failed to load your LLM configuration</CardDescription>
					</CardHeader>
					<CardContent>
						<p className="text-sm text-muted-foreground">{error}</p>
					</CardContent>
				</Card>
			</div>
		);
	}

	// Only render children if onboarding is complete
	if (isOnboardingComplete()) {
		return <>{children}</>;
	}

	// This should not be reached due to redirect, but just in case
	return (
		<div className="flex flex-col items-center justify-center min-h-screen space-y-4">
			<Card className="w-[350px] bg-background/60 backdrop-blur-sm">
				<CardHeader className="pb-2">
					<CardTitle className="text-xl font-medium">Redirecting...</CardTitle>
					<CardDescription>Taking you to complete your setup</CardDescription>
				</CardHeader>
				<CardContent className="flex justify-center py-6">
					<Loader2 className="h-12 w-12 text-primary animate-spin" />
				</CardContent>
			</Card>
		</div>
	);
}