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

afterEach(cleanup);

describe('CoCorrespondentsList', () => {
	it('renders nothing when the coCorrespondents list is empty', async () => {
		render(CoCorrespondentsList, {
			props: { coCorrespondents: [], personId: 'p-1' }
		});

		await expect
			.element(page.getByRole('heading', { name: /häufige korrespondenten/i }))
			.not.toBeInTheDocument();
	});

	it('renders the heading and hint when there is at least one co-correspondent', async () => {
		render(CoCorrespondentsList, {
			props: {
				coCorrespondents: [{ id: 'c-1', name: 'Max Mustermann', count: 3 }],
				personId: 'p-1'
			}
		});

		await expect
			.element(page.getByRole('heading', { name: /häufige korrespondenten/i }))
			.toBeVisible();
		await expect.element(page.getByText('klicken für Konversation')).toBeVisible();
	});

	it('renders one chip per co-correspondent with name and count', async () => {
		render(CoCorrespondentsList, {
			props: {
				coCorrespondents: [
					{ id: 'c-1', name: 'Max Mustermann', count: 3 },
					{ id: 'c-2', name: 'Erika Beispiel', count: 1 }
				],
				personId: 'p-1'
			}
		});

		await expect.element(page.getByText('Max Mustermann')).toBeVisible();
		await expect.element(page.getByText('Erika Beispiel')).toBeVisible();
		await expect.element(page.getByText('×3')).toBeVisible();
		await expect.element(page.getByText('×1')).toBeVisible();
	});

	it('points each chip to the bilateral conversation route with the correct ids', async () => {
		render(CoCorrespondentsList, {
			props: {
				coCorrespondents: [{ id: 'c-1', name: 'Max Mustermann', count: 3 }],
				personId: 'p-1'
			}
		});

		await expect
			.element(page.getByRole('link', { name: /max mustermann/i }))
			.toHaveAttribute('href', '/briefwechsel?senderId=p-1&receiverId=c-1');
	});

	it('builds initials from up to two name parts', async () => {
		render(CoCorrespondentsList, {
			props: {
				coCorrespondents: [{ id: 'c-1', name: 'Max Mustermann Beispiel', count: 1 }],
				personId: 'p-1'
			}
		});

		await expect.element(page.getByText('MM')).toBeVisible();
	});

	it('handles a single-word name (initials use just one letter)', async () => {
		render(CoCorrespondentsList, {
			props: {
				coCorrespondents: [{ id: 'c-1', name: 'Cher', count: 2 }],
				personId: 'p-1'
			}
		});

		// "Cher" → initials "C"
		const initialsBadge = document.querySelector('span.flex.h-4.w-4');
		expect(initialsBadge?.textContent?.trim()).toBe('C');
	});

	it('handles a name part starting with empty string gracefully', async () => {
		render(CoCorrespondentsList, {
			props: {
				coCorrespondents: [{ id: 'c-1', name: '  Max', count: 1 }],
				personId: 'p-1'
			}
		});

		// Leading space → name.split(' ') yields ['', '', 'Max']; first chars are '', '', 'M' → 'M'
		const initialsBadge = document.querySelector('span.flex.h-4.w-4');
		expect(initialsBadge?.textContent?.trim()).toContain('M');
	});
});
