import { describe, it, expect, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import DocumentBottomPanel from './DocumentBottomPanel.svelte';
import type { Comment } from '$lib/types';

afterEach(cleanup);

function makeComment(id: string): Comment {
	return {
		id,
		authorId: 'user-1',
		authorName: 'Alice',
		content: 'Hello',
		createdAt: new Date().toISOString(),
		updatedAt: new Date().toISOString(),
		replies: []
	};
}

const doc = { id: 'doc-1', title: 'Test' };

const baseProps = {
	doc,
	canComment: true,
	currentUserId: 'user-1',
	canAdmin: false,
	height: 300,
	activeTab: 'discussion' as const
};

describe('DocumentBottomPanel – discussion badge', () => {
	it('always shows a badge on the Discussion tab', async () => {
		render(DocumentBottomPanel, { ...baseProps, comments: [], open: true });
		await expect.element(page.getByTestId('discussion-count-badge')).toBeInTheDocument();
		await expect.element(page.getByTestId('discussion-count-badge')).toHaveTextContent('0');
	});

	it('shows the correct count when comments exist', async () => {
		render(DocumentBottomPanel, {
			...baseProps,
			comments: [makeComment('c-1'), makeComment('c-2')],
			open: true
		});
		await expect.element(page.getByTestId('discussion-count-badge')).toHaveTextContent('2');
	});
});