<script lang="ts">
	import {
		X,
		Users,
		DollarSign,
		CalendarPlus,
		Shield,
		Settings,
		LogOut,
		FolderOpen
	} from 'lucide-svelte';
	import type { MemberWithDues } from '$lib/types/database';

	interface Props {
		member: MemberWithDues | null;
		currentPath: string;
		open?: boolean;
		onClose?: () => void;
	}

	let { member, currentPath, open = false, onClose }: Props = $props();

	const isBoard = $derived(member?.role === 'board' || member?.role === 'admin');
	const isAdmin = $derived(member?.role === 'admin');

	// Body scroll lock effect
	$effect(() => {
		if (open) {
			document.body.style.overflow = 'hidden';
		} else {
			document.body.style.overflow = '';
		}
		return () => {
			document.body.style.overflow = '';
		};
	});

	function handleKeydown(event: KeyboardEvent) {
		if (event.key === 'Escape' || event.key === 'Enter' || event.key === ' ') {
			onClose?.();
		}
	}

	const boardNav = [
		{ href: '/board/members', label: 'Members', icon: Users },
		{ href: '/board/dues', label: 'Dues Management', icon: DollarSign },
		{ href: '/board/events', label: 'Manage Events', icon: CalendarPlus }
	];

	const adminNav = [
		{ href: '/admin/members', label: 'User Management', icon: Shield },
		{ href: '/admin/settings', label: 'Settings', icon: Settings }
	];

	const extraNav = [{ href: '/documents', label: 'Documents', icon: FolderOpen }];

	function isActive(href: string) {
		return currentPath.startsWith(href);
	}
</script>

{#if open}
	<!-- Backdrop -->
	<div
		class="fixed inset-0 z-50 bg-black/50 lg:hidden"
		onclick={onClose}
		onkeydown={handleKeydown}
		role="button"
		tabindex="-1"
		aria-label="Close menu"
	></div>

	<!-- Menu panel -->
	<div
		class="fixed inset-y-0 right-0 z-50 w-72 bg-white shadow-xl lg:hidden"
		role="dialog"
		aria-label="Navigation menu"
	>
		<div class="flex h-full flex-col">
			<!-- Header -->
			<div class="flex h-16 items-center justify-between border-b border-slate-200 px-4">
				<span class="font-semibold text-slate-900">Menu</span>
				<button
					onclick={onClose}
					class="rounded-lg p-2 text-slate-500 hover:bg-slate-100"
					aria-label="Close menu"
				>
					<X class="h-5 w-5" />
				</button>
			</div>

			<!-- Navigation -->
			<nav class="flex-1 overflow-y-auto p-4">
				<!-- Extra nav items -->
				<div class="space-y-1">
					{#each extraNav as item}
						{@const Icon = item.icon}
						<a
							href={item.href}
							onclick={onClose}
							class="flex items-center gap-3 rounded-lg px-3 py-3 text-sm min-h-[44px] font-medium transition-colors {isActive(
								item.href
							)
								? 'bg-monaco-100 text-monaco-700'
								: 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'}"
						>
							<Icon class="h-5 w-5" />
							<span>{item.label}</span>
						</a>
					{/each}
				</div>

				<!-- Board Navigation -->
				{#if isBoard}
					<div class="my-4 border-t border-slate-200"></div>
					<p class="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-slate-400">
						Board
					</p>
					<div class="space-y-1">
						{#each boardNav as item}
							{@const Icon = item.icon}
							<a
								href={item.href}
								onclick={onClose}
								class="flex items-center gap-3 rounded-lg px-3 py-3 text-sm min-h-[44px] font-medium transition-colors {isActive(
									item.href
								)
									? 'bg-monaco-100 text-monaco-700'
									: 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'}"
							>
								<Icon class="h-5 w-5" />
								<span>{item.label}</span>
							</a>
						{/each}
					</div>
				{/if}

				<!-- Admin Navigation -->
				{#if isAdmin}
					<div class="my-4 border-t border-slate-200"></div>
					<p class="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-slate-400">
						Admin
					</p>
					<div class="space-y-1">
						{#each adminNav as item}
							{@const Icon = item.icon}
							<a
								href={item.href}
								onclick={onClose}
								class="flex items-center gap-3 rounded-lg px-3 py-3 text-sm min-h-[44px] font-medium transition-colors {isActive(
									item.href
								)
									? 'bg-monaco-100 text-monaco-700'
									: 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'}"
							>
								<Icon class="h-5 w-5" />
								<span>{item.label}</span>
							</a>
						{/each}
					</div>
				{/if}
			</nav>

			<!-- User Section -->
			<div class="border-t border-slate-200 p-4">
				{#if member}
					<div class="mb-3 flex items-center gap-3 rounded-lg bg-slate-50 p-3">
						{#if member.avatar_url}
							<img
								src={member.avatar_url}
								alt={`${member.first_name} ${member.last_name}`}
								class="h-10 w-10 rounded-full object-cover"
							/>
						{:else}
							<div
								class="flex h-10 w-10 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}
						<div class="flex-1 overflow-hidden">
							<p class="truncate text-sm font-medium text-slate-900">
								{member.first_name}
								{member.last_name}
							</p>
							<p class="truncate text-xs text-slate-500">{member.member_id}</p>
						</div>
					</div>
				{/if}

				<form method="POST" action="/logout">
					<button
						type="submit"
						class="flex w-full items-center gap-3 rounded-lg px-3 py-3 text-sm min-h-[44px] font-medium text-slate-600 transition-colors hover:bg-red-50 hover:text-red-600"
					>
						<LogOut class="h-5 w-5" />
						<span>Sign out</span>
					</button>
				</form>
			</div>
		</div>
	</div>
{/if}
