<script lang="ts">
	import {
		LayoutDashboard,
		User,
		Calendar,
		CreditCard,
		Users,
		FileText,
		Settings,
		Settings2,
		LogOut,
		ChevronLeft,
		ChevronRight,
		Shield,
		FolderOpen,
		DollarSign,
		CalendarPlus
	} from 'lucide-svelte';
	import type { MemberWithDues } from '$lib/types/database';

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

	let { member, currentPath, collapsed = false, onToggle }: Props = $props();

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

	interface NavItem {
		href: string;
		label: string;
		icon: typeof LayoutDashboard;
		badge?: string;
	}

	const memberNav: NavItem[] = [
		{ href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
		{ href: '/profile', label: 'My Profile', icon: User },
		{ href: '/events', label: 'Events', icon: Calendar },
		{ href: '/payments', label: 'Payments', icon: CreditCard },
		{ href: '/documents', label: 'Documents', icon: FolderOpen },
		{ href: '/settings', label: 'Settings', icon: Settings2 }
	];

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

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

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

<aside
	class="flex h-full flex-col border-r border-slate-200/50 bg-white/80 backdrop-blur-sm transition-all duration-300 motion-reduce:transition-none {collapsed
		? 'w-16'
		: 'w-64'}"
>
	<!-- Logo -->
	<div class="flex h-16 items-center justify-between border-b border-slate-200/50 px-4">
		{#if !collapsed}
			<a href="/" class="flex items-center gap-2">
				<img
					src="/MONACOUSA-Flags_376x376.png"
					alt="Monaco USA"
					class="h-8 w-8 rounded-lg object-contain"
				/>
				<span class="font-semibold text-slate-900">Monaco USA</span>
			</a>
		{:else}
			<a href="/" class="flex items-center justify-center">
				<img
					src="/MONACOUSA-Flags_376x376.png"
					alt="Monaco USA"
					class="h-8 w-8 rounded-lg object-contain"
				/>
			</a>
		{/if}
		<button
			onclick={onToggle}
			class="rounded-lg p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-colors"
			aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
		>
			{#if collapsed}
				<ChevronRight class="h-4 w-4" />
			{:else}
				<ChevronLeft class="h-4 w-4" />
			{/if}
		</button>
	</div>

	<!-- Navigation -->
	<nav class="flex-1 overflow-y-auto p-3">
		<!-- Member Navigation -->
		<div class="space-y-1">
			{#each memberNav as item}
				{@const Icon = item.icon}
				<a
					href={item.href}
					class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors {isActive(
						item.href
					)
						? 'bg-monaco-100 text-monaco-700'
						: 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'}"
					title={collapsed ? item.label : undefined}
				>
					<Icon class="h-5 w-5 flex-shrink-0" />
					{#if !collapsed}
						<span>{item.label}</span>
					{/if}
				</a>
			{/each}
		</div>

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

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

	<!-- User Section -->
	<div class="border-t border-slate-200/50 p-3">
		{#if member && !collapsed}
			<div class="mb-3 flex items-center gap-3 rounded-lg bg-slate-50 p-2">
				{#if member.avatar_url}
					<img
						src={member.avatar_url}
						alt={`${member.first_name} ${member.last_name}`}
						class="h-9 w-9 rounded-full object-cover"
					/>
				{:else}
					<div
						class="flex h-9 w-9 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>
		{:else if member && collapsed}
			<div class="mb-3 flex justify-center">
				{#if member.avatar_url}
					<img
						src={member.avatar_url}
						alt={`${member.first_name} ${member.last_name}`}
						class="h-9 w-9 rounded-full object-cover"
						title={`${member.first_name} ${member.last_name}`}
					/>
				{:else}
					<div
						class="flex h-9 w-9 items-center justify-center rounded-full bg-monaco-100 text-sm font-medium text-monaco-700"
						title={`${member.first_name} ${member.last_name}`}
					>
						{member.first_name[0]}{member.last_name[0]}
					</div>
				{/if}
			</div>
		{/if}

		<form method="POST" action="/logout">
			<button
				type="submit"
				class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-red-50 hover:text-red-600"
				title={collapsed ? 'Sign out' : undefined}
			>
				<LogOut class="h-5 w-5 flex-shrink-0" />
				{#if !collapsed}
					<span>Sign out</span>
				{/if}
			</button>
		</form>
	</div>
</aside>
