<script lang="ts">
	import { untrack } from 'svelte';
	import { page } from '$app/state';
	import { goto } from '$app/navigation';
	import { isAuthenticated, refreshToken, logout } from '$lib/auth/auth.svelte';
	import RoleSwitcher from '$lib/components/organisms/RoleSwitcher/RoleSwitcher.svelte';
	import { fetchRoles, resetRoleContext, getActiveRole } from '$features/roles/roleContext.svelte';
	import { fetchBranding, resetBranding, getLogoUrl } from '$features/branding/brandingStore.svelte';

	let { children } = $props();
	let isLoggingOut = $state(false);
	let mobileMenuOpen = $state(false);
	let logoUrl = $derived(getLogoUrl());
	let pathname = $derived(page.url.pathname);
	let isEleve = $derived(getActiveRole() === 'ROLE_ELEVE');
	let isParent = $derived(getActiveRole() === 'ROLE_PARENT');

	// Load user roles on mount for multi-role context switching (FR5)
	// Guard: only fetch if authenticated (or refresh succeeds), otherwise stay in demo mode
	$effect(() => {
		untrack(async () => {
			if (!isAuthenticated()) {
				const refreshed = await refreshToken();
				if (!refreshed) return;
			}
			fetchRoles();
			fetchBranding();
		});
	});

	// Close menu on route change
	$effect(() => {
		void page.url.pathname;
		mobileMenuOpen = false;
	});

	// Lock body scroll when mobile menu is open
	$effect(() => {
		document.body.style.overflow = mobileMenuOpen ? 'hidden' : '';
		return () => {
			document.body.style.overflow = '';
		};
	});

	async function handleLogout() {
		isLoggingOut = true;
		try {
			resetRoleContext();
			resetBranding();
			await logout();
		} finally {
			isLoggingOut = false;
		}
	}

	function goHome() {
		goto('/dashboard');
	}

	function goSettings() {
		goto('/settings');
	}

	function toggleMobileMenu() {
		mobileMenuOpen = !mobileMenuOpen;
	}

	function closeMobileMenu() {
		mobileMenuOpen = false;
	}

	function handleKeydown(e: KeyboardEvent) {
		if (e.key === 'Escape' && mobileMenuOpen) {
			closeMobileMenu();
		}
	}
</script>

<svelte:window onkeydown={handleKeydown} />

