<script lang="ts">
	import { goto } from '$app/navigation';
	import { page } from '$app/stores';
	import { theme } from '$lib/stores/theme.svelte';
	import { unreadCounts } from '$lib/stores/unreadCounts.svelte';
	import logoIcon from '$lib/assets/logo-icon.png';
	import type { User } from '../../../app';

	interface Props {
		user: User | null;
		onMenuClick: () => void;
	}

	let { user, onMenuClick }: Props = $props();

	// Show "Nexus" on public routes, "Nexus" on admin routes
	let brandName = $derived($page.url.pathname.startsWith('/admin') ? 'Nexus' : 'Nexus');

	let isAuthenticated = $derived(!!user);
	let isTeamMember = $derived(user?.__typename === 'TeamProfileType');
	let isCustomer = $derived(user?.__typename === 'CustomerProfileType');
	let userRole = $derived(isTeamMember && user?.role ? user.role : null);
	let displayName = $derived(user?.fullName ?? '');

	// Role badge styling
	const roleBadgeStyles: Record<string, string> = {
		ADMIN: 'bg-error-100 text-error-700 dark:bg-error-900 dark:text-error-300',
		TEAM_LEADER: 'bg-warning-100 text-warning-700 dark:bg-warning-900 dark:text-warning-300',
		TEAM_MEMBER: 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300'
	};

	const roleLabels: Record<string, string> = {
		ADMIN: 'Admin',
		TEAM_LEADER: 'Team Leader',
		TEAM_MEMBER: 'Team Member'
	};

	let badgeLabel = $derived.by(() => {
		if (isTeamMember && userRole) {
			return roleLabels[userRole] || userRole;
		}
		if (isCustomer) {
			return 'Customer';
		}
		return null;
	});

	let badgeStyle = $derived.by(() => {
		if (isTeamMember && userRole) {
			return (
				roleBadgeStyles[userRole] || 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300'
			);
		}
		if (isCustomer) {
			return 'bg-accent-100 text-accent-700 dark:bg-accent-900 dark:text-accent-300';
		}
		return '';
	});

	let profileMenuOpen = $state(false);

	function closeProfileMenu() {
		profileMenuOpen = false;
	}

	function handleKeydown(event: KeyboardEvent) {
		if (event.key === 'Escape') {
			profileMenuOpen = false;
		}
	}
</script>

<nav
	class="fixed top-0 right-0 left-0 z-40 h-14 border-b border-theme bg-theme-secondary shadow-theme"
