<script lang="ts">
import type { PageData } from './$types';
import OcrHealthBar from './OcrHealthBar.svelte';
import OcrStatCards from './OcrStatCards.svelte';
import OcrModelsTable from './OcrModelsTable.svelte';
import OcrTrainingCard from '$lib/ocr/OcrTrainingCard.svelte';
import SegmentationTrainingCard from '$lib/ocr/SegmentationTrainingCard.svelte';
import * as m from '$lib/paraglide/messages.js';

let { data }: { data: PageData } = $props();
const { trainingInfo } = $derived(data);
</script>

<div class="flex-1 overflow-y-auto p-6">
	<div class="mx-auto flex max-w-5xl flex-col gap-6">
		<!-- Page title + health bar -->
		<div class="flex items-center justify-between">
			<h1 class="font-sans text-lg font-bold tracking-widest text-brand-navy uppercase">
				{m.admin_tab_ocr()}
			</h1>
			<OcrHealthBar ocrServiceAvailable={trainingInfo.ocrServiceAvailable ?? false} />
		</div>

		<!-- Stats -->
		<OcrStatCards
			availableBlocks={trainingInfo.availableBlocks ?? 0}
			totalOcrBlocks={trainingInfo.totalOcrBlocks ?? 0}
			availableDocuments={trainingInfo.availableDocuments ?? 0}
			availableSegBlocks={trainingInfo.availableSegBlocks ?? 0}
		/>

		<!-- Training -->
		<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
			<OcrTrainingCard trainingInfo={trainingInfo} />
			<SegmentationTrainingCard trainingInfo={trainingInfo} />
		</div>

		<!-- Sender models -->
		<div>
			<div class="mb-3 flex items-center justify-between">
				<h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase">
					{m.ocr_sender_models_heading()}
				</h2>
				<a
					href="/admin/ocr/global"
					class="text-xs font-medium text-brand-navy/60 transition-colors hover:text-brand-navy focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
				>
					{m.ocr_global_history_link()}
				</a>
			</div>
			<OcrModelsTable
				senderModels={trainingInfo.senderModels ?? []}
				personNames={trainingInfo.personNames ?? {}}
			/>
		</div>
	</div>
</div>
