<script lang="ts">
	import type { DemoData } from '$types';
	import type { ScheduleSlot } from '$lib/features/schedule/api/schedule';
	import type { StudentHomework, StudentHomeworkDetail } from '$lib/features/homework/api/studentHomework';
	import type { StudentGrade } from '$lib/features/grades/api/studentGrades';
	import { fetchDaySchedule, fetchNextClass } from '$lib/features/schedule/api/schedule';
	import { fetchStudentHomework, fetchHomeworkDetail } from '$lib/features/homework/api/studentHomework';
	import type { StudentAverages } from '$lib/features/grades/api/studentGrades';
	import { fetchMyGrades, fetchMyAverages } from '$lib/features/grades/api/studentGrades';
	import { isGradeNew, markGradesSeen } from '$lib/features/grades/stores/gradePreferences.svelte';
	import HomeworkDetail from '$lib/components/organisms/StudentHomework/HomeworkDetail.svelte';
	import { recordSync } from '$lib/features/schedule/stores/scheduleCache.svelte';
	import { getHomeworkStatuses } from '$lib/features/homework/stores/homeworkStatus.svelte';
	import DashboardSection from '$lib/components/molecules/DashboardSection.svelte';
	import SkeletonList from '$lib/components/atoms/Skeleton/SkeletonList.svelte';
	import ScheduleWidget from '$lib/components/organisms/StudentSchedule/ScheduleWidget.svelte';
	import { getActiveRole } from '$features/roles/roleContext.svelte';

	let {
		demoData,
		isLoading = false,
		hasRealData = false,
		isMinor = true
	}: {
		demoData: DemoData;
		isLoading?: boolean;
		hasRealData?: boolean;
		isMinor?: boolean;
	} = $props();

	let isEleve = $derived(getActiveRole() === 'ROLE_ELEVE');

	// Schedule widget state (AC1: "0 tap" — visible dès le dashboard)
	let scheduleSlots = $state<ScheduleSlot[]>([]);
	let scheduleNextSlotId = $state<string | null>(null);
	let scheduleLoading = $state(false);
	let scheduleError = $state<string | null>(null);

	// Homework widget state
	let studentHomeworks = $state<StudentHomework[]>([]);
	let homeworkLoading = $state(false);

	// Grades widget state
	let recentGrades = $state<StudentGrade[]>([]);
	let studentAverages = $state<StudentAverages | null>(null);
	let gradesLoading = $state(false);

	let hwStatuses = $derived(getHomeworkStatuses());

	let pendingHomeworks = $derived(
		studentHomeworks.filter(hw => !hwStatuses[hw.id]?.done).slice(0, 5)
	);

	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}`;
	}

	function formatShortDate(dateStr: string): string {
		const date = new Date(dateStr + 'T00:00:00');
		return date.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' });
	}

	async function loadTodaySchedule() {
		scheduleLoading = true;
		scheduleError = null;

		try {
			const today = formatLocalDate(new Date());
			scheduleSlots = await fetchDaySchedule(today);
			recordSync();

			try {
				const next = await fetchNextClass();
				scheduleNextSlotId = next?.slotId ?? null;
			} catch {
				scheduleNextSlotId = null;
			}
		} catch (e) {
			scheduleError = e instanceof Error ? e.message : 'Erreur de chargement';
		} finally {
			scheduleLoading = false;
		}
	}

	async function loadHomeworks() {
		homeworkLoading = true;

		try {
			studentHomeworks = await fetchStudentHomework();
		} catch {
			// Silently fail on dashboard widget
		} finally {
			homeworkLoading = false;
		}
	}

	let gradeSeenTimerId: number | null = null;

	async function loadGrades() {
		gradesLoading = true;

		try {
			const [all, avgs] = await Promise.all([fetchMyGrades(), fetchMyAverages()]);
			recentGrades = all.slice(0, 5);
			studentAverages = avgs;

			const ids = all.map((g) => g.id);
			gradeSeenTimerId = window.setTimeout(() => markGradesSeen(ids), 3000);
		} catch {
			// Silently fail on dashboard widget
		} finally {
			gradesLoading = false;
		}
	}

	function gradeColor(value: number | null, scale: number): string {
		if (value === null || scale <= 0) return '#6b7280';
		const normalized = (value / scale) * 20;
		if (normalized >= 14) return '#22c55e';
		if (normalized >= 10) return '#f59e0b';
		return '#ef4444';
	}

	// Homework detail modal
	let selectedHomeworkDetail = $state<StudentHomeworkDetail | null>(null);

	async function openHomeworkDetail(homeworkId: string) {
		try {
			selectedHomeworkDetail = await fetchHomeworkDetail(homeworkId);
		} catch {
			// Fallback: navigate to full page
			window.location.href = '/dashboard/homework';
		}
	}

	function closeHomeworkDetail() {
		selectedHomeworkDetail = null;
	}

	function handleOverlayClick(e: MouseEvent) {
		if (e.target === e.currentTarget) closeHomeworkDetail();
	}

	function handleModalKeydown(e: KeyboardEvent) {
		if (e.key === 'Escape') closeHomeworkDetail();
	}

	$effect(() => {
		if (!isEleve) return;
		void loadTodaySchedule();
		void loadHomeworks();
		void loadGrades();
		return () => {
			if (gradeSeenTimerId !== null) window.clearTimeout(gradeSeenTimerId);
		};
	});
</script>

<div class="dashboard-student">
	<header class="dashboard-header">
		<h1>Mon espace</h1>
		<p class="dashboard-subtitle">
			{#if isMinor}
				Bienvenue ! Voici ton tableau de bord.
			{:else}
				Bienvenue ! Voici votre tableau de bord.
			{/if}
		</p>
	</header>

	{#if !hasRealData}
		<div class="info-banner">
			<span class="info-icon">📚</span>
			<p>
				{#if isMinor}
					Ton emploi du temps, tes notes et tes devoirs apparaîtront ici bientôt !
				{:else}
					Votre emploi du temps, vos notes et vos devoirs apparaîtront ici bientôt !
				{/if}
			</p>
		</div>
	{/if}

	<div class="dashboard-grid">
		<!-- EDT Section -->
		<DashboardSection
			title="Mon emploi du temps"
			subtitle={isEleve ? "Aujourd'hui" : (hasRealData ? "Aujourd'hui" : undefined)}
			isPlaceholder={!isEleve && !hasRealData}
			placeholderMessage={isMinor ? "Ton emploi du temps sera bientôt disponible" : "Votre emploi du temps sera bientôt disponible"}
		>
			{#if isEleve}
				<ScheduleWidget
					slots={scheduleSlots}
					nextSlotId={scheduleNextSlotId}
					isLoading={scheduleLoading}
					error={scheduleError}
				/>
			{:else if hasRealData}
				{#if isLoading}
					<SkeletonList items={4} message="Chargement de l'emploi du temps..." />
				{:else}
					<ul class="schedule-list">
						{#each demoData.schedule.today as item}
							<li class="schedule-item">
								<span class="schedule-time">{item.time}</span>
								<span class="schedule-subject">{item.subject}</span>
								<span class="schedule-room">Salle {item.room}</span>
							</li>
						{/each}
					</ul>
				{/if}
			{/if}
		</DashboardSection>

		<!-- Notes Section -->
		<DashboardSection
			title="Mes notes"
			subtitle={isEleve ? "Dernières notes" : (hasRealData ? "Dernières notes" : undefined)}
			isPlaceholder={!isEleve && !hasRealData}
			placeholderMessage={isMinor ? "Tes notes apparaîtront ici" : "Vos notes apparaîtront ici"}
		>
			{#if isEleve}
				{#if gradesLoading}
					<SkeletonList items={3} message="Chargement des notes..." />
				{:else if recentGrades.length === 0}
					<p class="empty-grades">Aucune note publiée</p>
				{:else}
					{#if studentAverages?.generalAverage != null}
						<div class="widget-general-avg">
							<span class="widget-avg-label">Moyenne générale</span>
							<span class="widget-avg-value" style:color={gradeColor(studentAverages.generalAverage, 20)}>
								{studentAverages.generalAverage.toFixed(1)}/20
							</span>
						</div>
					{/if}
					<ul class="grades-list">
						{#each recentGrades as grade}
							<li class="grade-item">
								<div class="grade-header">
									<span class="grade-subject">{grade.subjectName ?? 'Matière'}</span>
									{#if isGradeNew(grade.id)}
										<span class="grade-badge-new">Nouveau</span>
									{/if}
									{#if grade.status === 'graded' && grade.value != null}
										<span class="grade-value" style:color={gradeColor(grade.value, grade.gradeScale)}>
											{grade.value}/{grade.gradeScale}
										</span>
									{:else if grade.status === 'absent'}
										<span class="grade-value" style:color="#f59e0b">Absent</span>
									{:else if grade.status === 'dispensed'}
										<span class="grade-value" style:color="#6b7280">Dispensé</span>
									{/if}
								</div>
								<span class="grade-eval">{grade.evaluationTitle}</span>
							</li>
						{/each}
					</ul>
					<a href="/dashboard/student-grades" class="view-all-link">
						Voir toutes les notes →
					</a>
				{/if}
			{:else if hasRealData}
				{#if isLoading}
					<SkeletonList items={3} message="Chargement des notes..." />
				{:else}
					<ul class="grades-list">
						{#each demoData.grades.recent as grade}
							<li class="grade-item">
								<div class="grade-header">
									<span class="grade-subject">{grade.subject}</span>
									<span class="grade-value">{grade.value}/{grade.max}</span>
								</div>
								<span class="grade-eval">{grade.evaluation}</span>
							</li>
						{/each}
					</ul>
				{/if}
			{/if}
		</DashboardSection>

		<!-- Devoirs Section -->
		<DashboardSection
			title="Mes devoirs"
			subtitle={isEleve ? "À faire" : (hasRealData ? "À faire" : undefined)}
			isPlaceholder={!isEleve && !hasRealData}
			placeholderMessage={isMinor ? "Tes devoirs s'afficheront ici" : "Vos devoirs s'afficheront ici"}
		>
			{#if isEleve}
				{#if homeworkLoading}
					<SkeletonList items={3} message="Chargement des devoirs..." />
				{:else if pendingHomeworks.length === 0}
					<p class="empty-homework">Aucun devoir à faire</p>
				{:else}
					<ul class="homework-list">
						{#each pendingHomeworks as homework}
							<li>
								<button class="homework-item" style:border-left-color={homework.subjectColor ?? '#3b82f6'} onclick={() => openHomeworkDetail(homework.id)}>
									<div class="homework-header">
										<span class="homework-subject" style:color={homework.subjectColor ?? '#3b82f6'}>{homework.subjectName}</span>
									</div>
									<span class="homework-title">{homework.title}</span>
									<span class="homework-due">Pour le {formatShortDate(homework.dueDate)}</span>
								</button>
							</li>
						{/each}
					</ul>
					<a href="/dashboard/homework" class="view-all-link">
						Voir tous les devoirs →
					</a>
				{/if}
			{:else if hasRealData}
				{#if isLoading}
					<SkeletonList items={3} message="Chargement des devoirs..." />
				{:else}
					<ul class="homework-list">
						{#each demoData.homework.upcoming as homework}
							<li class="homework-item" class:done={homework.status === 'done'}>
								<div class="homework-header">
									<span class="homework-subject">{homework.subject}</span>
									{#if homework.status === 'done'}
										<span class="homework-badge done">Fait ✓</span>
									{:else if homework.status === 'late'}
										<span class="homework-badge late">En retard</span>
									{/if}
								</div>
								<span class="homework-title">{homework.title}</span>
								<span class="homework-due">Pour le {homework.dueDate}</span>
							</li>
						{/each}
					</ul>
				{/if}
			{/if}
		</DashboardSection>
	</div>
</div>

{#if selectedHomeworkDetail}
	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
	<div class="homework-modal-overlay" onclick={handleOverlayClick} onkeydown={handleModalKeydown} role="presentation">
		<div class="homework-modal" role="dialog" aria-modal="true" aria-label="Détail du devoir">
			<button class="homework-modal-close" onclick={closeHomeworkDetail} aria-label="Fermer">&times;</button>
			<HomeworkDetail detail={selectedHomeworkDetail} onBack={closeHomeworkDetail} />
		</div>
	</div>
{/if}

<style>
	.dashboard-student {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.dashboard-header {
		margin-bottom: 0.5rem;
	}

	.dashboard-header h1 {
		margin: 0;
		font-size: 1.5rem;
		font-weight: 700;
		color: #1f2937;
	}

	.dashboard-subtitle {
		margin: 0.25rem 0 0;
		color: #6b7280;
	}

	.info-banner {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 1rem 1.25rem;
		background: #eff6ff;
		border: 1px solid #bfdbfe;
		border-radius: 0.75rem;
		color: #1e40af;
	}

	.info-icon {
		font-size: 1.5rem;
		flex-shrink: 0;
	}

	.info-banner p {
		margin: 0;
		font-size: 0.875rem;
	}

	.dashboard-grid {
		display: grid;
		gap: 1.5rem;
		grid-template-columns: 1fr;
	}

	@media (min-width: 768px) {
		.dashboard-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (min-width: 1024px) {
		.dashboard-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	/* Schedule List */
	.schedule-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.schedule-item {
		display: grid;
		grid-template-columns: auto 1fr auto;
		gap: 0.75rem;
		padding: 0.75rem;
		background: #f9fafb;
		border-radius: 0.5rem;
		align-items: center;
	}

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

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

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

	/* Grades List */
	.grades-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.grade-item {
		padding: 0.75rem;
		background: #f9fafb;
		border-radius: 0.5rem;
	}

	.grade-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0.25rem;
	}

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

	.grade-value {
		font-weight: 700;
		color: #22c55e;
		font-size: 1.125rem;
	}

	.grade-eval {
		font-size: 0.875rem;
		color: #6b7280;
	}

	.grade-badge-new {
		font-size: 0.5625rem;
		padding: 0.0625rem 0.375rem;
		background: #eff6ff;
		color: #2563eb;
		border-radius: 1rem;
		font-weight: 600;
		text-transform: uppercase;
	}

	.empty-grades {
		margin: 0;
		text-align: center;
		padding: 1rem;
		color: #6b7280;
		font-size: 0.875rem;
	}

	.widget-general-avg {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.5rem 0.75rem;
		background: #f0fdf4;
		border: 1px solid #bbf7d0;
		border-radius: 0.5rem;
		margin-bottom: 0.5rem;
	}

	.widget-avg-label {
		font-size: 0.75rem;
		color: #6b7280;
	}

	.widget-avg-value {
		font-size: 1rem;
		font-weight: 700;
	}

	/* Homework List */
	.homework-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.homework-item {
		display: block;
		width: 100%;
		padding: 0.75rem;
		background: #f9fafb;
		border: none;
		border-radius: 0.5rem;
		border-left: 3px solid #3b82f6;
		text-align: left;
		cursor: pointer;
		transition: background 0.15s;
		font: inherit;
	}

	button.homework-item:hover {
		background: #f3f4f6;
	}

	.homework-item.done {
		border-left-color: #22c55e;
		opacity: 0.7;
	}

	.homework-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0.25rem;
	}

	.homework-subject {
		font-size: 0.75rem;
		font-weight: 600;
		color: #3b82f6;
		text-transform: uppercase;
	}

	.homework-badge {
		font-size: 0.625rem;
		padding: 0.125rem 0.375rem;
		border-radius: 0.25rem;
		font-weight: 500;
	}

	.homework-badge.done {
		background: #dcfce7;
		color: #166534;
	}

	.homework-badge.late {
		background: #fee2e2;
		color: #991b1b;
	}

	.homework-title {
		display: block;
		font-weight: 500;
		color: #1f2937;
		margin-bottom: 0.25rem;
	}

	.homework-due {
		font-size: 0.875rem;
		color: #6b7280;
	}

	.empty-homework {
		margin: 0;
		text-align: center;
		padding: 1rem;
		color: #6b7280;
		font-size: 0.875rem;
	}

	.view-all-link {
		display: block;
		text-align: center;
		margin-top: 0.75rem;
		color: #3b82f6;
		font-size: 0.875rem;
		font-weight: 500;
		text-decoration: none;
	}

	.view-all-link:hover {
		color: #2563eb;
	}

	/* Homework detail modal */
	.homework-modal-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 50;
		padding: 1rem;
	}

	.homework-modal {
		position: relative;
		background: white;
		border-radius: 0.75rem;
		padding: 1.5rem;
		max-width: 40rem;
		width: 100%;
		max-height: 80vh;
		overflow-y: auto;
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	}

	.homework-modal-close {
		position: absolute;
		top: 0.75rem;
		right: 0.75rem;
		background: none;
		border: none;
		font-size: 1.5rem;
		color: #6b7280;
		cursor: pointer;
		line-height: 1;
		padding: 0.25rem;
	}

	.homework-modal-close:hover {
		color: #1f2937;
	}
</style>
