import { describe, it, expect, afterEach, vi } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import NameHistoryEditCard from './NameHistoryEditCard.svelte';
import { createConfirmService, CONFIRM_KEY } from '$lib/shared/services/confirm.svelte.js';

vi.mock('$app/forms', () => ({ enhance: () => () => {} }));

afterEach(cleanup);

const aliases = [
	{ id: 'a1', lastName: 'de Gruyter', firstName: null, type: 'BIRTH', sortOrder: 0 },
	{ id: 'a2', lastName: 'Schmidt', firstName: 'Maria', type: 'WIDOWED', sortOrder: 1 }
];

function renderCard(props: Record<string, unknown> = {}) {
	const service = createConfirmService();
	return {
		...render(NameHistoryEditCard, {
			props: { aliases, canWrite: true, ...props },
			context: new Map([[CONFIRM_KEY, service]])
		}),
		service
	};
}

describe('NameHistoryEditCard', () => {
	it('should render alias rows when aliases exist', async () => {
		renderCard();

		await expect.element(page.getByText('de Gruyter')).toBeInTheDocument();
		await expect.element(page.getByText('Schmidt')).toBeInTheDocument();
	});

	it('should show empty state when no aliases', async () => {
		renderCard({ aliases: [] });

		const emptyText = document.querySelector('.italic');
		expect(emptyText).not.toBeNull();
	});

	it('should show add form when canWrite is true', async () => {
		renderCard({ aliases: [] });

		const form = document.querySelector('form[action="?/addAlias"]');
		expect(form).not.toBeNull();
	});

	it('should hide add form when canWrite is false', async () => {
		renderCard({ aliases: [], canWrite: false });

		const form = document.querySelector('form[action="?/addAlias"]');
		expect(form).toBeNull();
	});

	it('should hide delete buttons when canWrite is false', async () => {
		renderCard({ canWrite: false });

		const deleteButtons = document.querySelectorAll('button[aria-label*="Entfernen"]');
		expect(deleteButtons.length).toBe(0);
	});

	it('should show delete buttons when canWrite is true', async () => {
		renderCard();

		const deleteButtons = document.querySelectorAll('button[aria-label*="Entfernen"]');
		expect(deleteButtons.length).toBe(2);
	});

	it('should include alias name in delete button aria-label', async () => {
		renderCard({ aliases: [aliases[0]] });

		const btn = document.querySelector('button[aria-label*="de Gruyter"]');
		expect(btn).not.toBeNull();
	});

	it('should open ConfirmService dialog (not inline modal) when delete button is clicked', async () => {
		const { service } = renderCard({ aliases: [aliases[0]] });

		const deleteBtn = document.querySelector(
			'button[aria-label*="de Gruyter"]'
		) as HTMLButtonElement;
		deleteBtn.click();

		await vi.waitFor(() => expect(service.options).not.toBeNull());
		expect(service.options?.destructive).toBe(true);
		service.settle(false);
	});

	it('should show alias error when provided', async () => {
		renderCard({ aliases: [], aliasError: 'Something went wrong' });

		await expect.element(page.getByText('Something went wrong')).toBeInTheDocument();
	});

	it('should have required attribute on lastName input', async () => {
		renderCard({ aliases: [] });

		const input = document.querySelector('input[name="lastName"]') as HTMLInputElement;
		expect(input.required).toBe(true);
	});
});
