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

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

afterEach(cleanup);

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

describe('ReadyColumn', () => {
	it('renders mint-themed list when docs are provided', async () => {
		const doc1 = makeDoc({ id: 'doc-1', title: 'Leseферtig Brief' });
		const doc2 = makeDoc({ id: 'doc-2', title: 'Archiv Dokument' });

		render(ReadyColumn, { props: { docs: [doc1, doc2] } });

		await expect.element(page.getByText('Leseферtig Brief')).toBeInTheDocument();
		await expect.element(page.getByText('Archiv Dokument')).toBeInTheDocument();

		// Mint-themed container should exist
		const mintContainer = document.querySelector('.border-brand-mint');
		expect(mintContainer).not.toBeNull();
	});

	it('renders dashed empty state with CTA link when docs array is empty', async () => {
		render(ReadyColumn, { props: { docs: [] } });

		await expect
			.element(page.getByText('Noch keine Dokumente vollständig transkribiert.'))
			.toBeInTheDocument();

		const ctaLink = page.getByRole('link', { name: 'Jetzt mitmachen' });
		await expect.element(ctaLink).toBeInTheDocument();
		await expect
			.element(ctaLink)
			.toHaveAttribute('href', '/enrich?filter=NEEDS_SEGMENTATION&next=1');
	});

	it('shows reviewedPct using annotationCount as denominator', async () => {
		// annotationCount=4, reviewedBlockCount=4, textedBlockCount=2
		// reviewedPct = Math.round(4 / 4 * 100) = 100, NOT Math.round(4/2*100) = 200
		const doc = makeDoc({
			id: 'doc-1',
			title: 'Geprüftes Dokument',
			annotationCount: 4,
			reviewedBlockCount: 4,
			textedBlockCount: 2
		});

		render(ReadyColumn, { props: { docs: [doc] } });

		// Should show 100% (using annotationCount=4 as denominator)
		await expect.element(page.getByText('100% geprüft')).toBeInTheDocument();
	});

	it('links to /documents/{id}', async () => {
		const doc = makeDoc({ id: 'ready-789', title: 'Fertiges Dokument' });

		render(ReadyColumn, { props: { docs: [doc] } });

		const link = page.getByRole('link', { name: /Fertiges Dokument/ });
		await expect.element(link).toHaveAttribute('href', '/documents/ready-789');
	});
});