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

afterEach(cleanup);

describe('hilfe/transkription page', () => {
	it('renders the page title', async () => {
		render(TranskriptionsRichtlinienPage, { props: {} });

		await expect
			.element(page.getByRole('heading', { level: 1, name: /transkriptions-richtlinien/i }))
			.toBeVisible();
	});

	it('renders the rules section heading', async () => {
		render(TranskriptionsRichtlinienPage, { props: {} });

		await expect
			.element(page.getByRole('heading', { name: /regeln für die transkription/i }))
			.toBeVisible();
	});

	it('renders the klaerung section heading', async () => {
		render(TranskriptionsRichtlinienPage, { props: {} });

		await expect.element(page.getByRole('heading', { name: /noch in klärung/i })).toBeVisible();
	});

	it('renders the closing question heading', async () => {
		render(TranskriptionsRichtlinienPage, { props: {} });

		await expect.element(page.getByRole('heading', { name: /fehlt eine regel/i })).toBeVisible();
	});

	it('renders the Wikipedia link with secure rel attributes', async () => {
		render(TranskriptionsRichtlinienPage, { props: {} });

		const link = (await page
			.getByRole('link', { name: /wikipedia/i })
			.element()) as HTMLAnchorElement;
		expect(link.href).toContain('wikipedia.org');
		expect(link.target).toBe('_blank');
		expect(link.rel).toContain('noopener');
		expect(link.rel).toContain('noreferrer');
	});

	it('renders five rule cards', async () => {
		render(TranskriptionsRichtlinienPage, { props: {} });

		// Each RichtlinienRuleCard heading appears once
		const ruleHeadings = document.querySelectorAll('h3');
		expect(ruleHeadings.length).toBeGreaterThanOrEqual(5);
	});

	it('renders four klaerung chips', async () => {
		render(TranskriptionsRichtlinienPage, { props: {} });

		// Chips are styled spans with rounded-full — count by class
		const chips = document.querySelectorAll('span.rounded-full');
		expect(chips.length).toBeGreaterThanOrEqual(4);
	});
});