import { describe, it, expect, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { tick } from 'svelte';
import * as m from '$lib/paraglide/messages.js';
import { getLocale } from '$lib/paraglide/runtime.js';
import { formatTickLabel } from '$lib/shared/utils/monthBuckets';
import YearLetterStrip from './YearLetterStrip.svelte';
import { makeEntry } from './test-factories';

afterEach(() => cleanup());

function denseLetters(year: number, count: number) {
	return Array.from({ length: count }, (_, i) =>
		makeEntry({
			eventDate: `${year}-${String((i % 12) + 1).padStart(2, '0')}-10`,
			documentId: `doc-${i}`
		})
	);
}

describe('YearLetterStrip', () => {
	it('shows the letter count and a 12-bar sparkline (REQ-012)', () => {
		render(YearLetterStrip, { letters: denseLetters(1915, 30), year: 1915 });
		expect(document.body.textContent).toContain('30');
		const bars = document.querySelectorAll('[data-testid="sparkline-bar"]');
		expect(bars).toHaveLength(12);
	});

	it('has a keyboard-focusable expand toggle of at least 44px (REQ-012)', () => {
		render(YearLetterStrip, { letters: denseLetters(1915, 30), year: 1915 });
		const toggle = document.querySelector('[data-testid="strip-expand"]') as HTMLButtonElement;
		expect(toggle).not.toBeNull();
		expect(toggle.tagName).toBe('BUTTON');
		expect(toggle.getBoundingClientRect().height).toBeGreaterThanOrEqual(44);
	});

	it('reveals all letter cards when expanded (REQ-012)', async () => {
		render(YearLetterStrip, { letters: denseLetters(1915, 30), year: 1915 });
		expect(document.querySelectorAll('a').length).toBe(0);
		const toggle = document.querySelector('[data-testid="strip-expand"]') as HTMLButtonElement;
		toggle.click();
		await tick();
		expect(document.querySelectorAll('a').length).toBe(30);
	});

	it('prefixes the count with an aria-hidden ✉ + sr-only "Brief" and shows the density caption (REQ-010)', () => {
		render(YearLetterStrip, { letters: denseLetters(1915, 30), year: 1915 });
		const hidden = document.querySelector('[aria-hidden="true"]');
		expect(hidden?.textContent).toContain('✉');
		const srOnly = document.querySelector('.sr-only');
		expect(srOnly?.textContent).toBe(m.timeline_letter_glyph_label());
		expect(document.body.textContent).toContain(m.timeline_strip_density_caption());
	});

	it('keeps the expand toggle and its "Briefe anzeigen" label alongside the new chrome (REQ-010)', () => {
		render(YearLetterStrip, { letters: denseLetters(1915, 30), year: 1915 });
		const toggle = document.querySelector('[data-testid="strip-expand"]') as HTMLButtonElement;
		expect(toggle).not.toBeNull();
		expect(toggle.textContent).toContain(m.timeline_strip_expand());
		expect(toggle.getBoundingClientRect().height).toBeGreaterThanOrEqual(44);
	});

	it('renders exactly two endpoint month-axis labels (Jan/Dez {year}) at ≥10px (REQ-011)', () => {
		render(YearLetterStrip, { letters: denseLetters(1915, 30), year: 1915 });
		const labels = document.querySelectorAll('[data-testid="strip-axis-label"]');
		expect(labels).toHaveLength(2);
		expect(labels[0].textContent).toContain(formatTickLabel('1915-01', getLocale()));
		expect(labels[1].textContent).toContain(formatTickLabel('1915-12', getLocale()));
		for (const label of labels) {
			expect(parseFloat(getComputedStyle(label).fontSize)).toBeGreaterThanOrEqual(10);
		}
	});
});
