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

vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
vi.mock('$lib/person/PersonTypeahead.svelte', () => ({
	default: () => null
}));

afterEach(cleanup);

const makePerson = (overrides = {}) => ({
	displayName: 'Hans Müller',
	...overrides
});

// ─── Danger indicator ────────────────────────────────────────────────────────

describe('PersonMergePanel — danger indicator', () => {
	it('renders outer container with red border class', () => {
		const { container } = render(PersonMergePanel, {
			props: { person: makePerson(), form: null }
		});
		const panel = container.firstElementChild as HTMLElement;
		expect(panel?.classList.contains('border-red-200')).toBe(true);
	});
});

// ─── Initial state ────────────────────────────────────────────────────────────

describe('PersonMergePanel — initial state', () => {
	it('renders merge heading', async () => {
		render(PersonMergePanel, { props: { person: makePerson(), form: null } });
		const heading = page.getByRole('heading', { level: 2 });
		await expect.element(heading).toBeInTheDocument();
	});

	it('merge button is disabled when no target selected', async () => {
		render(PersonMergePanel, { props: { person: makePerson(), form: null } });
		const mergeBtn = page.getByRole('button', { name: /zusammenführen/i });
		await expect.element(mergeBtn).toBeDisabled();
	});
});

// ─── Error state ──────────────────────────────────────────────────────────────

describe('PersonMergePanel — error state', () => {
	it('renders mergeError when form contains error', async () => {
		render(PersonMergePanel, {
			props: { person: makePerson(), form: { mergeError: 'Zielperson nicht gefunden.' } }
		});
		await expect.element(page.getByText('Zielperson nicht gefunden.')).toBeInTheDocument();
	});
});
