<script lang="ts">
import { page } from '$app/state';
import { SvelteURLSearchParams } from 'svelte/reactivity';
import { m } from '$lib/paraglide/messages.js';
import BackButton from '$lib/shared/primitives/BackButton.svelte';
import Pagination from '$lib/shared/primitives/Pagination.svelte';
import PersonReviewRow from '$lib/person/PersonReviewRow.svelte';

let { data, form } = $props();

function buildPageHref(targetPage: number): string {
	const params = new SvelteURLSearchParams(page.url.searchParams);
	params.set('page', String(targetPage));
	return `/persons/review?${params.toString()}`;
}

const hasResults = $derived(data.persons.length > 0);
</script>

<svelte:head>
	<title>{m.persons_review_heading()}</title>
</svelte:head>

<div class="mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8">
	<BackButton />

	<div class="mt-4 mb-8 border-b border-ink/10 pb-6">
		<h1 class="font-serif text-3xl font-medium text-ink">{m.persons_review_heading()}</h1>
		<p class="mt-2 font-sans text-sm text-ink-2">{m.persons_review_intro()}</p>
	</div>

	{#if form?.error}
		<p
			class="mb-4 rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600"
			role="alert"
		>
			{form.error}
		</p>
	{/if}

	{#if !hasResults}
		<div
			class="flex flex-col items-center justify-center rounded-lg border border-dashed border-line bg-surface py-16 text-center"
		>
			<p class="font-serif text-lg text-ink">{m.persons_review_empty()}</p>
		</div>
	{:else}
		<ul class="flex flex-col gap-3">
			{#each data.persons as person (person.id)}
				<PersonReviewRow person={person} />
			{/each}
		</ul>

		<Pagination page={data.pageNumber} totalPages={data.totalPages} makeHref={buildPageHref} />
	{/if}
</div>
