<script lang="ts">
	import '../app.css';
	import { page } from '$app/state';
	import { goto } from '$app/navigation';
	import { onMount } from 'svelte';
	import { getAuth, loadUser, logout } from '$lib/auth.svelte';

	let { children } = $props();
	const auth = getAuth();

	const navItems = [
		{ href: '/', label: 'Dashboard', icon: '⊞' },
		{ href: '/servers', label: 'Servers', icon: '⬡' },
		{ href: '/trackers', label: 'Trackers', icon: '◎' },
		{ href: '/templates', label: 'Templates', icon: '⎘' },
		{ href: '/targets', label: 'Targets', icon: '◇' },
	];

	const isAuthPage = $derived(
		page.url.pathname === '/login' || page.url.pathname === '/setup'
	);

	onMount(async () => {
		await loadUser();
		if (!auth.user && !isAuthPage) {
			goto('/login');
		}
	});
</script>

{#if isAuthPage || auth.loading}
	{@render children()}
{:else if auth.user}
	<div class="flex h-screen">
		<!-- Sidebar -->
		<aside class="w-56 border-r border-[var(--color-border)] bg-[var(--color-card)] flex flex-col">
			<div class="p-4 border-b border-[var(--color-border)]">
				<h1 class="text-base font-semibold tracking-tight">Immich Watcher</h1>
				<p class="text-xs text-[var(--color-muted-foreground)] mt-0.5">Album notifications</p>
			</div>
			<nav class="flex-1 p-2 space-y-0.5">
				{#each navItems as item}
					<a
						href={item.href}
						class="flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors
							{page.url.pathname === item.href
								? 'bg-[var(--color-accent)] text-[var(--color-accent-foreground)] font-medium'
								: 'text-[var(--color-muted-foreground)] hover:bg-[var(--color-accent)] hover:text-[var(--color-accent-foreground)]'}"
					>
						<span class="text-base">{item.icon}</span>
						{item.label}
					</a>
				{/each}
				{#if auth.isAdmin}
					<a
						href="/users"
						class="flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors
							{page.url.pathname === '/users'
								? 'bg-[var(--color-accent)] text-[var(--color-accent-foreground)] font-medium'
								: 'text-[var(--color-muted-foreground)] hover:bg-[var(--color-accent)] hover:text-[var(--color-accent-foreground)]'}"
					>
						<span class="text-base">⊕</span>
						Users
					</a>
				{/if}
			</nav>
			<div class="p-3 border-t border-[var(--color-border)]">
				<div class="flex items-center justify-between">
					<div>
						<p class="text-sm font-medium">{auth.user.username}</p>
						<p class="text-xs text-[var(--color-muted-foreground)]">{auth.user.role}</p>
					</div>
					<button
						onclick={logout}
						class="text-xs text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] transition-colors"
					>
						Logout
					</button>
				</div>
			</div>
		</aside>

		<!-- Main content -->
		<main class="flex-1 overflow-auto">
			<div class="max-w-5xl mx-auto p-6">
				{@render children()}
			</div>
		</main>
	</div>
{/if}
