<script lang="ts">
	import DashboardSection from '$lib/components/molecules/DashboardSection.svelte';
	import SkeletonList from '$lib/components/atoms/Skeleton/SkeletonList.svelte';

	let {
		isLoading = false,
		hasRealData = false,
		establishmentName = ''
	}: {
		isLoading?: boolean;
		hasRealData?: boolean;
		establishmentName?: string;
	} = $props();

	type ActionCard = { href: string; icon: string; label: string; hint: string };
	type DashboardSectionDef = { id: string; title: string; cards: ActionCard[] };

	const dashboardSections: DashboardSectionDef[] = [
		{
			id: 'personnes',
			title: 'Personnes',
			cards: [
				{ href: '/admin/users', icon: '👥', label: 'Gérer les utilisateurs', hint: 'Inviter et gérer' },
				{ href: '/admin/parent-invitations', icon: '✉️', label: 'Invitations parents', hint: "Codes d'invitation" },
				{ href: '/admin/students', icon: '🎒', label: 'Gérer les élèves', hint: 'Inscrire et affecter' }
			]
		},
		{
			id: 'organisation',
			title: 'Organisation',
			cards: [
				{ href: '/admin/classes', icon: '🏫', label: 'Configurer les classes', hint: 'Créer et gérer' },
				{ href: '/admin/subjects', icon: '📚', label: 'Gérer les matières', hint: 'Créer et gérer' },
				{ href: '/admin/assignments', icon: '📋', label: 'Affectations', hint: 'Enseignants et classes' },
				{ href: '/admin/replacements', icon: '🔄', label: 'Remplacements', hint: 'Enseignants absents' },
				{ href: '/admin/schedule', icon: '🕐', label: 'Emploi du temps', hint: 'Cours et créneaux' }
			]
		},
		{
			id: 'annee-scolaire',
			title: 'Année scolaire',
			cards: [
				{ href: '/admin/academic-year/periods', icon: '📅', label: 'Périodes scolaires', hint: 'Trimestres et semestres' },
				{ href: '/admin/calendar', icon: '🗓️', label: 'Calendrier scolaire', hint: 'Fériés et vacances' }
			]
		},
		{
			id: 'parametres',
			title: 'Paramètres',
			cards: [
				{ href: '/admin/image-rights', icon: '📷', label: "Droit à l'image", hint: 'Autorisations élèves' },
				{ href: '/admin/pedagogy', icon: '🎓', label: 'Pédagogie', hint: 'Mode de notation' },
				{ href: '/admin/branding', icon: '🎨', label: 'Identité visuelle', hint: 'Logo et couleurs' },
				{ href: '/admin/homework-rules', icon: '📏', label: 'Règles de devoirs', hint: 'Timing et contraintes' }
			]
		},
		{
			id: 'imports',
			title: 'Imports',
			cards: [
				{ href: '/admin/import/students', icon: '📤', label: 'Importer des élèves', hint: 'CSV ou XLSX' },
				{ href: '/admin/import/teachers', icon: '📤', label: 'Importer des enseignants', hint: 'CSV ou XLSX' }
			]
		}
	];
</script>

<div class="dashboard-admin">
	<header class="dashboard-header">
		<h1>Administration</h1>
		{#if establishmentName}
			<p class="dashboard-subtitle">{establishmentName}</p>
		{:else}
			<p class="dashboard-subtitle">Bienvenue dans votre espace d'administration</p>
		{/if}
	</header>

	<h2 class="sr-only">Actions de configuration</h2>

	{#each dashboardSections as section (section.id)}
		<section class="dashboard-section" aria-labelledby="section-{section.id}">
			<h2 id="section-{section.id}" class="section-title">{section.title}</h2>
			<div class="action-cards">
				{#each section.cards as card (card.href)}
					<a class="action-card" href={card.href}>
						<span class="action-icon">{card.icon}</span>
						<span class="action-label">{card.label}</span>
						<span class="action-hint">{card.hint}</span>
					</a>
				{/each}
			</div>
		</section>
	{/each}

	<div class="dashboard-grid">
		<DashboardSection
			title="Utilisateurs"
			isPlaceholder={!hasRealData}
			placeholderMessage="Les statistiques utilisateurs s'afficheront une fois les comptes créés"
		>
			{#if hasRealData}
				{#if isLoading}
					<SkeletonList items={3} message="Chargement des statistiques..." />
				{:else}
					<div class="stats-grid">
						<div class="stat-card">
							<span class="stat-value">--</span>
							<span class="stat-label">Élèves</span>
						</div>
						<div class="stat-card">
							<span class="stat-value">--</span>
							<span class="stat-label">Enseignants</span>
						</div>
						<div class="stat-card">
							<span class="stat-value">--</span>
							<span class="stat-label">Parents</span>
						</div>
					</div>
				{/if}
			{/if}
		</DashboardSection>

		<DashboardSection
			title="Configuration"
			isPlaceholder={!hasRealData}
			placeholderMessage="L'état de la configuration sera affiché ici"
		>
			{#if hasRealData && isLoading}
				<SkeletonList items={4} message="Vérification de la configuration..." />
			{/if}
		</DashboardSection>

		<DashboardSection
			title="Activité récente"
			isPlaceholder={!hasRealData}
			placeholderMessage="L'historique des actions s'affichera ici"
		>
			{#if hasRealData && isLoading}
				<SkeletonList items={5} message="Chargement de l'activité..." />
			{/if}
		</DashboardSection>
	</div>
</div>

<style>
	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.dashboard-admin {
		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;
	}

	.dashboard-section {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.section-title {
		margin: 0;
		font-size: 1.1rem;
		font-weight: 600;
		color: #374151;
		padding-bottom: 0.5rem;
		border-bottom: 1px solid #e5e7eb;
	}

	.action-cards {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: 1rem;
	}

	.action-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
		padding: 1.25rem 1rem;
		background: white;
		border: 2px solid #e5e7eb;
		border-radius: 0.75rem;
		text-decoration: none;
		color: inherit;
		transition: all 0.2s;
	}

	.action-card:hover {
		border-color: #3b82f6;
		background: #eff6ff;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

	.action-icon {
		font-size: 2rem;
	}

	.action-label {
		font-weight: 600;
		color: #374151;
		text-align: center;
	}

	.action-hint {
		font-size: 0.75rem;
		color: #6b7280;
		text-align: center;
	}

	.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);
		}
	}

	.stats-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
	}

	.stat-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.25rem;
		padding: 1rem;
		background: #f9fafb;
		border-radius: 0.5rem;
	}

	.stat-value {
		font-size: 1.5rem;
		font-weight: 700;
		color: #1f2937;
	}

	.stat-label {
		font-size: 0.75rem;
		color: #6b7280;
	}
</style>
