<!-- src/routes/+layout.svelte -->
<script lang="ts">
	import '../app.css';
	import { onMount } from 'svelte';
	import { page } from '$app/state';
	import { goto } from '$app/navigation';
	import { base } from '$app/paths';

	async function validateToken(token: string) {
		try {
			const res = await fetch(`/api/validate.php`, {
				headers: { Authorization: `Bearer ${token}` }
			});
			if (!res.ok) {
				return false;
			}

			// JSON mit { valid: true, user: { username: '...' } }
			const data = await res.json();
			if (data.valid) {
				// Username speichern, damit du ihn später abrufen kannst
				localStorage.setItem('username', data.user.username);
				return true;
			} else {
				return false;
			}
		} catch {
			return false;
		}
	}

	onMount(async () => {
		const token = localStorage.getItem('token');
		const currentPath = page.url.pathname;

		// Wenn wir nicht bereits auf Login sind:
		if (!currentPath.startsWith(`${base}/login`)) {
			if (!token || !(await validateToken(token)) || currentPath.startsWith(`${base}/logout`)) {
				// ungültig oder abgelaufen
				localStorage.removeItem('token');
				goto(`${base}/login`);
				return;
			}
		}
	});
</script>
<div class="bg-timberwolf min-h-dvh w-full dark:bg-gunmetal">
<slot />
</div>
