<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('/');
	}
</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">
				<button
					class="logout-button"
					onclick={handleLogout}
					disabled={isLoggingOut}
				>
					{#if isLoggingOut}
						<span class="spinner"></span>
						Déconnexion...
					{:else}
						Déconnexion
					{/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 24px;
	}

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

	.logo-button {
		background: none;
		border: none;
		cursor: pointer;
		padding: 8px 0;
	}

	.logo-text {
		font-size: 20px;
		font-weight: 700;
		color: var(--accent-primary, hsl(199, 89%, 48%));
	}

	.header-nav {
		display: flex;
		align-items: center;
		gap: 16px;
	}

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

	.logout-button:hover:not(:disabled) {
		color: var(--color-alert, hsl(0, 72%, 51%));
		border-color: var(--color-alert, hsl(0, 72%, 51%));
	}

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