<div class="dashboard-layout">
	<header class="dashboard-header">
		<div class="header-content">
			<button class="logo-button" onclick={goHome}>
				{#if logoUrl}
					<img src={logoUrl} alt="Logo de l'établissement" class="header-logo" />
				{/if}
				<span class="logo-text">Classeo</span>
			</button>

			<button
				class="hamburger-button"
				onclick={toggleMobileMenu}
				aria-expanded={mobileMenuOpen}
				aria-label="Ouvrir le menu de navigation"
			>
				<span class="hamburger-line"></span>
				<span class="hamburger-line"></span>
				<span class="hamburger-line"></span>
			</button>

			<nav class="desktop-nav">
				<RoleSwitcher />
				<a href="/dashboard" class="nav-link" class:active={pathname === '/dashboard'}>Tableau de bord</a>
				{#if isEleve}
					<a href="/dashboard/schedule" class="nav-link" class:active={pathname === '/dashboard/schedule'}>Mon EDT</a>
				{/if}
				{#if isParent}
					<a href="/dashboard/parent-schedule" class="nav-link" class:active={pathname === '/dashboard/parent-schedule'}>EDT enfants</a>
				{/if}
				<button class="nav-button" onclick={goSettings}>Paramètres</button>
				<button class="logout-button" onclick={handleLogout} disabled={isLoggingOut}>
					{#if isLoggingOut}
						<span class="spinner"></span>
						Déconnexion...
					{:else}
						Déconnexion
					{/if}
				</button>
			</nav>
		</div>
	</header>

	{#if mobileMenuOpen}
		<div
			class="mobile-overlay"
			onclick={closeMobileMenu}
			onkeydown={(e) => e.key === 'Enter' && closeMobileMenu()}
			role="presentation"
		></div>
		<div class="mobile-drawer" role="dialog" aria-modal="true" aria-label="Menu de navigation">
			<div class="mobile-drawer-header">
				{#if logoUrl}
					<img src={logoUrl} alt="Logo de l'établissement" class="header-logo" />
				{/if}
				<span class="logo-text">Classeo</span>
				<button class="mobile-close" onclick={closeMobileMenu} aria-label="Fermer le menu">
					&times;
				</button>
			</div>
			<div class="mobile-drawer-body">
				<div class="mobile-role-switcher">
					<RoleSwitcher />
				</div>
				<a href="/dashboard" class="mobile-nav-link" class:active={pathname === '/dashboard'}>
					Tableau de bord
				</a>
				{#if isEleve}
					<a href="/dashboard/schedule" class="mobile-nav-link" class:active={pathname === '/dashboard/schedule'}>
						Mon emploi du temps
					</a>
				{/if}
				{#if isParent}
					<a href="/dashboard/parent-schedule" class="mobile-nav-link" class:active={pathname === '/dashboard/parent-schedule'}>
						EDT enfants
					</a>
				{/if}
				<button class="mobile-nav-link" onclick={goSettings}>Paramètres</button>
			</div>
			<div class="mobile-drawer-footer">
				<button
					class="mobile-nav-link mobile-logout"
					onclick={handleLogout}
					disabled={isLoggingOut}
				>
					{#if isLoggingOut}
						Déconnexion...
					{:else}
						Déconnexion
					{/if}
				</button>
			</div>
		</div>
	{/if}

	<main class="dashboard-main">
		<div class="main-content">
			{@render children()}
		</div>
	</main>
</div>

<style>
	.dashboard-layout {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background: var(--surface-primary, #f8fafc);
	}

	.dashboard-header {
		background: var(--surface-elevated, #fff);
		border-bottom: 1px solid var(--border-subtle, #e2e8f0);
		padding: 0 1rem;
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.header-content {
		max-width: 1200px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 56px;
	}

	.logo-button {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		background: none;
		border: none;
		cursor: pointer;
		padding: 0.5rem 0;
	}

	.header-logo {
		height: 32px;
		width: auto;
		object-fit: contain;
		border-radius: 0.25rem;
	}

	.logo-text {
		font-size: 1.25rem;
		font-weight: 700;
		color: var(--accent-primary, #0ea5e9);
	}

	/* Hamburger — visible on mobile */
	.hamburger-button {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 40px;
		height: 40px;
		background: none;
		border: none;
		cursor: pointer;
		padding: 8px;
		border-radius: 0.5rem;
	}

	.hamburger-button:hover {
		background: var(--surface-primary, #f8fafc);
	}

	.hamburger-line {
		display: block;
		width: 20px;
		height: 2px;
		background: var(--text-secondary, #64748b);
		border-radius: 1px;
	}

	/* Desktop nav — hidden on mobile */
	.desktop-nav {
		display: none;
		align-items: center;
		gap: 0.5rem;
	}

	.nav-link {
		padding: 0.5rem 1rem;
		font-size: 0.875rem;
		font-weight: 500;
		color: var(--text-secondary, #64748b);
		text-decoration: none;
		border-radius: 0.5rem;
		transition: all 0.2s;
		white-space: nowrap;
	}

	.nav-link:hover {
		color: var(--text-primary, #1f2937);
		background: var(--surface-primary, #f8fafc);
	}

	.nav-link.active {
		color: var(--accent-primary, #0ea5e9);
		background: var(--accent-primary-light, #e0f2fe);
	}

	.nav-button {
		padding: 0.5rem 1rem;
		font-size: 0.875rem;
		font-weight: 500;
		color: var(--text-secondary, #64748b);
		background: transparent;
		border: none;
		border-radius: 0.5rem;
		cursor: pointer;
		transition: all 0.2s;
		white-space: nowrap;
	}

	.nav-button:hover {
		color: var(--text-primary, #1f2937);
		background: var(--surface-primary, #f8fafc);
	}

	.logout-button {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem 1rem;
		font-size: 0.875rem;
		font-weight: 500;
		color: var(--text-secondary, #64748b);
		background: transparent;
		border: 1px solid var(--border-subtle, #e2e8f0);
		border-radius: 0.5rem;
		cursor: pointer;
		transition: all 0.2s;
		white-space: nowrap;
	}

	.logout-button:hover:not(:disabled) {
		color: var(--color-alert, #ef4444);
		border-color: var(--color-alert, #ef4444);
	}

	.logout-button:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	/* Mobile overlay */
	.mobile-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 200;
		animation: fadeIn 0.2s ease-out;
	}

	/* Mobile drawer */
	.mobile-drawer {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(300px, 85vw);
		background: var(--surface-elevated, #fff);
		z-index: 201;
		display: flex;
		flex-direction: column;
		animation: slideInLeft 0.25s ease-out;
	}

	.mobile-drawer-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1rem 1.25rem;
		border-bottom: 1px solid var(--border-subtle, #e2e8f0);
	}

	.mobile-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		background: none;
		border: none;
		cursor: pointer;
		font-size: 1.5rem;
		color: var(--text-secondary, #64748b);
		border-radius: 0.5rem;
	}

	.mobile-close:hover {
		background: var(--surface-primary, #f8fafc);
		color: var(--text-primary, #1f2937);
	}

	.mobile-drawer-body {
		flex: 1;
		overflow-y: auto;
		padding: 0.75rem 0;
	}

	.mobile-role-switcher {
		padding: 0.5rem 1.25rem 0.75rem;
		border-bottom: 1px solid var(--border-subtle, #e2e8f0);
		margin-bottom: 0.5rem;
	}

	.mobile-nav-link {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 0.75rem 1.25rem;
		font-size: 0.9375rem;
		font-weight: 500;
		color: var(--text-secondary, #64748b);
		text-decoration: none;
		border: none;
		background: none;
		cursor: pointer;
		border-left: 3px solid transparent;
		transition: all 0.15s;
	}

	.mobile-nav-link:hover {
		background: var(--surface-primary, #f8fafc);
		color: var(--text-primary, #1f2937);
	}

	.mobile-nav-link.active {
		color: var(--accent-primary, #0ea5e9);
		border-left-color: var(--accent-primary, #0ea5e9);
		background: var(--accent-primary-light, #e0f2fe);
	}

	.mobile-logout {
		color: var(--color-alert, #ef4444);
	}

	.mobile-logout:hover {
		background: #fef2f2;
	}

	.mobile-drawer-footer {
		border-top: 1px solid var(--border-subtle, #e2e8f0);
		padding: 0.5rem 0;
	}

	.spinner {
		width: 14px;
		height: 14px;
		border: 2px solid var(--border-subtle, #e2e8f0);
		border-top-color: var(--text-secondary, #64748b);
		border-radius: 50%;
		animation: spin 0.8s linear infinite;
	}

	.dashboard-main {
		flex: 1;
		padding: 1rem;
	}

	.main-content {
		max-width: 1200px;
		margin: 0 auto;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@keyframes slideInLeft {
		from {
			transform: translateX(-100%);
		}
		to {
			transform: translateX(0);
		}
	}

	@media (min-width: 768px) {
		.header-content {
			height: 64px;
		}

		.hamburger-button {
			display: none;
		}

		.desktop-nav {
			display: flex;
		}

		.mobile-overlay,
		.mobile-drawer {
			display: none;
		}

		.dashboard-header {
			padding: 0 1.5rem;
		}

		.dashboard-main {
			padding: 1.5rem;
		}
	}
</style>
