<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import BackButton from '$lib/components/BackButton.svelte';

let { data } = $props();

const documents = $derived(data.documents);
const count = $derived(documents.length);
</script>

<div class="mx-auto max-w-4xl px-4 py-10">
	<!-- Back Link -->
	<BackButton />

	<!-- Page Header -->
	<div class="mb-8 flex items-center justify-between border-b border-line pb-6">
		<div>
			<h1 class="font-serif text-3xl font-medium text-ink">
				{m.enrich_list_heading()}
			</h1>
			{#if count > 0}
				<p class="mt-2 font-sans text-sm text-ink-2">
					{count}
					{m.enrich_list_count()}
				</p>
			{/if}
		</div>

		{#if count > 0}
			<a
				href="/enrich/{documents[0].id}"
				class="bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90"
			>
				{m.enrich_list_start()}
			</a>
		{/if}
	</div>

	<!-- Empty State -->
	{#if count === 0}
		<div
			class="flex flex-col items-center justify-center rounded-sm border border-dashed border-line bg-surface py-20 text-center"
		>
			<div class="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-muted">
				<img
					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Check/Check-Circle-MD.svg"
					alt=""
					aria-hidden="true"
					class="h-7 w-7 opacity-50"
				/>
			</div>
			<p class="font-serif text-lg font-medium text-ink">
				{m.enrich_list_empty_heading()}
			</p>
			<p class="mt-2 max-w-xs font-sans text-sm text-ink-2">
				{m.enrich_list_empty_body()}
			</p>
		</div>
	{:else}
		<!-- Document Rows -->
		<div class="border border-line bg-surface shadow-sm">
			<ul class="divide-y divide-line-2">
				{#each documents as doc (doc.id)}
					<li class="group transition-colors duration-200 hover:bg-muted">
						<a href="/enrich/{doc.id}" class="flex items-center justify-between p-6">
							<div class="min-w-0 flex-1">
								<p class="font-serif text-lg font-medium text-ink group-hover:underline">
									{doc.title}
								</p>
							</div>
							<img
								src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg"
								alt=""
								aria-hidden="true"
								class="ml-4 h-5 w-5 shrink-0 opacity-30 transition-opacity group-hover:opacity-70"
							/>
						</a>
					</li>
				{/each}
			</ul>
		</div>
	{/if}
</div>
