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

	let { children } = $props();
	let isLoggingOut = $state(false);

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

	function goHome() {
		goto('/dashboard');
	}
</script>

<div class="settings-layout">
	<header class="settings-header">
		<div class="header-content">
			<button class="logo-button" onclick={goHome}>
				<span class="logo-text">Classeo</span>
			</button>
			<nav class="header-nav">
				<a href="/dashboard" class="nav-link">Tableau de bord</a>
				<a href="/settings" class="nav-link active">Parametres</a>
				<button
					class="logout-button"
					onclick={handleLogout}
					disabled={isLoggingOut}
				>
					{#if isLoggingOut}
						<span class="spinner"></span>
						Deconnexion...
					{:else}
						Deconnexion
					{/if}
				</button>
			</nav>
		</div>
	</header>

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

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

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

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

	.logo-button {
		background: none;
		border: none;
		cursor: pointer;
		padding: 0.5rem 0;
	}

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

	.header-nav {
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: flex-end;
		flex-wrap: wrap;
		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;
	}

	.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);
	}

	.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;
	}

	.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;
	}

	.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;
	}

	.settings-content {
		flex: 1;
	}

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

	@media (min-width: 768px) {
		.header-content {
			flex-wrap: nowrap;
			height: 64px;
			padding: 0;
			gap: 0;
		}

		.header-nav {
			width: auto;
			flex-wrap: nowrap;
			gap: 1rem;
			justify-content: flex-start;
		}
	}
</style>
