import type { Run } from '../services/backtestApiV2';
import {
  ArrowPathIcon,
} from '@heroicons/react/24/solid';

interface RunControlsCompactProps {
  run: Run;
  onPause: () => void;
  onResume: () => void;
  onRerun: (speed: number | null) => void;
  onNext?: () => void;
  onSpeedChange: (speed: number | null) => void;
}

export function RunControlsCompact({
  run,
  onPause,
  onResume,
  onRerun,
  onNext,
}: RunControlsCompactProps) {

  const isRunning = run.status === 'running';
  const isPaused = run.status === 'paused';
  const isCompleted = run.status === 'completed' || run.status === 'failed' || run.status === 'cancelled';

  return (
    <div className="flex items-center space-x-3">
      {/* Progress */}
      <div className="flex items-center space-x-2">
        <span className="text-xs text-text-secondary">Progress:</span>
        <div className="w-24 bg-background rounded-full h-2 overflow-hidden">
          <div
            className="bg-primary-500 h-2 transition-all duration-300 relative"
            style={{ width: `${run.progress}%` }}
          >
            <div className="absolute inset-0 bg-gradient-to-r from-primary-500 to-primary-400 opacity-50"></div>
          </div>
        </div>
        <span className="text-xs text-text-primary font-medium">{run.progress.toFixed(0)}%</span>
      </div>


      {/* Control Buttons */}
      <div className="flex items-center space-x-1">
        {isRunning ? (
          <button
            onClick={onPause}
            className="p-1 rounded hover:bg-surface-tertiary transition-colors"
            title="Pause"
          >
            <PauseIcon className="w-4 h-4 text-text-primary" />
          </button>
        ) : isPaused ? (
          <button
            onClick={onResume}
            className="p-1 rounded hover:bg-surface-tertiary transition-colors"
            title="Resume"
          >
            <PlayIcon className="w-4 h-4 text-text-primary" />
          </button>
        ) : null}

        {onNext && (
          <button
            onClick={onNext}
            className="p-1 rounded hover:bg-surface-tertiary transition-colors disabled:opacity-50"
            disabled={!isRunning && !isPaused}
            title="Next"
          >
            <ForwardIcon className="w-4 h-4 text-text-primary" />
          </button>
        )}

        <button
          onClick={() => onRerun(null)} // Always use max speed
          className="p-1 rounded hover:bg-surface-tertiary transition-colors"
          title="Rerun"
        >
          <ArrowPathIcon className="w-4 h-4 text-text-primary" />
        </button>
      </div>

      {/* Status Indicator */}
      {run.status !== 'running' && run.status !== 'paused' && (
        <>
          <div className="h-6 w-px bg-border"></div>
          <span className={`text-xs font-medium ${
            run.status === 'completed' ? 'text-success' :
            run.status === 'failed' ? 'text-error' :
            run.status === 'cancelled' ? 'text-text-secondary' :
            'text-text-primary'
          }`}>
            {run.status.charAt(0).toUpperCase() + run.status.slice(1)}
          </span>
        </>
      )}
    </div>
  );
}