/**
 * CollectorInputPhase
 *
 * Renders the progress indicator and prompt label for the
 * current command input collection phase.
 *
 * Extracted from CommandInputCollector.tsx in v1.4.0.
 *
 * @since 1.4.0
 */

'use client';

import React from 'react';
import type { InputDefinition, CommandDefinition } from '../../commands/types';

// --- Types ---

export interface CollectorInputPhaseProps {
	/** Current command being executed */
	command: CommandDefinition;
	/** Current input definition */
	currentInput: InputDefinition;
	/** Progress info */
	progress: { current: number; total: number } | null;
	/** Current input mode type */
	inputModeType: string;
}

// --- Component ---

export function CollectorInputPhase({
	command,
	currentInput,
	progress,
	inputModeType,
}: CollectorInputPhaseProps) {
	const isPickMode =
		inputModeType === 'pickPoint' || inputModeType === 'pickNode' || inputModeType === 'pickNodes';

	return (
		<>
			{/* Progress indicator */}
			{progress && (
				<div className="flex items-center gap-2 text-xs" style={{ color: 'var(--hud-text-secondary)' }}>
					<span className="font-medium" style={{ color: 'var(--hud-text)' }}>
						{command.name}
					</span>
					<span>•</span>
					<span>
						Step {progress.current}/{progress.total}
					</span>
				</div>
			)}

			{/* Prompt and pick mode indicator */}
			<div className="flex items-center gap-2">
				<span style={{ color: 'var(--hud-text-secondary)' }}>{currentInput.prompt}:</span>
				{isPickMode && (
					<span className="animate-pulse text-sm" style={{ color: 'var(--badge-info-text)' }}>
						{inputModeType === 'pickPoint' && 'Click on canvas or enter x,y'}
						{inputModeType === 'pickNode' && 'Click on a node'}
						{inputModeType === 'pickNodes' && 'Click nodes (Enter when done)'}
					</span>
				)}
			</div>
		</>
	);
}
