<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';
	
	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>

<style>
	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		background: var(--nav-bg);
		border-bottom: 1px solid var(--nav-border);
		backdrop-filter: blur(10px);
		font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
	}

	.nav-container {
		max-width: 1400px;
		margin: 0 auto;
		padding: 0.75rem 1.5rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
	}

	.nav-brand {
		display: flex;
		align-items: center;
		gap: 0.25rem;
		font-size: 0.9rem;
		font-weight: 600;
	}

	.terminal-prompt {
		display: flex;
		align-items: center;
		gap: 0;
	}

	.terminal-prompt .user {
		color: var(--nav-accent);
	}

	.terminal-prompt .separator {
		color: var(--nav-text);
	}

	.terminal-prompt .path {
		color: var(--nav-primary);
	}

	.terminal-prompt .symbol {
		color: var(--nav-text);
		margin-left: 0.25rem;
	}

	.cursor {
		width: 8px;
		height: 1.2em;
		background: var(--nav-primary);
		animation: blink 1s step-end infinite;
		margin-left: 0.25rem;
	}

	@keyframes blink {
		0%, 100% { opacity: 1; }
		50% { opacity: 0; }
	}

	.mobile-toggle {
		display: none;
		background: none;
		border: none;
		padding: 0.5rem;
		cursor: pointer;
	}

	.hamburger {
		display: block;
		width: 24px;
		height: 2px;
		background: var(--nav-text);
		position: relative;
		transition: all 0.3s ease;
	}

	.hamburger::before,
	.hamburger::after {
		content: '';
		position: absolute;
		width: 24px;
		height: 2px;
		background: var(--nav-text);
		transition: all 0.3s ease;
	}

	.hamburger::before {
		top: -7px;
	}

	.hamburger::after {
		top: 7px;
	}

	.hamburger.open {
		background: transparent;
	}

	.hamburger.open::before {
		top: 0;
		transform: rotate(45deg);
	}

	.hamburger.open::after {
		top: 0;
		transform: rotate(-45deg);
	}

	.nav-links {
		display: flex;
		align-items: center;
		gap: 1.5rem;
		flex: 1;
	}

	.nav-link {
		color: var(--nav-text);
		text-decoration: none;
		font-size: 0.85rem;
		padding: 0.5rem 0.75rem;
		border-radius: 4px;
		transition: all 0.2s ease;
		display: flex;
		align-items: center;
		position: relative;
		overflow: hidden;
	}

	.nav-link::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0;
		height: 2px;
		background: var(--nav-primary);
		transition: width 0.3s ease;
	}

	.nav-link:hover::before {
		width: 100%;
	}

	.nav-link:hover {
		color: var(--nav-primary);
	}

	.link-prefix {
		color: var(--nav-muted);
		margin-right: 2px;
	}

	.nav-controls {
		display: flex;
		align-items: center;
		gap: 1rem;
	}

	.theme-selector {
		position: relative;
	}

	.theme-button {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem 0.75rem;
		background: transparent;
		border: 1px solid var(--nav-border);
		border-radius: 6px;
		color: var(--nav-text);
		cursor: pointer;
		font-family: inherit;
		font-size: 0.8rem;
		transition: all 0.2s ease;
	}

	.theme-button:hover {
		border-color: var(--nav-primary);
		background: color-mix(in srgb, var(--nav-primary) 10%, transparent);
	}

	.theme-icon {
		font-size: 1rem;
		display: flex;
		align-items: center;
	}

	.theme-label {
		text-transform: capitalize;
	}

	:global(.dropdown-arrow) {
		transition: transform 0.2s ease;
	}

	:global(.dropdown-arrow.open) {
		transform: rotate(180deg);
	}

	.theme-dropdown {
		position: absolute;
		top: calc(100% + 0.5rem);
		right: 0;
		min-width: 180px;
		background: var(--nav-bg);
		border: 1px solid var(--nav-border);
		border-radius: 8px;
		padding: 0.5rem;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
		z-index: 1001;
	}

	.theme-option {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		width: 100%;
		padding: 0.625rem 0.75rem;
		background: transparent;
		border: none;
		border-radius: 6px;
		color: var(--nav-text);
		cursor: pointer;
		font-family: inherit;
		font-size: 0.85rem;
		text-align: left;
		transition: all 0.2s ease;
	}

	.theme-option:hover {
		background: color-mix(in srgb, var(--nav-primary) 15%, transparent);
	}

	.theme-option.active {
		background: color-mix(in srgb, var(--nav-primary) 20%, transparent);
		color: var(--nav-primary);
	}

	.option-icon {
		font-size: 1.1rem;
		display: flex;
		align-items: center;
	}

	.option-label {
		flex: 1;
	}

	:global(.check-mark) {
		color: var(--nav-primary);
	}

	.mode-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		background: transparent;
		border: 1px solid var(--nav-border);
		border-radius: 8px;
		cursor: pointer;
		transition: all 0.2s ease;
		color: var(--nav-text);
	}

	.mode-toggle:hover {
		border-color: var(--nav-primary);
		background: color-mix(in srgb, var(--nav-primary) 10%, transparent);
		color: var(--nav-primary);
	}

	.backdrop {
		position: fixed;
		inset: 0;
		background: transparent;
		z-index: 999;
		border: none;
		cursor: default;
	}

	@media (max-width: 768px) {
		.nav-container {
			flex-wrap: wrap;
			padding: 0.75rem 1rem;
		}

		.mobile-toggle {
			display: block;
			order: 2;
		}

		.nav-links {
			order: 4;
			width: 100%;
			flex-direction: column;
			align-items: flex-start;
			gap: 0.5rem;
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.3s ease, padding 0.3s ease;
		}

		.nav-links.expanded {
			max-height: 200px;
			padding-top: 1rem;
		}

		.nav-controls {
			order: 3;
			margin-left: auto;
			margin-right: 1rem;
		}

		.theme-label {
			display: none;
		}

		.theme-button {
			padding: 0.5rem;
		}
	}
</style>
