import { describe, it, expect, vi, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page as browserPage } from 'vitest/browser';

const mockPage = {
	status: 500,
	error: { message: 'Internal Error' } as { message: string } | null
};

vi.mock('$app/state', () => ({
	get page() {
		return mockPage;
	}
}));

afterEach(cleanup);

async function loadComponent() {
	return (await import('./+error.svelte')).default;
}

describe('+error.svelte', () => {
	it('renders the page status code prominently', async () => {
		mockPage.status = 404;
		mockPage.error = { message: 'Not Found' };

		const ErrorPage = await loadComponent();
		render(ErrorPage);

		await expect.element(browserPage.getByText('404')).toBeVisible();
	});

	it('renders the error message text from page.error.message', async () => {
		mockPage.status = 500;
		mockPage.error = { message: 'Database unavailable' };

		const ErrorPage = await loadComponent();
		render(ErrorPage);

		await expect.element(browserPage.getByText('Database unavailable')).toBeVisible();
	});

	it('falls back to the literal "Internal Error" when page.error is null', async () => {
		mockPage.status = 500;
		mockPage.error = null;

		const ErrorPage = await loadComponent();
		render(ErrorPage);

		await expect.element(browserPage.getByText('Internal Error')).toBeVisible();
	});
});