import React from 'react';
import { Plug, Unplug, Activity, Battery } from 'lucide-react';

interface ConnectionStatusBarProps {
  agvConnected: boolean;
  bmsConnected: boolean;
  onConnectAgv: () => void;
  onDisconnectAgv: () => void;
  onConnectBms: () => void;
  onDisconnectBms: () => void;
  agvBaudRate: number;
  setAgvBaudRate: (rate: number) => void;
  bmsBaudRate: number;
  setBmsBaudRate: (rate: number) => void;
}

const BAUD_RATES = [9600, 19200, 38400, 57600, 115200];

const ConnectionStatusBar: React.FC<ConnectionStatusBarProps> = ({
  agvConnected,
  bmsConnected,
  onConnectAgv,
  onDisconnectAgv,
  onConnectBms,
  onDisconnectBms,
  agvBaudRate,
  setAgvBaudRate,
  bmsBaudRate,
  setBmsBaudRate,
}) => {
  return (
    <div className="h-10 bg-gray-900 border-t border-gray-700 flex items-center justify-between px-4 select-none shrink-0">
      
      {/* AGV Connection Controls */}
      <div className="flex items-center gap-3">
        <div className={`flex items-center gap-2 px-2 py-1 rounded border ${agvConnected ? 'bg-blue-900/30 border-blue-700' : 'bg-gray-800 border-gray-700'}`}>
            <span className="text-xs font-bold text-gray-300 flex items-center gap-1">
                <Activity size={14} className={agvConnected ? "text-green-400" : "text-gray-500"} /> 
                AGV
            </span>
            <div className="h-4 w-px bg-gray-700 mx-1" />
            <select 
                value={agvBaudRate} 
                onChange={(e) => setAgvBaudRate(Number(e.target.value))}
                disabled={agvConnected}
                className="bg-transparent text-xs text-white outline-none disabled:opacity-50 cursor-pointer"
            >
                {BAUD_RATES.map(rate => <option key={rate} value={rate} className="bg-gray-800">{rate}</option>)}
            </select>
            <button 
                onClick={agvConnected ? onDisconnectAgv : onConnectAgv}
                className={`ml-2 px-2 py-0.5 text-[10px] font-bold rounded flex items-center gap-1 transition-colors ${
                    agvConnected 
                    ? 'bg-red-900/50 text-red-300 hover:bg-red-900' 
                    : 'bg-blue-700 text-white hover:bg-blue-600'
                }`}
            >
                {agvConnected ? <><Unplug size={10} /> DISCONNECT</> : <><Plug size={10} /> CONNECT</>}
            </button>
        </div>
      </div>

      <div className="text-xs text-gray-600 font-mono">
        SERIAL COMMUNICATION
      </div>

      {/* BMS Connection Controls */}
      <div className="flex items-center gap-3">
        <div className={`flex items-center gap-2 px-2 py-1 rounded border ${bmsConnected ? 'bg-yellow-900/30 border-yellow-700' : 'bg-gray-800 border-gray-700'}`}>
            <span className="text-xs font-bold text-gray-300 flex items-center gap-1">
                <Battery size={14} className={bmsConnected ? "text-yellow-400" : "text-gray-500"} /> 
                BMS
            </span>
            <div className="h-4 w-px bg-gray-700 mx-1" />
            <select 
                value={bmsBaudRate} 
                onChange={(e) => setBmsBaudRate(Number(e.target.value))}
                disabled={bmsConnected}
                className="bg-transparent text-xs text-white outline-none disabled:opacity-50 cursor-pointer"
            >
                {BAUD_RATES.map(rate => <option key={rate} value={rate} className="bg-gray-800">{rate}</option>)}
            </select>
            <button 
                onClick={bmsConnected ? onDisconnectBms : onConnectBms}
                className={`ml-2 px-2 py-0.5 text-[10px] font-bold rounded flex items-center gap-1 transition-colors ${
                    bmsConnected 
                    ? 'bg-red-900/50 text-red-300 hover:bg-red-900' 
                    : 'bg-blue-700 text-white hover:bg-blue-600'
                }`}
            >
                {bmsConnected ? <><Unplug size={10} /> DISCONNECT</> : <><Plug size={10} /> CONNECT</>}
            </button>
        </div>
      </div>
    </div>
  );
};

export default ConnectionStatusBar;