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

let { isAdmin = false }: { isAdmin?: boolean } = $props();

let mobileNavOpen = $state(false);

$effect(() => {
	// Read pathname to establish the reactive dependency.
	// Write via untrack so the effect doesn't re-run on its own write.
	void page.url.pathname;
	untrack(() => {
		mobileNavOpen = false;
	});
});

function closeMobileNav() {
	mobileNavOpen = false;
}

function handleOverlayKeydown(event: KeyboardEvent) {
	if (event.key === 'Escape') {
		mobileNavOpen = false;
	}
}
</script>

<div class="flex items-stretch">
	<div class="mr-4 flex flex-shrink-0 items-center xl:mr-10">
		<a href="/" class="flex items-center" aria-label="Familienarchiv">
			<span class="font-sans text-xl font-bold tracking-widest text-white uppercase"
				>Familienarchiv</span
			>
		</a>
	</div>

	<!-- Desktop nav -->
	<nav class="hidden items-stretch lg:flex lg:space-x-1">
		<a
			href="/documents"
			class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-focus-ring
                   {page.url.pathname.startsWith('/documents')
				? 'border-b-2 border-accent text-white'
				: 'text-white/70 hover:text-white'}"
		>
			{m.nav_documents()}
		</a>

		<a
			href="/persons"
			class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-focus-ring
                   {page.url.pathname.startsWith('/persons')
				? 'border-b-2 border-accent text-white'
				: 'text-white/70 hover:text-white'}"
		>
			{m.nav_persons()}
		</a>

		<a
			href="/stammbaum"
			class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-focus-ring
                   {page.url.pathname.startsWith('/stammbaum')
				? 'border-b-2 border-accent text-white'
				: 'text-white/70 hover:text-white'}"
		>
			{m.nav_stammbaum()}
		</a>

		<a
			href="/geschichten"
			class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-focus-ring
                   {page.url.pathname.startsWith('/geschichten')
				? 'border-b-2 border-accent text-white'
				: 'text-white/70 hover:text-white'}"
		>
			{m.nav_geschichten()}
		</a>

		<a
			href="/zeitstrahl"
			class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-focus-ring
                   {page.url.pathname.startsWith('/zeitstrahl')
				? 'border-b-2 border-accent text-white'
				: 'text-white/70 hover:text-white'}"
		>
			{m.nav_zeitstrahl()}
		</a>
		{#if isAdmin}
			<a
				href="/admin"
				class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-focus-ring
                   {page.url.pathname.startsWith('/admin')
					? 'border-b-2 border-accent text-white'
					: 'text-white/70 hover:text-white'}"
			>
				{m.nav_admin()}
			</a>
		{/if}
	</nav>

	<!-- Hamburger toggle (mobile only) -->
	<button
		class="ml-auto flex h-11 w-11 items-center justify-center self-center rounded text-white/70 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring lg:hidden"
		aria-label={mobileNavOpen ? m.layout_menu_close() : m.layout_menu_open()}
		aria-expanded={mobileNavOpen}
		aria-controls="mobile-nav"
		onclick={() => (mobileNavOpen = !mobileNavOpen)}
	>
		{#if mobileNavOpen}
			<!-- X icon -->
			<svg
				xmlns="http://www.w3.org/2000/svg"
				width="22"
				height="22"
				viewBox="0 0 24 24"
				fill="none"
				stroke="currentColor"
				stroke-width="2"
				stroke-linecap="round"
				stroke-linejoin="round"
				aria-hidden="true"
			>
				<line x1="18" y1="6" x2="6" y2="18" />
				<line x1="6" y1="6" x2="18" y2="18" />
			</svg>
		{:else}
			<!-- Hamburger icon -->
			<svg
				xmlns="http://www.w3.org/2000/svg"
				width="22"
				height="22"
				viewBox="0 0 24 24"
				fill="none"
				stroke="currentColor"
				stroke-width="2"
				stroke-linecap="round"
				stroke-linejoin="round"
				aria-hidden="true"
			>
				<line x1="3" y1="6" x2="21" y2="6" />
				<line x1="3" y1="12" x2="21" y2="12" />
				<line x1="3" y1="18" x2="21" y2="18" />
			</svg>
		{/if}
	</button>
</div>

<!-- Mobile nav overlay -->
{#if mobileNavOpen}
	<!-- svelte-ignore a11y_no_static_element_interactions -->
	<div class="fixed inset-0 top-[68px] z-40 lg:hidden" onkeydown={handleOverlayKeydown}>
		<!-- Backdrop -->
		<!-- svelte-ignore a11y_click_events_have_key_events -->
		<!-- svelte-ignore a11y_no_static_element_interactions -->
		<div class="absolute inset-0 bg-black/20" onclick={closeMobileNav}></div>

		<!-- Panel — white background with navy text (reverses the dark header) -->
		<div class="relative border-b border-line bg-surface shadow-md">
			<nav id="mobile-nav">
				<a
					href="/documents"
					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset
                           {page.url.pathname.startsWith('/documents')
						? 'bg-accent-bg text-ink'
						: 'text-ink-2 hover:bg-muted hover:text-ink'}"
				>
					{m.nav_documents()}
				</a>

				<a
					href="/persons"
					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset
                           {page.url.pathname.startsWith('/persons')
						? 'bg-accent-bg text-ink'
						: 'text-ink-2 hover:bg-muted hover:text-ink'}"
				>
					{m.nav_persons()}
				</a>

				<a
					href="/stammbaum"
					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset
                           {page.url.pathname.startsWith('/stammbaum')
						? 'bg-accent-bg text-ink'
						: 'text-ink-2 hover:bg-muted hover:text-ink'}"
				>
					{m.nav_stammbaum()}
				</a>

				<a
					href="/geschichten"
					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset
                           {page.url.pathname.startsWith('/geschichten')
						? 'bg-accent-bg text-ink'
						: 'text-ink-2 hover:bg-muted hover:text-ink'}"
				>
					{m.nav_geschichten()}
				</a>

				<a
					href="/zeitstrahl"
					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset
                           {page.url.pathname.startsWith('/zeitstrahl')
						? 'bg-accent-bg text-ink'
						: 'text-ink-2 hover:bg-muted hover:text-ink'}"
				>
					{m.nav_zeitstrahl()}
				</a>

				{#if isAdmin}
					<a
						href="/admin"
						class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset
                               {page.url.pathname.startsWith('/admin')
							? 'bg-accent-bg text-ink'
							: 'text-ink-2 hover:bg-muted hover:text-ink'}"
					>
						{m.nav_admin()}
					</a>
				{/if}

				<!-- Language switcher -->
				<div
					class="flex items-center gap-2 border-t border-line px-4 py-3 [&_button]:min-h-[44px] [&_button]:px-3 [&_button]:text-sm"
				>
					<LanguageSwitcher />
				</div>
			</nav>
		</div>
	</div>
{/if}
