import { describe, it, expect, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import MissionControlStrip from './MissionControlStrip.svelte';
import type { components } from '$lib/generated/api';

type TranscriptionQueueItemDTO = components['schemas']['TranscriptionQueueItemDTO'];
type TranscriptionWeeklyStatsDTO = components['schemas']['TranscriptionWeeklyStatsDTO'];

afterEach(cleanup);

function makeDoc(
	id: string,
	title: string,
	overrides: Partial<TranscriptionQueueItemDTO> = {}
): TranscriptionQueueItemDTO {
	return {
		id,
		title,
		annotationCount: 0,
		textedBlockCount: 0,
		reviewedBlockCount: 0,
		contributors: [],
		hasMoreContributors: false,
		...overrides
	};
}

const emptyStats: TranscriptionWeeklyStatsDTO = {
	segmentationCount: 0,
	transcriptionCount: 0,
	readyCount: 0
};

describe('MissionControlStrip', () => {
	it('renders section heading always', async () => {
		render(MissionControlStrip, {
			props: {
				segmentationDocs: [],
				transcriptionDocs: [],
				readyDocs: [],
				weeklyStats: null
			}
		});

		await expect.element(page.getByText('Was braucht Aufmerksamkeit?')).toBeInTheDocument();
	});

	it('renders all three column headings', async () => {
		render(MissionControlStrip, {
			props: {
				segmentationDocs: [makeDoc('s1', 'Seg Dok')],
				transcriptionDocs: [makeDoc('t1', 'Trans Dok')],
				readyDocs: [makeDoc('r1', 'Ready Dok')],
				weeklyStats: emptyStats
			}
		});

		await expect.element(page.getByText('Text markieren')).toBeInTheDocument();
		await expect.element(page.getByText('Text transkribieren')).toBeInTheDocument();
		await expect.element(page.getByText(/Lesefertig/)).toBeInTheDocument();
	});

	it('renders document titles in correct columns', async () => {
		const segDoc = makeDoc('seg-1', 'Segmentierungs Brief');
		const transDoc = makeDoc('trans-1', 'Transkriptions Postkarte');
		const readyDoc = makeDoc('ready-1', 'Fertiger Tagebucheintrag');

		render(MissionControlStrip, {
			props: {
				segmentationDocs: [segDoc],
				transcriptionDocs: [transDoc],
				readyDocs: [readyDoc],
				weeklyStats: emptyStats
			}
		});

		await expect.element(page.getByText('Segmentierungs Brief')).toBeInTheDocument();
		await expect.element(page.getByText('Transkriptions Postkarte')).toBeInTheDocument();
		await expect.element(page.getByText('Fertiger Tagebucheintrag')).toBeInTheDocument();
	});

	it('renders section heading even when all arrays are empty and weeklyStats is null', async () => {
		render(MissionControlStrip, {
			props: {
				segmentationDocs: [],
				transcriptionDocs: [],
				readyDocs: [],
				weeklyStats: null
			}
		});

		// Heading always visible
		await expect.element(page.getByText('Was braucht Aufmerksamkeit?')).toBeInTheDocument();

		// All three empty states should also be visible
		await expect
			.element(page.getByText('Alle Dokumente haben bereits Segmentierungsblöcke.'))
			.toBeInTheDocument();
		await expect
			.element(page.getByText('Keine Dokumente warten auf Transkription.'))
			.toBeInTheDocument();
		await expect
			.element(page.getByText('Noch keine Dokumente vollständig transkribiert.'))
			.toBeInTheDocument();
	});
});