<script lang="ts">
	import { page } from '$app/state';
	import NavIcon from '$lib/components/icons/NavIcon.svelte';

	let addMenuOpen = $state(false);

	type NavIconName =
		| 'customers'
		| 'accounts'
		| 'services'
		| 'projects'
		| 'scopes'
		| 'reports'
		| 'invoices'
		| 'calendar';

	const leftNavItems: { label: string; href: string; icon: NavIconName; activeColor: string }[] = [
		{
			label: 'Customers',
			href: '/admin/customers',
			icon: 'customers',
			activeColor: 'text-accent3-600 dark:text-accent3-400'
		},
		{
			label: 'Accounts',
			href: '/admin/accounts',
			icon: 'accounts',
			activeColor: 'text-primary-600 dark:text-primary-400'
		},
		{
			label: 'Services',
			href: '/admin/services',
			icon: 'services',
			activeColor: 'text-secondary-600 dark:text-secondary-400'
		},
		{
			label: 'Projects',
			href: '/admin/projects',
			icon: 'projects',
			activeColor: 'text-accent-600 dark:text-accent-400'
		}
	];

	const rightNavItems: { label: string; href: string; icon: NavIconName; activeColor: string }[] = [
		{
			label: 'Scopes',
			href: '/admin/scopes',
			icon: 'scopes',
			activeColor: 'text-accent3-600 dark:text-accent3-400'
		},
		{
			label: 'Reports',
			href: '/admin/reports',
			icon: 'reports',
			activeColor: 'text-accent2-600 dark:text-accent2-400'
		},
		{
			label: 'Invoices',
			href: '/admin/invoices',
			icon: 'invoices',
			activeColor: 'text-accent6-600 dark:text-accent6-400'
		},
		{
			label: 'Calendar',
			href: '/admin/calendar',
			icon: 'calendar',
			activeColor: 'text-accent7-600 dark:text-accent7-400'
		}
	];

	const addMenuItems = [
		{ label: 'Add a Customer', href: '/admin/customers?action=create' },
		{ label: 'Add an Account', href: '/admin/accounts?action=create' },
		{ label: 'Schedule a Service', href: '/admin/services?action=create' },
		{ label: 'Schedule a Project', href: '/admin/projects?action=create' },
		{ label: 'Create a Report', href: '/admin/reports?action=create' },
		{ label: 'Create an Invoice', href: '/admin/invoices?action=create' }
	];

	function isActive(href: string): boolean {
		return page.url.pathname === href || page.url.pathname.startsWith(href + '/');
	}

	function closeAddMenu() {
		addMenuOpen = false;
	}
</script>

<svelte:window onkeydown={(e) => e.key === 'Escape' && addMenuOpen && closeAddMenu()} />

<nav class="sticky bottom-0 z-30 border-t border-theme bg-theme-secondary">
	<div class="mx-auto my-2 flex h-20 items-center justify-center px-2 sm:my-0 sm:h-16 sm:px-4">
		<!-- Left nav items - 2x2 grid on mobile, row on desktop -->
		<div
			class="grid w-[calc(50%-2.25rem)] grid-cols-2 gap-x-1 gap-y-0.5 sm:flex sm:w-auto sm:flex-1 sm:items-center sm:justify-end sm:gap-4"
		>
			{#each leftNavItems as item (item.href)}
				{@const active = isActive(item.href)}
				<a
					href={item.href}
					class="flex flex-col items-center justify-center rounded-lg px-1 py-1 transition-all duration-200 sm:px-3 sm:py-1.5 {active
						? item.activeColor
						: 'text-theme-muted hover:text-theme-secondary'}"
					aria-current={active ? 'page' : undefined}
				>
					<NavIcon name={item.icon} class="h-5 w-5 sm:h-6 sm:w-6" />
					<span class="mt-0.5 text-[8px] font-semibold sm:text-[10px]">{item.label}</span>
				</a>
			{/each}
		</div>

		<!-- Center add button -->
		<div class="relative z-40 mx-3 flex shrink-0 items-center sm:mx-4">
			<button
				onclick={() => (addMenuOpen = !addMenuOpen)}
				class="flex h-14 w-14 items-center justify-center rounded-full bg-primary-500 text-white shadow-lg transition-all duration-200 hover:bg-primary-600 active:bg-primary-700 {addMenuOpen
					? 'rotate-45'
					: ''}"
				aria-label="Add new"
			>
				<svg
					class="h-7 w-7 transition-transform duration-200"
					style="fill: none"
					stroke="currentColor"
					viewBox="0 0 24 24"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M12 4v16m8-8H4"
					/>
				</svg>
			</button>

			<!-- Add menu popup -->
			{#if addMenuOpen}
				<!-- svelte-ignore a11y_no_static_element_interactions -->
				<div
					class="fixed inset-0 z-40"
					onclick={closeAddMenu}
					onkeydown={(e) => e.key === 'Escape' && closeAddMenu()}
				></div>
				<div
					class="absolute bottom-full left-1/2 z-50 mb-3 w-56 -translate-x-1/2 overflow-hidden rounded-xl border border-theme bg-theme-card shadow-theme-lg"
				>
					<div class="py-2">
						{#each addMenuItems as item (item.href)}
							<a
								href={item.href}
								onclick={closeAddMenu}
								class="flex items-center gap-3 interactive px-4 py-2.5 text-sm text-theme-secondary"
							>
								<svg
									class="h-5 w-5 text-primary-500"
									style="fill: none"
									stroke="currentColor"
									viewBox="0 0 24 24"
								>
									<path
										stroke-linecap="round"
										stroke-linejoin="round"
										stroke-width="1.5"
										d="M12 4v16m8-8H4"
									/>
								</svg>
								{item.label}
							</a>
						{/each}
					</div>
				</div>
			{/if}
		</div>

		<!-- Right nav items - 2x2 grid on mobile, row on desktop -->
		<div
			class="grid w-[calc(50%-2.25rem)] grid-cols-2 gap-x-1 gap-y-0.5 sm:flex sm:w-auto sm:flex-1 sm:items-center sm:justify-start sm:gap-4"
		>
			{#each rightNavItems as item (item.href)}
				{@const active = isActive(item.href)}
				<a
					href={item.href}
					class="flex flex-col items-center justify-center rounded-lg px-1 py-1 transition-all duration-200 sm:px-3 sm:py-1.5 {active
						? item.activeColor
						: 'text-theme-muted hover:text-theme-secondary'}"
					aria-current={active ? 'page' : undefined}
				>
					<NavIcon name={item.icon} class="h-5 w-5 sm:h-6 sm:w-6" />
					<span class="mt-0.5 text-[8px] font-semibold sm:text-[10px]">{item.label}</span>
				</a>
			{/each}
		</div>
	</div>
</nav>
