<script lang="ts">
import * as m from '$lib/paraglide/messages.js';
import SegmentationColumn from './SegmentationColumn.svelte';
import TranscriptionColumn from './TranscriptionColumn.svelte';
import ReadyColumn from './ReadyColumn.svelte';

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

type TranscriptionWeeklyStatsDTO = {
	segmentationCount: number;
	transcriptionCount: number;
	readyCount: number;
};

interface Props {
	segmentationDocs: TranscriptionQueueItemDTO[];
	transcriptionDocs: TranscriptionQueueItemDTO[];
	readyDocs: TranscriptionQueueItemDTO[];
	weeklyStats: TranscriptionWeeklyStatsDTO | null;
}

let { segmentationDocs, transcriptionDocs, readyDocs, weeklyStats }: Props = $props();
</script>

<section class="mt-4 rounded-sm border border-line bg-white p-6">
	<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-gray-400 uppercase">
		{m.mission_control_heading()}
	</h2>
	<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
		<SegmentationColumn docs={segmentationDocs} weeklyCount={weeklyStats?.segmentationCount ?? 0} />
		<TranscriptionColumn
			docs={transcriptionDocs}
			weeklyCount={weeklyStats?.transcriptionCount ?? 0}
		/>
		<ReadyColumn docs={readyDocs} weeklyCount={weeklyStats?.readyCount ?? 0} />
	</div>
</section>
