<script lang="ts">
	import { mode, colorTheme, toggleMode, setColorTheme, themeOptions, themeColors, type ColorTheme } from '$lib/stores/theme';
	import { fly, fade } from 'svelte/transition';
	import { user, navigation } from '$lib/config';
	import Icon from '@iconify/svelte';
	import '$lib/assets/css/navbar.css';
	
	let themeDropdownOpen = $state(false);
	let navExpanded = $state(false);

	function handleThemeSelect(theme: ColorTheme) {
		setColorTheme(theme);
		themeDropdownOpen = false;
	}

	function handleKeydown(event: KeyboardEvent) {
		if (event.key === 'Escape') {
			themeDropdownOpen = false;
		}
	}

	function getThemeIcon(theme: ColorTheme): string {
		switch (theme) {
			case 'arch': return 'mdi:arch';
			case 'catppuccin': return 'solar:cat-bold';
			default: return 'mdi:palette';
		}
	}
</script>

<svelte:window on:keydown={handleKeydown} />

<nav 
	class="navbar"
	style="
		--nav-bg: {$themeColors.backgroundLight};
		--nav-border: {$themeColors.border};
		--nav-text: {$themeColors.text};
		--nav-primary: {$themeColors.primary};
		--nav-accent: {$themeColors.accent};
		--nav-muted: {$themeColors.textMuted};
	"
>
	<div class="nav-container">
		<!-- Logo / Brand -->
		<a href="/" class="nav-brand">
			<span class="terminal-prompt">
				<span class="user">{user.username}@{user.hostname}</span>
				<span class="separator">:</span>
				<span class="path">~</span>
				<span class="symbol">$</span>
			</span>
			<span class="cursor"></span>
		</a>

		<!-- Mobile Menu Toggle -->
		<button 
			class="mobile-toggle"
			onclick={() => navExpanded = !navExpanded}
			aria-label="Toggle navigation"
		>
			<span class="hamburger" class:open={navExpanded}></span>
		</button>

		<!-- Navigation Links -->
		<div class="nav-links" class:expanded={navExpanded}>
			{#each navigation as nav}
				<a href={nav.path} class="nav-link" onclick={() => navExpanded = false}>
					<span class="link-prefix">./</span>{nav.name}
				</a>
			{/each}
		</div>

		<!-- Theme Controls -->
		<div class="nav-controls">
			<!-- Theme Selector Dropdown -->
			<div class="theme-selector">
				<button 
					class="theme-button"
					onclick={() => themeDropdownOpen = !themeDropdownOpen}
					aria-expanded={themeDropdownOpen}
					aria-haspopup="true"
				>
					<span class="theme-icon">
						<Icon icon={getThemeIcon($colorTheme)} width="18" />
					</span>
					<span class="theme-label">{$colorTheme}</span>
					<Icon icon="mdi:chevron-down" width="16" class="dropdown-arrow {themeDropdownOpen ? 'open' : ''}" />
				</button>

				{#if themeDropdownOpen}
					<div 
						class="theme-dropdown"
						transition:fly={{ y: -10, duration: 200 }}
					>
						{#each themeOptions as option}
							<button
								class="theme-option"
								class:active={$colorTheme === option.value}
								onclick={() => handleThemeSelect(option.value)}
							>
								<span class="option-icon">
									<Icon icon={getThemeIcon(option.value)} width="18" />
								</span>
								<span class="option-label">{option.label}</span>
								{#if $colorTheme === option.value}
									<Icon icon="mdi:check" width="16" class="check-mark" />
								{/if}
							</button>
						{/each}
					</div>
				{/if}
			</div>

			<!-- Dark/Light Mode Toggle -->
			<button 
				class="mode-toggle"
				onclick={toggleMode}
				aria-label="Toggle dark/light mode"
				title={$mode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
			>
				{#if $mode === 'dark'}
					<div transition:fade={{ duration: 150 }}>
						<Icon icon="mdi:white-balance-sunny" width="20" />
					</div>
				{:else}
					<div transition:fade={{ duration: 150 }}>
						<Icon icon="mdi:moon-waning-crescent" width="20" />
					</div>
				{/if}
			</button>
		</div>
	</div>

	<!-- Backdrop for dropdown -->
	{#if themeDropdownOpen}
		<button 
			class="backdrop"
			transition:fade={{ duration: 150 }}
			onclick={() => themeDropdownOpen = false}
			aria-label="Close dropdown"
		></button>
	{/if}
</nav>
