import React from 'react';

interface HeaderProps {
  isConnected: boolean;
  onOpenRegister: () => void;
  onQuickSpawn: () => void;
  onResetBoard: () => void;
  playerCount: number;
}

export const Header: React.FC<HeaderProps> = ({
  isConnected,
  onOpenRegister,
  onQuickSpawn,
  onResetBoard,
  playerCount,
}) => {
  return (
    <header className="h-16 border-b border-slate-800 bg-slate-900/90 backdrop-blur px-6 flex items-center justify-between z-10">
      {/* Brand & Stats */}
      <div className="flex items-center gap-6">
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 rounded-lg bg-gradient-to-tr from-sky-500 to-indigo-600 flex items-center justify-center font-black text-white text-base shadow-lg shadow-sky-500/20">
            W
          </div>
          <div>
            <h1 className="text-base font-bold tracking-tight text-white flex items-center gap-2">
              botWebWars
              <span className="text-[10px] uppercase font-mono px-1.5 py-0.5 rounded bg-sky-950 text-sky-400 border border-sky-800">
                v1.0
              </span>
            </h1>
            <p className="text-[11px] text-slate-400 font-mono">
              64×64 Grid Arena • Coords (0,0) to (64,64)
            </p>
          </div>
        </div>

        {/* Live status badge */}
        <div className="flex items-center gap-2 px-2.5 py-1 rounded-full bg-slate-800 border border-slate-700 text-xs font-mono">
          <span
            className={`w-2 h-2 rounded-full ${
              isConnected ? 'bg-emerald-400 shadow-[0_0_8px_#34d399]' : 'bg-amber-400 animate-ping'
            }`}
          />
          <span className={isConnected ? 'text-slate-300' : 'text-amber-300'}>
            {isConnected ? 'LIVE SYNC' : 'CONNECTING...'}
          </span>
        </div>
      </div>

      {/* Action Buttons */}
      <div className="flex items-center gap-3">
        <a
          href="/docs"
          target="_blank"
          rel="noopener noreferrer"
          className="text-xs font-mono text-slate-400 hover:text-sky-400 transition-colors px-2.5 py-1.5 rounded-lg border border-slate-800 hover:border-slate-700 bg-slate-950/40"
          title="Open FastAPI Swagger API Docs"
        >
          API Docs ↗
        </a>

        {playerCount > 0 && (
          <button
            onClick={onResetBoard}
            className="text-xs font-medium text-slate-400 hover:text-red-400 transition-colors px-3 py-1.5 rounded-lg border border-slate-800 hover:border-red-900/60 bg-slate-950/40"
          >
            Clear Board
          </button>
        )}

        <button
          onClick={onQuickSpawn}
          className="text-xs font-medium text-slate-200 hover:text-white transition-all px-3.5 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 shadow flex items-center gap-1.5"
        >
          <span>🎲</span> Quick Spawn Bot
        </button>

        <button
          onClick={onOpenRegister}
          className="text-xs font-semibold text-white transition-all px-4 py-1.5 rounded-lg bg-gradient-to-r from-sky-500 to-indigo-600 hover:from-sky-400 hover:to-indigo-500 shadow-lg shadow-sky-500/25 flex items-center gap-1.5"
        >
          <span>+</span> Register Player
        </button>
      </div>
    </header>
  );
};