/**
 * Wizard stepper component with responsive mobile support.
 *
 * @package RawTypeOE
 */

import { useMemo } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { Stepper, Progress } from '@rawtype/ui';
import ENTITY_META from '../constants/entities';

const BASE_LABELS = [
	__( 'Entity', 'rawtype-order-exporter-woocommerce' ),
	__( 'Filters', 'rawtype-order-exporter-woocommerce' ),
	__( 'Columns', 'rawtype-order-exporter-woocommerce' ),
	__( 'Export', 'rawtype-order-exporter-woocommerce' ),
];

export default function WizardStepper( { currentStep, maxStepReached, onStepClick, totalSteps, entity } ) {
	const steps = totalSteps || BASE_LABELS.length;

	const stepLabels = useMemo( () => {
		if ( ! entity || ! ENTITY_META[ entity ] ) {
			return BASE_LABELS;
		}
		const labels = [ ...BASE_LABELS ];
		labels[ 0 ] = ENTITY_META[ entity ].label;
		return labels;
	}, [ entity ] );

	return (
		<>
			{ /* Desktop stepper — hidden below 768px (handled inside Stepper) */ }
			<Stepper
				steps={ stepLabels }
				currentStep={ currentStep }
				maxStepReached={ maxStepReached }
				onStepClick={ onStepClick }
			/>

			{ /* Mobile stepper — visible only below 768px */ }
			<div className="roe-wizard-stepper-mobile">
				<span className="roe-wizard-stepper-mobile-label">
					{ sprintf(
						/* translators: 1: current step, 2: total steps */
						__( 'Step %1$d of %2$d', 'rawtype-order-exporter-woocommerce' ),
						currentStep + 1,
						steps,
					) }
					{ ' \u2014 ' }
					{ stepLabels[ currentStep ] || '' }
				</span>
				<Progress
					value={ currentStep + 1 }
					max={ steps }
					className="roe-wizard-mobile-progress"
				/>
			</div>
		</>
	);
}
