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

afterEach(cleanup);

describe('DocumentStatusChip', () => {
	it('renders the placeholder label and gray dot for PLACEHOLDER status', async () => {
		render(DocumentStatusChip, { props: { status: 'PLACEHOLDER' } });

		const dot = await page.getByTitle('Platzhalter').element();
		expect(dot.classList.contains('bg-gray-400')).toBe(true);
	});

	it('renders the uploaded label and emerald dot for UPLOADED status', async () => {
		render(DocumentStatusChip, { props: { status: 'UPLOADED' } });

		const dot = await page.getByTitle('Hochgeladen').element();
		expect(dot.classList.contains('bg-emerald-500')).toBe(true);
	});

	it('renders the transcribed label and blue dot for TRANSCRIBED status', async () => {
		render(DocumentStatusChip, { props: { status: 'TRANSCRIBED' } });

		const dot = await page.getByTitle('Transkribiert').element();
		expect(dot.classList.contains('bg-blue-400')).toBe(true);
	});

	it('renders the reviewed label and amber dot for REVIEWED status', async () => {
		render(DocumentStatusChip, { props: { status: 'REVIEWED' } });

		const dot = await page.getByTitle('Geprüft').element();
		expect(dot.classList.contains('bg-amber-400')).toBe(true);
	});

	it('renders the archived label and dark emerald dot for ARCHIVED status', async () => {
		render(DocumentStatusChip, { props: { status: 'ARCHIVED' } });

		const dot = await page.getByTitle('Archiviert').element();
		expect(dot.classList.contains('bg-emerald-600')).toBe(true);
	});

	it('exposes the status as both a title tooltip and an aria-label', async () => {
		render(DocumentStatusChip, { props: { status: 'UPLOADED' } });

		const dot = await page.getByTitle('Hochgeladen').element();
		expect(dot.getAttribute('aria-label')).toBe('Hochgeladen');
	});
});