<script lang="ts">
	import { page } from '$app/stores'
	import AdminNavBar from '$lib/components/admin/AdminNavBar.svelte'
	import type { LayoutData } from './$types'

	const { children, data } = $props<{ children: any; data: LayoutData }>()

	const currentPath = $derived($page.url.pathname)
	const isLoginRoute = $derived(currentPath === '/admin/login')

	// Pages that should use the card metaphor (no .admin-content wrapper)
	const cardLayoutPages = ['/admin']
	const useCardLayout = $derived(cardLayoutPages.includes(currentPath))
</script>

{#if isLoginRoute}
	<!-- On login page, show children without layout -->
	{@render children()}
{:else if !data.user}
	<!-- Server loader should redirect, but provide fallback -->
	<div class="loading">Redirecting to login...</div>
{:else}
	<!-- Authenticated, show admin layout -->
	<div class="admin-container">
		<AdminNavBar />

		{#if useCardLayout}
			<main class="admin-card-layout">
				{@render children()}
			</main>
		{:else}
			<main class="admin-content">
				{@render children()}
			</main>
		{/if}
	</div>
{/if}

<style lang="scss">
	.loading {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
		font-size: 1.125rem;
		color: $gray-40;
	}

	.admin-container {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: $bg-color;
	}

	.admin-content {
		flex: 1;
	}

	.admin-card-layout {
		flex: 1;
		background: $gray-90;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		padding: $unit-6x $unit-4x;
		min-height: calc(100vh - 60px); // Account for navbar
	}
</style>
