<script lang="ts">
	import { getApiBaseUrl } from '$lib/api/config';
	import { authenticatedFetch } from '$lib/auth/auth.svelte';

	let classCount = $state<number | null>(null);
	let subjectCount = $state<number | null>(null);

	$effect(() => {
		loadStats();
	});

	async function loadStats() {
		const base = getApiBaseUrl();

		const [classesRes, subjectsRes] = await Promise.allSettled([
			authenticatedFetch(`${base}/classes`),
			authenticatedFetch(`${base}/subjects`)
		]);

		if (classesRes.status === 'fulfilled' && classesRes.value.ok) {
			const data = await classesRes.value.json();
			classCount = Array.isArray(data) ? data.length : (data['hydra:totalItems'] ?? null);
		}

		if (subjectsRes.status === 'fulfilled' && subjectsRes.value.ok) {
			const data = await subjectsRes.value.json();
			subjectCount = Array.isArray(data) ? data.length : (data['hydra:totalItems'] ?? null);
		}
	}
</script>

<svelte:head>
	<title>Administration - Classeo</title>
</svelte:head>

<div class="admin-dashboard">
	<header class="page-header">
		<h1>Administration</h1>
		<p class="subtitle">Configurez votre établissement</p>
	</header>

	<div class="stats-row">
		<div class="stat-card">
			<span class="stat-value">{classCount ?? '–'}</span>
			<span class="stat-label">Classes</span>
		</div>
		<div class="stat-card">
			<span class="stat-value">{subjectCount ?? '–'}</span>
			<span class="stat-label">Matières</span>
		</div>
	</div>

	<div class="action-cards">
		<a class="action-card" href="/admin/classes">
			<span class="action-icon">🏫</span>
			<span class="action-label">Classes</span>
			<span class="action-hint">Créer et gérer les classes</span>
		</a>
		<a class="action-card" href="/admin/subjects">
			<span class="action-icon">📚</span>
			<span class="action-label">Matières</span>
			<span class="action-hint">Créer et gérer les matières</span>
		</a>
		<a class="action-card" href="/admin/academic-year/periods">
			<span class="action-icon">📅</span>
			<span class="action-label">Périodes scolaires</span>
			<span class="action-hint">Trimestres ou semestres</span>
		</a>
	</div>
</div>

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

	.page-header h1 {
		margin: 0;
		font-size: 1.5rem;
		font-weight: 700;
		color: var(--text-primary, #1f2937);
	}

	.subtitle {
		margin: 0.25rem 0 0;
		color: var(--text-secondary, #64748b);
		font-size: 0.875rem;
	}

	.stats-row {
		display: flex;
		gap: 1rem;
	}

	.stat-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.25rem;
		padding: 1rem 1.5rem;
		background: var(--surface-elevated, #fff);
		border: 1px solid var(--border-subtle, #e2e8f0);
		border-radius: 0.75rem;
		min-width: 100px;
	}

	.stat-value {
		font-size: 1.5rem;
		font-weight: 700;
		color: var(--text-primary, #1f2937);
	}

	.stat-label {
		font-size: 0.75rem;
		color: var(--text-secondary, #64748b);
	}

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

	.action-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
		padding: 1.5rem 1rem;
		background: var(--surface-elevated, #fff);
		border: 2px solid var(--border-subtle, #e2e8f0);
		border-radius: 0.75rem;
		text-decoration: none;
		color: inherit;
		transition: all 0.2s;
	}

	.action-card:hover {
		border-color: var(--accent-primary, #0ea5e9);
		background: var(--accent-primary-light, #e0f2fe);
		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: var(--text-primary, #374151);
	}

	.action-hint {
		font-size: 0.75rem;
		color: var(--text-secondary, #6b7280);
		text-align: center;
	}

	@media (max-width: 640px) {
		.stats-row {
			flex-wrap: wrap;
		}

		.stat-card {
			flex: 1;
		}
	}
</style>
