import React from 'react'
import { Clock, Thermometer, Zap } from 'lucide-react'
import { useSystemStore } from '../../stores/systemStore'

interface StatusBarProps {
  isConnected: boolean
}

const StatusBar: React.FC<StatusBarProps> = ({ isConnected }) => {
  const { systemStatus } = useSystemStore()

  const formatUptime = (seconds: number) => {
    const hours = Math.floor(seconds / 3600)
    const minutes = Math.floor((seconds % 3600) / 60)
    const secs = seconds % 60
    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
  }

  return (
    <div className="bg-gray-800 text-white px-4 py-2 border-t border-gray-700">
      <div className="flex items-center justify-between text-sm">
        {/* Left side - System info */}
        <div className="flex items-center space-x-6">
          <div className="flex items-center space-x-2">
            <div className={`w-2 h-2 rounded-full ${
              isConnected ? 'bg-green-500' : 'bg-red-500'
            }`} />
            <span className="font-medium">
              {isConnected ? 'Online' : 'Offline'}
            </span>
          </div>

          {systemStatus && (
            <>
              <div className="flex items-center space-x-1">
                <Clock className="w-4 h-4" />
                <span>Uptime: {formatUptime(systemStatus.uptime_seconds)}</span>
              </div>

              {systemStatus.active_alarms > 0 && (
                <div className="flex items-center space-x-1 text-red-400">
                  <Zap className="w-4 h-4" />
                  <span>{systemStatus.active_alarms} Alarm{systemStatus.active_alarms !== 1 ? 's' : ''}</span>
                </div>
              )}
            </>
          )}
        </div>

        {/* Center - Current process info */}
        <div className="hidden md:flex items-center space-x-4">
          {systemStatus && systemStatus.process_status !== 'idle' && (
            <div className="flex items-center space-x-2">
              <Thermometer className="w-4 h-4" />
              <span>Process: {systemStatus.process_status}</span>
            </div>
          )}
        </div>

        {/* Right side - Timestamp */}
        <div className="text-gray-400 text-xs">
          {systemStatus ? (
            `Last updated: ${new Date(systemStatus.last_updated).toLocaleTimeString()}`
          ) : (
            'No system data'
          )}
        </div>
      </div>
    </div>
  )
}

export default StatusBar
