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

vi.mock('$app/navigation', () => ({
	goto: vi.fn()
}));

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

afterEach(cleanup);

describe('TypeSelector', () => {
	it('renders both type cards', async () => {
		render(TypeSelector, { props: { onweiter: vi.fn() } });

		await expect.element(page.getByRole('radio', { name: /Geschichte/i })).toBeVisible();
		await expect.element(page.getByRole('radio', { name: /Lesereise/i })).toBeVisible();
	});

	it('radiogroup is correctly labelled', async () => {
		render(TypeSelector, { props: { onweiter: vi.fn() } });

		const group = document.querySelector('[role="radiogroup"]');
		const labelledBy = group?.getAttribute('aria-labelledby');
		const labelEl = labelledBy ? document.getElementById(labelledBy) : null;
		expect(labelEl?.textContent?.trim().length).toBeGreaterThan(0);
	});

	it('Weiter button has aria-disabled=true when nothing is selected', async () => {
		render(TypeSelector, { props: { onweiter: vi.fn() } });

		const weiter = document.querySelector('button[type="button"]:not([role="radio"])');
		expect(weiter?.getAttribute('aria-disabled')).toBe('true');
	});

	it('no card is aria-checked when nothing is selected', async () => {
		render(TypeSelector, { props: { onweiter: vi.fn() } });

		const radios = Array.from(document.querySelectorAll('[role="radio"]'));
		const anyChecked = radios.some((r) => r.getAttribute('aria-checked') === 'true');
		expect(anyChecked).toBe(false);
	});

	it('with no selection: first card has tabindex=0, second has tabindex=-1', async () => {
		render(TypeSelector, { props: { onweiter: vi.fn() } });

		const radios = Array.from(document.querySelectorAll('[role="radio"]'));
		expect(radios[0]?.getAttribute('tabindex')).toBe('0');
		expect(radios[1]?.getAttribute('tabindex')).toBe('-1');
	});

	it('clicking STORY card sets aria-checked=true and enables Weiter', async () => {
		render(TypeSelector, { props: { onweiter: vi.fn() } });

		const storyCard = page.getByRole('radio', { name: /Geschichte/i });
		await userEvent.click(storyCard);

		await expect.element(storyCard).toHaveAttribute('aria-checked', 'true');
		const weiter = document.querySelector('button[type="button"]:not([role="radio"])');
		expect(weiter?.getAttribute('aria-disabled')).toBe('false');
	});

	it('clicking JOURNEY card sets aria-checked=true', async () => {
		render(TypeSelector, { props: { onweiter: vi.fn() } });

		const journeyCard = page.getByRole('radio', { name: /Lesereise/i });
		await userEvent.click(journeyCard);

		await expect.element(journeyCard).toHaveAttribute('aria-checked', 'true');
	});

	it('clicking Weiter after selection calls onweiter with the selected type', async () => {
		const onweiter = vi.fn();
		render(TypeSelector, { props: { onweiter } });

		await userEvent.click(page.getByRole('radio', { name: /Geschichte/i }));
		const weiter = page.getByRole('button', { name: /Weiter/i });
		await userEvent.click(weiter);

		expect(onweiter).toHaveBeenCalledWith('STORY');
	});

	it('clicking Weiter without selection does NOT call onweiter', async () => {
		const onweiter = vi.fn();
		render(TypeSelector, { props: { onweiter } });

		// aria-disabled="true" prevents Playwright actionability — dispatch via DOM to test handler behaviour
		const weiter = document.querySelector<HTMLButtonElement>('button[aria-disabled="true"]');
		weiter?.click();

		expect(onweiter).not.toHaveBeenCalled();
	});

	it('instructional text is visible when no type is selected', async () => {
		render(TypeSelector, { props: { onweiter: vi.fn() } });

		await expect.element(page.getByText(/Bitte wähle einen Typ/i)).toBeVisible();
	});

	it('ArrowRight moves focus and selection from STORY to JOURNEY', async () => {
		render(TypeSelector, { props: { onweiter: vi.fn() } });

		const storyCard = page.getByRole('radio', { name: /Geschichte/i });
		await userEvent.click(storyCard); // click focuses the card; .focus() is not on vitest-browser Locator
		await userEvent.keyboard('{ArrowRight}');

		const journeyCard = page.getByRole('radio', { name: /Lesereise/i });
		await expect.element(journeyCard).toHaveAttribute('aria-checked', 'true');
		await expect.element(storyCard).toHaveAttribute('aria-checked', 'false');
	});

	it('ArrowLeft wraps from STORY back to JOURNEY', async () => {
		render(TypeSelector, { props: { onweiter: vi.fn() } });

		const storyCard = page.getByRole('radio', { name: /Geschichte/i });
		await userEvent.click(storyCard); // click focuses the card; .focus() is not on vitest-browser Locator
		await userEvent.keyboard('{ArrowLeft}');

		const journeyCard = page.getByRole('radio', { name: /Lesereise/i });
		await expect.element(journeyCard).toHaveAttribute('aria-checked', 'true');
	});
});
