import { afterEach, describe, expect, it } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import TrainingHistory from './TrainingHistory.svelte';

afterEach(cleanup);

function makeRun(i: number) {
	return {
		id: `run-${i}`,
		status: 'DONE' as const,
		blockCount: 10,
		documentCount: 2,
		modelName: 'german_kurrent',
		createdAt: `2026-01-0${i + 1}T12:00:00Z`,
		completedAt: `2026-01-0${i + 1}T12:05:00Z`
	};
}

const fiveRuns = Array.from({ length: 5 }, (_, i) => makeRun(i));
const twoRuns = Array.from({ length: 2 }, (_, i) => makeRun(i));

describe('TrainingHistory — expand/collapse', () => {
	it('shows only 3 runs initially when more than 3 exist', async () => {
		render(TrainingHistory, { runs: fiveRuns });

		const rows = page.getByRole('row');
		// 1 header row + 3 data rows = 4 total
		await expect.element(rows.nth(3)).toBeInTheDocument();
		await expect.element(rows.nth(4)).not.toBeInTheDocument();

		await expect.element(page.getByRole('button', { name: /Mehr anzeigen/i })).toBeInTheDocument();
	});

	it('shows all runs after clicking the expand button', async () => {
		render(TrainingHistory, { runs: fiveRuns });

		await page.getByRole('button', { name: /Mehr anzeigen/i }).click();

		const rows = page.getByRole('row');
		// 1 header row + 5 data rows = 6 total
		await expect.element(rows.nth(5)).toBeInTheDocument();
	});

	it('hides the toggle button when 3 or fewer runs exist', async () => {
		render(TrainingHistory, { runs: twoRuns });

		await expect
			.element(page.getByRole('button', { name: /Mehr anzeigen/i }))
			.not.toBeInTheDocument();
	});
});

describe('TrainingHistory — status badges', () => {
	it('shows amber QUEUED badge for queued runs', async () => {
		const run = { ...makeRun(0), status: 'QUEUED' as const };
		render(TrainingHistory, { runs: [run] });

		await expect.element(page.getByText(/Warteschlange/i)).toBeInTheDocument();
	});
});

describe('TrainingHistory — type and person columns', () => {
	it('shows "Basis" for runs without personId', async () => {
		render(TrainingHistory, { runs: [makeRun(0)] });

		await expect.element(page.getByText(/Basis/i)).toBeInTheDocument();
	});

	it('shows "Personalisiert" for runs with personId', async () => {
		const run = { ...makeRun(0), personId: 'person-1' };
		render(TrainingHistory, { runs: [run], personNames: { 'person-1': 'Karl Müller' } });

		await expect.element(page.getByText(/Personalisiert/i)).toBeInTheDocument();
	});

	it('shows person name from personNames for sender runs', async () => {
		const run = { ...makeRun(0), personId: 'person-1' };
		render(TrainingHistory, { runs: [run], personNames: { 'person-1': 'Karl Müller' } });

		await expect.element(page.getByText(/Personalisiert/i)).toBeInTheDocument();
		// Name appears in both the mobile inline span and the desktop table cell
		await expect.element(page.getByText('Karl Müller').first()).toBeInTheDocument();
	});
});