import React from 'react'
import { Link, useLocation } from 'react-router-dom'
import { 
  Wifi, 
  WifiOff, 
  AlertTriangle, 
  Settings, 
  User,
  Power
} from 'lucide-react'
import { useSystemStore } from '../../stores/systemStore'

interface HeaderProps {
  isConnected: boolean
}

const Header: React.FC<HeaderProps> = ({ isConnected }) => {
  const location = useLocation()
  const { systemStatus, systemInfo } = useSystemStore()

  const getStatusColor = () => {
    if (!isConnected) return 'text-red-600'
    if (!systemStatus) return 'text-gray-400'
    
    switch (systemStatus.system_status) {
      case 'healthy': return 'text-green-600'
      case 'warning': return 'text-yellow-600'
      case 'critical': return 'text-red-600'
      default: return 'text-gray-400'
    }
  }

  const getPageTitle = () => {
    switch (location.pathname) {
      case '/dashboard': return 'Dashboard'
      case '/process': return 'Process Control'
      case '/recipes': return 'Recipe Management'
      case '/hardware': return 'Hardware Status'
      case '/settings': return 'System Settings'
      case '/users': return 'User Management'
      default: return 'Tempering Control'
    }
  }

  return (
    <header className="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50">
      <div className="px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          {/* Left side - Logo and title */}
          <div className="flex items-center space-x-4">
            <Link to="/dashboard" className="flex items-center space-x-3">
              <div className="w-8 h-8 bg-primary-600 rounded flex items-center justify-center">
                <span className="text-white font-bold text-sm">TC</span>
              </div>
              <div className="hidden sm:block">
                <h1 className="text-xl font-semibold text-gray-900">
                  Tempering Control
                </h1>
                <p className="text-xs text-gray-500">
                  {systemInfo?.version || 'v1.0.0'}
                </p>
              </div>
            </Link>
            
            {/* Current page indicator */}
            <div className="hidden md:flex items-center">
              <span className="text-gray-400 mx-2">/</span>
              <span className="text-gray-700 font-medium">
                {getPageTitle()}
              </span>
            </div>
          </div>

          {/* Center - Process status (on larger screens) */}
          <div className="hidden lg:flex items-center space-x-4">
            {systemStatus && (
              <div className="flex items-center space-x-2 bg-gray-50 rounded-lg px-3 py-1">
                <div className={`w-2 h-2 rounded-full ${
                  systemStatus.process_status === 'running' ? 'bg-green-500 animate-pulse' :
                  systemStatus.process_status === 'paused' ? 'bg-yellow-500' :
                  systemStatus.process_status === 'error' ? 'bg-red-500' :
                  'bg-gray-400'
                }`} />
                <span className="text-sm font-medium text-gray-700">
                  Process: {systemStatus.process_status}
                </span>
              </div>
            )}
          </div>

          {/* Right side - Status indicators and menu */}
          <div className="flex items-center space-x-3">
            {/* Connection status */}
            <div className={`flex items-center space-x-1 ${getStatusColor()}`}>
              {isConnected ? (
                <Wifi className="w-4 h-4" />
              ) : (
                <WifiOff className="w-4 h-4" />
              )}
              <span className="hidden sm:inline text-sm font-medium">
                {isConnected ? 'Connected' : 'Disconnected'}
              </span>
            </div>

            {/* Alarm indicator */}
            {systemStatus && systemStatus.active_alarms > 0 && (
              <div className="flex items-center space-x-1 text-red-600">
                <AlertTriangle className="w-4 h-4" />
                <span className="text-sm font-medium">
                  {systemStatus.active_alarms}
                </span>
              </div>
            )}

            {/* Emergency stop button */}
            <button
              className="btn btn-danger btn-touch flex items-center space-x-1"
              onClick={() => {
                // Handle emergency stop
                console.log('Emergency stop clicked')
              }}
            >
              <Power className="w-4 h-4" />
              <span className="hidden sm:inline">E-Stop</span>
            </button>

            {/* Settings menu */}
            <div className="flex items-center space-x-1">
              <Link
                to="/settings"
                className="btn btn-secondary btn-touch p-2"
                title="Settings"
              >
                <Settings className="w-4 h-4" />
              </Link>
              
              <button
                className="btn btn-secondary btn-touch p-2"
                title="User Menu"
              >
                <User className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </header>
  )
}

export default Header
