<script lang="ts">
import type { components } from '$lib/generated/api';
import * as m from '$lib/paraglide/messages.js';
type SenderModel = components['schemas']['SenderModel'];

let {
	senderModels,
	personNames
}: {
	senderModels: SenderModel[];
	personNames: Record<string, string>;
} = $props();
</script>

<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
	<table class="w-full text-sm">
		<thead>
			<tr>
				<th
					class="border-brand-sand border-b pb-3 text-left text-xs font-bold tracking-widest text-gray-400 uppercase"
					>{m.ocr_table_person()}</th
				>
				<th
					class="border-brand-sand border-b pb-3 text-left text-xs font-bold tracking-widest text-gray-400 uppercase"
					>{m.ocr_table_cer()}</th
				>
				<th
					class="border-brand-sand border-b pb-3 text-left text-xs font-bold tracking-widest text-gray-400 uppercase"
					>{m.ocr_table_accuracy()}</th
				>
				<th
					class="border-brand-sand border-b pb-3 text-left text-xs font-bold tracking-widest text-gray-400 uppercase"
					>{m.ocr_table_lines()}</th
				>
				<th
					class="border-brand-sand border-b pb-3 text-left text-xs font-bold tracking-widest text-gray-400 uppercase"
					>{m.ocr_table_actions()}</th
				>
			</tr>
		</thead>
		<tbody>
			{#each senderModels as model (model.id)}
				<tr>
					<td class="border-brand-sand/50 border-b">
						<a
							href="/admin/ocr/{model.personId}"
							class="inline-block py-3 text-brand-navy hover:underline focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
						>
							{personNames[model.personId] ?? model.personId}
						</a>
					</td>
					<td class="border-brand-sand/50 border-b py-3">
						{model.cer != null ? (model.cer * 100).toFixed(1) + '%' : '—'}
					</td>
					<td class="border-brand-sand/50 border-b py-3">
						{model.accuracy != null ? (model.accuracy * 100).toFixed(1) + '%' : '—'}
					</td>
					<td class="border-brand-sand/50 border-b py-3">
						{model.correctedLinesAtTraining}
					</td>
					<td class="border-brand-sand/50 border-b">
						<a
							href="/admin/ocr/{model.personId}"
							class="inline-block py-3 font-medium text-brand-navy hover:underline focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
							>{m.ocr_table_details()}</a
						>
					</td>
				</tr>
			{:else}
				<tr>
					<td colspan="5" class="py-6 text-center text-sm text-gray-400">
						{m.ocr_no_models()}
					</td>
				</tr>
			{/each}
		</tbody>
	</table>
</div>
