<script lang="ts">
	import { goto } from '$app/navigation';
	import { getToken, clearAuth } from '$lib/auth';
	import { api } from '$lib/api';
	import { onMount } from 'svelte';

	onMount(() => {
		if (!getToken()) {
			goto('/join');
		}
	});

	async function handleLogout() {
		try {
			await api.delete('/session');
		} catch {
			// Ignore errors — clear local state regardless
		}
		clearAuth();
		goto('/join');
	}
</script>

<div class="min-h-screen bg-gray-50 p-4">
	<div class="mx-auto max-w-2xl">
		<div class="mb-6 flex items-center justify-between">
			<h1 class="text-xl font-bold text-gray-900">Galerie</h1>
			<button
				onclick={handleLogout}
				class="rounded-md bg-gray-200 px-3 py-1 text-sm text-gray-700 hover:bg-gray-300"
			>
				Abmelden
			</button>
		</div>
		<p class="text-gray-600">Die Galerie wird bald hier angezeigt.</p>
	</div>
</div>
