// Path: Frontend/src/components/shell/AppShell/AppShell.tsx

import { createSignal, onMount, type JSX } from "solid-js";
import { getDocumentTheme, setTheme, type Theme } from "../../../theme/runtime";
import { WorkspaceHome } from "../../workspace-home/WorkspaceHome/WorkspaceHome";
import { LeftRail } from "../LeftRail/LeftRail";
import { ServerDock } from "../ServerDock/ServerDock";
import { TopBar } from "../TopBar/TopBar";
import { WorkspaceSidebar } from "../WorkspaceSidebar/WorkspaceSidebar";
import styles from "./AppShell.module.scss";

export const AppShell = (): JSX.Element => {
	const [themeState, setThemeState] = createSignal<Theme>("light");

	onMount((): void => {
		setThemeState(getDocumentTheme());
	});

	const toggleTheme = (): void => {
		const next: Theme = themeState() === "dark" ? "light" : "dark";

		setTheme(next);
		setThemeState(next);
	};

	return (
		<div class={styles.shell}>
			<TopBar theme={themeState()} onToggleTheme={toggleTheme} />

			<div class={styles.body}>
				{/* Left server rail */}
				<div class={styles.railColumn}>
					<LeftRail />
				</div>

				{/* Sidebar + main workspace frame */}
				<div class={styles.workspaceRegion}>
					<div class={styles.sidebarColumn}>
						<WorkspaceSidebar />
					</div>

					<div class={styles.workspaceMain}>
						<WorkspaceHome />
					</div>
				</div>

				{/* Floating server dock overlay */}
				<div class={styles.sidebarDock}>
					<ServerDock />
				</div>
			</div>
		</div>
	);
};