'use client';

import { type EngineType, ENGINE_LABELS } from '../../../domain/value-objects/engine-type';
import { cn } from '@/lib/utils';

const ENGINE_DESCRIPTIONS: Record<EngineType, string> = {
  claude_code_cli: 'Run agent tasks via the Claude Code CLI with full tool access and shell integration.',
  claude_api: 'Use the Claude API directly for lightweight, stateless agent interactions.',
  custom: 'Integrate a custom agent engine with your own tool definitions and runtime.',
};

interface EngineTypeSelectorProps {
  value: EngineType;
  onChange: (type: EngineType) => void;
  className?: string;
}

const ENGINE_TYPES: EngineType[] = ['claude_code_cli', 'claude_api', 'custom'];

export function EngineTypeSelector({ value, onChange, className }: EngineTypeSelectorProps) {
  return (
    <div className={cn('space-y-2', className)}>
      {ENGINE_TYPES.map((type) => {
        const isSelected = value === type;

        return (
          <label
            key={type}
            className={cn(
              'flex items-start gap-3 rounded-lg border p-3 cursor-pointer transition-colors',
              isSelected
                ? 'border-primary bg-primary/5'
                : 'border-border hover:border-muted-foreground/30',
            )}
          >
            <input
              type="radio"
              name="engine-type"
              value={type}
              checked={isSelected}
              onChange={() => onChange(type)}
              className="mt-1 h-4 w-4 text-primary focus:ring-primary"
            />
            <div className="flex-1">
              <div className={cn('text-sm font-medium', isSelected && 'text-primary')}>
                {ENGINE_LABELS[type]}
              </div>
              <div className="text-xs text-muted-foreground mt-0.5">
                {ENGINE_DESCRIPTIONS[type]}
              </div>
            </div>
          </label>
        );
      })}
    </div>
  );
}
