import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/svelte';
import Page from './+page.svelte';

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

describe('household setup page', () => {
	it('renders the form heading', () => {
		render(Page);
		expect(screen.getByRole('heading', { name: 'Haushalt benennen' })).toBeInTheDocument();
	});

	it('renders the household name input', () => {
		render(Page);
		expect(screen.getByLabelText('Haushaltsname')).toBeInTheDocument();
	});

	it('renders the continue button', () => {
		render(Page);
		expect(screen.getByRole('button', { name: /weiter/i })).toBeInTheDocument();
	});

	it('renders the ProgressSidebar with step 1 active', () => {
		render(Page);
		const step1 = screen.getByTestId('step-1');
		expect(step1).toHaveAttribute('aria-current', 'step');
	});

	it('renders steps 2 and 3 as future steps', () => {
		render(Page);
		expect(screen.getByTestId('step-2')).not.toHaveAttribute('aria-current');
		expect(screen.getByTestId('step-3')).not.toHaveAttribute('aria-current');
	});

	it('does not render app navigation chrome', () => {
		render(Page);
		// No nav links like Planer or Rezepte (those are app shell nav items)
		expect(screen.queryByText('Planer')).not.toBeInTheDocument();
		expect(screen.queryByText('Rezepte')).not.toBeInTheDocument();
	});

	it('sets the page title', () => {
		render(Page);
		expect(document.title).toBe('Haushalt einrichten — Mealplan');
	});

	it('renders the mobile step indicator text', () => {
		render(Page);
		expect(screen.getByText(/schritt 1 von 3/i)).toBeInTheDocument();
	});
});