import {
  ArrowPathIcon,
  ForwardIcon,
  PauseIcon,
  PlayIcon,
  StopIcon,
} from '@heroicons/react/24/solid';
import type { BacktestStatus } from '../types';

interface BacktestControlsProps {
  status: BacktestStatus;
  onStart: () => void;
  onPause: () => void;
  onResume: () => void;
  onStop: () => void;
  onStep: () => void;
  currentTime: number | null;
  startTime: number;
  endTime: number;
}

export function BacktestControls({
  status,
  onStart,
  onPause,
  onResume,
  onStop,
  onStep,
  currentTime,
  startTime,
  endTime,
}: BacktestControlsProps) {
  const progress = currentTime 
    ? ((currentTime - startTime) / (endTime - startTime)) * 100
    : 0;

  const formatTime = (timestamp: number) => {
    return new Date(timestamp).toLocaleString();
  };

  return (
    <div className="bg-surface-secondary p-4 rounded-lg border border-border">
      <h2 className="text-base font-medium text-text-primary mb-4">Controls</h2>
      
      <div className="space-y-4">
        <div className="flex gap-2">
          {status === 'configured' || status === 'stopped' ? (
            <button
              onClick={onStart}
              className="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2 bg-success text-white rounded-md text-sm font-medium hover:bg-success/90 transition-colors"
            >
              <PlayIcon className="w-4 h-4" />
              Start
            </button>
          ) : status === 'running' ? (
            <button
              onClick={onPause}
              className="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2 bg-warning text-white rounded-md text-sm font-medium hover:bg-warning/90 transition-colors"
            >
              <PauseIcon className="w-4 h-4" />
              Pause
            </button>
          ) : status === 'paused' ? (
            <button
              onClick={onResume}
              className="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2 bg-success text-white rounded-md text-sm font-medium hover:bg-success/90 transition-colors"
            >
              <PlayIcon className="w-4 h-4" />
              Resume
            </button>
          ) : null}

          {(status === 'running' || status === 'paused') && (
            <button
              onClick={onStop}
              className="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2 bg-error text-white rounded-md text-sm font-medium hover:bg-error/90 transition-colors"
            >
              <StopIcon className="w-4 h-4" />
              Stop
            </button>
          )}

          {status === 'paused' && (
            <button
              onClick={onStep}
              className="inline-flex items-center justify-center gap-2 px-4 py-2 bg-primary-500 text-white rounded-md text-sm font-medium hover:bg-primary-600 transition-colors"
            >
              <ForwardIcon className="w-4 h-4" />
              Step
            </button>
          )}
        </div>

        {status !== 'idle' && status !== 'configured' && (
          <>
            <div>
              <div className="flex justify-between text-sm text-text-secondary mb-1">
                <span>Progress</span>
                <span>{progress.toFixed(1)}%</span>
              </div>
              <div className="w-full bg-background rounded-full h-2 overflow-hidden">
                <div
                  className="bg-primary-500 h-2 transition-all duration-300"
                  style={{ width: `${progress}%` }}
                />
              </div>
            </div>

            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-text-secondary">Status</span>
                <span className={`text-text-primary font-medium ${
                  status === 'running' ? 'text-success' :
                  status === 'paused' ? 'text-warning' :
                  status === 'completed' ? 'text-primary-400' :
                  status === 'error' ? 'text-error' :
                  'text-text-muted'
                }`}>
                  {status.charAt(0).toUpperCase() + status.slice(1)}
                </span>
              </div>
              
              {currentTime && (
                <div className="flex justify-between">
                  <span className="text-text-secondary">Current Time</span>
                  <span className="text-text-primary text-xs">
                    {formatTime(currentTime)}
                  </span>
                </div>
              )}
            </div>
          </>
        )}

        {status === 'completed' && (
          <button
            onClick={onStart}
            className="w-full inline-flex items-center justify-center gap-2 px-4 py-2 bg-primary-500 text-white rounded-md text-sm font-medium hover:bg-primary-600 transition-colors"
          >
            <ArrowPathIcon className="w-4 h-4" />
            Run Again
          </button>
        )}
      </div>
    </div>
  );
}