<script lang="ts">
	import type { ChildScheduleSummary } from '$lib/features/schedule/api/parentSchedule';
	import { fetchChildrenScheduleSummary } from '$lib/features/schedule/api/parentSchedule';
	import { formatSyncDate } from '$lib/features/schedule/formatSyncDate';
	import { isOffline, getLastSyncDate, recordSync } from '$lib/features/schedule/stores/scheduleCache.svelte';
	import { untrack } from 'svelte';

	let {
		onChildClick
	}: {
		onChildClick?: (childId: string) => void;
	} = $props();

	let children = $state<ChildScheduleSummary[]>([]);
	let isLoading = $state(true);
	let error = $state<string | null>(null);
	let offline = $state(isOffline());
	let lastSync = $derived(getLastSyncDate());

	$effect(() => {
		untrack(() => loadSummary());

		function handleOnline() {
			offline = false;
			loadSummary();
		}
		function handleOffline() {
			offline = true;
		}

		window.addEventListener('online', handleOnline);
		window.addEventListener('offline', handleOffline);

		return () => {
			window.removeEventListener('online', handleOnline);
			window.removeEventListener('offline', handleOffline);
		};
	});

	async function loadSummary() {
		isLoading = true;
		error = null;

		try {
			children = await fetchChildrenScheduleSummary();
			recordSync();
		} catch (e) {
			error = e instanceof Error ? e.message : 'Erreur de chargement';
		} finally {
			isLoading = false;
		}
	}

</script>

<div class="multi-child-summary">
	{#if offline}
		<div class="offline-banner" role="status">
			<span class="offline-dot"></span>
			<span>Hors ligne</span>
			{#if lastSync}
				<span class="sync-date">Dernière sync : {formatSyncDate(lastSync)}</span>
			{/if}
		</div>
	{/if}

	{#if isLoading}
		<div class="loading">
			<div class="spinner"></div>
			<span>Chargement...</span>
		</div>
	{:else if error}
		<div class="error">{error}</div>
	{:else if children.length === 0}
		<div class="empty">Aucun enfant trouvé</div>
	{:else}
		<div class="children-grid">
			{#each children as child (child.childId)}
				<button
					class="child-card"
					type="button"
					onclick={() => onChildClick?.(child.childId)}
				>
					<h4 class="child-name">{child.firstName} {child.lastName}</h4>

					{#if child.nextClass}
						<div class="next-class">
							<span class="next-label">Prochain cours</span>
							<span class="next-subject">{child.nextClass.subjectName}</span>
							<span class="next-time">{child.nextClass.startTime} - {child.nextClass.endTime}</span>
							{#if child.nextClass.room}
								<span class="next-room">{child.nextClass.room}</span>
							{/if}
						</div>
					{:else if child.todaySlots.length === 0}
						<p class="no-class">Pas de cours aujourd'hui</p>
					{:else}
						<p class="no-class">Plus de cours aujourd'hui</p>
					{/if}

					{#if child.todaySlots.length > 0}
						<div class="today-count">
							{child.todaySlots.length} cours aujourd'hui
						</div>
					{/if}
					{#if onChildClick}
						<span class="detail-link">Voir le détail</span>
					{/if}
				</button>
			{/each}
		</div>
	{/if}
</div>

<style>
	.multi-child-summary {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.offline-banner {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem 0.75rem;
		background: #fef3c7;
		border: 1px solid #fcd34d;
		border-radius: 0.5rem;
		font-size: 0.75rem;
		color: #92400e;
	}

	.offline-dot {
		width: 0.5rem;
		height: 0.5rem;
		border-radius: 50%;
		background: #f59e0b;
		flex-shrink: 0;
	}

	.sync-date {
		margin-left: auto;
		color: #b45309;
	}

	.loading {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		padding: 2rem;
		color: #6b7280;
		font-size: 0.875rem;
	}

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

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

	.error {
		padding: 1rem;
		color: #dc2626;
		font-size: 0.875rem;
		text-align: center;
	}

	.empty {
		padding: 2rem;
		text-align: center;
		color: #9ca3af;
		font-size: 0.875rem;
	}

	.children-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	@media (min-width: 640px) {
		.children-grid {
			grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		}
	}

	.child-card {
		padding: 1rem;
		background: #f9fafb;
		border: 1px solid #e5e7eb;
		border-radius: 0.75rem;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		cursor: pointer;
		text-align: left;
		font: inherit;
		transition: border-color 0.15s, box-shadow 0.15s;
		width: 100%;
	}

	.child-card:hover {
		border-color: #3b82f6;
		box-shadow: 0 1px 3px rgba(59, 130, 246, 0.15);
	}

	.child-name {
		margin: 0;
		font-size: 0.9375rem;
		font-weight: 600;
		color: #1f2937;
	}

	.next-class {
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
		padding: 0.625rem;
		background: #eff6ff;
		border-left: 3px solid #3b82f6;
		border-radius: 0.375rem;
	}

	.next-label {
		font-size: 0.625rem;
		font-weight: 600;
		text-transform: uppercase;
		color: #3b82f6;
	}

	.next-subject {
		font-weight: 500;
		color: #1f2937;
		font-size: 0.875rem;
	}

	.next-time {
		font-size: 0.75rem;
		color: #3b82f6;
		font-weight: 600;
	}

	.next-room {
		font-size: 0.75rem;
		color: #6b7280;
	}

	.no-class {
		margin: 0;
		color: #9ca3af;
		font-size: 0.8125rem;
		font-style: italic;
	}

	.today-count {
		font-size: 0.75rem;
		color: #6b7280;
		padding-top: 0.25rem;
		border-top: 1px solid #e5e7eb;
	}

	.detail-link {
		font-size: 0.75rem;
		color: #3b82f6;
		font-weight: 500;
		margin-top: 0.25rem;
	}
</style>
