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

const tick = () => new Promise((r) => setTimeout(r, 0));

afterEach(cleanup);

const validData = {
	code: 'ABCDE12345',
	prefill: null,
	codeError: null
};

const prefillData = {
	code: 'ABCDE12345',
	prefill: { firstName: 'Max', lastName: 'Muster', email: 'max@test.com' },
	codeError: null
};

const errorData = {
	code: null,
	prefill: null,
	codeError: 'INVITE_NOT_FOUND'
};

describe('Register page – valid code', () => {
	it('renders the heading', async () => {
		render(RegisterPage, { data: validData });
		await expect.element(page.getByRole('heading', { level: 1 })).toBeInTheDocument();
	});

	it('renders the email input', async () => {
		render(RegisterPage, { data: validData });
		await tick();
		const input = document.querySelector<HTMLInputElement>('input[name="email"]');
		expect(input).not.toBeNull();
		expect(input?.type).toBe('email');
		expect(input?.required).toBe(true);
	});

	it('renders the password input', async () => {
		render(RegisterPage, { data: validData });
		await tick();
		const input = document.querySelector<HTMLInputElement>('input[name="password"]');
		expect(input).not.toBeNull();
		expect(input?.required).toBe(true);
	});

	it('renders the submit button', async () => {
		render(RegisterPage, { data: validData });
		await expect.element(page.getByRole('button', { name: 'Konto erstellen' })).toBeInTheDocument();
	});

	it('prefills fields from invite data', async () => {
		render(RegisterPage, { data: prefillData });
		await tick();
		const email = document.querySelector<HTMLInputElement>('input[name="email"]');
		const firstName = document.querySelector<HTMLInputElement>('input[name="firstName"]');
		const lastName = document.querySelector<HTMLInputElement>('input[name="lastName"]');
		expect(email?.value).toBe('max@test.com');
		expect(firstName?.value).toBe('Max');
		expect(lastName?.value).toBe('Muster');
	});

	it('has a hidden code input', async () => {
		render(RegisterPage, { data: validData });
		await tick();
		const hidden = document.querySelector<HTMLInputElement>('input[name="code"][type="hidden"]');
		expect(hidden).not.toBeNull();
		expect(hidden?.value).toBe('ABCDE12345');
	});

	it('shows form error when action returns error', async () => {
		render(RegisterPage, { data: validData, form: { error: 'INVITE_REVOKED' } });
		await tick();
		expect(document.querySelector('.text-red-600')).not.toBeNull();
	});

	it('has main landmark', async () => {
		render(RegisterPage, { data: validData });
		await tick();
		expect(document.querySelector('main')).not.toBeNull();
	});
});

describe('Register page – error state', () => {
	it('renders the error card when codeError is set', async () => {
		render(RegisterPage, { data: errorData });
		await tick();
		expect(document.querySelector('form')).toBeNull();
	});

	it('shows a back-to-login link in error state', async () => {
		render(RegisterPage, { data: errorData });
		await expect.element(page.getByRole('link', { name: /login/i })).toBeInTheDocument();
	});

	it('back-to-login link points to /login', async () => {
		render(RegisterPage, { data: errorData });
		await tick();
		const link = document.querySelector<HTMLAnchorElement>('a[href="/login"]');
		expect(link).not.toBeNull();
	});
});
