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

import ChronikFilterPills from './ChronikFilterPills.svelte';

afterEach(cleanup);

describe('ChronikFilterPills', () => {
	it('renders all 5 filter pills', async () => {
		render(ChronikFilterPills, { value: 'alle', onChange: vi.fn() });
		const pills = document.querySelectorAll('[role="radio"]');
		expect(pills.length).toBe(5);
	});

	it('marks the active pill with aria-checked="true"', async () => {
		render(ChronikFilterPills, { value: 'hochgeladen', onChange: vi.fn() });
		const pills = document.querySelectorAll('[role="radio"]');
		const checked = Array.from(pills).filter((p) => p.getAttribute('aria-checked') === 'true');
		expect(checked.length).toBe(1);
		expect(checked[0].getAttribute('data-filter-value')).toBe('hochgeladen');
	});

	it('calls onChange with the clicked pill value', async () => {
		const onChange = vi.fn();
		render(ChronikFilterPills, { value: 'alle', onChange });
		const pill = document.querySelector(
			'[data-filter-value="kommentare"]'
		) as HTMLButtonElement | null;
		expect(pill).not.toBeNull();
		pill?.click();
		expect(onChange).toHaveBeenCalledWith('kommentare');
	});

	it('applies active classes to the selected pill', async () => {
		render(ChronikFilterPills, { value: 'fuer-dich', onChange: vi.fn() });
		const active = document.querySelector('[data-filter-value="fuer-dich"]');
		expect(active?.className).toContain('bg-primary');
		const inactive = document.querySelector('[data-filter-value="alle"]');
		expect(inactive?.className).toContain('bg-muted');
	});

	it('ArrowRight moves focus to the next pill', async () => {
		render(ChronikFilterPills, { value: 'alle', onChange: vi.fn() });
		const first = document.querySelector('[data-filter-value="alle"]') as HTMLButtonElement | null;
		const second = document.querySelector(
			'[data-filter-value="fuer-dich"]'
		) as HTMLButtonElement | null;
		expect(first).not.toBeNull();
		expect(second).not.toBeNull();
		first?.focus();
		await userEvent.keyboard('{ArrowRight}');
		expect(document.activeElement).toBe(second);
	});

	it('ArrowLeft moves focus to the previous pill', async () => {
		render(ChronikFilterPills, { value: 'alle', onChange: vi.fn() });
		const first = document.querySelector('[data-filter-value="alle"]') as HTMLButtonElement | null;
		const second = document.querySelector(
			'[data-filter-value="fuer-dich"]'
		) as HTMLButtonElement | null;
		second?.focus();
		await userEvent.keyboard('{ArrowLeft}');
		expect(document.activeElement).toBe(first);
	});

	it('wraps focus from last to first with ArrowRight', async () => {
		render(ChronikFilterPills, { value: 'alle', onChange: vi.fn() });
		const last = document.querySelector(
			'[data-filter-value="kommentare"]'
		) as HTMLButtonElement | null;
		const first = document.querySelector('[data-filter-value="alle"]') as HTMLButtonElement | null;
		last?.focus();
		await userEvent.keyboard('{ArrowRight}');
		expect(document.activeElement).toBe(first);
	});

	it('has role="radiogroup" on the container', async () => {
		render(ChronikFilterPills, { value: 'alle', onChange: vi.fn() });
		const group = document.querySelector('[role="radiogroup"]');
		expect(group).not.toBeNull();
		// Paraglide provides "Aktivitäten filtern" as the filter label
		expect(group?.getAttribute('aria-label')).toBe('Aktivitäten filtern');
	});
});
