import React from 'react';
import { Volume2, VolumeX, HelpCircle, Trophy, Download } from 'lucide-react';
import { GameMode, GameSettings } from '../types';
import { sound } from '../utils/audio';

interface NavbarProps {
  gameMode: GameMode;
  setGameMode: (mode: GameMode) => void;
  settings: GameSettings;
  setSettings: React.Dispatch<React.SetStateAction<GameSettings>>;
  onOpenRules: () => void;
  onOpenLeaderboard: () => void;
  onResetGame: () => void;
  pwaInstallPrompt: any;
  onInstallPwa: () => void;
}

export const Navbar: React.FC<NavbarProps> = ({
  gameMode,
  setGameMode,
  settings,
  setSettings,
  onOpenRules,
  onOpenLeaderboard,
  onResetGame,
  pwaInstallPrompt,
  onInstallPwa
}) => {
  const toggleSound = () => {
    const next = !settings.soundEnabled;
    sound.soundEnabled = next;
    setSettings(prev => ({ ...prev, soundEnabled: next }));
    if (next) sound.playClick();
  };

  return (
    <header className="sticky top-0 z-40 bg-[#121016]/90 backdrop-blur-md border-b border-amber-500/20 px-4 py-2.5 shadow-lg">
      <div className="max-w-6xl mx-auto flex flex-wrap items-center justify-between gap-3">
        {/* Logo */}
        <div 
          onClick={onResetGame}
          className="flex items-center gap-2.5 cursor-pointer group"
        >
          <div className="w-10 h-10 rounded-full bg-gradient-to-tr from-amber-600 via-red-600 to-amber-400 p-0.5 shadow-md shadow-amber-500/20 group-hover:scale-105 transition-transform">
            <div className="w-full h-full bg-[#18161d] rounded-full flex items-center justify-center border border-amber-400/40">
              <span className="font-righteous text-amber-400 text-lg tracking-tighter">R•R</span>
            </div>
          </div>
          <div>
            <div className="flex items-baseline gap-1">
              <span className="font-righteous text-2xl tracking-wider text-transparent bg-clip-text bg-gradient-to-r from-amber-400 via-orange-300 to-red-400 drop-shadow">
                RETRO<span className="text-red-500 mx-0.5">•</span>RE
              </span>
            </div>
            <p className="text-[10px] uppercase font-bold tracking-widest text-amber-200/60 -mt-1">
              Desde 2011 • RetroReto
            </p>
          </div>
        </div>

        {/* Controls & Actions */}
        <div className="flex items-center gap-2">
          {/* Audio Sound Toggle */}
          <button
            onClick={toggleSound}
            title={settings.soundEnabled ? 'Silenciar Efectos' : 'Activar Efectos'}
            className={`p-2 rounded-lg border transition-colors ${
              settings.soundEnabled
                ? 'bg-amber-500/15 border-amber-500/40 text-amber-400 hover:bg-amber-500/25'
                : 'bg-zinc-800/80 border-zinc-700 text-zinc-400 hover:bg-zinc-800'
            }`}
          >
            {settings.soundEnabled ? <Volume2 size={18} /> : <VolumeX size={18} />}
          </button>

          {/* Leaderboard */}
          <button
            onClick={() => {
              sound.playClick();
              onOpenLeaderboard();
            }}
            title="Récords de Puntuación"
            className="p-2 rounded-lg bg-amber-500/10 hover:bg-amber-500/20 border border-amber-500/30 text-amber-300 transition-colors"
          >
            <Trophy size={18} />
          </button>

          {/* Rules / Help */}
          <button
            onClick={() => {
              sound.playClick();
              onOpenRules();
            }}
            title="Reglas del Juego"
            className="p-2 rounded-lg bg-amber-500/10 hover:bg-amber-500/20 border border-amber-500/30 text-amber-300 transition-colors"
          >
            <HelpCircle size={18} />
          </button>

          {/* PWA Install Button */}
          {pwaInstallPrompt && (
            <button
              onClick={onInstallPwa}
              className="flex items-center gap-1.5 px-3 py-1.5 bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-black font-bold text-xs rounded-lg shadow-md transition-all animate-bounce"
            >
              <Download size={14} />
              <span>Instalar PWA</span>
            </button>
          )}
        </div>
      </div>
    </header>
  );
};