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

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

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

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

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

export default App;