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

afterEach(cleanup);

describe('ChronikEmptyState', () => {
	it('renders the first-run title and body and the clock icon', async () => {
		render(ChronikEmptyState, { props: { variant: 'first-run' as const } });

		await expect.element(page.getByText('Noch nichts geschehen')).toBeVisible();
		await expect.element(page.getByText(/sobald jemand aus der familie/i)).toBeVisible();

		const wrapper = document.querySelector('[data-testid="chronik-empty-state"]');
		expect(wrapper?.getAttribute('data-variant')).toBe('first-run');
	});

	it('renders the filter-empty title and body', async () => {
		render(ChronikEmptyState, { props: { variant: 'filter-empty' as const } });

		await expect.element(page.getByText('Nichts in dieser Ansicht')).toBeVisible();
		await expect.element(page.getByText('In diesem Filter gibt es keine Einträge.')).toBeVisible();

		const wrapper = document.querySelector('[data-testid="chronik-empty-state"]');
		expect(wrapper?.getAttribute('data-variant')).toBe('filter-empty');
	});

	it('renders the inbox-zero title and no body paragraph', async () => {
		render(ChronikEmptyState, { props: { variant: 'inbox-zero' as const } });

		await expect.element(page.getByText('Keine neuen Erwähnungen')).toBeVisible();

		// Only one <p> (the title) since body is empty
		const wrapper = document.querySelector('[data-testid="chronik-empty-state"]');
		const paragraphs = wrapper?.querySelectorAll('p');
		expect(paragraphs?.length).toBe(1);
		expect(wrapper?.getAttribute('data-variant')).toBe('inbox-zero');
	});

	it('uses the accent color icon for inbox-zero (vs ink-3 for others)', async () => {
		render(ChronikEmptyState, { props: { variant: 'inbox-zero' as const } });

		const wrapper = document.querySelector('[data-testid="chronik-empty-state"]');
		const svg = wrapper?.querySelector('svg');
		expect(svg?.getAttribute('class')).toContain('text-accent');
	});

	it('uses the ink-3 color icon for first-run', async () => {
		render(ChronikEmptyState, { props: { variant: 'first-run' as const } });

		const wrapper = document.querySelector('[data-testid="chronik-empty-state"]');
		const svg = wrapper?.querySelector('svg');
		expect(svg?.getAttribute('class')).toContain('text-ink-3');
	});
});