>
	<div class="flex h-full items-center justify-between px-4">
		<div class="flex items-center gap-3">
			<button
				onclick={onMenuClick}
				class="rounded-lg p-2 transition-all duration-150 hover:bg-black/5 active:bg-black/10 dark:hover:bg-white/10 dark:active:bg-white/15"
				aria-label="Open menu"
			>
				<svg
					class="h-6 w-6 text-theme"
					style="fill: none"
					stroke="currentColor"
					viewBox="0 0 24 24"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M4 6h16M4 12h16M4 18h16"
					/>
				</svg>
			</button>
			<a href="/" class="flex items-center gap-2 text-lg font-semibold text-theme">
				<img src={logoIcon} alt="Logo" class="h-8 w-8" />
				{brandName}
			</a>
		</div>

		<div class="flex items-center gap-2">
			{#if isAuthenticated}
				<!-- Messages - hidden on mobile -->
				<a
					href="/messages"
					class="relative hidden rounded-lg p-2 transition-all duration-150 hover:bg-black/5 active:bg-black/10 sm:block dark:hover:bg-white/10 dark:active:bg-white/15"
					aria-label="Messages"
				>
					<svg
						class="h-5 w-5 text-theme-secondary"
						style="fill: none"
						stroke="currentColor"
						viewBox="0 0 24 24"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
						/>
					</svg>
					{#if unreadCounts.messageCount > 0}
						<span
							class="absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-accent-500 px-1 text-[10px] font-semibold text-white"
						>
							{unreadCounts.formattedMessageCount}
						</span>
					{/if}
				</a>

				<!-- Notifications - hidden on mobile -->
				<a
					href="/notifications"
					class="relative hidden rounded-lg p-2 transition-all duration-150 hover:bg-black/5 active:bg-black/10 sm:block dark:hover:bg-white/10 dark:active:bg-white/15"
					aria-label="Notifications"
				>
					<svg
						class="h-5 w-5 text-theme-secondary"
						style="fill: none"
						stroke="currentColor"
						viewBox="0 0 24 24"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
						/>
					</svg>
					{#if unreadCounts.notificationCount > 0}
						<span
							class="absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-accent-500 px-1 text-[10px] font-semibold text-white"
						>
							{unreadCounts.formattedNotificationCount}
						</span>
					{/if}
				</a>
			{/if}

			<!-- Theme Toggle - hidden on mobile -->
			<button
				onclick={() => theme.toggle()}
				class="hidden rounded-lg p-2 transition-all duration-150 hover:bg-black/5 active:bg-black/10 sm:block dark:hover:bg-white/10 dark:active:bg-white/15"
				aria-label="Toggle theme"
			>
				{#if theme.isDark}
					<svg
						class="h-5 w-5 text-theme-secondary"
						style="fill: none"
						stroke="currentColor"
						viewBox="0 0 24 24"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
						/>
					</svg>
				{:else}
					<svg
						class="h-5 w-5 text-theme-secondary"
						style="fill: none"
						stroke="currentColor"
						viewBox="0 0 24 24"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
						/>
					</svg>
				{/if}
			</button>

			{#if badgeLabel}
				<div class="relative flex items-center gap-2">
					<!-- Name - visible on desktop only -->
					{#if displayName}
						<span class="hidden text-sm font-medium text-theme lg:inline">{displayName}</span>
					{/if}
					<button
						onclick={() => (profileMenuOpen = !profileMenuOpen)}
						class="inline-flex cursor-pointer items-center gap-1 rounded-full px-3 py-1.5 text-xs font-semibold tracking-wide uppercase transition-opacity hover:opacity-80 {badgeStyle}"
					>
						{badgeLabel}
						<svg
							class="h-3 w-3 transition-transform duration-150 {profileMenuOpen
								? 'rotate-180'
								: ''}"
							style="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"
							/>
						</svg>
					</button>

					{#if profileMenuOpen}
						<!-- Backdrop -->
						<!-- svelte-ignore a11y_no_static_element_interactions -->
						<div
							class="fixed inset-0 z-50"
							onclick={closeProfileMenu}
							onkeydown={handleKeydown}
						></div>

						<!-- Dropdown Menu -->
						<div
							class="absolute top-full right-0 z-50 mt-2 w-56 overflow-hidden rounded-lg border border-theme bg-theme-card shadow-theme-lg"
						>
							<!-- Name header - visible on tablet and mobile -->
							{#if displayName}
								<div class="border-b border-theme px-4 py-3 lg:hidden">
									<div class="text-sm font-medium text-theme">{displayName}</div>
									<div class="text-xs text-theme-muted">{badgeLabel}</div>
								</div>
							{/if}

							<!-- Profile Link -->
							<a
								href="/profile"
								onclick={closeProfileMenu}
								class="flex items-center gap-2 px-4 py-2.5 text-sm text-theme-secondary transition-colors hover:bg-theme-secondary"
							>
								<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
									<path
										stroke-linecap="round"
										stroke-linejoin="round"
										stroke-width="2"
										d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
									/>
								</svg>
								My Profile
							</a>

							<!-- Account Settings Link -->
							<a
								href="https://account.example.com/"
								target="_blank"
								rel="noopener noreferrer"
								onclick={closeProfileMenu}
								class="flex items-center gap-2 px-4 py-2.5 text-sm text-theme-secondary transition-colors hover:bg-theme-secondary"
							>
								<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
									<path
										stroke-linecap="round"
										stroke-linejoin="round"
										stroke-width="2"
										d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
									/>
									<path
										stroke-linecap="round"
										stroke-linejoin="round"
										stroke-width="2"
										d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
									/>
								</svg>
								My Nexus Account
								<svg
									class="ml-auto h-3 w-3 text-theme-muted"
									style="fill: none"
									stroke="currentColor"
									viewBox="0 0 24 24"
								>
									<path
										stroke-linecap="round"
										stroke-linejoin="round"
										stroke-width="2"
										d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
									/>
								</svg>
							</a>

							<!-- Mobile-only actions -->
							<div class="border-t border-theme sm:hidden">
								<button
									onclick={() => {
										closeProfileMenu();
										goto('/messages');
									}}
									class="flex w-full items-center justify-between px-4 py-2.5 text-sm text-theme-secondary transition-colors hover:bg-theme-secondary"
								>
									<span class="flex items-center gap-2">
										<svg
											class="h-4 w-4"
											style="fill: none"
											stroke="currentColor"
											viewBox="0 0 24 24"
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
											/>
										</svg>
										Messages
									</span>
									{#if unreadCounts.messageCount > 0}
										<span
											class="flex h-5 min-w-5 items-center justify-center rounded-full bg-error-500 px-1.5 text-xs font-semibold text-white"
										>
											{unreadCounts.messageCount > 99 ? '99+' : unreadCounts.messageCount}
										</span>
									{/if}
								</button>

								<button
									onclick={() => {
										closeProfileMenu();
										goto('/notifications');
									}}
									class="flex w-full items-center justify-between px-4 py-2.5 text-sm text-theme-secondary transition-colors hover:bg-theme-secondary"
								>
									<span class="flex items-center gap-2">
										<svg
											class="h-4 w-4"
											style="fill: none"
											stroke="currentColor"
											viewBox="0 0 24 24"
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
											/>
										</svg>
										Notifications
									</span>
									{#if unreadCounts.notificationCount > 0}
										<span
											class="flex h-5 min-w-5 items-center justify-center rounded-full bg-error-500 px-1.5 text-xs font-semibold text-white"
										>
											{unreadCounts.notificationCount > 99 ? '99+' : unreadCounts.notificationCount}
										</span>
									{/if}
								</button>

								<button
									onclick={() => {
										theme.toggle();
										closeProfileMenu();
									}}
									class="flex w-full items-center gap-2 px-4 py-2.5 text-sm text-theme-secondary transition-colors hover:bg-theme-secondary"
								>
									{#if theme.isDark}
										<svg
											class="h-4 w-4"
											style="fill: none"
											stroke="currentColor"
											viewBox="0 0 24 24"
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
											/>
										</svg>
										Light Mode
									{:else}
										<svg
											class="h-4 w-4"
											style="fill: none"
											stroke="currentColor"
											viewBox="0 0 24 24"
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
											/>
										</svg>
										Dark Mode
									{/if}
								</button>
							</div>

							<!-- Sign Out -->
							<div class="border-t border-theme">
								<a
									href="/logout"
									onclick={closeProfileMenu}
									class="flex items-center gap-2 px-4 py-2.5 text-sm text-error-600 transition-colors hover:bg-error-50 dark:text-error-400 dark:hover:bg-error-900/20"
								>
									<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
										<path
											stroke-linecap="round"
											stroke-linejoin="round"
											stroke-width="2"
											d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
										/>
									</svg>
									Sign Out
								</a>
							</div>
						</div>
					{/if}
				</div>
			{:else if !isAuthenticated}
				<a
					href="/login"
					class="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-700"
				>
					Login
				</a>
			{/if}
		</div>
	</div>
</nav>
