<script lang="ts">
	import '../app.css';
	import type { Snippet } from 'svelte';
	import { onMount } from 'svelte';
	import { connectSocket, disconnectSocket } from '$lib/stores/socket.js';
	import { initTheme, toggleTheme, getTheme } from '$lib/stores/theme.svelte.js';
	import NotificationBell from '$lib/components/NotificationBell.svelte';
	import SearchBar from '$lib/components/SearchBar.svelte';
	import Toast from '$lib/components/Toast.svelte';
	import KeyboardShortcuts from '$lib/components/KeyboardShortcuts.svelte';

	let { children, data }: { children: Snippet; data: { user: any; tenant: any; theme?: string } } = $props();

	let mobileMenuOpen = $state(false);
	const theme = $derived(getTheme());

	onMount(() => {
		initTheme(data.theme);
		if (data.user) {
			connectSocket();
			return () => disconnectSocket();
		}
	});
</script>

<div class="min-h-screen bg-gray-50 dark:bg-gray-950">
	<nav class="bg-[var(--color-primary)] shadow-sm">
		<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
			<div class="flex h-14 items-center justify-between">
				<a href="/" class="flex items-center gap-2 text-white font-bold text-lg">
					<svg class="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
						<circle cx="7" cy="5" r="2.2" />
						<circle cx="12" cy="3.5" r="2.2" />
						<circle cx="17" cy="5" r="2.2" />
						<ellipse cx="12" cy="14" rx="6" ry="7" />
					</svg>
					{data.tenant?.name ?? 'Pounce'}
				</a>

				{#if data.user}
					<div class="hidden sm:block">
						<SearchBar />
					</div>
				{/if}

				<!-- Desktop nav -->
				<div class="hidden sm:flex items-center gap-3">
					<button
						onclick={toggleTheme}
						class="rounded p-1.5 text-white/80 hover:text-white hover:bg-white/20 transition"
						aria-label="Toggle dark mode"
						title="Toggle dark mode"
					>
						{#if theme === 'dark'}
							<svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
								<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
							</svg>
						{:else}
							<svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
								<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
							</svg>
						{/if}
					</button>
					{#if data.user}
						{#if data.user.tenantRole === 'ADMIN' || data.user.globalRole === 'SITE_ADMIN'}
							<a
								href="/admin"
								class="rounded bg-white/20 px-3 py-1.5 text-sm text-white hover:bg-white/30 transition"
							>
								Admin
							</a>
						{/if}
						<a href="/account" class="text-white/80 text-sm hover:text-white transition">{data.user.name}</a>
						<NotificationBell />
						<button
							onclick={async () => {
								await fetch('/api/auth/logout', { method: 'POST' });
								window.location.href = '/';
							}}
							class="rounded bg-white/20 px-3 py-1.5 text-sm text-white hover:bg-white/30 transition"
						>
							Logout
						</button>
					{:else}
						<a
							href="/auth/login"
							class="rounded bg-white/20 px-3 py-1.5 text-sm text-white hover:bg-white/30 transition"
						>
							Login
						</a>
						<a
							href="/auth/register"
							class="rounded bg-white px-3 py-1.5 text-sm text-[var(--color-primary)] font-medium hover:bg-white/90 transition"
						>
							Register
						</a>
					{/if}
				</div>

				<!-- Mobile hamburger -->
				<div class="flex items-center gap-2 sm:hidden">
					<button
						onclick={toggleTheme}
						class="rounded p-1.5 text-white/80 hover:text-white hover:bg-white/20 transition"
						aria-label="Toggle dark mode"
					>
						{#if theme === 'dark'}
							<svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
								<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
							</svg>
						{:else}
							<svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
								<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
							</svg>
						{/if}
					</button>
					{#if data.user}
						<NotificationBell />
					{/if}
					<button
						onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
						class="rounded p-1.5 text-white/80 hover:text-white hover:bg-white/20 transition"
						aria-label="Open menu"
					>
						<svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
							{#if mobileMenuOpen}
								<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
							{:else}
								<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
							{/if}
						</svg>
					</button>
				</div>
			</div>
		</div>

		<!-- Mobile dropdown -->
		{#if mobileMenuOpen}
			<div class="sm:hidden border-t border-white/20 px-4 py-3 space-y-2">
				{#if data.user}
					<div class="w-full">
						<SearchBar />
					</div>
					<div class="flex flex-col gap-1">
						<a href="/account" class="text-white/80 text-sm py-1 hover:text-white transition" onclick={() => (mobileMenuOpen = false)}>{data.user.name}</a>
						{#if data.user.tenantRole === 'ADMIN' || data.user.globalRole === 'SITE_ADMIN'}
							<a
								href="/admin"
								class="rounded bg-white/20 px-3 py-1.5 text-sm text-white hover:bg-white/30 transition text-center"
								onclick={() => (mobileMenuOpen = false)}
							>
								Admin
							</a>
						{/if}
						<a
							href="/boards"
							class="rounded bg-white/20 px-3 py-1.5 text-sm text-white hover:bg-white/30 transition text-center"
							onclick={() => (mobileMenuOpen = false)}
						>
							Boards
						</a>
						<button
							onclick={async () => {
								await fetch('/api/auth/logout', { method: 'POST' });
								window.location.href = '/';
							}}
							class="rounded bg-white/20 px-3 py-1.5 text-sm text-white hover:bg-white/30 transition"
						>
							Logout
						</button>
					</div>
				{:else}
					<div class="flex flex-col gap-1">
						<a
							href="/auth/login"
							class="rounded bg-white/20 px-3 py-1.5 text-sm text-white hover:bg-white/30 transition text-center"
							onclick={() => (mobileMenuOpen = false)}
						>
							Login
						</a>
						<a
							href="/auth/register"
							class="rounded bg-white px-3 py-1.5 text-sm text-[var(--color-primary)] font-medium hover:bg-white/90 transition text-center"
							onclick={() => (mobileMenuOpen = false)}
						>
							Register
						</a>
					</div>
				{/if}
			</div>
		{/if}
	</nav>

	{@render children()}
</div>

<Toast />
<KeyboardShortcuts />
