import React from 'react';
import { Play, Square, ArrowLeft, ArrowRight, Radar } from 'lucide-react';
import { AgvState, AgvRunConfig } from '../types';

interface AgvAutoRunControlsProps {
  agvState: AgvState;
  updateRunConfig: (key: keyof AgvRunConfig, value: any) => void;
  toggleRun: () => void;
  isRunning: boolean;
  isError: boolean;
  setLidar: (isOn: boolean) => void;
}

const AgvAutoRunControls: React.FC<AgvAutoRunControlsProps> = ({
  agvState,
  updateRunConfig,
  toggleRun,
  isRunning,
  isError,
  setLidar,
}) => {
  return (
    <div className={`${isError ? 'opacity-50 pointer-events-none' : ''}`}>
      <div className="flex items-center justify-between mb-2 px-1">
        <h3 className="text-xs font-bold text-gray-400 uppercase tracking-wider">Auto Run</h3>
        <span className={`text-[10px] font-bold uppercase px-2 py-0.5 rounded-full border ${isRunning ? 'bg-green-900/50 border-green-500 text-green-400' : 'bg-gray-800 border-gray-600 text-gray-500'}`}>
          {isRunning ? 'Running' : 'Ready'}
        </span>
      </div>
      
      <div className="bg-gray-800 rounded-lg p-3 border border-gray-700 shadow-inner space-y-3">
        <div className="flex items-center justify-between">
          <span className="text-xs text-gray-400 font-medium">Direction</span>
          <div className="flex bg-gray-900 rounded p-1 gap-1">
            {['FWD', 'BWD'].map(dir => (
              <button 
                key={dir}
                onClick={() => updateRunConfig('direction', dir)}
                disabled={isRunning}
                className={`text-xs px-3 py-1 rounded transition-colors ${agvState.runConfig.direction === dir ? 'bg-blue-600 text-white shadow-sm' : 'text-gray-500 hover:text-gray-300 hover:bg-gray-800'}`}
              >
                {dir}
              </button>
            ))}
          </div>
        </div>

        <div className="flex items-center justify-between">
          <span className="text-xs text-gray-400 font-medium">Branch</span>
          <div className="flex bg-gray-900 rounded p-1 gap-1">
            <button onClick={() => updateRunConfig('branch', 'LEFT')} disabled={isRunning} className={`p-1.5 rounded ${agvState.runConfig.branch === 'LEFT' ? 'bg-blue-600 text-white' : 'text-gray-500 hover:bg-gray-800'}`}><ArrowLeft size={14}/></button>
            <button onClick={() => updateRunConfig('branch', 'STRAIGHT')} disabled={isRunning} className={`px-2 py-1 text-xs rounded ${agvState.runConfig.branch === 'STRAIGHT' ? 'bg-blue-600 text-white' : 'text-gray-500 hover:bg-gray-800'}`}>STR</button>
            <button onClick={() => updateRunConfig('branch', 'RIGHT')} disabled={isRunning} className={`p-1.5 rounded ${agvState.runConfig.branch === 'RIGHT' ? 'bg-blue-600 text-white' : 'text-gray-500 hover:bg-gray-800'}`}><ArrowRight size={14}/></button>
          </div>
        </div>

        <div className="flex items-center justify-between">
          <span className="text-xs text-gray-400 font-medium">Speed</span>
          <div className="flex bg-gray-900 rounded p-1 gap-1">
            {['L', 'M', 'H'].map(spd => (
              <button 
                key={spd}
                onClick={() => updateRunConfig('speedLevel', spd)}
                disabled={isRunning}
                className={`w-8 py-1 text-xs rounded ${agvState.runConfig.speedLevel === spd ? 'bg-blue-600 text-white shadow-sm' : 'text-gray-500 hover:text-gray-300 hover:bg-gray-800'}`}
              >
                {spd}
              </button>
            ))}
          </div>
        </div>

        <div className="flex items-center justify-between">
          <span className="text-xs text-gray-400 font-medium">Lidar</span>
          <button 
            onClick={() => setLidar(!agvState.lidarEnabled)}
            className={`flex items-center gap-2 px-3 py-1 rounded text-xs transition-colors ${
              agvState.lidarEnabled 
              ? 'bg-cyan-600 text-white shadow-sm' 
              : 'bg-gray-700 text-gray-500 hover:bg-gray-600'
            }`}
          >
            <Radar size={12} className={agvState.lidarEnabled ? "animate-pulse" : ""} />
            {agvState.lidarEnabled ? 'ON' : 'OFF'}
          </button>
        </div>

        <button 
          onClick={toggleRun}
          className={`w-full py-2.5 rounded font-bold text-sm flex items-center justify-center gap-2 transition-all shadow-md ${
            isRunning 
            ? 'bg-red-600 hover:bg-red-500 text-white ring-2 ring-red-500/50' 
            : 'bg-green-600 hover:bg-green-500 text-white'
          }`}
        >
          {isRunning ? <><Square size={16} fill="currentColor" /> STOP</> : <><Play size={16} fill="currentColor" /> START</>}
        </button>
      </div>
    </div>
  );
};

export default AgvAutoRunControls;