<script lang="ts">
	let theme = $state('night');
	let { user = null, currentPage = '' }: { user?: { display_name: string } | null; currentPage?: string } = $props();

	function toggleTheme() {
		theme = theme === 'night' ? 'light' : 'night';
		document.documentElement.setAttribute('data-theme', theme);
		localStorage.setItem('theme', theme);
	}

	function logout() {
		localStorage.removeItem('session_token');
		window.location.href = '/login';
	}

	$effect(() => {
		if (typeof window !== 'undefined') {
			const saved = localStorage.getItem('theme');
			if (saved) {
				theme = saved;
				document.documentElement.setAttribute('data-theme', saved);
			}
		}
	});

	let mobileOpen = $state(false);

	const navItems = [
		{ href: '/', label: 'Dashboard', page: 'dashboard' },
		{ href: '/foods', label: 'Foods', page: 'foods' },
		{ href: '/goals', label: 'Goals', page: 'goals' },
		{ href: '/templates', label: 'Templates', page: 'templates' },
		{ href: '/admin', label: 'Admin', page: 'admin' },
	];
</script>

<div class="bg-base-200/80 backdrop-blur-md sticky top-0 z-50 border-b border-base-300">
<div class="navbar px-4">
	<div class="flex-1 flex items-center gap-1">
		<!-- Mobile hamburger -->
		<button class="btn btn-ghost btn-sm btn-circle sm:hidden" onclick={() => mobileOpen = !mobileOpen}>
			<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>
		</button>
		<a href="/" class="flex items-center gap-2 text-xl font-bold text-primary hover:opacity-80 transition-opacity mr-4">
			<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
				<path d="M12 20V10"/>
				<path d="M18 20V4"/>
				<path d="M6 20v-4"/>
			</svg>
			<span class="hidden sm:inline">Calories</span>
		</a>
		{#each navItems as item}
			<a href={item.href} class="btn btn-ghost btn-sm hidden sm:inline-flex" class:btn-active={currentPage === item.page}>{item.label}</a>
		{/each}
	</div>
	<div class="flex-none flex items-center gap-2">
		<!-- Theme toggle -->
		<label class="swap swap-rotate btn btn-ghost btn-circle btn-sm">
			<input type="checkbox" checked={theme === 'light'} onchange={toggleTheme} />
			<svg class="swap-on h-5 w-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"/></svg>
			<svg class="swap-off h-5 w-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"/></svg>
		</label>
		<!-- User dropdown -->
		<div class="dropdown dropdown-end">
			<div tabindex="0" role="button" class="btn btn-ghost btn-sm gap-1">
				<div class="w-7 h-7 rounded-full bg-primary/20 flex items-center justify-center">
					<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
				</div>
				<span class="hidden sm:inline text-sm">{user?.display_name || 'User'}</span>
			</div>
			<ul class="dropdown-content menu bg-base-200 rounded-box z-[1] w-52 p-2 shadow-lg border border-base-300 mt-2">
				<li><button onclick={logout}>Logout</button></li>
			</ul>
		</div>
	</div>
</div>
{#if mobileOpen}
	<div class="sm:hidden border-t border-base-300 px-4 py-2">
		{#each navItems as item}
			<a href={item.href} class="block py-2 px-3 rounded-lg hover:bg-base-300 transition-colors {currentPage === item.page ? 'text-primary font-semibold' : 'text-base-content'}" onclick={() => mobileOpen = false}>{item.label}</a>
		{/each}
	</div>
{/if}
</div>
