<script lang="ts">
	import { goto } from '$app/navigation';
	import { browser } from '$app/environment';
	import { refreshToken, isAuthenticated } from '$lib/auth/auth.svelte';

	let isChecking = $state(true);

	// Check if user is authenticated and redirect to dashboard
	$effect(() => {
		if (browser) {
			checkAuthAndRedirect();
		}
	});

	async function checkAuthAndRedirect() {
		// If already has token in memory, redirect immediately
		if (isAuthenticated()) {
			goto('/dashboard');
			return;
		}

		// Try to refresh token from cookie
		const refreshed = await refreshToken();
		if (refreshed) {
			goto('/dashboard');
			return;
		}

		// Not authenticated, show landing page
		isChecking = false;
	}

	function goToLogin() {
		goto('/login');
	}
</script>

<svelte:head>
	<title>Classeo - Application de gestion scolaire</title>
</svelte:head>

{#if isChecking}
	<main class="landing">
		<div class="loading">
			<div class="spinner"></div>
			<p>Chargement...</p>
		</div>
	</main>
{:else}
	<main class="landing">
		<div class="hero">
			<h1>Bienvenue sur <span class="brand">Classeo</span></h1>
			<p class="tagline">L'application de gestion scolaire qui simplifie le quotidien des familles et des enseignants</p>

			<div class="cta">
				<button class="btn-primary" onclick={goToLogin}>
					Se connecter
				</button>
			</div>

			<div class="features">
				<div class="feature">
					<span class="feature-icon">💚</span>
					<h3>Score Serenite</h3>
					<p>Suivez la scolarite de votre enfant en un coup d'oeil</p>
				</div>
				<div class="feature">
					<span class="feature-icon">📅</span>
					<h3>Emploi du temps</h3>
					<p>Consultez les cours et les modifications en temps reel</p>
				</div>
				<div class="feature">
					<span class="feature-icon">📝</span>
					<h3>Notes et devoirs</h3>
					<p>Restez informe des resultats et des travaux a faire</p>
				</div>
			</div>
		</div>
	</main>
{/if}

<style>
	.landing {
		min-height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);
		padding: 2rem;
	}

	.loading {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		color: #64748b;
	}

	.spinner {
		width: 2rem;
		height: 2rem;
		border: 3px solid #e2e8f0;
		border-top-color: #3b82f6;
		border-radius: 50%;
		animation: spin 0.8s linear infinite;
	}

	.hero {
		max-width: 800px;
		text-align: center;
	}

	h1 {
		font-size: 2.5rem;
		font-weight: 700;
		color: #1e293b;
		margin: 0 0 1rem;
	}

	.brand {
		color: #3b82f6;
	}

	.tagline {
		font-size: 1.25rem;
		color: #64748b;
		margin: 0 0 2rem;
		line-height: 1.6;
	}

	.cta {
		margin-bottom: 3rem;
	}

	.btn-primary {
		padding: 1rem 2.5rem;
		font-size: 1.125rem;
		font-weight: 600;
		color: white;
		background: #3b82f6;
		border: none;
		border-radius: 0.5rem;
		cursor: pointer;
		transition: all 0.2s;
		box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
	}

	.btn-primary:hover {
		background: #2563eb;
		transform: translateY(-2px);
		box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
	}

	.features {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 2rem;
		margin-top: 2rem;
	}

	.feature {
		padding: 1.5rem;
		background: white;
		border-radius: 1rem;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.feature-icon {
		font-size: 2.5rem;
		display: block;
		margin-bottom: 0.75rem;
	}

	.feature h3 {
		margin: 0 0 0.5rem;
		font-size: 1.125rem;
		font-weight: 600;
		color: #1e293b;
	}

	.feature p {
		margin: 0;
		font-size: 0.875rem;
		color: #64748b;
		line-height: 1.5;
	}

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

	@media (max-width: 640px) {
		h1 {
			font-size: 1.75rem;
		}

		.tagline {
			font-size: 1rem;
		}

		.features {
			gap: 1rem;
		}
	}
</style>
