import { describe, it, expect, vi, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import * as m from '$lib/paraglide/messages.js';
import TimelineFilters from './TimelineFilters.svelte';

afterEach(() => cleanup());

const allOn = () => ({ personalOn: true, historicalOn: true, lettersOn: true, onChange: vi.fn() });

async function openBar() {
	await page.getByTestId('timeline-filter-trigger').click();
}

describe('TimelineFilters', () => {
	it('renders the three layer toggles with accessible names inside a labelled group (REQ-001)', async () => {
		render(TimelineFilters, allOn());
		await openBar();
		await expect
			.element(page.getByRole('button', { name: m.timeline_filter_layer_personal() }))
			.toBeVisible();
		await expect
			.element(page.getByRole('button', { name: m.timeline_filter_layer_historical() }))
			.toBeVisible();
		await expect
			.element(page.getByRole('button', { name: m.timeline_filter_layer_letters() }))
			.toBeVisible();
		// the fieldset legend groups the toggles
		await expect.element(page.getByText(m.timeline_filter_label_layers())).toBeVisible();
	});

	it('reflects a layer as pressed and flips it, firing onChange (REQ-001)', async () => {
		const props = allOn();
		render(TimelineFilters, props);
		await openBar();
		const personal = page.getByTestId('timeline-filter-personal');
		await expect.element(personal).toHaveAttribute('aria-pressed', 'true');
		await personal.click();
		await expect.element(personal).toHaveAttribute('aria-pressed', 'false');
		expect(props.onChange).toHaveBeenCalled();
	});

	it('shows a plain trigger when all layers are on and a count once a layer is hidden (REQ-007/010)', async () => {
		render(TimelineFilters, allOn());
		const trigger = page.getByTestId('timeline-filter-trigger');
		await expect.element(trigger).toHaveTextContent(m.timeline_filter_trigger());
		await expect.element(trigger).not.toHaveTextContent('aktiv');
		await trigger.click();
		await page.getByTestId('timeline-filter-letters').click();
		await expect.element(trigger).toHaveTextContent(m.timeline_filter_trigger_active({ count: 1 }));
	});

	it('gives the trigger a 44px touch target (REQ-007)', async () => {
		render(TimelineFilters, allOn());
		await expect.element(page.getByTestId('timeline-filter-trigger')).toHaveClass(/min-h-\[44px\]/);
	});

	it('hides the reset button by default and restores all layers when activated (REQ-008)', async () => {
		const props = allOn();
		render(TimelineFilters, props);
		await openBar();
		const reset = page.getByTestId('timeline-filter-reset');
		// absent (not just hidden) while every layer is on
		expect(reset.query()).toBeNull();
		await page.getByTestId('timeline-filter-historical').click();
		await expect.element(reset).toBeVisible();
		await reset.click();
		await expect
			.element(page.getByTestId('timeline-filter-historical'))
			.toHaveAttribute('aria-pressed', 'true');
		await expect.poll(() => reset.query()).toBeNull();
		expect(props.onChange).toHaveBeenCalled();
	});
});
