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

afterEach(cleanup);

const baseProps = (overrides: Record<string, unknown> = {}) => ({
	name: 'Anna',
	documents: 50,
	persons: 12,
	stories: 5,
	...overrides
});

describe('ReaderHeaderBar', () => {
	it('renders the welcome greeting with name', async () => {
		render(ReaderHeaderBar, { props: baseProps() });

		await expect.element(page.getByText(/anna/i)).toBeVisible();
	});

	it('renders Morgen label for hours before noon', async () => {
		render(ReaderHeaderBar, { props: baseProps({ hour: 9 }) });

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

	it('renders Mittag label for hours 12-17', async () => {
		render(ReaderHeaderBar, { props: baseProps({ hour: 14 }) });

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

	it('renders Abend label for hours 18+', async () => {
		render(ReaderHeaderBar, { props: baseProps({ hour: 20 }) });

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

	it('renders the stats counts and links', async () => {
		render(ReaderHeaderBar, { props: baseProps() });

		// Counts visible somewhere
		expect(document.body.textContent).toContain('50');
		expect(document.body.textContent).toContain('12');

		const docsLink = document.querySelector('a[href="/documents"]');
		const personsLink = document.querySelector('a[href="/persons"]');
		const storiesLink = document.querySelector('a[href="/geschichten"]');
		expect(docsLink).not.toBeNull();
		expect(personsLink).not.toBeNull();
		expect(storiesLink).not.toBeNull();
	});

	it('renders em-dash when stats are null', async () => {
		render(ReaderHeaderBar, {
			props: baseProps({ documents: null, persons: null, stories: null })
		});

		const dashes = Array.from(document.querySelectorAll('span.text-2xl'));
		const dashCount = dashes.filter((el) => el.textContent?.trim() === '—').length;
		expect(dashCount).toBe(3);
	});
});
