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

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

afterEach(cleanup);

const baseProps = {
	chipLabel: 'Elternteil',
	otherName: 'Anna Schmidt',
	dateRange: '',
	canWrite: false,
	relId: 'rel-1'
};

describe('RelationshipChip', () => {
	it('renders the chip label', async () => {
		render(RelationshipChip, baseProps);
		await expect.element(page.getByText('Elternteil')).toBeInTheDocument();
	});

	it('renders the other person name', async () => {
		render(RelationshipChip, baseProps);
		await expect.element(page.getByText('Anna Schmidt')).toBeInTheDocument();
	});

	it('shows the date range when provided', async () => {
		render(RelationshipChip, { ...baseProps, dateRange: '12. Mai 1923 – 1958' });
		await expect.element(page.getByText('12. Mai 1923 – 1958')).toBeInTheDocument();
	});

	it('does not render a date-range span when empty', async () => {
		render(RelationshipChip, { ...baseProps, dateRange: '' });
		expect(document.querySelector('[data-testid="date-range"]')).toBeNull();
	});

	it('shows the delete button when canWrite is true', async () => {
		render(RelationshipChip, { ...baseProps, canWrite: true });
		await expect.element(page.getByRole('button')).toBeInTheDocument();
	});

	it('hides the delete button when canWrite is false', async () => {
		render(RelationshipChip, { ...baseProps, canWrite: false });
		expect(document.querySelector('button')).toBeNull();
	});

	it('gives the delete button an h-11 w-11 (44px) WCAG touch target', async () => {
		render(RelationshipChip, { ...baseProps, canWrite: true });
		const btn = document.querySelector('button')!;
		expect(btn.className).toContain('h-11');
		expect(btn.className).toContain('w-11');
	});

	it('shows an Edit affordance with an accessible name when canWrite and onEdit', async () => {
		render(RelationshipChip, { ...baseProps, canWrite: true, onEdit: () => {} });
		await expect
			.element(page.getByRole('button', { name: /Beziehung bearbeiten/i }))
			.toBeInTheDocument();
	});

	it('does not show the Edit affordance without onEdit', async () => {
		render(RelationshipChip, { ...baseProps, canWrite: true });
		expect(document.querySelector('button[aria-label*="bearbeiten"]')).toBeNull();
	});

	it('does not show the Edit affordance when canWrite is false', async () => {
		render(RelationshipChip, { ...baseProps, canWrite: false, onEdit: () => {} });
		expect(document.querySelector('button[aria-label*="bearbeiten"]')).toBeNull();
	});

	it('calls onEdit when the Edit affordance is clicked', async () => {
		const onEdit = vi.fn();
		render(RelationshipChip, { ...baseProps, canWrite: true, onEdit });
		const editBtn = document.querySelector<HTMLButtonElement>('button[aria-label*="bearbeiten"]')!;
		editBtn.click();
		expect(onEdit).toHaveBeenCalledOnce();
	});
});
