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

vi.mock('$app/forms', () => ({ enhance: () => () => {} }));

const groups = [
	{ id: 'g1', name: 'Editoren', permissions: ['WRITE_ALL'] },
	{ id: 'g2', name: 'Admins', permissions: ['ADMIN'] }
];

const baseData = { user: undefined, canWrite: true, canAnnotate: false, groups };

afterEach(cleanup);

// ─── Rendering ────────────────────────────────────────────────────────────────

describe('Admin new user page – rendering', () => {
	it('renders the page heading', async () => {
		render(Page, { data: baseData, form: null });
		await expect.element(page.getByText(/Neuen Benutzer anlegen/i)).toBeInTheDocument();
	});

	it('renders the login input', async () => {
		render(Page, { data: baseData, form: null });
		await expect.element(page.getByRole('textbox', { name: /Login/i })).toBeInTheDocument();
	});

	it('renders group checkboxes for each available group', async () => {
		render(Page, { data: baseData, form: null });
		await expect.element(page.getByText('Editoren')).toBeInTheDocument();
		await expect.element(page.getByText('Admins')).toBeInTheDocument();
	});

	it('cancel link points to /admin', async () => {
		render(Page, { data: baseData, form: null });
		await expect
			.element(page.getByRole('link', { name: /Abbrechen/i }))
			.toHaveAttribute('href', '/admin');
	});

	it('back link points to /admin', async () => {
		render(Page, { data: baseData, form: null });
		await expect
			.element(page.getByRole('link', { name: /Zurück/i }))
			.toHaveAttribute('href', '/admin');
	});

	it('renders the create button', async () => {
		render(Page, { data: baseData, form: null });
		await expect.element(page.getByRole('button', { name: /Erstellen/i })).toBeInTheDocument();
	});
});

// ─── Error display ────────────────────────────────────────────────────────────

describe('Admin new user page – error display', () => {
	it('shows the error message when form has an error', async () => {
		render(Page, { data: baseData, form: { error: 'Ein Fehler ist aufgetreten.' } });
		await expect.element(page.getByText('Ein Fehler ist aufgetreten.')).toBeInTheDocument();
	});

	it('does not show error section when form is null', async () => {
		render(Page, { data: baseData, form: null });
		await expect.element(page.getByText('Ein Fehler ist aufgetreten.')).not.toBeInTheDocument();
	});
});