<script lang="ts">
	let { currentPage, totalPages, onPageChange }: {
		currentPage: number;
		totalPages: number;
		onPageChange: (page: number) => void;
	} = $props();

	let clampedPage = $derived(Math.max(1, Math.min(currentPage, Math.max(1, totalPages))));
	let pages = $derived(computePages(clampedPage, totalPages));

	function computePages(current: number, total: number): (number | '...')[] {
		if (total <= 7) {
			return Array.from({ length: total }, (_, i) => i + 1);
		}

		const result: (number | '...')[] = [1];

		if (current > 3) {
			result.push('...');
		}

		const start = Math.max(2, current - 1);
		const end = Math.min(total - 1, current + 1);

		for (let i = start; i <= end; i++) {
			result.push(i);
		}

		if (current < total - 2) {
			result.push('...');
		}

		result.push(total);

		return result;
	}
</script>

{#if totalPages > 1}
	<nav class="pagination" aria-label="Pagination">
		<button
			class="pagination-btn"
			disabled={clampedPage <= 1}
			onclick={() => onPageChange(clampedPage - 1)}
			aria-label="Page précédente"
		>
			← Précédent
		</button>

		<div class="pagination-pages">
			{#each pages as p}
				{#if p === '...'}
					<span class="pagination-ellipsis" aria-hidden="true">…</span>
				{:else}
					<button
						class="pagination-page"
						class:active={p === clampedPage}
						onclick={() => onPageChange(p as number)}
						aria-label="Page {p}"
						aria-current={p === clampedPage ? 'page' : undefined}
					>
						{p}
					</button>
				{/if}
			{/each}
		</div>

		<button
			class="pagination-btn"
			disabled={clampedPage >= totalPages}
			onclick={() => onPageChange(clampedPage + 1)}
			aria-label="Page suivante"
		>
			Suivant →
		</button>
	</nav>
{/if}

<style>
	.pagination {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		padding: 1rem 0;
	}

	.pagination-btn {
		padding: 0.5rem 1rem;
		border: 1px solid #d1d5db;
		border-radius: 0.375rem;
		background: white;
		color: #374151;
		font-size: 0.875rem;
		cursor: pointer;
		transition: all 0.15s;
	}

	.pagination-btn:hover:not(:disabled) {
		background: #f3f4f6;
		border-color: #9ca3af;
	}

	.pagination-btn:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.pagination-pages {
		display: flex;
		align-items: center;
		gap: 0.25rem;
	}

	.pagination-page {
		min-width: 2.25rem;
		height: 2.25rem;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #d1d5db;
		border-radius: 0.375rem;
		background: white;
		color: #374151;
		font-size: 0.875rem;
		cursor: pointer;
		transition: all 0.15s;
	}

	.pagination-page:hover {
		background: #f3f4f6;
		border-color: #9ca3af;
	}

	.pagination-btn:focus-visible,
	.pagination-page:focus-visible {
		outline: 2px solid #3b82f6;
		outline-offset: 2px;
	}

	.pagination-page.active {
		background: var(--btn-primary-bg, #3b82f6);
		border-color: #3b82f6;
		color: white;
	}

	.pagination-ellipsis {
		min-width: 2.25rem;
		height: 2.25rem;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #6b7280;
		font-size: 0.875rem;
	}

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

		.pagination-btn {
			padding: 0.375rem 0.75rem;
			font-size: 0.8125rem;
		}
	}
</style>
