<script lang="ts">
	import { page } from '$app/stores';
	import { goto } from '$app/navigation';
	import { pb } from '$lib/pb';
	import logo from '$lib/assets/checkflo-logo.png';
	import iconDashboard from '$lib/assets/icons/dashboard.svg';
	import iconLogs      from '$lib/assets/icons/logs.svg';
	import iconProtokoll from '$lib/assets/icons/protokoll.svg';
	import iconStations  from '$lib/assets/icons/stations.svg';
	import iconLogout    from '$lib/assets/icons/logout.svg';

	let { children } = $props();

	const isLoginPage = $derived($page.url.pathname === '/admin/login');

	function logout() {
		pb.authStore.clear();
		goto('/admin/login');
	}

	const navItems = [
		{ href: '/admin/dashboard',  label: 'Dashboard',  icon: iconDashboard },
		{ href: '/admin/logs',       label: 'Einträge',   icon: iconLogs      },
		{ href: '/admin/protokoll',  label: 'Protokoll',  icon: iconProtokoll },
		{ href: '/admin/stations',   label: 'Stationen',  icon: iconStations  }
	];
</script>

{#if isLoginPage}
	{@render children()}
{:else}
	<div class="shell">
		<aside>
			<a href="/admin/dashboard" class="logo-link">
				<img src={logo} alt="checkflo" height="30" />
			</a>
			<nav>
				{#each navItems as item}
					<a
						href={item.href}
						class="nav-item"
						class:active={$page.url.pathname.startsWith(item.href)}
					>
						<img src={item.icon} alt="" class="nav-icon" />
						<span>{item.label}</span>
					</a>
				{/each}
			</nav>
			<button class="logout" onclick={logout}>
				<img src={iconLogout} alt="" class="nav-icon" />
				Abmelden
			</button>
		</aside>

		<main>
			{@render children()}
		</main>
	</div>
{/if}

<style>
	.shell {
		display: flex;
		min-height: 100dvh;
		background: #F5F7FA;
	}

	aside {
		width: 220px;
		background: #0B1023;
		color: #fff;
		display: flex;
		flex-direction: column;
		padding: 1.5rem 1rem;
		flex-shrink: 0;
	}

	.logo-link { display: block; margin-bottom: 2rem; padding: 0 0.5rem; }
	.logo-link img { filter: brightness(0) invert(1); }

	nav { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }

	.nav-item {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.7rem 0.75rem;
		border-radius: 8px;
		color: #8892a4;
		font-size: 0.9rem;
		font-weight: 500;
		transition: all 0.15s;
	}
	.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
	.nav-item.active { background: rgba(249,115,22,0.15); color: #F97316; }

	.nav-icon {
		width: 18px;
		height: 18px;
		flex-shrink: 0;
		filter: brightness(0) saturate(100%) invert(55%) sepia(14%) saturate(400%) hue-rotate(182deg);
	}
	.nav-item.active .nav-icon {
		filter: brightness(0) saturate(100%) invert(56%) sepia(85%) saturate(600%) hue-rotate(359deg);
	}
	.nav-item:hover .nav-icon {
		filter: brightness(0) invert(1);
	}

	.logout {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		background: none;
		border: 1px solid #2a3347;
		color: #8892a4;
		padding: 0.6rem 0.75rem;
		border-radius: 8px;
		cursor: pointer;
		font-size: 0.85rem;
		transition: all 0.15s;
		margin-top: 1rem;
		width: 100%;
	}
	.logout:hover { border-color: #F97316; color: #F97316; }
	.logout:hover .nav-icon {
		filter: brightness(0) saturate(100%) invert(56%) sepia(85%) saturate(600%) hue-rotate(359deg);
	}

	main {
		flex: 1;
		overflow: auto;
		padding: 2rem;
	}

	@media print {
		aside { display: none !important; }
		:global(.shell) { display: block !important; }
		main { padding: 0 !important; overflow: visible !important; }
	}

	@media (max-width: 640px) {
		.shell { flex-direction: column; }
		aside {
			width: 100%;
			flex-direction: row;
			align-items: center;
			padding: 0.75rem 1rem;
		}
		.logo-link { margin-bottom: 0; margin-right: auto; }
		nav { flex-direction: row; flex: 0; gap: 0.5rem; }
		.nav-item span { display: none; }
		.logout { margin-top: 0; padding: 0.5rem 0.75rem; width: auto; }
		.logout :global(span) { display: none; }
		main { padding: 1rem; }
	}
</style>
