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

vi.mock('$lib/paraglide/messages.js', () => ({
	m: {
		transcribe_coach_title: () => 'Erste Transkription?',
		transcribe_coach_preamble: () => 'Unser Kurrent-Erkenner lernt noch.',
		transcribe_coach_step_1_title: () => 'Rahmen ziehen.',
		transcribe_coach_step_1_body: () => 'Klicken und ziehen Sie mit der Maus einen Rahmen.',
		transcribe_coach_step_2_title: () => 'Text eingeben.',
		transcribe_coach_step_2_body: () => 'Geben Sie den Text ein.',
		transcribe_coach_step_3_title: () => 'Speichert automatisch.',
		transcribe_coach_footer_kurrent: () => 'Hilfe zu Kurrent ↗',
		transcribe_coach_footer_richtlinien: () => 'Transkriptions-Richtlinien ↗',
		common_opens_new_tab: () => '(öffnet in neuem Tab)'
	}
}));

afterEach(() => {
	cleanup();
	vi.restoreAllMocks();
});

describe('TranscribeCoachEmptyState', () => {
	it('renders the title and preamble', async () => {
		render(TranscribeCoachEmptyState);
		await expect
			.element(page.getByRole('heading', { level: 2 }))
			.toHaveTextContent('Erste Transkription?');
		await expect.element(page.getByText('Unser Kurrent-Erkenner lernt noch.')).toBeInTheDocument();
	});

	it('renders three numbered steps', async () => {
		render(TranscribeCoachEmptyState);
		await expect.element(page.getByText('Rahmen ziehen.')).toBeInTheDocument();
		await expect
			.element(page.getByText('Klicken und ziehen Sie mit der Maus einen Rahmen.'))
			.toBeInTheDocument();
		await expect.element(page.getByText('Text eingeben.')).toBeInTheDocument();
		await expect.element(page.getByText('Geben Sie den Text ein.')).toBeInTheDocument();
		await expect.element(page.getByText('Speichert automatisch.')).toBeInTheDocument();
	});

	it('renders footer links to Wikipedia Kurrent and Richtlinien page', async () => {
		render(TranscribeCoachEmptyState);
		const kurrentLink = page.getByRole('link', { name: /Hilfe zu Kurrent/ });
		await expect.element(kurrentLink).toBeInTheDocument();
		await expect.element(kurrentLink).toHaveAttribute('target', '_blank');
		await expect.element(kurrentLink).toHaveAttribute('rel', 'noopener noreferrer');
		await expect.element(kurrentLink).toHaveAttribute('referrerpolicy', 'no-referrer');

		const richtlinienLink = page.getByRole('link', { name: /Transkriptions-Richtlinien/ });
		await expect.element(richtlinienLink).toBeInTheDocument();
		await expect.element(richtlinienLink).toHaveAttribute('target', '_blank');
		await expect.element(richtlinienLink).toHaveAttribute('rel', 'noopener noreferrer');
	});

	it('renders visible "(öffnet in neuem Tab)" annotation on each footer link', async () => {
		render(TranscribeCoachEmptyState);
		const annotations = page.getByText('(öffnet in neuem Tab)');
		await expect.element(annotations.first()).toBeInTheDocument();
	});

	it('renders the drag demo animation region inside step 1', async () => {
		render(TranscribeCoachEmptyState);
		const demo = page.getByRole('img', { name: /Rahmen ziehen|Animation/i });
		await expect.element(demo).toBeInTheDocument();
	});
});