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

	type NavIconName =
		| 'customers'
		| 'accounts'
		| 'services'
		| 'projects'
		| 'scopes'
		| 'reports'
		| 'invoices'
		| 'calendar';
	type NavItem = { label: string; href: string; icon: NavIconName; color: string };

	// Left nav items (before FAB)
	const leftItems: NavItem[] = [
		{ label: 'Customers', href: '/admin/customers', icon: 'customers', color: 'accent3' },
		{ label: 'Accounts', href: '/admin/accounts', icon: 'accounts', color: 'primary' },
		{ label: 'Services', href: '/admin/services', icon: 'services', color: 'secondary' },
		{ label: 'Projects', href: '/admin/projects', icon: 'projects', color: 'accent' }
	];

	// Right nav items (after FAB)
	const rightItems: NavItem[] = [
		{ label: 'Scopes', href: '/admin/scopes', icon: 'scopes', color: 'accent3' },
		{ label: 'Reports', href: '/admin/reports', icon: 'reports', color: 'accent2' },
		{ label: 'Invoices', href: '/admin/invoices', icon: 'invoices', color: 'accent' },
		{ label: 'Calendar', href: '/admin/calendar', icon: 'calendar', color: 'primary' }
	];

	// Add menu state
	let addMenuOpen = $state(false);

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

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

	function getActiveColor(color: string): string {
		return `text-${color}-600 dark:text-${color}-400`;
	}

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

<svelte:window
	on:click={(e) => {
		if (addMenuOpen) closeMenu();
	}}
/>

<nav class="pb-safe fixed inset-x-0 bottom-0 z-30 border-t border-theme bg-theme-secondary">
	<div class="relative mx-auto flex h-20 items-center justify-between px-2 sm:h-16 sm:px-4">
		<!-- Left items -->
		<div class="grid flex-1 grid-cols-2 gap-x-1 gap-y-0.5 sm:flex sm:justify-end sm:gap-4">
			{#each leftItems 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
						? getActiveColor(item.color)
						: '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 FAB -->
		<div class="relative mx-2 flex shrink-0 items-center justify-center sm:mx-4">
			<!-- Add Menu Dropdown -->
			{#if addMenuOpen}
				<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"
					onclick={(e) => e.stopPropagation()}
					onkeydown={(e) => e.stopPropagation()}
					role="menu"
					tabindex="-1"
				>
					{#each addMenuItems as menuItem (menuItem.label)}
						<a
							href={menuItem.href}
							class="block px-4 py-3 text-sm text-theme transition-colors hover:bg-theme-secondary"
							onclick={closeMenu}
							role="menuitem"
						>
							{menuItem.label}
						</a>
					{/each}
				</div>
			{/if}

			<button
				type="button"
				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'
					: ''}"
				onclick={(e) => {
					e.stopPropagation();
					addMenuOpen = !addMenuOpen;
				}}
				aria-label="Add new item"
				aria-expanded={addMenuOpen}
			>
				<svg class="h-7 w-7" 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>
		</div>

		<!-- Right items -->
		<div class="grid flex-1 grid-cols-2 gap-x-1 gap-y-0.5 sm:flex sm:justify-start sm:gap-4">
			{#each rightItems 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
						? getActiveColor(item.color)
						: '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>
