<script lang="ts">
	import './layout.css';
	import Background3D from '$lib/components/Background3D.svelte';
	import { themeColors, mode, colorTheme, toggleMode, setColorTheme, themeOptions } from '$lib/stores/theme';
	import { goto } from '$app/navigation';
	import { navigation } from '$lib/config';
	import { browser } from '$app/environment';
	import { onMount, onDestroy } from 'svelte';
	import { registerKeybinds, unregisterKeybinds } from '$lib/keybinds';
	import NavbarWaybar from '$lib/components/NavbarWaybar.svelte';
	
	let { children } = $props();
	let mounted = $state(false);

	function updateNavbarHeight() {
		if (!browser) return;
		const elem = document.querySelector('.navbar') as HTMLElement | null;
		if (!elem) return;
		const rect = elem.getBoundingClientRect();
		document.documentElement.style.setProperty('--navbar-height', `${rect.height}px`);
	}

	onMount(() => {
		mounted = true;
		// Set initial theme attributes
		if (browser) {
			document.documentElement.setAttribute('data-mode', $mode);
			document.documentElement.setAttribute('data-theme', $colorTheme);
		}
		// Update CSS var with actual navbar height
		updateNavbarHeight();
		window.addEventListener('resize', updateNavbarHeight);

		// Register centralized keybinds
		registerKeybinds({
			themeOptions: themeOptions,
			setColorTheme: setColorTheme,
			toggleMode: toggleMode,
			navigation: navigation,
			goto: goto,
			browser: browser
		});
	});

	onDestroy(() => {
		if (browser) {
			window.removeEventListener('resize', updateNavbarHeight);
			// Unregister centralized keybinds
			unregisterKeybinds();
		}
	});

	$effect(() => updateNavbarHeight());
</script>

<svelte:head>
	<link rel="icon" href="/favicon.png" />
	<title>Blob's Portfolio</title>
	<meta name="description" content="Welcome to Blob's personal portfolio website, showcasing projects, skills, and more." />
</svelte:head>

{#if mounted}
	<div 
		class="app-wrapper"
		style="
			--app-bg: {$themeColors.background};
			--app-text: {$themeColors.text};
			--app-primary: {$themeColors.primary};
			--app-accent: {$themeColors.accent};
			--app-border: {$themeColors.border};
			--app-muted: {$themeColors.textMuted};
			background-color: {$themeColors.background};
			color: {$themeColors.text};
		"
	>
		<NavbarWaybar />
		<!-- <Navbar /> -->
		<main class="main-content">
			<Background3D />
			{@render children()}
		</main>
	</div>
{:else}
	<!-- Loading state to prevent flash - themed to current selection -->
	<div class="loading-screen" style="background: {$themeColors.background} !important; color: {$themeColors.text} !important;">
		<div class="loading-content">
			<span class="loading-text">Initializing terminal...</span>
			<span class="loading-cursor" style="background: {$themeColors.accent} !important;"></span>
		</div>
	</div>
{/if}

<style>
	.app-wrapper {
		min-height: 100vh;
		transition: background-color 0.3s ease, color 0.3s ease;
	}

	.loading-screen {
		position: fixed;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: 'JetBrains Mono', monospace;
	}

	.loading-content {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.loading-text {
		font-size: 1rem;
	}

	.loading-cursor {
		width: 10px;
		height: 1.2em;
		animation: blink 1s step-end infinite;
	}

	@keyframes blink {
		0%, 100% { opacity: 1; }
		50% { opacity: 0; }
	}
</style>
