<script lang="ts">
	import '../app.css';
	import { goto } from '$app/navigation';
	import { page } from '$app/stores';
	import favicon from '$lib/assets/favicon.svg';

	const props = $props();
	const children = $derived(props.children);
	const data = $derived(props.data);
	let ui = $state({
		loggedIn: false,
		loggingOut: false,
		message: ''
	});

	$effect(() => {
		ui.loggedIn = Boolean(data?.isLoggedIn);
	});

	async function handleLogout() {
		if (ui.loggingOut) return;
		ui.loggingOut = true;
		ui.message = '';

		try {
			const response = await fetch('/api/logout', { method: 'POST' });
			if (!response.ok) {
				const body = await response.json().catch(() => ({}));
				ui.message = body.message ?? 'Kunde inte logga ut. Försök igen.';
			} else {
				ui.loggedIn = false;
				await goto('/login', { invalidateAll: true });
			}
		} catch (err) {
			console.error('Logout failed', err);
			ui.message = 'Ett oväntat fel uppstod vid utloggning.';
		} finally {
			ui.loggingOut = false;
		}
	}
</script>

<svelte:head>
	<link rel="icon" href={favicon} />
</svelte:head>

<div class="min-h-screen bg-slate-100 text-slate-900">
	<header class="border-b border-slate-200 bg-white">
		<div class="mx-auto flex max-w-5xl flex-col gap-4 px-4 py-4 sm:flex-row sm:items-center sm:justify-between">
					<div>
						<p class="text-sm font-medium uppercase tracking-wide text-slate-500">VBytes</p>
						<h1 class="text-xl font-semibold text-slate-900">Gästhantering</h1>
					</div>
			{#if ui.loggedIn}
					<div class="flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:gap-4">
						<nav class="flex items-center gap-2">
							<a
								href="/"
								class={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${
									$page.url.pathname === '/'
										? 'bg-indigo-600 text-white shadow'
										: 'text-slate-600 hover:bg-slate-100'
								}`}
							>
								Checka in
							</a>
					<a
						href="/checkout"
						class={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${
							$page.url.pathname === '/checkout'
								? 'bg-indigo-600 text-white shadow'
								: 'text-slate-600 hover:bg-slate-100'
						}`}
					>
						Checka ut
					</a>
					<a
						href="/create"
						class={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${
							$page.url.pathname === '/create'
								? 'bg-indigo-600 text-white shadow'
								: 'text-slate-600 hover:bg-slate-100'
						}`}
					>
						Lägg till
					</a>
					<a
						href="/inside-status"
						class={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${
							$page.url.pathname === '/inside-status'
								? 'bg-indigo-600 text-white shadow'
								: 'text-slate-600 hover:bg-slate-100'
						}`}
					>
						Inne/ute
					</a>
					<a
						href="/checked-in"
						class={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${
							$page.url.pathname === '/checked-in'
								? 'bg-indigo-600 text-white shadow'
								: 'text-slate-600 hover:bg-slate-100'
						}`}
					>
						Översikt
					</a>
						</nav>
					<button
						onclick={handleLogout}
						disabled={ui.loggingOut}
						class="rounded-md border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-60"
					>
						{ui.loggingOut ? 'Loggar ut…' : 'Logga ut'}
					</button>
				</div>
			{/if}
		</div>
	{#if ui.message}
		<p class="bg-red-50 px-4 py-2 text-center text-sm text-red-600">{ui.message}</p>
	{/if}
	</header>
	<main class="mx-auto max-w-5xl px-4 py-6">
		{@render children?.()}
	</main>
</div>
