<script lang="ts">
	import { page } from '$app/stores';
	import { goto } from '$app/navigation';
	import { auth } from '$lib/stores/auth';

	async function handleLogout() {
		await auth.logout();
		goto('/login');
	}

	// Collapse state - persisted in localStorage
	let collapsed = false;

	// Load collapsed state from localStorage on mount
	if (typeof window !== 'undefined') {
		const saved = localStorage.getItem('sidebar-collapsed');
		collapsed = saved === 'true';
	}

	// Toggle function that also persists to localStorage
	function toggleSidebar() {
		collapsed = !collapsed;
		if (typeof window !== 'undefined') {
			localStorage.setItem('sidebar-collapsed', String(collapsed));
		}
	}

	const tools = [
		{ name: 'Dashboard', path: '/', icon: '📊' },
		{ name: 'Model Drift Monitor', path: '/drift-monitor', icon: '📈' },
		{ name: 'Vendor Cost Tracker', path: '/cost-tracker', icon: '💰' },
		{ name: 'Security Tester', path: '/security-tester', icon: '🔒' },
		{ name: 'Data History Log', path: '/data-history', icon: '📜' },
		{ name: 'Model Comparator', path: '/model-comparator', icon: '🔄' },
		{ name: 'Privacy Scanner', path: '/privacy-scanner', icon: '🕵️' },
		{ name: 'Label Quality Scorer', path: '/label-quality', icon: '✅' },
		{ name: 'Inference Estimator', path: '/inference-estimator', icon: '💵' },
		{ name: 'Data Integrity Audit', path: '/data-audit', icon: '🧹' },
		{ name: 'Content Performance', path: '/content-performance', icon: '📺' },
		{ name: 'Safety/Bias Checks', path: '/bias-checks', icon: '⚖️' },
		{ name: 'Profitability Analysis', path: '/profitability', icon: '💹' },
		{ name: 'Emergency Control', path: '/emergency-control', icon: '🚨' },
		{ name: 'Reports', path: '/reports', icon: '📝' },
		{ name: 'EDA Gapminder', path: '/eda-gapminder', icon: '🌍' },
		{ name: 'House Predictor', path: '/house-predictor', icon: '🏠' }
	];

	$: currentPath = $page.url.pathname;
</script>

<aside
	class="flex flex-col h-full border-r border-primary-100 transition-all duration-300 ease-in-out {collapsed ? 'w-16' : 'w-64'}"
	style="background: linear-gradient(180deg, #f8f6ff 0%, #f3f0ff 100%);"
>
	<!-- Logo & Toggle -->
	<div class="p-4 border-b border-primary-100/60 flex items-center {collapsed ? 'justify-center' : 'justify-between'}">
		{#if !collapsed}
			<div>
				<h1 class="text-xl font-bold bg-gradient-to-r from-primary-700 to-accent-600 bg-clip-text text-transparent">
					AI Tools Suite
				</h1>
				<p class="text-xs text-surface-500 mt-1">v0.1.0</p>
			</div>
		{/if}
		<button
			on:click={toggleSidebar}
			class="p-2 rounded-lg hover:bg-white/70 text-surface-600 hover:text-primary-700 transition-all duration-200"
			title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
		>
			<svg
				xmlns="http://www.w3.org/2000/svg"
				class="h-5 w-5 transition-transform duration-300 {collapsed ? 'rotate-180' : ''}"
				fill="none"
				viewBox="0 0 24 24"
				stroke="currentColor"
				stroke-width="2"
			>
				<path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
			</svg>
		</button>
	</div>

	<!-- Navigation -->
	<nav class="flex-1 overflow-y-auto py-4">
		<ul class="space-y-1 px-2">
			{#each tools as tool}
				<li>
					<a
						href={tool.path}
						class="flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-200
							{currentPath === tool.path
								? 'bg-gradient-to-r from-primary-500 to-primary-600 text-white shadow-soft'
								: 'text-surface-600 hover:bg-white/70 hover:text-primary-700'}
							{collapsed ? 'justify-center' : ''}"
						title={collapsed ? tool.name : ''}
					>
						<span class="text-lg flex-shrink-0">{tool.icon}</span>
						{#if !collapsed}
							<span class="text-sm font-medium truncate">{tool.name}</span>
						{/if}
					</a>
				</li>
			{/each}
		</ul>
	</nav>

	<!-- User & Logout -->
	<div class="p-4 border-t border-primary-100/60">
		{#if $auth.user}
			<div class="flex items-center gap-3 {collapsed ? 'justify-center' : ''}">
				{#if $auth.user.picture}
					<img
						src={$auth.user.picture}
						alt={$auth.user.name}
						class="w-8 h-8 rounded-full flex-shrink-0"
					/>
				{:else}
					<div class="w-8 h-8 rounded-full bg-primary-200 flex items-center justify-center flex-shrink-0">
						<span class="text-sm font-medium text-primary-700">
							{$auth.user.name?.charAt(0).toUpperCase() || '?'}
						</span>
					</div>
				{/if}
				{#if !collapsed}
					<div class="flex-1 min-w-0">
						<p class="text-sm font-medium text-surface-700 truncate">{$auth.user.name}</p>
						<p class="text-xs text-surface-500 truncate">{$auth.user.email}</p>
					</div>
				{/if}
			</div>
			<button
				on:click={handleLogout}
				class="mt-3 w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-surface-600 hover:bg-white/70 hover:text-red-600 transition-all duration-200 {collapsed ? 'justify-center' : ''}"
				title={collapsed ? 'Sign out' : ''}
			>
				<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
					<path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
				</svg>
				{#if !collapsed}
					<span>Sign out</span>
				{/if}
			</button>
		{/if}

		<!-- API Status -->
		<div class="mt-3 flex items-center gap-2 text-xs text-surface-500 {collapsed ? 'justify-center' : ''}">
			<span class="w-2 h-2 bg-green-500 rounded-full animate-pulse flex-shrink-0"></span>
			{#if !collapsed}
				<span>API Connected</span>
			{/if}
		</div>
	</div>
</aside>
