<script lang="ts">
import * as m from '$lib/paraglide/messages.js';
import { relativeTimeDe } from '$lib/shared/relativeTime';

type IncompleteDoc = {
	id: string;
	title: string;
	uploadedAt: string;
};

interface Props {
	topDocs: IncompleteDoc[];
	totalCount: number;
}

let { topDocs, totalCount }: Props = $props();

const showFooter = $derived(totalCount > 5);
</script>

{#if topDocs.length > 0}
	<div data-testid="dashboard-needs-metadata" class="rounded-sm border border-line bg-surface p-6">
		<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-gray-400 uppercase">
			{m.dashboard_needs_metadata_heading()}
		</h2>
		<ul class="divide-y divide-line">
			{#each topDocs as doc (doc.id)}
				<li>
					<a
						href="/enrich/{doc.id}"
						class="group flex items-center gap-3 py-3 text-ink hover:bg-accent-bg/40"
					>
						<img
							src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Copy-Item-MD.svg"
							alt=""
							aria-hidden="true"
							class="h-5 w-5 shrink-0 opacity-50 group-hover:opacity-80"
						/>
						<div class="min-w-0 flex-1">
							<div class="truncate font-serif text-base text-ink group-hover:underline">
								<span class="sr-only">PDF: </span>{doc.title}
							</div>
							<div class="font-sans text-xs text-ink-3">
								{relativeTimeDe(new Date(doc.uploadedAt))}
							</div>
						</div>
						<svg
							class="h-4 w-4 shrink-0 text-ink-3 transition-transform group-hover:translate-x-0.5 motion-reduce:transition-none motion-reduce:group-hover:translate-x-0"
							xmlns="http://www.w3.org/2000/svg"
							fill="none"
							viewBox="0 0 24 24"
							stroke="currentColor"
							stroke-width="2"
							aria-hidden="true"
						>
							<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
						</svg>
					</a>
				</li>
			{/each}
		</ul>
		{#if showFooter}
			<div class="mt-4">
				<a
					href="/enrich"
					class="font-sans text-sm font-medium text-ink-2 hover:text-ink hover:underline"
				>
					{m.dashboard_needs_metadata_show_all_count({ count: totalCount })}
				</a>
			</div>
		{/if}
	</div>
{/if}
