<script lang="ts">
	import type { ScheduleSlot } from '$lib/features/schedule/api/schedule';

	let {
		slots = [],
		date,
		nextSlotId = null,
		onSlotClick
	}: {
		slots: ScheduleSlot[];
		date: string;
		nextSlotId: string | null;
		onSlotClick: (slot: ScheduleSlot) => void;
	} = $props();

	let dayLabel = $derived(
		new Date(date + 'T00:00:00').toLocaleDateString('fr-FR', {
			weekday: 'long',
			day: 'numeric',
			month: 'long'
		})
	);

	function formatLocalDate(d: Date): string {
		const y = d.getFullYear();
		const m = String(d.getMonth() + 1).padStart(2, '0');
		const day = String(d.getDate()).padStart(2, '0');
		return `${y}-${m}-${day}`;
	}

	let isToday = $derived(date === formatLocalDate(new Date()));
</script>

<div class="day-view">
	<h2 class="day-title" class:today={isToday}>
		{dayLabel}
		{#if isToday}
			<span class="today-badge">Aujourd'hui</span>
		{/if}
	</h2>

	{#if slots.length === 0}
		<div class="no-courses">Aucun cours ce jour</div>
	{:else}
		<ul class="slot-list">
			{#each slots as slot (slot.slotId + slot.date)}
				<li
						class="slot-item"
						class:next={slot.slotId === nextSlotId}
						style:--slot-color={slot.subjectColor ?? '#e5e7eb'}
					>
					<button
						class="slot-button"
						onclick={() => onSlotClick(slot)}
						data-testid="schedule-slot"
					>
						<div class="slot-time">
							<span class="time-start">{slot.startTime}</span>
							<span class="time-separator">-</span>
							<span class="time-end">{slot.endTime}</span>
						</div>
						<div class="slot-content">
							<span class="slot-subject">{slot.subjectName}</span>
							<span class="slot-meta">
								{slot.teacherName}
								{#if slot.room} &middot; {slot.room}{/if}
							</span>
						</div>
						{#if slot.slotId === nextSlotId}
							<span class="next-badge">Prochain</span>
						{/if}
						{#if slot.isModified}
							<span class="modified-badge">Modifié</span>
						{/if}
					</button>
				</li>
			{/each}
		</ul>
	{/if}
</div>

<style>
	.day-view {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.day-title {
		font-size: 1rem;
		font-weight: 600;
		color: #374151;
		margin: 0;
		text-transform: capitalize;
	}

	.day-title.today {
		color: #3b82f6;
	}

	.today-badge {
		font-size: 0.75rem;
		padding: 0.125rem 0.5rem;
		background: #eff6ff;
		color: #3b82f6;
		border-radius: 1rem;
		font-weight: 500;
		margin-left: 0.5rem;
	}

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

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

	.slot-item {
		border-radius: 0.75rem;
		overflow: hidden;
		border-left: 4px solid var(--slot-color, #e5e7eb);
		transition: border-color 0.2s;
	}

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

	.slot-button {
		display: flex;
		align-items: center;
		gap: 1rem;
		width: 100%;
		padding: 0.75rem 1rem;
		background: #f9fafb;
		border: none;
		cursor: pointer;
		text-align: left;
		position: relative;
		transition: background 0.15s;
	}

	.slot-button:hover {
		background: #f3f4f6;
	}

	.slot-item.next .slot-button {
		background: #eff6ff;
	}

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

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

	.time-separator {
		font-size: 0.625rem;
		color: #9ca3af;
	}

	.time-end {
		font-size: 0.75rem;
		color: #6b7280;
	}

	.slot-content {
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
		flex: 1;
		min-width: 0;
	}

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

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

	.next-badge,
	.modified-badge {
		position: absolute;
		top: 0.375rem;
		right: 0.5rem;
		font-size: 0.625rem;
		padding: 0.125rem 0.375rem;
		border-radius: 0.25rem;
		font-weight: 600;
		text-transform: uppercase;
	}

	.next-badge {
		background: #3b82f6;
		color: white;
	}

	.modified-badge {
		background: #f59e0b;
		color: white;
		top: auto;
		bottom: 0.375rem;
	}
</style>
