<script lang="ts">
	import type { DemoData } from '$types';
	import SerenityScorePreview from '$lib/components/molecules/SerenityScore/SerenityScorePreview.svelte';
	import SerenityScoreExplainer from '$lib/components/molecules/SerenityScore/SerenityScoreExplainer.svelte';
	import DashboardSection from '$lib/components/molecules/DashboardSection.svelte';
	import SkeletonCard from '$lib/components/atoms/Skeleton/SkeletonCard.svelte';
	import SkeletonList from '$lib/components/atoms/Skeleton/SkeletonList.svelte';
	import type { SerenityEmoji } from '$lib/features/dashboard/serenity-score';

	let {
		demoData,
		isFirstLogin = false,
		isLoading = false,
		hasRealData = false,
		serenityEnabled = false,
		childName = '',
		onToggleSerenity
	}: {
		demoData: DemoData;
		isFirstLogin?: boolean;
		isLoading?: boolean;
		hasRealData?: boolean;
		serenityEnabled?: boolean;
		childName?: string;
		onToggleSerenity?: (enabled: boolean) => void;
	} = $props();

	let showExplainer = $state(false);

	const isDemo = $derived(!hasRealData);

	function openExplainer() {
		showExplainer = true;
	}

	function closeExplainer() {
		showExplainer = false;
	}
</script>

<div class="dashboard-parent">
	{#if isFirstLogin}
		<div class="onboarding-banner">
			<div class="onboarding-content">
				<span class="onboarding-icon">👋</span>
				<div class="onboarding-text">
					<h2>Bienvenue sur Classeo !</h2>
					<p>
						Découvrez le Score Sérénité, un indicateur unique qui vous donne en un coup d'œil une vision globale de la scolarité de votre enfant.
						{#if isDemo}
							Les données actuelles sont des exemples. Vos vraies données apparaîtront bientôt.
						{/if}
					</p>
				</div>
			</div>
		</div>
	{/if}

	<div class="dashboard-grid">
		<!-- Score Serenite - Always visible as demo or real -->
		<div class="score-section">
			{#if isLoading}
				<SkeletonCard message={childName ? `Calcul du Score Sérénité de ${childName}...` : 'Calcul du Score Sérénité...'} />
			{:else}
				<SerenityScorePreview
					value={demoData.serenityScore.value}
					emoji={demoData.serenityScore.emoji as SerenityEmoji}
					isDemo={isDemo}
					onClick={openExplainer}
				/>
			{/if}
		</div>

		<!-- EDT Section -->
		<DashboardSection
			title="Emploi du temps"
			subtitle={hasRealData ? "Aujourd'hui" : undefined}
			isPlaceholder={!hasRealData}
			placeholderMessage="L'emploi du temps sera disponible une fois les cours configurés"
		>
			{#if hasRealData}
				{#if isLoading}
					<SkeletonList items={4} message={childName ? `Chargement de l'emploi du temps de ${childName}...` : "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">{item.room}</span>
							</li>
						{/each}
					</ul>
				{/if}
			{/if}
		</DashboardSection>

		<!-- Notes Section -->
		<DashboardSection
			title="Notes récentes"
			isPlaceholder={!hasRealData}
			placeholderMessage="Les notes apparaîtront ici dès qu'elles seront saisies"
		>
			{#if hasRealData}
				{#if isLoading}
					<SkeletonList items={3} message="Récupération des notes..." />
				{:else}
					<ul class="grades-list">
						{#each demoData.grades.recent as grade}
							<li class="grade-item">
								<span class="grade-subject">{grade.subject}</span>
								<span class="grade-value">{grade.value}/{grade.max}</span>
								<span class="grade-eval">{grade.evaluation}</span>
							</li>
						{/each}
					</ul>
				{/if}
			{/if}
		</DashboardSection>

		<!-- Devoirs Section -->
		<DashboardSection
			title="Devoirs à venir"
			isPlaceholder={!hasRealData}
			placeholderMessage="Les devoirs seront affichés ici une fois assignés"
		>
			{#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'}>
								<span class="homework-subject">{homework.subject}</span>
								<span class="homework-title">{homework.title}</span>
								<span class="homework-due">Pour le {homework.dueDate}</span>
								{#if homework.status === 'done'}
									<span class="homework-status done">✓ Fait</span>
								{:else if homework.status === 'late'}
									<span class="homework-status late">En retard</span>
								{/if}
							</li>
						{/each}
					</ul>
				{/if}
			{/if}
		</DashboardSection>
	</div>
</div>

{#if showExplainer}
	<SerenityScoreExplainer
		score={demoData.serenityScore}
		isEnabled={serenityEnabled}
		isDemo={isDemo}
		onClose={closeExplainer}
		onToggleOptIn={onToggleSerenity}
	/>
{/if}

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

	.onboarding-banner {
		background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
		border-radius: 1rem;
		color: white;
		overflow: hidden;
	}

	.onboarding-content {
		display: flex;
		gap: 1rem;
		padding: 1.5rem;
		align-items: flex-start;
	}

	.onboarding-icon {
		font-size: 2rem;
		flex-shrink: 0;
	}

	.onboarding-text h2 {
		margin: 0 0 0.5rem;
		font-size: 1.25rem;
		font-weight: 600;
	}

	.onboarding-text p {
		margin: 0;
		font-size: 0.875rem;
		opacity: 0.9;
		line-height: 1.5;
	}

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

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

		.score-section {
			grid-column: 1 / -1;
		}
	}

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

		.score-section {
			grid-column: 1 / 2;
		}
	}

	.score-section {
		display: flex;
	}

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

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

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

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

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

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

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

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

	.grade-value {
		font-weight: 600;
		color: #22c55e;
	}

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

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

	.homework-item {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		padding: 0.75rem;
		background: #f9fafb;
		border-radius: 0.5rem;
		border-left: 3px solid #3b82f6;
	}

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

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

	.homework-title {
		font-weight: 500;
		color: #1f2937;
	}

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

	.homework-status {
		font-size: 0.75rem;
		padding: 0.125rem 0.5rem;
		border-radius: 0.25rem;
		width: fit-content;
	}

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

	.homework-status.late {
		background: #fee2e2;
		color: #991b1b;
	}
</style>
