import React from 'react';
import { BatteryCharging, Zap, Thermometer, Sliders } from 'lucide-react';
import { AgvState } from '../types';

interface BmsPanelProps {
  state: AgvState;
  setBatteryLevel: (level: number) => void;
}

const BmsPanel: React.FC<BmsPanelProps> = ({ state, setBatteryLevel }) => {
  const currentCapacity = (state.maxCapacity * (state.batteryLevel / 100)).toFixed(1);

  return (
    <div className="bg-gray-800 p-4 border-t border-gray-700 h-auto select-none">
       <h3 className="text-sm font-semibold mb-3 text-gray-300 flex items-center justify-between">
           <span className="flex items-center gap-2"><BatteryCharging size={16} /> BMS Monitor</span>
           <span className="text-xs font-mono text-gray-500">ID: 01</span>
       </h3>
       
       {/* Main Info Grid */}
       <div className="grid grid-cols-2 gap-2 mb-3">
           <div className="bg-gray-700/50 p-2 rounded border border-gray-600">
               <div className="text-[10px] text-gray-400 uppercase tracking-wider">Total Voltage</div>
               <div className="text-lg font-mono text-white font-bold flex items-baseline gap-1">
                   {(state.cellVoltages.reduce((a,b)=>a+b, 0)).toFixed(1)} <span className="text-xs text-gray-400">V</span>
               </div>
           </div>
           <div className="bg-gray-700/50 p-2 rounded border border-gray-600">
               <div className="text-[10px] text-gray-400 flex items-center gap-1 uppercase tracking-wider">
                   <Thermometer size={10} /> Temp
               </div>
               <div className="text-lg font-mono text-white font-bold flex items-baseline gap-1">
                   {state.batteryTemp.toFixed(1)} <span className="text-xs text-gray-400">°C</span>
               </div>
           </div>
           
           <div className="bg-gray-700/50 p-2 rounded border border-gray-600">
               <div className="text-[10px] text-gray-400 uppercase tracking-wider">Capacity (Ah)</div>
               <div className="text-sm font-mono text-white">
                   <span className="text-yellow-400 font-bold">{currentCapacity}</span>
                   <span className="text-gray-500"> / </span>
                   {state.maxCapacity}
               </div>
           </div>
           <div className="bg-gray-700/50 p-2 rounded border border-gray-600">
                <div className="text-[10px] text-gray-400 uppercase tracking-wider">Level (%)</div>
                <div className={`text-sm font-mono font-bold ${state.batteryLevel < 20 ? 'text-red-400' : 'text-green-400'}`}>
                    {state.batteryLevel.toFixed(1)}%
                </div>
           </div>
       </div>

       {/* Manual Slider */}
       <div className="mb-4">
           <div className="flex justify-between text-xs text-gray-400 mb-1">
               <span className="flex items-center gap-1"><Sliders size={10}/> Manual Adjust</span>
           </div>
           <input 
                type="range" 
                min="0" 
                max="100" 
                step="1"
                value={state.batteryLevel} 
                onChange={(e) => setBatteryLevel(Number(e.target.value))}
                className="w-full h-1.5 bg-gray-600 rounded-lg appearance-none cursor-pointer accent-green-500 hover:accent-green-400"
            />
       </div>

       {/* Cells */}
       <div className="space-y-1">
           <div className="text-[10px] text-gray-500 uppercase tracking-wider mb-1">Cell Voltages (V)</div>
           <div className="grid grid-cols-4 gap-1">
               {state.cellVoltages.map((v, i) => (
                   <div key={i} className={`py-1 px-0.5 text-center rounded text-[10px] font-mono border ${
                       v < 2.9 ? 'bg-red-900/30 border-red-800 text-red-300' : 
                       v > 3.5 ? 'bg-blue-900/30 border-blue-800 text-blue-300' :
                       'bg-gray-700/30 border-gray-600 text-gray-300'
                   }`}>
                       {v.toFixed(3)}
                   </div>
               ))}
           </div>
       </div>
    </div>
  );
};

export default BmsPanel;