// Path: Frontend/src/components/dashboard/shared/dashboard-shell.tsx

import { useLocation } from "@solidjs/router";
import { Show, createEffect, createSignal, onCleanup, onMount, type Component, type JSX } from "solid-js";
import { Transition } from "solid-transition-group";
import styles from "../../../routes/dashboard/dashboard.module.scss";
import DashboardSidebar from "./dashboard-sidebar";
import DashboardTopbar from "./dashboard-topbar";
import type { DashboardHomeShellData } from "./dashboard-types";

type DashboardShellProps = {
	children: JSX.Element;
	sidebarData?: Pick<DashboardHomeShellData, "classroomSummary" | "sidebarLinks" | "sidebarSupport">;
	topbarData?: Pick<DashboardHomeShellData, "topbarSummary" | "topbarNotifications" | "topbarMessages">;
};

const DashboardShell: Component<DashboardShellProps> = (props) => {
	const location = useLocation();
	const [sidebarOpen, setSidebarOpen] = createSignal(false);
	const [desktopSidebarCollapsed, setDesktopSidebarCollapsed] = createSignal(false);

	const closeSidebar = () => setSidebarOpen(false);
	const isDesktopViewport = () => typeof window !== "undefined" && window.innerWidth >= 1024;
	const isSidebarVisible = () => (isDesktopViewport() ? !desktopSidebarCollapsed() : sidebarOpen());
	const toggleSidebar = () => {
		if (isDesktopViewport()) {
			setDesktopSidebarCollapsed((collapsed) => !collapsed);
			return;
		}

		setSidebarOpen((open) => !open);
	};

	onMount(() => {
		const handleResize = () => {
			if (window.innerWidth >= 1024) {
				setSidebarOpen(false);
			}
		};

		window.addEventListener("resize", handleResize);
		onCleanup(() => window.removeEventListener("resize", handleResize));
	});

	createEffect(() => {
		if (typeof document === "undefined") return;

		const shouldLockScroll = sidebarOpen() && window.innerWidth < 1024;
		document.body.style.overflow = shouldLockScroll ? "hidden" : "";
		onCleanup(() => {
			document.body.style.overflow = "";
		});
	});

	return (
		<main class={styles.dashboardPage}>
			<div classList={{ [styles.dashboardLayout]: true, [styles.dashboardLayoutSidebarCollapsed]: desktopSidebarCollapsed() }}>
				<div class={styles.sidebarRail}>
					<button type="button" classList={{ [styles.sidebarBackdrop]: true, [styles.sidebarBackdropVisible]: sidebarOpen() }} aria-label="Close sidebar" tabIndex={sidebarOpen() ? 0 : -1} onClick={closeSidebar} />

					<div
						classList={{
							[styles.sidebarPanel]: true,
							[styles.sidebarPanelOpen]: sidebarOpen(),
							[styles.sidebarPanelDesktopCollapsed]: desktopSidebarCollapsed(),
						}}
					>
						<div class={styles.sidebarPanelInner}>
							<DashboardSidebar onNavigate={closeSidebar} data={props.sidebarData} />
						</div>
					</div>
				</div>

				<section class={styles.dashboardMain}>
					<DashboardTopbar isSidebarOpen={isSidebarVisible()} onMenuToggle={toggleSidebar} data={props.topbarData} />
					<div class={styles.dashboardContentShell}>
						<Transition name="dashboard-content-fade">
							<Show when={location.pathname} keyed>
								{(path) => (
									<div class={styles.dashboardContentStage} data-route={path}>
										{props.children}
									</div>
								)}
							</Show>
						</Transition>
					</div>
				</section>
			</div>
		</main>
	);
};

export default DashboardShell;
