<script lang="ts">
	/**
	 * COMPONENT: Navigation
	 * 
	 * PURPOSE: Main navigation header
	 * FEATURES:
	 * - Display user name
	 * - Sign out button
	 * - Logo/branding
	 * - Navigation links
	 */

	import { user, clearAuth } from '../stores/auth';
	import { clearNotifications } from '../stores/ui';
	import { clearJobs } from '../stores/jobs';

	/**
	 * Handle sign out
	 */
	function handleSignOut() {
		try {
			// Clear auth state
			clearAuth();

			// Clear other stores
			clearNotifications();
			clearJobs();

			// Redirect to signin using hash-based routing
			window.location.hash = '/signin';
		} catch (error) {
			console.error('[Navigation] Sign out error:', error);
		}
	}

	/**
	 * Get user initials for avatar
	 */
	function getInitials(displayName: string | undefined): string {
		if (!displayName) return '?';
		return displayName
			.split(' ')
			.map((n) => n[0])
			.join('')
			.toUpperCase()
			.slice(0, 2);
	}
</script>

<!-- Navigation Header -->
<nav class="bg-white shadow-sm border-b border-gray-200">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
		<div class="flex justify-between items-center h-16">
			<!-- Left: Logo/Title -->
			<div class="flex items-center">
				<h1 class="text-2xl font-bold text-blue-600">Job Info</h1>
			</div>

			<!-- Center: Navigation Links (placeholder for future) -->
			<div class="hidden md:flex items-center space-x-8">
				<a href="/" class="text-gray-600 hover:text-gray-900 transition-colors">
					Home
				</a>
				<a href="/#" class="text-gray-600 hover:text-gray-900 transition-colors">
					Saved Jobs
				</a>
			</div>

			<!-- Right: User Menu -->
			<div class="flex items-center gap-4">
				<!-- User Avatar and Name -->
				<div class="flex items-center gap-3">
					<!-- Avatar -->
					<div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm font-medium">
						{getInitials($user?.displayName)}
					</div>

					<!-- User Name (hidden on mobile) -->
					<div class="hidden sm:block">
						<p class="text-sm font-medium text-gray-900">{$user?.displayName || 'User'}</p>
						<p class="text-xs text-gray-500">{$user?.mail}</p>
					</div>
				</div>

				<!-- Sign Out Button -->
				<button
					on:click={handleSignOut}
					class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors"
				>
					Sign Out
				</button>
			</div>
		</div>
	</div>
</nav>

<style>
	/* No additional styles needed - using TailwindCSS */
</style>
