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

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

	const navItems = [
		{ href: '/admin', label: 'Dashboard', icon: '📊' },
		{ href: '/admin/characters', label: 'Characters', icon: '🗣️' },
		{ href: '/admin/character-changes', label: 'Changes', icon: '🔄' },
		{ href: '/admin/devil-fruits', label: 'Devil Fruits', icon: '🍎' },
		{ href: '/admin/arcs', label: 'Arcs', icon: '📚' },
		{ href: '/admin/users', label: 'Users', icon: '👥' },
		{ href: '/admin/config', label: 'Settings', icon: '⚙️' }
	];

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

<div class="flex min-h-screen bg-slate-900">
	<!-- Sidebar -->
	<aside class="flex flex-col w-64 border-r border-white/5 bg-slate-950">
		<div class="p-6">
			<h2 class="text-lg font-black uppercase tracking-[0.15em] text-amber-50">Admin</h2>
		</div>
		<nav class="flex-1 space-y-2 px-3">
			{#each navItems as item (item.label)}
				<a
					href={resolve(item.href)}
					class={`flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium transition-colors ${
						isActive(item.href, $page.url.pathname)
							? 'bg-amber-600 text-white'
							: 'text-gray-300 hover:bg-slate-800 hover:text-white'
					}`}
				>
					<span>{item.icon}</span>
					<span>{item.label}</span>
				</a>
			{/each}
		</nav>
		<div class="border-t border-white/5 p-3">
			<a
				href={resolve('/')}
				class="flex items-center gap-2 rounded-lg px-4 py-3 text-sm font-medium text-gray-300 transition-colors hover:bg-slate-800 hover:text-white"
				title="Return to site"
			>
				<span>←</span>
				<span>Retour au site</span>
			</a>
		</div>
	</aside>

	<!-- Main content -->
	<main class="flex-1">
		<div class="flex items-center justify-between border-b border-white/5 bg-slate-950 px-8 py-4">
			<h1 class="text-2xl font-bold text-white">Admin Dashboard</h1>
			<ProfileButton user={data.user} />
		</div>
		<div class="p-8">
			{@render children()}
		</div>
	</main>
</div>
