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

	let {
		slots = [],
		nextSlotId = null,
		isLoading = false,
		error = null
	}: {
		slots: ScheduleSlot[];
		nextSlotId: string | null;
		isLoading?: boolean;
		error?: string | null;
	} = $props();

	let offline = $state(isOffline());
	let lastSync = $derived(getLastSyncDate());

	$effect(() => {
		function handleOnline() {
			offline = false;
		}
		function handleOffline() {
			offline = true;
		}

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

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

</script>

<div class="schedule-widget">
	{#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">Chargement...</div>
	{:else if error}
		<div class="error">{error}</div>
	{:else if slots.length === 0}
		<div class="empty">Aucun cours aujourd'hui</div>
	{:else}
		<ul class="slot-list">
			{#each slots as slot (slot.slotId + slot.date)}
				<li
					class="slot-item"
					class:next={slot.slotId === nextSlotId}
					data-testid="schedule-slot"
					style:--slot-color={slot.subjectColor ?? 'transparent'}
				>
					<div class="slot-time">
						<span class="time-start">{slot.startTime}</span>
						<span class="time-end">{slot.endTime}</span>
					</div>
					<div class="slot-content">
						<span class="slot-subject">{slot.subjectName}</span>
						<span class="slot-teacher">{slot.teacherName}</span>
					</div>
					{#if slot.room}
						<span class="slot-room">{slot.room}</span>
					{/if}
					{#if slot.slotId === nextSlotId}
						<span class="next-badge">Prochain</span>
					{/if}
				</li>
			{/each}
		</ul>
	{/if}
</div>

<style>
	.schedule-widget {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.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,
	.error,
	.empty {
		text-align: center;
		padding: 1rem;
		color: #6b7280;
		font-size: 0.875rem;
	}

	.error {
		color: #dc2626;
	}

	.slot-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.slot-item {
		display: grid;
		grid-template-columns: auto 1fr auto;
		gap: 0.75rem;
		padding: 0.75rem;
		background: #f9fafb;
		border-radius: 0.5rem;
		align-items: center;
		border-left: 3px solid var(--slot-color, transparent);
		position: relative;
	}

	.slot-item.next {
		--slot-color: #3b82f6;
		background: #eff6ff;
	}

	.slot-time {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: 3rem;
	}

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

	.time-end {
		font-size: 0.75rem;
		color: #9ca3af;
	}

	.slot-content {
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
	}

	.slot-subject {
		font-weight: 500;
		color: #1f2937;
	}

	.slot-teacher {
		font-size: 0.75rem;
		color: #6b7280;
	}

	.slot-room {
		font-size: 0.75rem;
		color: #6b7280;
		white-space: nowrap;
	}

	.next-badge {
		position: absolute;
		top: 0.25rem;
		right: 0.5rem;
		font-size: 0.625rem;
		padding: 0.125rem 0.375rem;
		background: #3b82f6;
		color: white;
		border-radius: 0.25rem;
		font-weight: 600;
		text-transform: uppercase;
	}
</style>
