<script lang="ts">
	import { Bell, Search, Menu, User, Settings, LogOut, ChevronDown } from 'lucide-svelte';
	import type { MemberWithDues } from '$lib/types/database';

	interface Props {
		member: MemberWithDues | null;
		title?: string;
		onMenuToggle?: () => void;
	}

	let { member, title = 'Dashboard', onMenuToggle }: Props = $props();

	let showUserMenu = $state(false);

	function toggleUserMenu() {
		showUserMenu = !showUserMenu;
	}

	function closeUserMenu() {
		showUserMenu = false;
	}

	// Close menu when clicking outside
	function handleClickOutside(event: MouseEvent) {
		const target = event.target as HTMLElement;
		if (!target.closest('.user-menu-container')) {
			closeUserMenu();
		}
	}
</script>

<svelte:window onclick={handleClickOutside} />

<header
	class="sticky top-0 z-40 flex h-16 items-center justify-between border-b border-slate-200/50 bg-white/80 px-4 backdrop-blur-sm lg:px-6"
>
	<!-- Mobile menu button -->
	<button
		onclick={onMenuToggle}
		class="rounded-lg p-2 text-slate-500 hover:bg-slate-100 active:bg-slate-200 lg:hidden transition-colors min-h-[44px] min-w-[44px]"
		aria-label="Toggle menu"
	>
		<Menu class="h-5 w-5" />
	</button>

	<!-- Page title -->
	<h1 class="text-lg font-semibold text-slate-900 lg:text-xl truncate max-w-[200px] sm:max-w-none">{title}</h1>

	<!-- Right section -->
	<div class="flex items-center gap-2">
		<!-- Search button -->
		<button
			class="hidden rounded-lg p-2 text-slate-500 hover:bg-slate-100 active:bg-slate-200 sm:block transition-colors min-h-[44px] min-w-[44px]"
			aria-label="Search"
		>
			<Search class="h-5 w-5" />
		</button>

		<!-- Notifications -->
		<button
			class="relative rounded-lg p-2 text-slate-500 hover:bg-slate-100 active:bg-slate-200 transition-colors min-h-[44px] min-w-[44px]"
			aria-label="Notifications"
		>
			<Bell class="h-5 w-5" />
			<!-- Notification badge -->
			<span
				class="absolute right-1 top-1 flex h-2 w-2 items-center justify-center rounded-full bg-monaco-600"
			></span>
		</button>

		<!-- User menu (desktop) -->
		{#if member}
			<div class="user-menu-container relative hidden lg:block">
				<button
					onclick={toggleUserMenu}
					class="flex items-center gap-2 rounded-lg p-2 hover:bg-slate-100 transition-colors"
					aria-expanded={showUserMenu}
					aria-haspopup="true"
					aria-label="User menu"
				>
					{#if member.avatar_url}
						<img
							src={member.avatar_url}
							alt={`${member.first_name} ${member.last_name}`}
							class="h-8 w-8 rounded-full object-cover ring-2 ring-transparent hover:ring-monaco-200"
						/>
					{:else}
						<div
							class="flex h-8 w-8 items-center justify-center rounded-full bg-monaco-100 text-sm font-medium text-monaco-700"
						>
							{member.first_name[0]}{member.last_name[0]}
						</div>
					{/if}
					<ChevronDown class="h-4 w-4 text-slate-400 transition-transform {showUserMenu ? 'rotate-180' : ''}" />
				</button>

				<!-- Dropdown Menu -->
				{#if showUserMenu}
					<div
						class="absolute right-0 top-full mt-2 w-56 origin-top-right rounded-xl border border-slate-200 bg-white py-2 shadow-lg ring-1 ring-black/5"
						role="menu"
					>
						<!-- User info header -->
						<div class="border-b border-slate-100 px-4 pb-3 pt-2">
							<p class="text-sm font-medium text-slate-900">
								{member.first_name} {member.last_name}
							</p>
							<p class="text-xs text-slate-500">{member.email}</p>
							<p class="mt-1 text-xs text-monaco-600">{member.member_id}</p>
						</div>

						<!-- Menu items -->
						<div class="py-1">
							<a
								href="/profile"
								onclick={closeUserMenu}
								class="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-700 hover:bg-slate-50 transition-colors"
								role="menuitem"
							>
								<User class="h-4 w-4 text-slate-400" />
								View Profile
							</a>
							<a
								href="/settings"
								onclick={closeUserMenu}
								class="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-700 hover:bg-slate-50 transition-colors"
								role="menuitem"
							>
								<Settings class="h-4 w-4 text-slate-400" />
								Settings
							</a>
						</div>

						<!-- Sign out -->
						<div class="border-t border-slate-100 pt-1">
							<form method="POST" action="/logout">
								<button
									type="submit"
									class="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-red-600 hover:bg-red-50 transition-colors"
									role="menuitem"
								>
									<LogOut class="h-4 w-4" />
									Sign Out
								</button>
							</form>
						</div>
					</div>
				{/if}
			</div>
		{/if}
	</div>
</header>
