import { page } from 'vitest/browser';
import { describe, it, expect, vi } from 'vitest';
import { render } from 'vitest-browser-svelte';
import type { PageProps } from './$types';

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

import Page from './+page.svelte';

const superAdmin = {
	id: 'admin-1',
	name: 'Super Admin',
	roleId: 1,
	roleName: 'SUPER'
};

function makeData(overrides: Partial<PageProps['data']> = {}): PageProps['data'] {
	return {
		records: [],
		roleOptions: [{ id: 4, name: 'USER' }],
		adminUser: superAdmin,
		userRoleId: 1,
		...overrides
	};
}

async function clickButton(name: string) {
	const loc = page.getByRole('button', { name });
	const el = (await loc.element()) as HTMLElement;
	el.click();
}

describe('users admin page', () => {
	it('does not replay a stale success result when reopening the create modal', async () => {
		render(Page, {
			params: {},
			data: makeData(),
			form: { success: true, action: 'upsert' }
		});

		await clickButton('New User');

		await expect.element(page.getByRole('button', { name: 'Create User' })).toBeInTheDocument();
		expect(page.getByText('User created').elements()).toHaveLength(0);
	});

	it('does not replay a stale success result when opening the edit modal', async () => {
		const record = { id: 'user-1', name: 'Jane Doe', email: 'jane@example.com', roleId: 4 };

		render(Page, {
			params: {},
			data: makeData({ records: [record] }),
			form: { success: true, action: 'upsert' }
		});

		const cell = (await page.getByRole('cell', { name: 'Jane Doe' }).element()) as HTMLElement;
		cell.click();

		await expect.element(page.getByRole('button', { name: 'Save User' })).toBeInTheDocument();
		expect(page.getByText('User updated').elements()).toHaveLength(0);
	});

	it('closes the create modal after a successful submit', async () => {
		const result = render(Page, {
			params: {},
			data: makeData(),
			form: null
		});

		await clickButton('New User');
		await expect.element(page.getByRole('button', { name: 'Create User' })).toBeInTheDocument();

		await result.rerender({ form: { success: true, action: 'upsert' } });

		await expect.element(page.getByText('User created')).toBeInTheDocument();
		await vi.waitFor(
			() => {
				expect(page.getByRole('button', { name: 'Create User' }).elements()).toHaveLength(0);
			},
			{ timeout: 3000 }
		);
	});
});