<script lang="ts">
	import { page } from '$app/state';
	import * as m from '$lib/paraglide/messages.js';

	const internalLinks = [
		{ href: '/admin/scrape', label: () => m.admin_nav_scrape() },
		{ href: '/admin/audio', label: () => m.admin_nav_audio() },
		{ href: '/admin/translation', label: () => m.admin_nav_translation() },
		{ href: '/admin/changelog', label: () => m.admin_nav_changelog() },
		{ href: '/admin/image-gen', label: () => m.admin_nav_image_gen() },
		{ href: '/admin/text-gen', label: () => m.admin_nav_text_gen() },
		{ href: '/admin/catalogue-tools', label: () => m.admin_nav_catalogue_tools() },
		{ href: '/admin/ai-jobs', label: () => m.admin_nav_ai_jobs() }
	];

	const externalLinks = [
		{ href: 'https://feedback.libnovel.cc', label: () => m.admin_nav_feedback() },
		{ href: 'https://errors.libnovel.cc', label: () => m.admin_nav_errors() },
		{ href: 'https://analytics.libnovel.cc', label: () => m.admin_nav_analytics() },
		{ href: 'https://logs.libnovel.cc', label: () => m.admin_nav_logs() },
		{ href: 'https://uptime.libnovel.cc', label: () => m.admin_nav_uptime() },
		{ href: 'https://push.libnovel.cc', label: () => m.admin_nav_push() },
		{ href: 'https://grafana.libnovel.cc', label: () => m.admin_nav_grafana() },
		{ href: 'https://gitea.kalekber.cc/kamil/libnovel', label: () => m.admin_nav_gitea() }
	];

	interface Props {
		children?: import('svelte').Snippet;
	}
	let { children }: Props = $props();

	let sidebarOpen = $state(false);
</script>

<!-- Mobile sidebar overlay -->
{#if sidebarOpen}
	<button
		class="fixed inset-0 z-40 bg-black/50 md:hidden"
		onclick={() => (sidebarOpen = false)}
		aria-label="Close sidebar"
	></button>
{/if}

<div class="flex min-h-[calc(100vh-4rem)] gap-0">
	<!-- Sidebar -->
	<aside
		class="
			fixed top-0 left-0 h-full z-50 w-56 shrink-0 border-r border-(--color-border) px-3 py-6 flex flex-col gap-6
			bg-(--color-surface) transition-transform duration-200
			{sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
			md:relative md:translate-x-0 md:w-48 md:z-auto md:top-auto md:h-auto
		"
	>
		<!-- Internal pages -->
		<div>
			<p class="px-2 mb-2 text-xs font-semibold text-(--color-muted) uppercase tracking-widest">{m.admin_pages_label()}</p>
			<nav class="flex flex-col gap-0.5">
				{#each internalLinks as link}
					<a
						href={link.href}
						onclick={() => (sidebarOpen = false)}
						class="px-2 py-1.5 rounded-md text-sm font-medium transition-colors
							{page.url.pathname.startsWith(link.href)
								? 'bg-(--color-surface-2) text-(--color-text)'
								: 'text-(--color-muted) hover:bg-(--color-surface-2)/60 hover:text-(--color-text)'}"
					>
					{link.label()}
					</a>
				{/each}
			</nav>
		</div>

		<!-- External tools -->
		<div>
			<p class="px-2 mb-2 text-xs font-semibold text-(--color-muted) uppercase tracking-widest">{m.admin_tools_label()}</p>
			<nav class="flex flex-col gap-0.5">
				{#each externalLinks as link}
					<a
						href={link.href}
						target="_blank"
						rel="noopener noreferrer"
						class="px-2 py-1.5 rounded-md text-sm font-medium text-(--color-muted) hover:bg-(--color-surface-2)/60 hover:text-(--color-text) transition-colors flex items-center justify-between"
					>
						{link.label()}
						<svg class="w-3 h-3 shrink-0 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
								d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
						</svg>
					</a>
				{/each}
			</nav>
		</div>
	</aside>

	<!-- Main content -->
	<main class="flex-1 min-w-0 px-4 py-6 md:px-8">
		<!-- Mobile nav toggle -->
		<button
			onclick={() => (sidebarOpen = true)}
			class="md:hidden mb-4 flex items-center gap-2 text-sm text-(--color-muted) hover:text-(--color-text) transition-colors"
			aria-label="Open navigation"
		>
			<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
			</svg>
			Admin menu
		</button>

		{@render children?.()}
	</main>
</div>
