import { useEffect } from "react";
import { Outlet } from "react-router-dom";
import { ToastProvider, ToastViewport } from "@/components/ui/toast";
import {
	CourseCanvas,
	registerAppPortalRoot,
	useCourseCanvas,
} from "@/course/canvas";
import { OrientationGuard } from "@/course/orientation";
import { GameAudioProvider } from "@/utils/audio";
import { Navigation } from "./components/business";

function CourseShell() {
	const { portalContainer } = useCourseCanvas();

	useEffect(() => registerAppPortalRoot(portalContainer), [portalContainer]);

	return (
		<GameAudioProvider>
			<ToastProvider>
				<Navigation />
				<main className="flex-1 overflow-auto p-8">
					<Outlet />
				</main>
				<ToastViewport container={portalContainer} />
			</ToastProvider>
		</GameAudioProvider>
	);
}

function App() {
	return (
		<>
			<OrientationGuard />
			<CourseCanvas
				className="bg-gray-900"
				canvasClassName="flex flex-col overflow-hidden bg-white"
			>
				<CourseShell />
			</CourseCanvas>
		</>
	);
}

export default App;