<script lang="ts">
	import '../app.css';
	import { page } from '$app/state';
	import { theme } from '$lib/stores/theme.svelte';
	import { onMount } from 'svelte';
	import type { LayoutData } from './$types';

	let { data, children }: { data: LayoutData; children: any } = $props();

	let menuOpen = $state(false);

	const isActive = $derived((path: string) => page.url.pathname === path);

	function toggleMenu() {
		menuOpen = !menuOpen;
	}

	function closeMenu() {
		menuOpen = false;
	}

	onMount(() => {
		theme.init();
	});
</script>

<div class="flex min-h-screen flex-col bg-theme">
	<nav class="border-b border-theme bg-theme-secondary shadow-theme">
		<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
			<div class="flex h-16 items-center justify-between">
				<!-- Left section: Hamburger + Logo -->
				<div class="flex items-center gap-3">
					<!-- Hamburger menu button -->
					<button
						onclick={toggleMenu}
						class="inline-flex items-center justify-center rounded-lg p-2.5 text-theme-secondary transition-colors interactive"
						aria-expanded={menuOpen}
						aria-label="Toggle navigation menu"
					>
						{#if !menuOpen}
							<svg class="h-6 w-6" viewBox="0 0 24 24" stroke="currentColor" style="fill: none">
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M4 6h16M4 12h16M4 18h16"
								/>
							</svg>
						{:else}
							<svg class="h-6 w-6" viewBox="0 0 24 24" stroke="currentColor" style="fill: none">
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M6 18L18 6M6 6l12 12"
								/>
							</svg>
						{/if}
					</button>

					<!-- Logo -->
					<a href="/" class="flex items-center space-x-2">
						<span class="text-xl font-bold text-theme">Nexus</span>
						<span class="text-theme-muted">|</span>
						<span class="text-base font-medium text-theme-secondary">Account</span>
					</a>
				</div>

				<!-- Right section: Auth buttons and theme toggle -->
				<div class="flex items-center gap-2">
					<!-- Theme toggle button -->
					<button
						onclick={() => theme.toggle()}
						class="rounded-lg p-2.5 text-theme-secondary transition-colors interactive"
						aria-label="Toggle theme"
					>
						{#if theme.isDark}
							<!-- Sun icon for light mode -->
							<svg class="h-5 w-5" viewBox="0 0 24 24" stroke="currentColor" style="fill: none">
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
								/>
							</svg>
						{:else}
							<!-- Moon icon for dark mode -->
							<svg class="h-5 w-5" viewBox="0 0 24 24" stroke="currentColor" style="fill: none">
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
								/>
							</svg>
						{/if}
					</button>

					{#if data.session}
						<span class="mr-2 hidden text-sm text-theme-secondary sm:inline">
							{data.session.identity?.traits.email}
						</span>
						<form action="/logout" method="POST">
							<input type="hidden" name="return_to" value={page.url.origin} />
							<button type="submit" class="btn-danger">
								Logout
							</button>
						</form>
					{:else}
						<div class="flex gap-2">
							<a
								href="/login"
								class="rounded-lg border border-theme px-4 py-2 text-sm font-medium text-theme-secondary transition-colors interactive"
							>
								Login
							</a>
							<a href="/registration" class="btn-primary text-sm">
								Register
							</a>
						</div>
					{/if}
				</div>
			</div>
		</div>
	</nav>

	<!-- Dropdown menu overlay -->
	{#if menuOpen}
		<!-- Backdrop to close menu when clicking outside -->
		<button
			class="fixed inset-0 z-40 bg-black/20 backdrop-blur-sm"
			onclick={closeMenu}
			aria-label="Close menu"
		></button>

		<!-- Menu panel -->
		<div class="fixed top-16 right-0 left-0 z-50 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
			<div class="rounded-b-lg border border-t-0 border-theme bg-theme-card shadow-theme-lg">
				<!-- Navigation items -->
				<div class="space-y-1 px-2 pt-2 pb-3">
					<a
						href="/"
						onclick={closeMenu}
						class="block rounded-lg px-4 py-3 text-base font-medium transition-colors {isActive(
							'/'
						)
							? 'bg-primary-500 text-white'
							: 'text-theme-secondary interactive'}"
					>
						Home
					</a>
					{#if data.session}
						<a
							href="/settings"
							onclick={closeMenu}
							class="block rounded-lg px-4 py-3 text-base font-medium transition-colors {isActive(
								'/settings'
							)
								? 'bg-primary-500 text-white'
								: 'text-theme-secondary interactive'}"
						>
							Settings
						</a>
						{#if data.isAdmin}
							<a
								href="/admin"
								onclick={closeMenu}
								class="block rounded-lg px-4 py-3 text-base font-medium transition-colors {isActive(
									'/admin'
								)
									? 'bg-primary-500 text-white'
									: 'text-theme-secondary interactive'}"
							>
								Admin
							</a>
						{/if}
					{/if}
				</div>
			</div>
		</div>
	{/if}

	<main class="mx-auto flex-1 max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
		{@render children()}
	</main>
</div>
