<script lang="ts">
	import '../app.css';
	import favicon from '$lib/assets/favicon.svg';
	import { Header } from '$lib';
	import { page } from '$app/state';
	import { Toaster } from '$lib/components/sonner/index.js';
	import LocationManager from '$lib/components/map/LocationManager.svelte';
	import NotificationManager from '$lib/components/notifications/NotificationManager.svelte';

	let { children, data } = $props();
	let isLoginRoute = $derived(page.url.pathname.startsWith('/login'));
	let showHeader = $derived(!isLoginRoute && data?.user);
</script>

<svelte:head>
	<link rel="icon" href={favicon} />
	<!-- Performance optimizations -->
	<link
		rel="preload"
		href="/fonts/Washington.ttf"
		as="font"
		type="font/ttf"
		crossorigin="anonymous"
	/>
	<link rel="dns-prefetch" href="//tile.openstreetmap.org" />
	<link rel="preconnect" href="https://tile.openstreetmap.org" crossorigin="anonymous" />
	<!-- Resource hints for login page background -->
	{#if isLoginRoute}
		<link rel="preload" href="/cafe-bg-compressed.jpg" as="image" />
	{/if}
</svelte:head>

<Toaster />

<!-- Auto-start location and notfication watching for authenticated users -->
{#if data?.user && !isLoginRoute}
	<LocationManager autoStart={true} />
	<NotificationManager />
{/if}

{#if showHeader && data.user}
	<Header user={data.user} />
{/if}

{@render children?.()}
