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 ↗',
		transcribe_coach_shortcut_hint_before: () => 'Tipp: Drücken Sie',
		transcribe_coach_shortcut_hint_after: () => 'für eine Übersicht aller Tastenkürzel.',
		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 keyboard-shortcut hint with a "?" key cap', async () => {
		render(TranscribeCoachEmptyState);
		await expect.element(page.getByText('Tastenkürzel', { exact: false })).toBeInTheDocument();
		const kbd = document.querySelector('kbd');
		expect(kbd?.textContent).toBe('?');
	});

	it('hides the keyboard hint on touch-only (coarse-pointer) devices', async () => {
		render(TranscribeCoachEmptyState);
		const hint = document.querySelector('kbd')?.closest('p');
		// The hint is gated behind a fine-pointer media query so touch-only
		// transcribers are never told to press a key they do not have (#327).
		expect(hint?.className).toContain('pointer:coarse');
	});

	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();
	});
});
