<script lang="ts">
	import { page } from '$app/stores';
	import { Button } from '$lib/components/ui/button';
	import { resolve } from '$app/paths';

	const links = [
		{
			title: 'Current Weather',
			url: '/weather/week',
			description: 'Current conditions and overview',
			icon: '🌡️'
		},
		{
			title: 'Model Comparison',
			url: '/weather/compare',
			description: 'Compare multiple weather models',
			icon: '📊'
		},
		{
			title: '14 Day Forecast',
			url: '/weather/14-day',
			description: 'Extended forecast with uncertainty',
			icon: '📅'
		}
	];

	let mobileNavOpened = $state(false);
	let currentPath = $derived($page.url.pathname);

	const isActive = (url: string) => {
		return currentPath === url || currentPath.startsWith(url + '/');
	};
</script>

<nav
	class="sticky top-0 z-50 border-b border-gray-200/50 bg-white/90 shadow-sm backdrop-blur-lg dark:border-gray-700/50 dark:bg-gray-900/90"
>
	<div class="container mx-auto px-6">
		<div class="flex h-16 items-center justify-between">
			<!-- Logo -->
			<div class="flex items-center space-x-3">
				<div class="rounded-lg bg-gradient-to-r from-blue-600 to-purple-600 p-2">
					<svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"
						/>
					</svg>
				</div>
				<a
					href={resolve('/')}
					class="text-xl font-bold text-gray-900 transition-colors hover:text-blue-600 dark:text-white"
				>
					Open-Meteo Weather
				</a>
			</div>

			<!-- Desktop Navigation -->
			<div class="hidden items-center space-x-2 md:flex">
				{#each links as link (link.title)}
					<Button
						href={link.url}
						variant={isActive(link.url) ? 'default' : 'ghost'}
						size="sm"
						class="group relative px-4 py-2 {isActive(link.url)
							? 'bg-blue-600 text-white shadow-md'
							: 'hover:bg-blue-50 dark:hover:bg-blue-900/20'}"
					>
						<span class="mr-1">{link.icon}</span>
						{link.title}
					</Button>
				{/each}
			</div>

			<!-- Mobile menu button -->
			<div class="md:hidden">
				<Button
					variant="ghost"
					size="sm"
					class="rounded-lg"
					onclick={() => (mobileNavOpened = !mobileNavOpened)}
				>
					<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						{#if mobileNavOpened}
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M6 18L18 6M6 6l12 12"
							/>
						{:else}
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M4 6h16M4 12h16M4 18h16"
							/>
						{/if}
					</svg>
				</Button>
			</div>
		</div>

		<!-- Mobile Navigation -->
		{#if mobileNavOpened}
			<div class="border-t border-gray-200 py-4 md:hidden dark:border-gray-700">
				<div class="space-y-2">
					{#each links as link (link.title)}
						<Button
							href={link.url}
							variant={isActive(link.url) ? 'default' : 'ghost'}
							class="w-full justify-start py-3 {isActive(link.url) ? 'bg-blue-600 text-white' : ''}"
							onclick={() => (mobileNavOpened = false)}
						>
							<div class="flex items-center space-x-3">
								<span class="text-lg">{link.icon}</span>
								<div class="text-left">
									<div class="font-medium">{link.title}</div>
									<div
										class="text-xs {isActive(link.url)
											? 'text-blue-100'
											: 'text-gray-500 dark:text-gray-400'}"
									>
										{link.description}
									</div>
								</div>
							</div>
						</Button>
					{/each}
				</div>
			</div>
		{/if}
	</div>
</nav>

<style>
	:global(.container) {
		max-width: 1200px;
	}
</style>
