<script lang="ts">
	import { page } from '$app/stores';
	import { authStore } from '$auth';
	import { goto } from '$app/navigation';
	import { t } from '$i18n';

	let isNavOpen = $state(false);
	let isDropdownOpen = $state(false);

	async function handleLogout() {
		await authStore.logout();
		await goto('/');
	}

	function closeAll() {
		isNavOpen = false;
		isDropdownOpen = false;
	}
</script>

<svelte:window onclick={() => { if (isDropdownOpen) isDropdownOpen = false; }} />

<style>
	/* Stretch the container chain so every nav item reaches the full navbar height */
	.container-fluid {
		height: 100%;
		align-items: stretch;
	}

	.navbar-collapse {
		align-self: stretch;
		align-items: stretch;
	}

	.navbar-nav {
		align-self: stretch;
		align-items: stretch;
	}

	.nav-item {
		display: flex;
		align-items: stretch;
	}

	/* Normalize <button> to match <a> nav-links exactly */
	button.nav-link {
		appearance: none;
		-webkit-appearance: none;
		color: inherit;
		cursor: pointer;
		border-radius: 0;
		font-size: inherit;
		font-family: inherit;
		background-color: white;
	}

	button.nav-link:hover {
		color: white !important;
		background-color: var(--bs-primary);
	}

	/* Keep dropdown within viewport — clip vertically, guard horizontal edge */
	.dropdown-menu {
		max-height: calc(100vh - var(--navbar-height) - 4px);
		overflow-y: auto;
		right: 0;
		left: auto;
		max-width: calc(100vw - 1.5rem);
	}
</style>

<nav class="navbar navbar-expand-lg navbar-light fixed-top custom-navbar border-bottom">
	<div class="container-fluid px-3">
		<a class="navbar-brand nav-full-height" href="/">
			<img src="/logo.svg" alt="Logo" height="34" class="d-inline-block align-text-top" />
		</a>

		<button
			type="button"
			class="navbar-toggler"
			aria-controls="mainNav"
			aria-expanded={isNavOpen}
			aria-label="Toggle navigation"
			onclick={() => (isNavOpen = !isNavOpen)}>
			<span class="navbar-toggler-icon"></span>
		</button>

		<div class="collapse navbar-collapse" class:show={isNavOpen} id="mainNav">
			<ul class="navbar-nav me-auto mb-2 mb-lg-0">
				<li class="nav-item">
					<a
						href="/predict"
						class="nav-link nav-full-height border border-top-0"
						class:active={$page.url.pathname === '/predict'}
						onclick={closeAll}>
						{$t('nav.predict')}
					</a>
				</li>
				<li class="nav-item">
					<a
						href="/track"
						class="nav-link nav-full-height border border-top-0"
						class:active={$page.url.pathname === '/track'}
						onclick={closeAll}>
						{$t('nav.track')}
					</a>
				</li>
			</ul>

			<ul class="navbar-nav">
				{#if $authStore.status === 'authenticated' && $authStore.username}
					<li class="nav-item dropdown" class:show={isDropdownOpen}>
						<button
							type="button"
							class="nav-link nav-full-height border border-top-0 dropdown-toggle"
							aria-expanded={isDropdownOpen}
							onclick={(e) => { e.stopPropagation(); isDropdownOpen = !isDropdownOpen; }}>
							{$authStore.username}
						</button>
						<ul class="dropdown-menu dropdown-menu-end" class:show={isDropdownOpen}>
							<li><a class="dropdown-item" href="/user/account" onclick={closeAll}>{$t('nav.account')}</a></li>
							<li><a class="dropdown-item" href="/user/templates" onclick={closeAll}>{$t('nav.scenarios')}</a></li>
							<li><a class="dropdown-item" href="/user/predictions" onclick={closeAll}>{$t('nav.predictionHistory')}</a></li>
							<li><a class="dropdown-item" href="/user/flights" onclick={closeAll}>{$t('nav.trackingHistory')}</a></li>
							<li><hr class="dropdown-divider" /></li>
							<li>
								<button type="button" class="dropdown-item" onclick={handleLogout}>
									{$t('nav.logout')}
								</button>
							</li>
						</ul>
					</li>
				{:else if $authStore.status === 'anonymous'}
					<li class="nav-item">
						<a
							href="/login"
							class="nav-link nav-full-height border border-top-0"
							class:active={$page.url.pathname === '/login'}
							onclick={closeAll}>
							{$t('nav.login')}
						</a>
					</li>
				{/if}
			</ul>
		</div>
	</div>
</nav>
