<script lang="ts">
	import { setContext } from 'svelte';
	import DesktopSidebar from '$lib/components/dashboard/DesktopSidebar.svelte';
	import {
		MEMBER_MOBILE_MENU_KEY,
		type MemberMobileMenu
	} from '$lib/components/dashboard/member-menu-context';
	import MobileBottomNav from '$lib/components/dashboard/MobileBottomNav.svelte';
	import MobileHeaderActions from '$lib/components/dashboard/MobileHeaderActions.svelte';
	import MobileSidebarDrawer from '$lib/components/dashboard/MobileSidebarDrawer.svelte';
	import type { Snippet } from 'svelte';

	interface Props {
		memberName: string;
		memberEmail: string;
		children: Snippet;
		hideBottomNav?: boolean;
	}

	let { memberName, memberEmail, children, hideBottomNav = false }: Props = $props();

	let menuOpen = $state(false);

	const mobileMenu: MemberMobileMenu = {
		toggle: () => {
			menuOpen = !menuOpen;
		},
		close: () => {
			menuOpen = false;
		}
	};

	setContext(MEMBER_MOBILE_MENU_KEY, mobileMenu);
</script>

<div class="flex h-[100dvh] overflow-hidden bg-base-200 lg:h-screen">
	<DesktopSidebar {memberName} {memberEmail} />

	<div class="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
		<div
			class="pointer-events-none fixed right-0 top-0 z-40 flex justify-end px-4 lg:hidden"
			style="padding-top: max(1rem, env(safe-area-inset-top))"
		>
			<div class="pointer-events-auto">
				<MobileHeaderActions />
			</div>
		</div>

		<div
			class="page-shell flex min-h-0 flex-1 flex-col overflow-hidden bg-gradient-to-br from-base-200 via-base-100/30 to-base-200"
			data-bottom-nav={hideBottomNav ? undefined : ''}
		>
			{@render children()}
		</div>
	</div>

	<MobileSidebarDrawer
		open={menuOpen}
		{memberName}
		{memberEmail}
		onclose={mobileMenu.close}
	/>

	{#if !hideBottomNav}
		<MobileBottomNav />
	{/if}
</div>
