import { describe, it, expect } from 'vitest';
import { render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import PersonRelationshipsCard from './PersonRelationshipsCard.svelte';

const PERSON_ID = '00000000-0000-0000-0000-000000000001';
const SPOUSE_ID = '00000000-0000-0000-0000-000000000002';
const PARENT_ID = '00000000-0000-0000-0000-000000000003';

describe('PersonRelationshipsCard', () => {
	it('hides an inferred relationship that is already a direct one', async () => {
		render(PersonRelationshipsCard, {
			personId: PERSON_ID,
			relationships: [
				{
					id: 'r1',
					personId: PERSON_ID,
					relatedPersonId: SPOUSE_ID,
					personDisplayName: 'Anna Müller',
					relatedPersonDisplayName: 'Bertha Müller',
					relationType: 'SPOUSE_OF'
				}
			],
			inferredRelationships: [
				{
					person: {
						id: SPOUSE_ID,
						displayName: 'Bertha Müller',
						familyMember: true
					},
					label: 'SPOUSE',
					hops: 1
				}
			]
		});

		const matches = await page.getByText('Bertha Müller').all();
		expect(matches).toHaveLength(1);
	});

	it('still renders inferred relationships that are not direct', async () => {
		const COUSIN_ID = '00000000-0000-0000-0000-000000000003';
		render(PersonRelationshipsCard, {
			personId: PERSON_ID,
			relationships: [],
			inferredRelationships: [
				{
					person: { id: COUSIN_ID, displayName: 'Carla Cousine', familyMember: true },
					label: 'COUSIN',
					hops: 4
				}
			]
		});

		await expect.element(page.getByText('Carla Cousine')).toBeInTheDocument();
	});

	it('shows Elternteil-von chip when personId is the PARENT_OF subject', async () => {
		render(PersonRelationshipsCard, {
			personId: PERSON_ID,
			relationships: [
				{
					id: 'r1',
					personId: PERSON_ID,
					relatedPersonId: PARENT_ID,
					personDisplayName: 'Anna Müller',
					relatedPersonDisplayName: 'Kind Müller',
					relationType: 'PARENT_OF'
				}
			],
			inferredRelationships: []
		});

		await expect.element(page.getByText('Elternteil von')).toBeInTheDocument();
	});

	it('chip labels use text-xs (≥12px) not text-[10px] — WCAG readable font size', async () => {
		render(PersonRelationshipsCard, {
			personId: PERSON_ID,
			relationships: [
				{
					id: 'r1',
					personId: PERSON_ID,
					relatedPersonId: SPOUSE_ID,
					personDisplayName: 'Anna',
					relatedPersonDisplayName: 'Bertha',
					relationType: 'SPOUSE_OF'
				}
			],
			inferredRelationships: [
				{
					person: { id: PARENT_ID, displayName: 'Großmutter', familyMember: true },
					label: 'Großmutter',
					hops: 2
				}
			]
		});
		const chips = document.querySelectorAll<HTMLElement>('li span.rounded-full');
		expect(chips.length).toBeGreaterThan(0);
		chips.forEach((chip) => {
			expect(chip.classList.contains('text-xs')).toBe(true);
			expect(chip.classList.contains('text-[10px]')).toBe(false);
		});
	});

	it('shows Kind-von chip when personId is the PARENT_OF object', async () => {
		render(PersonRelationshipsCard, {
			personId: PERSON_ID,
			relationships: [
				{
					id: 'r2',
					personId: PARENT_ID,
					relatedPersonId: PERSON_ID,
					personDisplayName: 'Eltern Müller',
					relatedPersonDisplayName: 'Anna Müller',
					relationType: 'PARENT_OF'
				}
			],
			inferredRelationships: []
		});

		await expect.element(page.getByText('Kind von')).toBeInTheDocument();
	});
});