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

	interface Child {
		id: string;
		studentId: string;
		relationshipType: string;
		relationshipLabel: string;
		firstName: string;
		lastName: string;
	}

	let {
		onChildSelected
	}: {
		onChildSelected?: (childId: string) => void;
	} = $props();

	let children = $state<Child[]>([]);
	let selectedChildId = $state<string | null>(null);
	let isLoading = $state(true);
	let error = $state<string | null>(null);

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

	async function loadChildren() {
		try {
			isLoading = true;
			error = null;
			const apiUrl = getApiBaseUrl();
			const response = await authenticatedFetch(`${apiUrl}/me/children`);

			if (!response.ok) {
				throw new Error('Impossible de charger les enfants');
			}

			const data = await response.json();
			children = data['hydra:member'] ?? data['member'] ?? (Array.isArray(data) ? data : []);

			const first = children[0];
			if (first && !selectedChildId) {
				selectedChildId = first.studentId;
				onChildSelected?.(first.studentId);
			}
		} catch (e) {
			error = e instanceof Error ? e.message : 'Erreur inconnue';
		} finally {
			isLoading = false;
		}
	}

	function selectChild(childId: string) {
		selectedChildId = childId;
		onChildSelected?.(childId);
	}
</script>

{#if isLoading}
	<div class="child-selector-loading">
		<div class="spinner"></div>
	</div>
{:else if error}
	<div class="child-selector-error">{error}</div>
{:else if children.length === 1}
	{#each children as child}
		<div class="child-selector">
			<span class="child-selector-label">Enfant :</span>
			<span class="child-name">{child.firstName} {child.lastName}</span>
		</div>
	{/each}
{:else if children.length > 1}
	<div class="child-selector">
		<span class="child-selector-label">Enfant :</span>
		<div class="child-selector-buttons">
			{#each children as child (child.id)}
				<button
					class="child-button"
					class:selected={selectedChildId === child.studentId}
					onclick={() => selectChild(child.studentId)}
				>
					{child.firstName} {child.lastName}
				</button>
			{/each}
		</div>
	</div>
{/if}

<style>
	.child-selector {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.75rem 1rem;
		background: #eff6ff;
		border: 1px solid #bfdbfe;
		border-radius: 0.5rem;
	}

	.child-selector-label {
		font-size: 0.875rem;
		font-weight: 500;
		color: #1e40af;
		white-space: nowrap;
	}

	.child-name {
		font-size: 0.875rem;
		font-weight: 600;
		color: #1f2937;
	}

	.child-selector-buttons {
		display: flex;
		gap: 0.5rem;
		flex-wrap: wrap;
	}

	.child-button {
		padding: 0.375rem 0.75rem;
		font-size: 0.875rem;
		font-weight: 500;
		background: white;
		border: 1px solid #d1d5db;
		border-radius: 0.375rem;
		cursor: pointer;
		transition: all 0.15s;
	}

	.child-button:hover {
		background: #f3f4f6;
	}

	.child-button.selected {
		background: #3b82f6;
		border-color: #3b82f6;
		color: white;
	}

	.child-selector-loading {
		display: flex;
		justify-content: center;
		padding: 0.5rem;
	}

	.spinner {
		width: 1.25rem;
		height: 1.25rem;
		border: 2px solid #e5e7eb;
		border-top-color: #3b82f6;
		border-radius: 50%;
		animation: spin 0.8s linear infinite;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	.child-selector-error {
		padding: 0.5rem 1rem;
		background: #fef2f2;
		border: 1px solid #fecaca;
		border-radius: 0.5rem;
		color: #991b1b;
		font-size: 0.875rem;
	}
</style>
