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

afterEach(cleanup);

function makeAnnotation(id = 'ann-1') {
	return {
		id,
		documentId: 'doc-1',
		pageNumber: 1,
		x: 0.1,
		y: 0.1,
		width: 0.3,
		height: 0.2,
		color: '#00C7B1',
		createdAt: new Date().toISOString()
	};
}

describe('AnnotationShape', () => {
	it('renders the annotation element', async () => {
		render(AnnotationShape, {
			annotation: makeAnnotation(),
			isHovered: false,
			isActive: false,
			onclick: () => {},
			onpointerenter: () => {},
			onpointerleave: () => {}
		});

		await expect.element(page.getByTestId('annotation-ann-1')).toBeInTheDocument();
	});

	// The on-canvas delete button was removed (issue #722) because it overlapped
	// the document text. Deletion now happens via the transcription panel or the
	// keyboard Delete shortcut. No visible delete button must ever render — even
	// when hovered and active in delete mode.
	it('never renders a delete button, even when hovered and active in delete mode', async () => {
		render(AnnotationShape, {
			annotation: makeAnnotation(),
			isHovered: true,
			isActive: true,
			showDelete: true,
			onDeleteRequest: vi.fn(),
			onclick: () => {},
			onpointerenter: () => {},
			onpointerleave: () => {}
		});

		await expect.element(page.getByTestId('annotation-ann-1')).toBeInTheDocument();
		// Positive control: the previously-removed testid must stay absent.
		await expect.element(page.getByTestId('annotation-delete-ann-1')).not.toBeInTheDocument();
		// Real invariant: the annotation must contain no clickable delete control at all.
		const annotationEl = page.getByTestId('annotation-ann-1').element() as HTMLElement;
		expect(annotationEl.querySelectorAll('button').length).toBe(0);
	});

	it('calls onDeleteRequest when Delete key is pressed on the annotation', async () => {
		const onDeleteRequest = vi.fn();

		render(AnnotationShape, {
			annotation: makeAnnotation(),
			isHovered: false,
			isActive: true,
			showDelete: true,
			onDeleteRequest,
			onclick: () => {},
			onpointerenter: () => {},
			onpointerleave: () => {}
		});

		const annotationEl = page.getByTestId('annotation-ann-1').element() as HTMLElement;
		annotationEl.dispatchEvent(new KeyboardEvent('keydown', { key: 'Delete', bubbles: true }));

		expect(onDeleteRequest).toHaveBeenCalledOnce();
	});

	it('does not call onDeleteRequest on Delete key when showDelete is false', async () => {
		const onDeleteRequest = vi.fn();

		render(AnnotationShape, {
			annotation: makeAnnotation(),
			isHovered: false,
			isActive: true,
			showDelete: false,
			onDeleteRequest,
			onclick: () => {},
			onpointerenter: () => {},
			onpointerleave: () => {}
		});

		const annotationEl = page.getByTestId('annotation-ann-1').element() as HTMLElement;
		annotationEl.dispatchEvent(new KeyboardEvent('keydown', { key: 'Delete', bubbles: true }));

		expect(onDeleteRequest).not.toHaveBeenCalled();
	});
});
