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

afterEach(cleanup);

describe('forgot-password page', () => {
	it('renders the email input form when no form prop is provided', async () => {
		render(ForgotPasswordPage, { props: { form: undefined } });

		await expect.element(page.getByRole('heading', { name: /passwort vergessen/i })).toBeVisible();
		await expect.element(page.getByLabelText('E-Mail-Adresse')).toBeVisible();
		await expect.element(page.getByRole('button', { name: /link anfordern/i })).toBeVisible();
	});

	it('shows the success banner and hides the form when form.success is true', async () => {
		render(ForgotPasswordPage, { props: { form: { success: true } } });

		await expect
			.element(
				page.getByText(
					'Falls ein Konto mit dieser E-Mail-Adresse existiert, erhalten Sie in Kürze eine E-Mail mit einem Link zum Zurücksetzen Ihres Passworts.'
				)
			)
			.toBeVisible();
		await expect
			.element(page.getByRole('button', { name: /link anfordern/i }))
			.not.toBeInTheDocument();
	});

	it('shows the error message inside the form when form.error is set', async () => {
		render(ForgotPasswordPage, { props: { form: { error: 'Server unreachable' } } });

		await expect.element(page.getByText('Server unreachable')).toBeVisible();
		await expect.element(page.getByRole('button', { name: /link anfordern/i })).toBeVisible();
	});

	it('always offers a back-to-login link', async () => {
		render(ForgotPasswordPage, { props: { form: undefined } });

		await expect
			.element(page.getByRole('link', { name: /zurück zum login/i }))
			.toHaveAttribute('href', '/login');
	});
});