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

const { default: GeschichteListRow } = await import('./GeschichteListRow.svelte');

afterEach(cleanup);

const baseRow = (overrides = {}) => ({
	id: 'g1',
	title: 'Die Reise nach Berlin',
	body: '<p>Im Jahr 1923...</p>',
	type: 'STORY' as 'STORY' | 'JOURNEY',
	status: 'PUBLISHED' as 'PUBLISHED' | 'DRAFT',
	author: { firstName: 'Anna', lastName: 'Schmidt', email: 'a@x' },
	publishedAt: '2026-04-15T10:00:00Z',
	...overrides
});

describe('GeschichteListRow', () => {
	it('renders the title', async () => {
		render(GeschichteListRow, { props: { geschichte: baseRow() } });
		await expect
			.element(page.getByRole('heading', { level: 2 }))
			.toHaveTextContent('Die Reise nach Berlin');
	});

	it('shows no badge for STORY type', async () => {
		render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'STORY' }) } });
		expect(document.querySelector('[data-testid="journey-badge"]')).toBeNull();
	});

	it('shows no badge when type is undefined', async () => {
		render(GeschichteListRow, {
			props: { geschichte: baseRow({ type: undefined as unknown as 'STORY' | 'JOURNEY' }) }
		});
		expect(document.querySelector('[data-testid="journey-badge"]')).toBeNull();
	});

	it('shows REISE badge for JOURNEY type', async () => {
		render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'JOURNEY' }) } });
		const badge = document.querySelector('[data-testid="journey-badge"]');
		expect(badge).not.toBeNull();
		expect(badge?.textContent?.trim()).toBe('REISE');
	});

	it('badge is a plain <span>, not a nested interactive element', async () => {
		render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'JOURNEY' }) } });
		const badge = document.querySelector('[data-testid="journey-badge"]');
		expect(badge?.tagName.toLowerCase()).toBe('span');
	});

	it('badge has text-xs class for WCAG readability', async () => {
		render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'JOURNEY' }) } });
		const badge = document.querySelector('[data-testid="journey-badge"]');
		expect(badge?.className).toContain('text-xs');
	});

	it('renders author name in meta line', async () => {
		render(GeschichteListRow, { props: { geschichte: baseRow() } });
		expect(document.body.textContent).toContain('Anna Schmidt');
	});
});