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

afterEach(cleanup);

describe('Richtlinien page — structure', () => {
	it('renders h1 with richtlinien title', async () => {
		render(Page);
		await expect
			.element(page.getByRole('heading', { level: 1 }))
			.toHaveTextContent('Transkriptions-Richtlinien');
	});

	it('renders intro paragraph', async () => {
		render(Page);
		await expect.element(page.getByText(/Damit alle Briefe einheitlich/)).toBeInTheDocument();
	});

	it('renders Wikipedia external link with security attributes and new-tab annotation', async () => {
		render(Page);
		const wikiLink = page.getByRole('link', { name: /Wikipedia/ });
		await expect.element(wikiLink).toBeInTheDocument();
		await expect.element(wikiLink).toHaveAttribute('target', '_blank');
		await expect.element(wikiLink).toHaveAttribute('rel', 'noopener noreferrer');
		await expect.element(wikiLink).toHaveAttribute('referrerpolicy', 'no-referrer');
		// icon communicates "opens new tab" visually; aria-label carries the text for a11y
		const link = document.querySelector('a[href*="wikipedia"]') as HTMLAnchorElement;
		expect(link.getAttribute('aria-label')).toContain('öffnet in neuem Tab');
	});

	it('renders Regeln h2 section', async () => {
		render(Page);
		await expect
			.element(page.getByRole('heading', { level: 2, name: /Regeln für die Transkription/ }))
			.toBeInTheDocument();
	});

	it('renders Noch in Klärung h2 section', async () => {
		render(Page);
		await expect
			.element(page.getByRole('heading', { level: 2, name: /Noch in Klärung/ }))
			.toBeInTheDocument();
	});

	it('renders closing invitation card', async () => {
		render(Page);
		await expect.element(page.getByText(/Fehlt eine Regel/)).toBeInTheDocument();
	});
});

describe('Richtlinien page — rule cards', () => {
	it('renders five rule card titles', async () => {
		render(Page);
		await expect.element(page.getByText('Nicht lesbare Wörter')).toBeInTheDocument();
		await expect.element(page.getByText('Durchgestrichene Wörter')).toBeInTheDocument();
		await expect.element(page.getByText(/Das lange s/)).toBeInTheDocument();
		await expect.element(page.getByText('Unsichere Namen')).toBeInTheDocument();
		await expect.element(page.getByText(/Dialekt/)).toBeInTheDocument();
	});
});

describe('Richtlinien page — Noch in Klärung chips', () => {
	it('renders four clarification chips', async () => {
		render(Page);
		await expect.element(page.getByText('Abkürzungen')).toBeInTheDocument();
		await expect.element(page.getByText('Datumsformate')).toBeInTheDocument();
		await expect.element(page.getByText(/Zeilenumbrüche/)).toBeInTheDocument();
		await expect.element(page.getByText(/Groß-\/Kleinschreibung/)).toBeInTheDocument();
	});
});