<script lang="ts">
	import { goto } from '$app/navigation';
	import { page } from '$app/stores';
	import { IconChevronLeft, IconChevronRight } from '$lib/components/icons';

	interface Props {
		currentPage: number;
		totalCount: number;
		limit: number;
		hasNextPage: boolean;
	}

	let { currentPage, totalCount, limit, hasNextPage }: Props = $props();

	let totalPages = $derived(Math.ceil(totalCount / limit));
	let hasPrevPage = $derived(currentPage > 1);

	let startItem = $derived((currentPage - 1) * limit + 1);
	let endItem = $derived(Math.min(currentPage * limit, totalCount));

	function goToPage(pageNum: number) {
		const url = new URL($page.url);
		if (pageNum === 1) {
			url.searchParams.delete('page');
		} else {
			url.searchParams.set('page', String(pageNum));
		}
		goto(url.toString());
	}

	// Generate page numbers to display
	let pageNumbers = $derived.by(() => {
		const pages: (number | 'ellipsis')[] = [];
		const maxVisible = 5;

		if (totalPages <= maxVisible) {
			// Show all pages
			for (let i = 1; i <= totalPages; i++) {
				pages.push(i);
			}
		} else {
			// Always show first page
			pages.push(1);

			if (currentPage > 3) {
				pages.push('ellipsis');
			}

			// Show pages around current
			const start = Math.max(2, currentPage - 1);
			const end = Math.min(totalPages - 1, currentPage + 1);

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

			if (currentPage < totalPages - 2) {
				pages.push('ellipsis');
			}

			// Always show last page
			if (totalPages > 1) {
				pages.push(totalPages);
			}
		}

		return pages;
	});
</script>

{#if totalCount > 0}
	<div class="flex flex-col items-center justify-between gap-3 sm:flex-row">
		<!-- Item count -->
		<p class="text-sm text-theme-secondary">
			Showing <span class="font-medium text-theme">{startItem}</span>
			to <span class="font-medium text-theme">{endItem}</span>
			of <span class="font-medium text-theme">{totalCount}</span> results
		</p>

		<!-- Page navigation -->
		<div class="flex items-center gap-1">
			<!-- Previous button -->
			<button
				type="button"
				onclick={() => goToPage(currentPage - 1)}
				disabled={!hasPrevPage}
				class="rounded-lg p-2 text-theme-secondary transition-colors hover:bg-black/5 hover:text-theme disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
				aria-label="Previous page"
			>
				<IconChevronLeft class="h-4 w-4" />
			</button>

			<!-- Page numbers -->
			{#each pageNumbers as pageNum}
				{#if pageNum === 'ellipsis'}
					<span class="px-2 text-theme-secondary">...</span>
				{:else}
					<button
						type="button"
						onclick={() => goToPage(pageNum)}
						class="min-w-[2rem] rounded-lg px-2 py-1 text-sm font-medium transition-colors
							{currentPage === pageNum
							? 'bg-primary-500 text-white'
							: 'text-theme-secondary hover:bg-black/5 hover:text-theme dark:hover:bg-white/10'}"
					>
						{pageNum}
					</button>
				{/if}
			{/each}

			<!-- Next button -->
			<button
				type="button"
				onclick={() => goToPage(currentPage + 1)}
				disabled={!hasNextPage}
				class="rounded-lg p-2 text-theme-secondary transition-colors hover:bg-black/5 hover:text-theme disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
				aria-label="Next page"
			>
				<IconChevronRight class="h-4 w-4" />
			</button>
		</div>
	</div>
{/if}
