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

vi.mock('$app/navigation', () => ({
	beforeNavigate: () => {},
	afterNavigate: () => {},
	goto: vi.fn(),
	invalidate: vi.fn(),
	invalidateAll: vi.fn(),
	preloadCode: vi.fn(),
	preloadData: vi.fn(),
	pushState: vi.fn(),
	replaceState: vi.fn(),
	disableScrollHandling: vi.fn(),
	onNavigate: () => () => {}
}));

const { default: AdminUserNewPage } = await import('./+page.svelte');

afterEach(cleanup);

const baseData = (overrides: Record<string, unknown> = {}) => ({
	groups: [
		{ id: 'g1', name: 'Familie' },
		{ id: 'g2', name: 'Admins' }
	],
	...overrides
});

describe('admin/users/new page', () => {
	it('renders the new-user heading', async () => {
		render(AdminUserNewPage, { props: { data: baseData(), form: undefined } });

		await expect
			.element(page.getByRole('heading', { name: /neuen benutzer anlegen/i }))
			.toBeVisible();
	});

	it('renders the three card sections', async () => {
		render(AdminUserNewPage, { props: { data: baseData(), form: undefined } });

		await expect.element(page.getByRole('heading', { name: /persönliche daten/i })).toBeVisible();
		await expect.element(page.getByRole('heading', { name: /^gruppen$/i })).toBeVisible();
	});

	it('renders all available groups in the picker', async () => {
		render(AdminUserNewPage, { props: { data: baseData(), form: undefined } });

		const checkboxes = document.querySelectorAll('input[name="groupIds"]');
		expect(checkboxes.length).toBe(2);
	});

	it('shows the form-error banner when form.error is set', async () => {
		render(AdminUserNewPage, {
			props: { data: baseData(), form: { error: 'E-Mail bereits vergeben' } }
		});

		await expect.element(page.getByText('E-Mail bereits vergeben')).toBeVisible();
	});

	it('renders cancel link to /admin/users', async () => {
		render(AdminUserNewPage, { props: { data: baseData(), form: undefined } });

		const cancel = document.querySelectorAll('a[href="/admin/users"]');
		expect(cancel.length).toBeGreaterThan(0);
	});

	it('renders the create submit button', async () => {
		render(AdminUserNewPage, { props: { data: baseData(), form: undefined } });

		await expect.element(page.getByRole('button', { name: /erstellen/i })).toBeVisible();
	});
});