<script lang="ts">
	import Header from '$lib/components/layout/Header.svelte';
	import { currentUser } from '$lib/stores/user';
	import { goto } from '$app/navigation';
	import { onMount } from 'svelte';

	onMount(() => {
		if (!$currentUser || $currentUser.allianceRole !== 'admin') {
			goto('/');
		}
	});
</script>

<svelte:head>
	<title>Admin Dashboard - openplace</title>
</svelte:head>

<div class="bg-base-200 min-h-screen">
	<header class="bg-base-100 border-base-300 sticky top-0 z-20 border-b">
		<div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-3">
			<a class="flex items-center gap-2" href="/">
				<div class="flex items-center gap-1.5 h-7 w-auto">
					<span class="text-base-content/80 text-lg font-semibold">Admin</span>
				</div>
			</a>
			<div></div>
		</div>
		<nav class="mx-auto max-w-7xl px-4">
			<div class="tabs tabs-border flex items-center gap-2 overflow-auto">
				<a href="/admin" data-sveltekit-prefetch class="tab font-semibold tab-active">Dashboard</a>
				<a href="/admin/users" data-sveltekit-prefetch class="tab font-semibold">Users</a>
				<a href="/admin/alliances" data-sveltekit-prefetch class="tab font-semibold">Alliances</a>
			</div>
		</nav>
	</header>

	<main class="mx-auto max-w-7xl px-4 py-4">
		<div>
			<section class="rounded-box bg-base-100 border-base-300 border p-4 shadow">
				<h2 class="text-xl font-semibold">Dashboard</h2>
				<p class="text-base-content/80 mt-1">Admin dashboard content coming soon...</p>
			</section>
		</div>
	</main>
</div>
