<script lang="ts">
	import { goto } from '$app/navigation';
	import { createQuery, createMutation, useQueryClient } from '@tanstack/svelte-query';
	import { getSessions, revokeSession, revokeAllSessions } from '$lib/features/sessions/api/sessions';
	import SessionList from '$lib/features/sessions/components/SessionList.svelte';

	const queryClient = useQueryClient();

	let mutationError = $state<string | null>(null);

	const sessionsQuery = createQuery({
		queryKey: ['sessions'],
		queryFn: getSessions,
		// Always refetch on mount to prevent cross-account cache leakage
		// when user A logs out and user B logs in on the same tab
		refetchOnMount: 'always',
		staleTime: 0
	});

	const revokeSessionMutation = createMutation({
		mutationFn: revokeSession,
		onSuccess: () => {
			mutationError = null;
			queryClient.invalidateQueries({ queryKey: ['sessions'] });
		},
		onError: () => {
			mutationError = 'Impossible de déconnecter cette session. Veuillez réessayer.';
		}
	});

	const revokeAllMutation = createMutation({
		mutationFn: revokeAllSessions,
		onSuccess: () => {
			mutationError = null;
			queryClient.invalidateQueries({ queryKey: ['sessions'] });
		},
		onError: () => {
			mutationError = 'Impossible de déconnecter les autres sessions. Veuillez réessayer.';
		}
	});

	async function handleRevokeSession(familyId: string): Promise<void> {
		mutationError = null;
		await $revokeSessionMutation.mutateAsync(familyId);
	}

	async function handleRevokeAll(): Promise<void> {
		mutationError = null;
		await $revokeAllMutation.mutateAsync();
	}

	function dismissError() {
		mutationError = null;
	}

	function goBack() {
		goto('/settings');
	}
</script>

<svelte:head>
	<title>Mes sessions | Classeo</title>
</svelte:head>

<div class="sessions-page">
	<div class="page-container">
		<header class="page-header">
			<button class="back-button" onclick={goBack}>
				← Retour
			</button>
			<h1>Mes sessions</h1>
			<p class="page-description">
				Gérez vos sessions actives. Vous pouvez déconnecter un appareil à distance si vous suspectez une activité non autorisée.
			</p>
		</header>

		{#if mutationError}
			<div class="mutation-error" role="alert">
				<span class="error-message">{mutationError}</span>
				<button class="dismiss-button" onclick={dismissError} aria-label="Fermer">×</button>
			</div>
		{/if}

		<main class="page-content">
			{#if $sessionsQuery.isPending}
				<div class="loading-state">
					<span class="spinner"></span>
					<p>Chargement des sessions...</p>
				</div>
			{:else if $sessionsQuery.isError}
				<div class="error-state">
					<span class="error-icon">⚠️</span>
					<p>Impossible de charger les sessions.</p>
					<button class="retry-button" onclick={() => $sessionsQuery.refetch()}>
						Réessayer
					</button>
				</div>
			{:else if $sessionsQuery.data}
				<SessionList
					sessions={$sessionsQuery.data}
					onRevokeSession={handleRevokeSession}
					onRevokeAll={handleRevokeAll}
				/>
			{/if}
		</main>
	</div>
</div>

<style>
	.sessions-page {
		padding: 24px;
		font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
	}

	.page-container {
		max-width: 640px;
		margin: 0 auto;
	}

	.page-header {
		margin-bottom: 32px;
	}

	.back-button {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 8px 12px;
		font-size: 14px;
		font-weight: 500;
		color: var(--text-secondary, #64748b);
		background: transparent;
		border: none;
		border-radius: 8px;
		cursor: pointer;
		margin-bottom: 16px;
		margin-left: -12px;
		transition: color 0.2s;
	}

	.back-button:hover {
		color: var(--text-primary, #1a1f36);
	}

	.page-header h1 {
		font-size: 24px;
		font-weight: 700;
		color: var(--text-primary, #1a1f36);
		margin: 0 0 8px 0;
	}

	.page-description {
		font-size: 14px;
		color: var(--text-secondary, #64748b);
		margin: 0;
		line-height: 1.5;
	}

	.page-content {
		background: var(--surface-elevated, #fff);
		border-radius: 16px;
		padding: 24px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	}

	.loading-state,
	.error-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		padding: 48px 24px;
		color: var(--text-secondary, #64748b);
	}

	.loading-state .spinner {
		width: 32px;
		height: 32px;
		border: 3px solid var(--border-subtle, #e2e8f0);
		border-top-color: var(--accent-primary, hsl(199, 89%, 48%));
		border-radius: 50%;
		animation: spin 0.8s linear infinite;
	}

	.error-icon {
		font-size: 48px;
	}

	.error-state p {
		margin: 0;
		font-size: 15px;
	}

	.retry-button {
		padding: 10px 20px;
		font-size: 14px;
		font-weight: 500;
		color: #fff;
		background: var(--accent-primary, hsl(199, 89%, 48%));
		border: none;
		border-radius: 8px;
		cursor: pointer;
		transition: background 0.2s;
	}

	.retry-button:hover {
		background: hsl(199, 89%, 42%);
	}

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

	.mutation-error {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 12px 16px;
		margin-bottom: 16px;
		background: hsl(0, 84%, 95%);
		border: 1px solid hsl(0, 84%, 85%);
		border-radius: 8px;
		color: hsl(0, 84%, 32%);
	}

	.mutation-error .error-message {
		font-size: 14px;
		font-weight: 500;
	}

	.mutation-error .dismiss-button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		padding: 0;
		font-size: 18px;
		font-weight: 500;
		color: hsl(0, 84%, 32%);
		background: transparent;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		transition: background 0.2s;
	}

	.mutation-error .dismiss-button:hover {
		background: hsl(0, 84%, 90%);
	}
</style>
