<script lang="ts">
	import { page } from '$app/state';
	import appConfigStore from '$lib/stores/application-configuration-store';
	import userStore from '$lib/stores/user-store';
	import Logo from '../logo.svelte';
	import HeaderAvatar from './header-avatar.svelte';
	import ModeSwitcher from './mode-switcher.svelte';

	const authUrls = [
		/^\/authorize$/,
		/^\/device$/,
		/^\/login(?:\/.*)?$/,
		/^\/logout$/,
		/^\/signup(?:\/.*)?$/
	];

	let isAuthPage = $derived(
		!page.error && authUrls.some((pattern) => pattern.test(page.url.pathname))
	);
</script>

<div class=" w-full {isAuthPage ? 'absolute top-0 z-10 mt-3 lg:mt-8 pr-2 lg:pr-3' : 'border-b'}">
	<div
		class="{!isAuthPage
			? 'max-w-[1640px]'
			: ''} mx-auto flex w-full items-center justify-between px-4 md:px-10"
	>
		<div class="flex h-16 items-center">
			{#if !isAuthPage}
				<a href="/" class="flex items-center gap-3 transition-opacity hover:opacity-80">
					<Logo class="size-8" />
					<h1 class="text-lg font-semibold tracking-tight" data-testid="application-name">
						{$appConfigStore.appName}
					</h1>
				</a>
			{/if}
		</div>
		<div class="flex items-center justify-between gap-4">
			{#if !isAuthPage}
				<ModeSwitcher />
			{/if}
			{#if $userStore?.id}
				<HeaderAvatar />
			{/if}
		</div>
	</div>
</div>
