<script lang="ts">
	import { page } from '$app/state';
	import OutlineIcon from '$lib/components/ui/OutlineIcon.svelte';
	import {
		filterMemberNavItems,
		isMemberNavActive,
		MEMBER_NAV_ITEMS
	} from '$lib/constants/member-nav';

	interface Props {
		memberName: string;
		memberEmail: string;
		onNavigate?: () => void;
	}

	let { memberName, memberEmail, onNavigate }: Props = $props();

	const menuItems = $derived(
		filterMemberNavItems(MEMBER_NAV_ITEMS, { pakaiStok: page.data.pakaiStok })
	);

	function handleNavClick() {
		onNavigate?.();
	}
</script>

<div class="flex h-full flex-col bg-base-100">
	<div class="border-b border-base-300 bg-gradient-to-br from-emerald-50/80 to-teal-50/50 p-5">
		<a href="/dashboard" class="flex items-center gap-3" onclick={handleNavClick}>
			<div class="icon-ring icon-ring-rounded icon-ring-sm icon-ring-emerald">
				<OutlineIcon name="store" size="sm" />
			</div>
			<div>
				<p class="font-bold text-base-content">Catatan Warung</p>
				<p class="text-xs text-base-content/50">Manajemen Toko</p>
			</div>
		</a>
	</div>

	<nav class="flex-1 space-y-1 overflow-y-auto p-4">
		<p class="mb-2 px-3 text-[10px] font-bold uppercase tracking-wider text-base-content/35">
			Menu Lengkap
		</p>
		{#each menuItems as item}
			{@const active = isMemberNavActive(page.url.pathname, item.href)}
			<a
				href={item.href}
				class="group flex w-full items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium transition-all {active
					? 'bg-gradient-to-r from-emerald-500 to-teal-600 text-white shadow-md shadow-emerald-500/20'
					: 'text-base-content/60 hover:bg-base-200 hover:text-base-content'}"
				aria-current={active ? 'page' : undefined}
				onclick={handleNavClick}
			>
				<OutlineIcon
					name={item.icon}
					size="sm"
					filled={active}
					class="transition-transform group-hover:scale-110"
				/>
				{item.label}
			</a>
		{/each}
	</nav>

	<div class="border-t border-base-300 bg-base-200/40 p-4">
		<div class="flex items-center gap-3 rounded-xl border border-base-300/60 bg-base-100 p-3 shadow-sm">
			<div class="icon-ring icon-ring-circle icon-ring-xs icon-ring-emerald text-sm font-bold">
				{memberName.charAt(0).toUpperCase()}
			</div>
			<div class="min-w-0 flex-1">
				<p class="truncate text-sm font-semibold">{memberName}</p>
				<p class="truncate text-xs text-base-content/50">{memberEmail}</p>
			</div>
		</div>
		<form method="POST" action="/logout" class="mt-3">
			<button
				type="submit"
				class="btn btn-ghost btn-sm w-full justify-start gap-2 text-rose-600 hover:bg-rose-50"
			>
				<OutlineIcon name="logout" size="sm" />
				Keluar
			</button>
		</form>
	</div>
</div>
