// @vitest-environment jsdom
import { cleanup, fireEvent, render, screen } from '@testing-library/react';
import { afterEach, describe, expect, it, vi } from 'vitest';
import { en } from '../i18n/en';
import { ErrorView } from './ErrorView';
import { ProcessingView } from './ProcessingView';

afterEach( cleanup );

describe( 'ErrorView', () => {
	it( 'shows recovery guidance and forwards retry and close', () => {
		const retry = vi.fn();
		const close = vi.fn();
		render( <ErrorView message="Network failed" onRetry={ retry } onClose={ close } t={ en.error } /> );

		expect( screen.getByText( 'Network failed' ) ).toBeTruthy();
		expect( screen.getAllByRole( 'listitem' ) ).toHaveLength( 3 );
		fireEvent.click( screen.getByRole( 'button', { name: en.error.tryAgain } ) );
		fireEvent.click( screen.getByRole( 'button', { name: en.error.close } ) );
		expect( retry ).toHaveBeenCalledOnce();
		expect( close ).toHaveBeenCalledOnce();
	} );
} );

describe( 'ProcessingView', () => {
	it.each( [
		{ progress: -10, visible: '0%' },
		{ progress: 45, visible: '45%' },
		{ progress: 80, visible: '80%' },
		{ progress: 120, visible: '100%' },
	] )( 'clamps $progress to $visible and reflects workflow stages', ( { progress, visible } ) => {
		const { container } = render(
			<ProcessingView progress={ progress } clothingImage="garment.jpg" t={ en.processing } />
		);

		expect( screen.getByText( visible ) ).toBeTruthy();
		expect( screen.getByRole( 'img', { name: en.processing.title } ) ).toBeTruthy();
		expect( container.querySelector( '.aisthetix-progress-fill' )?.getAttribute( 'style' ) ).toContain( visible );
	} );

	it( 'does not render an empty garment preview', () => {
		render( <ProcessingView progress={ 10 } t={ en.processing } /> );
		expect( screen.queryByRole( 'img' ) ).toBeNull();
	} );
} );