<script lang="ts">
	import { authStore } from '$lib/stores/auth.svelte.js';
	import { page } from '$app/stores';
	import { 
		LayoutDashboard, 
		Calendar, 
		BarChart3, 
		MessageSquare, 
		MessageCircle, 
		Palette, 
		Users, 
		LogOut 
	} from 'lucide-svelte';

	function handleLogout() {
		authStore.logout();
	}

	function isActive(path: string): boolean {
		return $page.url.pathname === path;
	}
</script>

<nav class="navbar">
	<div class="nav-brand">
		<h1>Smartes Klassenzimmer</h1>
	</div>
	<div class="nav-menu">
		<a href="/dashboard" class="nav-link" class:active={isActive('/dashboard')}>
			<LayoutDashboard size={18} />
			<span>Dashboard</span>
		</a>
		<a href="/timetable" class="nav-link" class:active={isActive('/timetable')}>
			<Calendar size={18} />
			<span>Stundenplan</span>
		</a>
		{#if authStore.isTeacher}
			<a href="/grades" class="nav-link" class:active={isActive('/grades')}>
				<BarChart3 size={18} />
				<span>Notenverwaltung</span>
			</a>
		{/if}
		<a href="/feedback" class="nav-link" class:active={isActive('/feedback')}>
			<MessageSquare size={18} />
			<span>{authStore.isTeacher ? 'Feedback' : 'Noten'}</span>
		</a>
		<a href="/chat" class="nav-link" class:active={isActive('/chat')}>
			<MessageCircle size={18} />
			<span>Live Chat</span>
		</a>
		<a href="/whiteboard" class="nav-link" class:active={isActive('/whiteboard')}>
			<Palette size={18} />
			<span>Whiteboard</span>
		</a>
		{#if authStore.isTeacher}
			<a href="/users" class="nav-link" class:active={isActive('/users')}>
				<Users size={18} />
				<span>Nutzerverwaltung</span>
			</a>
		{/if}
		<button onclick={handleLogout} class="btn btn-secondary btn-sm">
			<LogOut size={16} />
			<span>Abmelden</span>
		</button>
	</div>
</nav>

<style>
	.navbar {
		background: white;
		border-bottom: 1px solid var(--neutral-200);
		padding: var(--space-md) var(--space-xl);
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--space-md);
	}

	.nav-brand h1 {
		margin: 0;
		font-family: var(--font-heading);
		font-size: var(--text-xl);
		font-weight: var(--font-semibold);
		color: var(--primary);
	}

	.nav-menu {
		display: flex;
		gap: var(--space-lg);
		align-items: center;
		flex-wrap: wrap;
	}

	.nav-link {
		text-decoration: none;
		color: var(--neutral-600);
		font-family: var(--font-body);
		font-size: var(--text-sm);
		font-weight: var(--font-medium);
		transition: color var(--transition-fast);
		padding: var(--space-xs) 0;
		border-bottom: 2px solid transparent;
		display: flex;
		align-items: center;
		gap: var(--space-xs);
	}

	.nav-link:hover {
		color: var(--primary);
	}

	.nav-link.active {
		color: var(--primary);
		border-bottom-color: var(--primary);
	}

	@media (max-width: 768px) {
		.navbar {
			padding: var(--space-md);
			flex-direction: column;
			align-items: stretch;
		}

		.nav-menu {
			gap: var(--space-sm);
			justify-content: center;
			margin-top: var(--space-md);
		}
		
		.nav-link {
			padding: var(--space-xs) var(--space-sm);
		}
	}
</style>
