<script lang="ts">
	// @ts-nocheck
	import { appController } from '$lib/app/controller';
	import { appState, unreadNotificationsCount } from '$lib/app/store';

	let { children, pageKey } = $props<{ children: () => unknown; pageKey: string }>();

	$effect(() => {
		appController.setPage(pageKey);
	});

	const isHomePage = (page: string) => page === 'camera' || page === 'client';
	const isAuthenticated = () => Boolean($appState.session && $appState.device);
	const userName = () => $appState.session?.user?.name || 'Signed Out';
	const userEmail = () => $appState.session?.user?.email || 'Signed Out';
	const userInitial = () => ($appState.session?.user?.name?.[0] || '?').toUpperCase();
</script>

<div data-sim-page={pageKey} class="flex h-full w-full">
	<div id="toast-container" class="toast toast-top toast-end z-50">
		{#each $appState.toasts as toast (toast.id)}
			<div class={`alert ${toast.type === 'error' ? 'alert-error' : toast.type === 'success' ? 'alert-success' : 'alert-info'} text-white shadow-lg text-xs py-2 px-3 flex flex-row gap-2`}>
				<span>{toast.message}</span>
				<button class="btn btn-xs btn-ghost" onclick={() => appController.removeToast(toast.id)}>x</button>
			</div>
		{/each}
	</div>

	<aside
		id="bottomNav"
		class="w-20 lg:w-64 glass-panel border-r border-white/5 flex-col justify-between h-full {isAuthenticated() ? 'flex' : 'hidden'}"
	>
		<div class="p-6 flex items-center justify-center lg:justify-start gap-3 border-b border-white/5"></div>

		<nav class="flex-1 py-6 px-3 space-y-2">
			<button
				class="nav-btn w-full flex items-center gap-3 p-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all data-[active=true]:text-white data-[active=true]:bg-blue-600/10 data-[active=true]:border data-[active=true]:border-blue-500/20 group"
				data-active={isHomePage($appState.page)}
				onclick={() => appController.navigate('home')}
			>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="h-5 w-5 shrink-0"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
					/>
				</svg>
				<span class="font-medium hidden lg:block text-sm">Dashboard</span>
			</button>

			<button
				class="nav-btn w-full flex items-center gap-3 p-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all relative data-[active=true]:text-white data-[active=true]:bg-blue-600/10 data-[active=true]:border data-[active=true]:border-blue-500/20 group"
				data-active={$appState.page === 'activity'}
				onclick={() => appController.navigate('activity')}
			>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="h-5 w-5 shrink-0"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
					/>
				</svg>
				<span class="font-medium hidden lg:block text-sm">Activity Feed</span>
				<span
					id="notificationDot"
					class="absolute lg:relative lg:top-auto lg:right-auto top-3 right-3 lg:ml-auto w-2 h-2 bg-red-500 rounded-full {$unreadNotificationsCount > 0 ? '' : 'hidden'}"
				></span>
			</button>

			<button
				class="nav-btn w-full flex items-center gap-3 p-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all data-[active=true]:text-white data-[active=true]:bg-blue-600/10 data-[active=true]:border data-[active=true]:border-blue-500/20 group"
				data-active={$appState.page === 'settings'}
				onclick={() => appController.navigate('settings')}
			>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="h-5 w-5 shrink-0"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
					/>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
					/>
				</svg>
				<span class="font-medium hidden lg:block text-sm">Settings</span>
			</button>
		</nav>
	</aside>

	<main class="flex-1 flex flex-col h-full overflow-hidden relative">
		<header
			class="h-16 shrink-0 border-b border-white/5 flex items-center justify-end px-6 relative z-10 glass-panel"
		>
			<div class="flex items-center gap-6">
				<div id="connectionStatus" class="flex items-center gap-2">
					<span class="status-dot {$appState.socketConnected ? 'status-online' : 'status-offline'} transition-colors duration-300"></span>
					<span class="text-xs text-gray-400 font-medium tracking-wide uppercase">
						{$appState.socketConnected ? 'ONLINE' : 'OFFLINE'}
					</span>
				</div>

				<div class="h-6 w-px bg-white/10"></div>

				<div id="authStatusBadge" class="flex items-center gap-2 text-sm text-gray-400">
					<div
						class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center text-xs font-bold border border-white/10"
					>
						{userInitial()}
					</div>
					<span class="hidden sm:inline" title={userEmail()}>{userName()}</span>
				</div>
			</div>
		</header>

		<div class="flex-1 overflow-y-auto p-4 md:p-8 lg:p-10 relative">
			{@render children()}
		</div>
	</main>
</div>

<div
	id="recordingModal"
	class="fixed inset-0 bg-[#0a0a0c]/90 backdrop-blur z-[100] {$appState.recordingModal.open ? 'flex' : 'hidden'} items-center justify-center p-4 lg:p-10"
	role="dialog"
	aria-modal="true"
	tabindex="-1"
	onclick={(event) => {
		if (event.target === event.currentTarget) appController.closeRecordingModal();
	}}
	onkeydown={(event) => {
		if (event.key === 'Escape') appController.closeRecordingModal();
	}}
>
	<div
		class="w-full max-w-4xl glass-card rounded-3xl p-6 space-y-4 shadow-2xl border border-white/10 flex flex-col max-h-[90vh]"
	>
		<div class="flex items-center justify-between shrink-0">
			<h3 id="recordingModalTitle" class="text-lg font-semibold text-white tracking-wide">
				{$appState.recordingModal.title}
			</h3>
			<button
				id="recordingModalCloseBtn"
				class="btn btn-square btn-ghost text-gray-400 hover:text-white rounded-xl hover:bg-white/10"
				aria-label="Close recording modal"
				title="Close recording modal"
				onclick={() => appController.closeRecordingModal()}
			>
				<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
				</svg>
			</button>
		</div>
		<div class="flex-1 min-h-0 bg-black rounded-2xl overflow-hidden relative border border-white/5 shadow-inner">
			<video id="recordingModalVideo" class="w-full h-full object-contain" src={$appState.recordingModal.url} controls playsinline>
				<track kind="captions" />
			</video>
		</div>
	</div>
</div>
