import React, { useState, useEffect } from 'react';
import { GameMode, GameSettings, HighScoreRecord } from './types';
import { Navbar } from './components/Navbar';
import { SoloPlayView } from './components/SoloPlayView';
import { CompetenciaView } from './components/CompetenciaView';
import { RulesModal } from './components/RulesModal';
import { HighScoresModal } from './components/HighScoresModal';
import { sound } from './utils/audio';

export default function App() {
  const [gameMode, setGameMode] = useState<GameMode>('SOLO');
  const [settings, setSettings] = useState<GameSettings>({
    soundEnabled: true,
    hostSpeechEnabled: true,
    timerDuration: 20,
    difficulty: 'Fácil'
  });

  const [isRulesOpen, setIsRulesOpen] = useState<boolean>(false);
  const [isLeaderboardOpen, setIsLeaderboardOpen] = useState<boolean>(false);
  const [highScores, setHighScores] = useState<HighScoreRecord[]>([]);
  const [pwaInstallPrompt, setPwaInstallPrompt] = useState<any>(null);

  // Load high scores from localStorage
  useEffect(() => {
    try {
      const saved = localStorage.getItem('retro_re_high_scores');
      if (saved) {
        setHighScores(JSON.parse(saved));
      }
    } catch {
      // Ignore
    }
  }, []);

  // Listen for PWA install prompt
  useEffect(() => {
    const handleBeforeInstall = (e: Event) => {
      e.preventDefault();
      setPwaInstallPrompt(e);
    };
    window.addEventListener('beforeinstallprompt', handleBeforeInstall);
    return () => window.removeEventListener('beforeinstallprompt', handleBeforeInstall);
  }, []);

  const handleSaveScore = (record: HighScoreRecord) => {
    setHighScores(prev => {
      const updated = [...prev, record].sort((a, b) => b.score - a.score).slice(0, 10);
      try {
        localStorage.setItem('retro_re_high_scores', JSON.stringify(updated));
      } catch {
        // Ignore
      }
      return updated;
    });
  };

  const handleClearScores = () => {
    setHighScores([]);
    try {
      localStorage.removeItem('retro_re_high_scores');
    } catch {
      // Ignore
    }
  };

  const handleInstallPwa = () => {
    if (pwaInstallPrompt) {
      pwaInstallPrompt.prompt();
      pwaInstallPrompt.userChoice.then(() => {
        setPwaInstallPrompt(null);
      });
    }
  };

  const handleResetGame = () => {
    sound.playClick();
    setGameMode('SOLO');
  };

  return (
    <div className="min-h-screen bg-[#121016] text-amber-50 font-outfit flex flex-col selection:bg-amber-500 selection:text-black">
      {/* Navigation Bar */}
      <Navbar
        gameMode={gameMode}
        setGameMode={setGameMode}
        settings={settings}
        setSettings={setSettings}
        onOpenRules={() => setIsRulesOpen(true)}
        onOpenLeaderboard={() => setIsLeaderboardOpen(true)}
        onResetGame={handleResetGame}
        pwaInstallPrompt={pwaInstallPrompt}
        onInstallPwa={handleInstallPwa}
      />

      {/* Main View Area */}
      <main className="flex-1 max-w-6xl w-full mx-auto p-3 sm:p-5">
        {gameMode === 'Solo' || gameMode === 'SOLO' ? (
          <SoloPlayView onSaveScore={handleSaveScore} onSwitchMode={setGameMode} />
        ) : (
          <CompetenciaView onSwitchMode={setGameMode} />
        )}
      </main>

      {/* Footer */}
      <footer className="border-t border-amber-500/10 py-4 px-4 text-center text-xs text-amber-300/40 font-medium">
        <div className="max-w-4xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-2">
          <span>RETRO•RE © Desde 2011 • Inspirado en el juego clásico RetroReto</span>
          <span className="text-[10px] text-amber-400/60 font-mono">70 • 80 • 90</span>
        </div>
      </footer>

      {/* Modals */}
      <RulesModal
        isOpen={isRulesOpen}
        onClose={() => setIsRulesOpen(false)}
      />

      <HighScoresModal
        isOpen={isLeaderboardOpen}
        onClose={() => setIsLeaderboardOpen(false)}
        highScores={highScores}
        onClearScores={handleClearScores}
      />
    </div>
  );
}