<script lang="ts">
import * as m from '$lib/paraglide/messages.js';
import { getLocale } from '$lib/paraglide/runtime.js';
import ExpertBadge from './ExpertBadge.svelte';

type TranscriptionQueueItemDTO = {
	id: string;
	title: string;
	documentDate?: string;
	needsExpert: boolean;
	annotationCount: number;
	textedBlockCount: number;
	reviewedBlockCount: number;
};

interface Props {
	docs: TranscriptionQueueItemDTO[];
	weeklyCount: number;
}

let { docs, weeklyCount }: Props = $props();

function formatDate(dateStr: string): string {
	return new Intl.DateTimeFormat(getLocale(), {
		day: 'numeric',
		month: 'short',
		year: 'numeric'
	}).format(new Date(dateStr + 'T12:00:00'));
}

function blockProgress(doc: TranscriptionQueueItemDTO): number {
	if (doc.annotationCount === 0) return 0;
	return (doc.textedBlockCount / doc.annotationCount) * 100;
}
</script>

<div>
	<div class="mb-1 flex items-center gap-2">
		<h3 class="font-sans text-xs font-bold tracking-widest text-gray-400 uppercase">
			{m.mission_control_transcription_heading()}
		</h3>
		{#if weeklyCount > 0}
			<span class="rounded-full bg-green-50 px-2 py-0.5 text-xs font-semibold text-green-700">
				{m.mission_control_weekly_pulse({ count: weeklyCount })}
			</span>
		{/if}
	</div>
	<p class="mt-1 mb-3 text-xs text-gray-400">
		{m.mission_control_transcription_description()}
	</p>

	{#if docs.length === 0}
		<p class="text-xs text-gray-400 italic">{m.mission_control_transcription_empty()}</p>
	{:else}
		<ul class="space-y-1">
			{#each docs as doc (doc.id)}
				<li>
					<a
						href="/enrich/{doc.id}"
						class="hover:bg-brand-sand/30 flex min-h-[44px] flex-col justify-center rounded px-1 py-2 focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
					>
						<div class="flex flex-wrap items-center gap-1.5">
							<span class="font-serif text-sm text-ink">{doc.title}</span>
							{#if doc.needsExpert}
								<ExpertBadge />
							{/if}
						</div>
						{#if doc.documentDate}
							<span class="mt-0.5 text-xs text-gray-400">{formatDate(doc.documentDate)}</span>
						{/if}
						{#if doc.textedBlockCount > 0}
							<div class="mt-1.5 flex items-center gap-2">
								<span class="shrink-0 text-xs text-gray-400">
									{m.mission_control_blocks_progress({
										texted: doc.textedBlockCount,
										total: doc.annotationCount
									})}
								</span>
								<div class="h-1.5 flex-1 overflow-hidden rounded-full bg-gray-200">
									<div
										class="h-full rounded-full bg-ink"
										style="width: {blockProgress(doc).toFixed(0)}%"
									></div>
								</div>
							</div>
						{:else}
							<span class="mt-0.5 text-xs text-gray-400 italic">—</span>
						{/if}
					</a>
				</li>
			{/each}
		</ul>
	{/if}
</div>
