<script lang="ts">
	import '../app.css';
	import { page } from '$app/state';
	import { m } from '$lib/paraglide/messages.js';
	import LanguageSwitcher from '$lib/components/LanguageSwitcher.svelte';

	let { children } = $props();

	const navItems = $derived([
		{ href: '/', label: m.nav_dashboard(), icon: '🏠' },
		{ href: '/products', label: m.nav_products(), icon: '🧴' },
		{ href: '/routines', label: m.nav_routines(), icon: '📋' },
		{ href: '/routines/grooming-schedule', label: m.nav_grooming(), icon: '🪒' },
		{ href: '/health/medications', label: m.nav_medications(), icon: '💊' },
		{ href: '/health/lab-results', label: m["nav_labResults"](), icon: '🔬' },
		{ href: '/skin', label: m.nav_skin(), icon: '✨' }
	]);

	function isActive(href: string) {
		if (href === '/') return page.url.pathname === '/';
		const pathname = page.url.pathname;
		if (!pathname.startsWith(href)) return false;
		// Don't mark parent as active if a more-specific nav item also matches
		const moreSpecific = navItems.some(
			(item) => item.href !== href && item.href.startsWith(href) && pathname.startsWith(item.href)
		);
		return !moreSpecific;
	}
</script>

<div class="flex min-h-screen bg-background">
	<!-- Sidebar -->
	<nav class="w-56 shrink-0 border-r border-border bg-card px-3 py-6">
		<div class="mb-8 px-3">
			<h1 class="text-lg font-semibold tracking-tight">{m["nav_appName"]()}</h1>
			<p class="text-xs text-muted-foreground">{m["nav_appSubtitle"]()}</p>
		</div>
		<ul class="space-y-1">
			{#each navItems as item}
				<li>
					<a
						href={item.href}
						class="flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors
							{isActive(item.href)
							? 'bg-accent text-accent-foreground font-medium'
							: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'}"
					>
						<span class="text-base">{item.icon}</span>
						{item.label}
					</a>
				</li>
			{/each}
		</ul>
		<div class="mt-6 px-3">
			<LanguageSwitcher />
		</div>
	</nav>

	<!-- Main content -->
	<main class="flex-1 overflow-auto p-8">
		{@render children()}
	</main>
</div>
