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

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

afterEach(cleanup);

const noop = () => {};

describe('CorrespondenzHero — headline and cross-link', () => {
	it('renders the discovery headline', async () => {
		render(CorrespondenzHero, { onSelectPerson: noop });
		await expect.element(page.getByText(/Wessen Briefe möchten Sie lesen/i)).toBeInTheDocument();
	});

	it('renders a cross-link to the document search page', async () => {
		render(CorrespondenzHero, { onSelectPerson: noop });
		const link = page.getByRole('link', { name: /Zur Dokumentensuche/i });
		await expect.element(link).toBeInTheDocument();
		await expect.element(link).toHaveAttribute('href', '/');
	});

	it('renders a person typeahead input', async () => {
		render(CorrespondenzHero, { onSelectPerson: noop });
		// PersonTypeahead renders <input role="combobox">, not role="textbox"
		await expect.element(page.getByTestId('conv-hero').getByRole('combobox')).toBeInTheDocument();
	});
});

describe('CorrespondenzHero — recent persons', () => {
	it('shows recent person chips when provided', async () => {
		render(CorrespondenzHero, {
			onSelectPerson: noop,
			recentPersons: [{ id: 'r1', name: 'Clara Braun' }]
		});
		await expect.element(page.getByText('Clara Braun')).toBeInTheDocument();
	});

	it('calls onSelectPerson when a recent person chip is clicked', async () => {
		const spy = vi.fn();
		render(CorrespondenzHero, {
			onSelectPerson: spy,
			recentPersons: [{ id: 'r1', name: 'Clara Braun' }]
		});
		await expect.element(page.getByText('Clara Braun')).toBeInTheDocument();
		document.querySelector<HTMLElement>('[data-testid="recent-person-r1"]')!.click();
		expect(spy).toHaveBeenCalledWith('r1');
	});
});