<script lang="ts">
	import { page } from '$app/state';
	import type { Snippet } from 'svelte';
	import { BACKOFFICE_ROLE_LABELS } from '$lib/constants/backoffice-role';
	import type { LayoutData } from './$types';

	interface Props {
		data: LayoutData;
		children: Snippet;
	}

	let { data, children }: Props = $props();

	const menuItems = $derived(data.menuItems);

	function isActive(href: string, exact: boolean): boolean {
		if (exact) return page.url.pathname === href;
		return page.url.pathname === href || page.url.pathname.startsWith(`${href}/`);
	}
</script>

{#if data.isPublic}
	{@render children()}
{:else}
	<div class="flex min-h-screen bg-slate-100">
		<aside class="sticky top-0 hidden h-screen w-64 shrink-0 flex-col border-r border-slate-200 bg-slate-900 lg:flex">
			<div class="border-b border-slate-700/50 bg-gradient-to-br from-violet-600/20 to-indigo-600/10 p-6">
				<a href="/backoffice" class="flex items-center gap-3">
					<div
						class="flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br from-violet-500 to-indigo-600 text-xl text-white shadow-lg shadow-violet-500/25"
					>
						⚙️
					</div>
					<div>
						<p class="font-bold text-white">Back Office</p>
						<p class="text-xs text-slate-400">Catatan Warung</p>
					</div>
				</a>
			</div>

			<nav class="flex-1 space-y-1 p-4">
				<p class="mb-2 px-3 text-[10px] font-bold uppercase tracking-wider text-slate-500">Manajemen</p>
				{#each menuItems as item}
					<a
						href={item.href}
						class="flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium transition-all {isActive(
							item.href,
							item.exact
						)
							? 'bg-gradient-to-r from-violet-600 to-indigo-600 text-white shadow-md'
							: 'text-slate-400 hover:bg-slate-800 hover:text-white'}"
					>
						<span>{item.icon}</span>
						{item.label}
					</a>
				{/each}
			</nav>

			<div class="border-t border-slate-700/50 p-4">
				<div class="rounded-xl border border-slate-700 bg-slate-800/50 p-3">
					<p class="truncate text-sm font-semibold text-white">{data.backofficeUser?.nama}</p>
					<p class="truncate text-xs text-slate-400">{data.backofficeUser?.email}</p>
					{#if data.backofficeUser?.role}
						<span class="badge badge-outline badge-xs mt-2 border-violet-400/50 text-violet-300">
							{BACKOFFICE_ROLE_LABELS[data.backofficeUser.role]}
						</span>
					{/if}
				</div>
				<form method="POST" action="/backoffice/logout" class="mt-3">
					<button type="submit" class="btn btn-ghost btn-sm w-full justify-start text-rose-400 hover:bg-rose-500/10">
						🚪 Keluar
					</button>
				</form>
			</div>
		</aside>

		<div class="flex min-w-0 flex-1 flex-col">
			<header class="flex items-center justify-between border-b border-slate-200 bg-white px-4 py-4 lg:px-8">
				<div class="lg:hidden">
					<p class="font-bold text-slate-800">Back Office</p>
				</div>
				<div class="hidden lg:block">
					<p class="text-xs font-semibold uppercase tracking-wider text-slate-400">Panel Administrator</p>
				</div>
				<div class="flex items-center gap-2">
					<span class="badge badge-success badge-sm gap-1">
						<span class="h-1.5 w-1.5 rounded-full bg-success"></span>
						Online
					</span>
					<form method="POST" action="/backoffice/logout" class="lg:hidden">
						<button type="submit" class="btn btn-ghost btn-sm text-rose-500">Keluar</button>
					</form>
				</div>
			</header>

			<nav class="flex gap-2 overflow-x-auto border-b border-slate-200 bg-white px-4 py-2 lg:hidden">
				{#each menuItems as item}
					<a
						href={item.href}
						class="btn btn-sm shrink-0 {isActive(item.href, item.exact) ? 'btn-primary' : 'btn-ghost'}"
					>
						{item.icon} {item.label}
					</a>
				{/each}
			</nav>

			<main class="flex-1 bg-gradient-to-br from-slate-100 via-white to-slate-50">
				{@render children()}
			</main>
		</div>
	</div>
{/if}
