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

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

	const DAY_LABELS = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven'];

	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 weekDays = $derived(
		DAY_LABELS.map((label, i) => {
			const d = new Date(weekStart + 'T00:00:00');
			d.setDate(d.getDate() + i);
			const dateStr = formatLocalDate(d);
			return {
				label,
				date: dateStr,
				dayNum: d.getDate(),
				isToday: dateStr === formatLocalDate(new Date())
			};
		})
	);

	let slotsByDay = $derived(
		weekDays.map((day) => ({
			...day,
			slots: slots
				.filter((s) => s.date === day.date)
				.sort((a, b) => a.startTime.localeCompare(b.startTime))
		}))
	);
</script>

<div class="week-view">
	<!-- Mobile: liste verticale par jour -->
	<div class="week-list">
		{#each slotsByDay as day (day.date)}
			<div class="day-section" class:today={day.isToday}>
				<div class="day-header-mobile" class:today={day.isToday}>
					<span class="day-label">{day.label} {day.dayNum}</span>
					<span class="day-count">{day.slots.length} cours</span>
				</div>

				{#if day.slots.length === 0}
					<div class="empty-day">Aucun cours</div>
				{:else}
					<div class="day-slots-mobile">
						{#each day.slots as slot (slot.slotId + slot.date)}
							<button
								class="week-slot-mobile"
								class:modified={slot.isModified}
								onclick={() => onSlotClick(slot)}
								data-testid="week-slot"
								style:--slot-color={slot.subjectColor ?? '#e5e7eb'}
							>
								<span class="slot-time-mobile">{slot.startTime} - {slot.endTime}</span>
								<span class="slot-subject-mobile">{slot.subjectName}</span>
								{#if slot.room}
									<span class="slot-room-mobile">{slot.room}</span>
								{/if}
							</button>
						{/each}
					</div>
				{/if}
			</div>
		{/each}
	</div>

	<!-- Desktop: grille 5 colonnes -->
	<div class="week-grid">
		{#each slotsByDay as day (day.date)}
			<div class="day-column">
				<div class="day-header-desktop" class:today={day.isToday}>
					<span class="day-label">{day.label}</span>
					<span class="day-num">{day.dayNum}</span>
				</div>

				<div class="day-slots">
					{#if day.slots.length === 0}
						<div class="empty-day-desktop">-</div>
					{:else}
						{#each day.slots as slot (slot.slotId + slot.date)}
							<button
								class="week-slot-desktop"
								class:modified={slot.isModified}
								onclick={() => onSlotClick(slot)}
								data-testid="week-slot"
								style:--slot-color={slot.subjectColor ?? '#e5e7eb'}
							>
								<span class="week-slot-time">{slot.startTime}</span>
								<span class="week-slot-subject">{slot.subjectName}</span>
								{#if slot.room}
									<span class="week-slot-room">{slot.room}</span>
								{/if}
							</button>
						{/each}
					{/if}
				</div>
			</div>
		{/each}
	</div>
</div>

<style>
	/* ── Layout ── */
	.week-view {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Mobile first: list visible, grid hidden */
	.week-list {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.week-grid {
		display: none;
	}

	/* ── Mobile: day sections ── */
	.day-section {
		border-radius: 0.5rem;
		overflow: hidden;
		border: 1px solid #e5e7eb;
	}

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

	.day-header-mobile {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.625rem 0.75rem;
		background: #f3f4f6;
		font-size: 0.875rem;
		font-weight: 600;
	}

	.day-header-mobile.today {
		background: #3b82f6;
		color: white;
	}

	.day-count {
		font-size: 0.75rem;
		font-weight: 400;
		opacity: 0.7;
	}

	.empty-day {
		text-align: center;
		color: #9ca3af;
		padding: 0.75rem;
		font-size: 0.8125rem;
	}

	.day-slots-mobile {
		display: flex;
		flex-direction: column;
	}

	.week-slot-mobile {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.75rem;
		background: white;
		border: none;
		border-top: 1px solid #f3f4f6;
		border-left: 4px solid var(--slot-color, #e5e7eb);
		cursor: pointer;
		text-align: left;
		font-size: 0.875rem;
		width: 100%;
		transition: background 0.15s;
	}

	.week-slot-mobile:hover {
		background: #f9fafb;
	}

	.week-slot-mobile.modified {
		background: #fefce8;
	}

	.slot-time-mobile {
		font-weight: 600;
		color: #3b82f6;
		white-space: nowrap;
		min-width: 6.5rem;
		font-size: 0.8125rem;
	}

	.slot-subject-mobile {
		font-weight: 500;
		color: #1f2937;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

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

	/* ── Desktop: 5-column grid ── */
	@media (min-width: 768px) {
		.week-list {
			display: none;
		}

		.week-grid {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 0.5rem;
		}

		.day-column {
			display: flex;
			flex-direction: column;
			gap: 0.25rem;
		}

		.day-header-desktop {
			text-align: center;
			padding: 0.5rem;
			border-radius: 0.5rem;
			background: #f3f4f6;
		}

		.day-header-desktop.today {
			background: #3b82f6;
			color: white;
		}

		.day-label {
			font-size: 0.75rem;
			font-weight: 600;
			text-transform: uppercase;
		}

		.day-num {
			display: block;
			font-size: 1.125rem;
			font-weight: 700;
		}

		.day-slots {
			display: flex;
			flex-direction: column;
			gap: 0.25rem;
			flex: 1;
		}

		.empty-day-desktop {
			text-align: center;
			color: #d1d5db;
			padding: 1rem;
			font-size: 0.875rem;
		}

		.week-slot-desktop {
			display: flex;
			flex-direction: column;
			gap: 0.125rem;
			padding: 0.5rem;
			background: #eff6ff;
			border: 1px solid #bfdbfe;
			border-left: 4px solid var(--slot-color, #bfdbfe);
			border-radius: 0.375rem;
			cursor: pointer;
			text-align: left;
			font-size: 0.75rem;
			transition: background 0.15s;
		}

		.week-slot-desktop:hover {
			background: #dbeafe;
		}

		.week-slot-desktop.modified {
			border-color: #fcd34d;
			background: #fefce8;
		}

		.week-slot-time {
			font-weight: 600;
			color: #3b82f6;
		}

		.week-slot-subject {
			font-weight: 500;
			color: #1f2937;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.week-slot-room {
			color: #6b7280;
		}
	}
</style>
