import { useState } from 'react';
import { 
  Cpu, 
  Terminal, 
  Settings, 
  Upload, 
  Package, 
  Database,
  Zap,
  Menu,
  X
} from 'lucide-react';
import { useAWPStore } from '../store/awpStore';

export function Header({ onToggleTerminal, onToggleMonitor, showTerminal, showMonitor }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const { isLoading, loadingMessage } = useAWPStore();

  return (
    <header className="h-14 bg-industrial-800 border-b border-industrial-600 flex items-center justify-between px-4">
      {/* Left: Logo & Title */}
      <div className="flex items-center gap-3">
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 bg-gradient-to-br from-accent-cyan to-accent-purple rounded-lg flex items-center justify-center">
            <Zap className="w-5 h-5 text-white" />
          </div>
          <div>
            <h1 className="text-sm font-semibold text-white tracking-wide">
              AWP PLATFORM
            </h1>
            <p className="text-xs text-industrial-300">Digital Execution Hub</p>
          </div>
        </div>
        
        {/* Built with anycoder badge */}
        <a 
          href="https://huggingface.co/spaces/akhaliq/anycoder"
          target="_blank"
          rel="noopener noreferrer"
          className="ml-4 px-2 py-1 bg-industrial-700 hover:bg-industrial-600 rounded text-xs text-accent-cyan transition-colors"
        >
          Built with anycoder
        </a>
      </div>

      {/* Center: Loading Indicator */}
      {isLoading && (
        <div className="flex items-center gap-2 px-4 py-1 bg-industrial-700 rounded-full">
          <div className="spinner w-4 h-4" />
          <span className="text-xs text-industrial-200">{loadingMessage}</span>
        </div>
      )}

      {/* Right: Controls */}
      <div className="flex items-center gap-2">
        <button
          onClick={onToggleTerminal}
          className={`p-2 rounded-lg transition-colors ${
            showTerminal ? 'bg-accent-cyan/20 text-accent-cyan' : 'text-industrial-300 hover:text-white hover:bg-industrial-700'
          }`}
          title="Toggle Terminal"
        >
          <Terminal className="w-4 h-4" />
        </button>
        
        <button
          onClick={onToggleMonitor}
          className={`p-2 rounded-lg transition-colors ${
            showMonitor ? 'bg-accent-orange/20 text-accent-orange' : 'text-industrial-300 hover:text-white hover:bg-industrial-700'
          }`}
          title="Resource Monitor"
        >
          <Cpu className="w-4 h-4" />
        </button>
        
        <button
          className="p-2 rounded-lg text-industrial-300 hover:text-white hover:bg-industrial-700 transition-colors"
          title="Database"
        >
          <Database className="w-4 h-4" />
        </button>
        
        <button
          className="p-2 rounded-lg text-industrial-300 hover:text-white hover:bg-industrial-700 transition-colors"
          title="Settings"
        >
          <Settings className="w-4 h-4" />
        </button>

        <div className="w-px h-6 bg-industrial-600 mx-2" />
        
        <div className="flex items-center gap-2">
          <div className="w-2 h-2 rounded-full bg-status-installed animate-pulse" />
          <span className="text-xs text-industrial-300">System Online</span>
        </div>
      </div>
    </header>
  );
}