package templates

templ Header(user User, currentPath string) {
	<nav
		x-data="header"
		x-init="initializeSearch(); initializeTheme(); loadWoodPaneling(); updateWoodPanelingIndicators(); restoreLibrarySelection(); initializeScanListener()"
		class="header-nav border-b border-line bg-surface-raised/95 backdrop-blur shadow-bar"
	>
		<div class="w-full px-4 sm:px-6 lg:px-8">
			<div class="flex h-16 items-center gap-4">
				<!-- Brand -->
				<a href="/dashboard" class="flex items-center gap-2 text-lg font-bold tracking-tight text-content transition-colors hover:text-brand">
					@Icon("book-open", "h-6 w-6 text-brand")
					<span>Bookhoard</span>
					<!-- Scan progress indicator -->
					<svg
						x-show="scanning"
						x-cloak
						class="h-4 w-4 animate-spin text-brand"
						fill="none"
						viewBox="0 0 24 24"
					>
						<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
						<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
					</svg>
					<span x-show="scanning && scanProgress > 0" x-cloak x-text="scanProgress + '%'" class="text-xs font-normal text-content-muted"></span>
				</a>

				<!-- Primary nav -->
				<div class="hidden nav:flex items-center gap-1">
					<a href="/dashboard" class={ navItemClass(currentPath, "/dashboard") }>Library</a>
					<a href="/bookshelf" class={ navItemClass(currentPath, "/bookshelf") }>All Books</a>
					<a href="/series" class={ navItemClass(currentPath, "/series") }>Series</a>
					<a href="/collections" class={ navItemClass(currentPath, "/collections") }>Collections</a>
					<a href="/progress" class={ navItemClass(currentPath, "/progress") }>Progress</a>
					<a href="/devices" class={ navItemClass(currentPath, "/devices") }>Devices</a>
				</div>

				<!-- Search (center, grows) -->
				<div class="hidden nav:flex flex-1 max-w-xl mx-auto">
					<div class="relative w-full">
						<div class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-content-muted">
							@Icon("search", "h-4 w-4")
						</div>
						<input
							type="text"
							id="header-search"
							placeholder="Search your library…"
							class="input pl-9"
							autocomplete="off"
						/>
					</div>
				</div>

				<!-- Right cluster -->
				<div class="hidden nav:flex items-center gap-1">
					<!-- Theme picker -->
					<div class="relative" x-data="{ themeDropdownOpen: false }">
						<button @click="themeDropdownOpen = !themeDropdownOpen" type="button" class="icon-btn" aria-label="Change theme">
							@Icon("palette", "h-5 w-5")
						</button>
						<div
							x-show="themeDropdownOpen"
							x-cloak
							@click.outside="themeDropdownOpen = false"
							x-transition:enter="transition ease-out duration-150"
							x-transition:enter-start="opacity-0 -translate-y-1"
							x-transition:enter-end="opacity-100 translate-y-0"
							x-transition:leave="transition ease-in duration-100"
							x-transition:leave-start="opacity-100 translate-y-0"
							x-transition:leave-end="opacity-0 -translate-y-1"
							class="absolute right-0 mt-2 w-72 rounded-xl border border-line bg-surface-raised p-3 shadow-pop"
							style="display: none;"
						>
							<p class="px-1 pb-2 text-xs font-semibold uppercase tracking-wide text-content-muted">Theme</p>
							<div class="grid grid-cols-1 gap-1">
								for _, t := range ThemeOptions {
									<button
										@click={ "changeTheme('" + t.Name + "'); themeDropdownOpen = false" }
										type="button"
										class="flex w-full items-center gap-3 rounded-lg px-2 py-2 text-sm text-content transition-colors hover:bg-surface-hover"
										if t.Name == user.Theme {
											class="flex w-full items-center gap-3 rounded-lg bg-surface-hover px-2 py-2 text-sm font-medium text-content"
										}
									>
										<span class="h-4 w-4 shrink-0 rounded-full border border-line" style={ "background-color: " + t.Color }></span>
										<span class="flex-1 text-left">{ t.Label }</span>
										if t.Name == user.Theme {
											@Icon("check", "h-4 w-4 text-brand")
										}
									</button>
								}
							</div>
							<div class="mt-3 border-t border-line pt-3">
								<p class="px-1 pb-2 text-xs font-semibold uppercase tracking-wide text-content-muted">Bookshelf background</p>
								<div class="grid grid-cols-1 gap-1">
									for _, w := range WoodOptions {
										<button
											@click={ "changeWoodPaneling('" + w.Name + "'); themeDropdownOpen = false" }
											type="button"
											data-wood={ w.Name }
											class="wood-paneling-btn flex w-full items-center gap-3 rounded-lg px-2 py-2 text-sm text-content transition-colors hover:bg-surface-hover"
										>
											if w.Name == "none" {
												<span class="h-4 w-4 shrink-0 rounded-full border border-line bg-surface"></span>
											} else {
												<span
													class="h-4 w-4 shrink-0 rounded-full border border-line"
													style={ "background-image: url('/static/textures/" + w.Name + ".png'); background-size: cover;" }
												></span>
											}
											<span class="flex-1 text-left">{ w.Label }</span>
										</button>
									}
								</div>
							</div>
						</div>
					</div>

					<!-- User menu / login -->
					<div class="relative" x-data="{ userMenuOpen: false }">
						if user.ID != "" {
							<button @click="userMenuOpen = !userMenuOpen" type="button" class="flex items-center gap-2 rounded-lg p-1.5 pr-2 text-content transition-colors hover:bg-surface-hover" aria-label="Account menu">
								<span class="flex h-8 w-8 items-center justify-center rounded-full bg-brand/15 text-brand">
									@Icon("user", "h-5 w-5")
								</span>
								<span class="hidden sm:block text-sm font-medium">{ user.Username }</span>
							</button>
							<div
								x-show="userMenuOpen"
								x-cloak
								@click.outside="userMenuOpen = false"
								x-transition:enter="transition ease-out duration-150"
								x-transition:enter-start="opacity-0 -translate-y-1"
								x-transition:enter-end="opacity-100 translate-y-0"
								x-transition:leave="transition ease-in duration-100"
								x-transition:leave-start="opacity-100 translate-y-0"
								x-transition:leave-end="opacity-0 -translate-y-1"
								class="absolute right-0 mt-2 w-52 rounded-xl border border-line bg-surface-raised p-1.5 shadow-pop"
								style="display: none;"
							>
								<div class="px-3 py-2">
									<p class="text-sm font-semibold text-content">{ user.Username }</p>
									if user.Email != "" {
										<p class="truncate text-xs text-content-muted">{ user.Email }</p>
									}
								</div>
								<div class="my-1 border-t border-line"></div>
								<a href="/profile" class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-content transition-colors hover:bg-surface-hover">
									@Icon("user", "h-4 w-4 text-content-muted")
									Profile
								</a>
								if user.Role == "admin" {
									<a href="/admin" class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-content transition-colors hover:bg-surface-hover">
										@Icon("shield", "h-4 w-4 text-content-muted")
										Admin Panel
									</a>
								}
								<div class="my-1 border-t border-line"></div>
								<button @click="logout()" type="button" class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-danger transition-colors hover:bg-danger/10">
									@Icon("logout", "h-4 w-4")
									Logout
								</button>
							</div>
						} else {
							<button @click="userMenuOpen = !userMenuOpen" type="button" class="flex items-center gap-2 rounded-lg p-1.5 pr-2 text-content transition-colors hover:bg-surface-hover" aria-label="Login">
								<span class="flex h-8 w-8 items-center justify-center rounded-full bg-brand/15 text-brand">
									@Icon("user", "h-5 w-5")
								</span>
								<span class="hidden sm:block text-sm font-medium">Login</span>
							</button>
							<div
								x-show="userMenuOpen"
								x-cloak
								@click.outside="userMenuOpen = false"
								x-transition:enter="transition ease-out duration-150"
								x-transition:enter-start="opacity-0 -translate-y-1"
								x-transition:enter-end="opacity-100 translate-y-0"
								x-transition:leave="transition ease-in duration-100"
								x-transition:leave-start="opacity-100 translate-y-0"
								x-transition:leave-end="opacity-0 -translate-y-1"
								class="absolute right-0 mt-2 w-72 rounded-xl border border-line bg-surface-raised p-4 shadow-pop"
								style="display: none;"
							>
								@HeaderLoginForm("", currentPath)
							</div>
						}
					</div>
				</div>

				<!-- Mobile menu toggle -->
				<button
					@click="mobileMenuOpen = !mobileMenuOpen"
					type="button"
					class="icon-btn nav:hidden"
					aria-label="Toggle menu"
				>
					@Icon("menu", "h-5 w-5")
				</button>
			</div>
		</div>

		<!-- Mobile drawer -->
		<div
			x-show="mobileMenuOpen"
			x-cloak
			@click.outside="mobileMenuOpen = false"
			x-data="{ mobileThemeOpen: false }"
			x-transition:enter="transition ease-out duration-200"
			x-transition:enter-start="opacity-0 -translate-y-2"
			x-transition:enter-end="opacity-100 translate-y-0"
			x-transition:leave="transition ease-in duration-150"
			x-transition:leave-start="opacity-100 translate-y-0"
			x-transition:leave-end="opacity-0 -translate-y-2"
			class="nav:hidden border-t border-line bg-surface-raised"
			style="display: none;"
		>
			<div class="space-y-1 px-4 py-4">
				<!-- Mobile search -->
				<div class="relative mb-3">
					<div class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-content-muted">
						@Icon("search", "h-4 w-4")
					</div>
					<input
						type="text"
						id="header-search-mobile"
						placeholder="Search your library…"
						class="input pl-9"
						autocomplete="off"
					/>
				</div>

				<a href="/dashboard" class={ navItemClass(currentPath, "/dashboard") }>@Icon("library", "h-4 w-4") Library</a>
				<a href="/bookshelf" class={ navItemClass(currentPath, "/bookshelf") }>@Icon("book", "h-4 w-4") All Books</a>
				<a href="/series" class={ navItemClass(currentPath, "/series") }>@Icon("layers", "h-4 w-4") Series</a>
				<a href="/collections" class={ navItemClass(currentPath, "/collections") }>@Icon("folder", "h-4 w-4") Collections</a>
				<a href="/progress" class={ navItemClass(currentPath, "/progress") }>@Icon("clock", "h-4 w-4") Progress</a>
				<a href="/devices" class={ navItemClass(currentPath, "/devices") }>@Icon("device", "h-4 w-4") Devices</a>

				<div class="my-2 border-t border-line"></div>

				<!-- Theme accordion -->
				<button @click="mobileThemeOpen = !mobileThemeOpen" type="button" class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-content transition-colors hover:bg-surface-hover">
					@Icon("palette", "h-4 w-4 text-content-muted")
					<span>Theme</span>
					<svg class={ "ml-auto h-4 w-4 transition-transform " } :class="{ 'rotate-180': mobileThemeOpen }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
					</svg>
				</button>
				<div x-show="mobileThemeOpen" x-cloak x-transition class="space-y-1 pl-3">
					for _, t := range ThemeOptions {
						<button
										@click={ "changeTheme('" + t.Name + "'); mobileThemeOpen = false" }
							type="button"
							class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-content transition-colors hover:bg-surface-hover"
						>
							<span class="h-4 w-4 rounded-full border border-line" style={ "background-color: " + t.Color }></span>
							{ t.Label }
						</button>
					}
					<div class="my-1 border-t border-line"></div>
					for _, w := range WoodOptions {
						<button
							@click={ "changeWoodPaneling('" + w.Name + "'); mobileThemeOpen = false" }
							type="button"
							data-wood={ w.Name }
							class="wood-paneling-btn flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-content transition-colors hover:bg-surface-hover"
						>
							if w.Name == "none" {
								<span class="h-4 w-4 rounded-full border border-line bg-surface"></span>
							} else {
								<span class="h-4 w-4 rounded-full border border-line" style={ "background-image: url('/static/textures/" + w.Name + ".png'); background-size: cover;" }></span>
							}
							{ w.Label }
						</button>
					}
				</div>

				<div class="my-2 border-t border-line"></div>

				if user.ID != "" {
					<a href="/profile" class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-content transition-colors hover:bg-surface-hover">
						@Icon("user", "h-4 w-4 text-content-muted")
						Profile
					</a>
					if user.Role == "admin" {
						<a href="/admin" class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-content transition-colors hover:bg-surface-hover">
							@Icon("shield", "h-4 w-4 text-content-muted")
							Admin Panel
						</a>
					}
					<button @click="logout()" type="button" class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-danger transition-colors hover:bg-danger/10">
						@Icon("logout", "h-4 w-4")
						Logout
					</button>
				} else {
					<div class="rounded-xl border border-line bg-surface p-4">
						@HeaderLoginForm("-mobile", currentPath)
					</div>
				}
			</div>
		</div>
	</nav>
	<script type="module" src="/static/main.js"></script>
}

// HeaderLoginForm renders the compact inline login form used in the header
// dropdown (desktop) and mobile drawer. suffix is appended to element ids so
// the two instances do not collide.
templ HeaderLoginForm(suffix string, currentPath string) {
	<form
		hx-post="/api/auth/login"
		hx-target={ "#login-result" + suffix }
		hx-swap="innerHTML"
		class="space-y-3"
	>
		<input type="hidden" name="redirect" value={ currentPath }/>
		<div>
			<label class="mb-1 block text-xs font-medium text-content-muted">Email or Username</label>
			<input type="text" name="login" class="input" required/>
		</div>
		<div>
			<label class="mb-1 block text-xs font-medium text-content-muted">Password</label>
			<input type="password" name="password" class="input" required/>
		</div>
		<button type="submit" class="btn btn-primary w-full">Sign In</button>
	</form>
	<div id={ "login-result" + suffix }></div>
	<div class="my-3 border-t border-line"></div>
	<a href="/register" class="block text-center text-sm text-content-muted transition-colors hover:text-content">
		Don't have an account? Sign Up
	</a>
}