import React, { useState, useCallback, useRef } from 'react';
import confetti from 'canvas-confetti';
import { Player, TriviaQuestion, Decade, Category, Difficulty, GameMode } from '../types';
import { VinylSpinner, VinylSpinnerRef } from './VinylSpinner';
import { TimeSyncConsole } from './TimeSyncConsole';
import { QuestionCard } from './QuestionCard';
import { HostNarrator } from './HostNarrator';
import { sound } from '../utils/audio';
import { getLocalTriviaQuestion } from '../data/triviaService';
import { Users, Trophy, Play, RotateCcw, ArrowRight, Zap, CheckCircle2, Award, RefreshCw } from 'lucide-react';

interface CompetenciaViewProps {
  onSwitchMode?: (mode: GameMode) => void;
}

export const CompetenciaView: React.FC<CompetenciaViewProps> = ({ onSwitchMode }) => {
  const spinnerRef = useRef<VinylSpinnerRef>(null);
  const [players, setPlayers] = useState<Player[]>([
    { id: '1', name: 'Jugador 1', color: 'amber', avatar: '🎧', score: 0, decadeTokens: { '70': false, '80': false, '90': false }, streak: 0, correctAnswersCount: 0 },
    { id: '2', name: 'Jugador 2', color: 'red', avatar: '🕹️', score: 0, decadeTokens: { '70': false, '80': false, '90': false }, streak: 0, correctAnswersCount: 0 },
  ]);

  const [activePlayerIndex, setActivePlayerIndex] = useState<number>(0);
  const [difficulty, setDifficulty] = useState<Difficulty>('Fácil');
  const [gameStarted, setGameStarted] = useState<boolean>(false);
  const [winner, setWinner] = useState<Player | null>(null);

  const [currentDecade, setCurrentDecade] = useState<Decade | null>(null);
  const [currentCategory, setCurrentCategory] = useState<Category | null>(null);
  const [currentQuestion, setCurrentQuestion] = useState<TriviaQuestion | null>(null);

  const [isLoadingQuestion, setIsLoadingQuestion] = useState<boolean>(false);
  const [isSpinning, setIsSpinning] = useState<boolean>(false);
  const [historyQuestions, setHistoryQuestions] = useState<string[]>([]);
  const [showNextButton, setShowNextButton] = useState<boolean>(false);

  const fetchQuestion = useCallback((decade?: Decade, category?: Category) => {
    setIsLoadingQuestion(true);
    setShowNextButton(false);

    const targetDecade = decade || currentDecade || '80';
    const targetCategory = category || currentCategory || 'Música';

    setTimeout(() => {
      try {
        const questionData = getLocalTriviaQuestion({
          decade: targetDecade,
          category: targetCategory,
          difficulty: difficulty,
          alreadyAsked: historyQuestions
        });

        if (questionData) {
          setCurrentQuestion(questionData);
          setCurrentDecade(questionData.decade);
          setCurrentCategory(questionData.category);
          setHistoryQuestions(prev => [...prev.slice(-30), questionData.question]);
        }
      } catch (err) {
        console.error("Failed to load local trivia question:", err);
      } finally {
        setIsLoadingQuestion(false);
      }
    }, 150);
  }, [currentDecade, currentCategory, difficulty, historyQuestions]);

  const handleAddPlayer = () => {
    if (players.length >= 4) return;
    sound.playClick();
    const newId = (players.length + 1).toString();
    const avatars = ['📼', '📺', '📻', '🎸'];
    setPlayers(prev => [
      ...prev,
      {
        id: newId,
        name: `Jugador ${newId}`,
        color: newId === '3' ? 'cyan' : 'emerald',
        avatar: avatars[players.length % avatars.length],
        score: 0,
        decadeTokens: { '70': false, '80': false, '90': false },
        streak: 0,
        correctAnswersCount: 0
      }
    ]);
  };

  const handleRemovePlayer = (id: string) => {
    if (players.length <= 2) return;
    sound.playClick();
    setPlayers(prev => prev.filter(p => p.id !== id));
  };

  const handleUpdatePlayerName = (id: string, name: string) => {
    setPlayers(prev => prev.map(p => p.id === id ? { ...p, name } : p));
  };

  const handleStartGame = () => {
    sound.playClick();
    setGameStarted(true);
    setWinner(null);
    setActivePlayerIndex(0);
    setCurrentQuestion(null);
    setCurrentDecade(null);
    setCurrentCategory(null);
    setPlayers(prev => prev.map(p => ({
      ...p,
      score: 0,
      streak: 0,
      correctAnswersCount: 0,
      decadeTokens: { '70': false, '80': false, '90': false }
    })));
  };

  const handleSpinResult = (decade: Decade, category: Category) => {
    setCurrentDecade(decade);
    setCurrentCategory(category);
    fetchQuestion(decade, category);
  };

  const handleAnswerQuestion = (selectedIndex: number, isCorrect: boolean) => {
    const activePlayer = players[activePlayerIndex];

    if (isCorrect) {
      const addedPoints = difficulty === 'Experto' ? 150 : 100;
      const updatedTokens = {
        ...activePlayer.decadeTokens,
        [currentDecade || '80']: true
      };

      const newScore = activePlayer.score + addedPoints;
      const newStreak = activePlayer.streak + 1;
      const newCorrectCount = activePlayer.correctAnswersCount + 1;

      // Update active player state
      setPlayers(prev => prev.map((p, idx) => {
        if (idx === activePlayerIndex) {
          return {
            ...p,
            score: newScore,
            streak: newStreak,
            correctAnswersCount: newCorrectCount,
            decadeTokens: updatedTokens
          };
        }
        return p;
      }));

      // Check Victory Condition: All 3 Decade Sync Tokens (70, 80, 90) OR score >= 1000
      const hasAllTokens = updatedTokens['70'] && updatedTokens['80'] && updatedTokens['90'];
      if (hasAllTokens || newScore >= 1000) {
        sound.playVictory();
        confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } });
        setWinner({
          ...activePlayer,
          score: newScore,
          decadeTokens: updatedTokens
        });
      }
    } else {
      setPlayers(prev => prev.map((p, idx) => idx === activePlayerIndex ? { ...p, streak: 0 } : p));
    }

    setShowNextButton(true);
  };

  const handleNextTurn = () => {
    sound.playClick();
    setActivePlayerIndex(prev => (prev + 1) % players.length);
    setCurrentQuestion(null);
    setShowNextButton(false);
    setTimeout(() => {
      spinnerRef.current?.spin();
    }, 50);
  };

  if (!gameStarted) {
    return (
      <div className="w-full max-w-xl mx-auto py-6 px-4">
        <div className="bg-[#1a1724] border-2 border-amber-500/40 rounded-3xl p-6 shadow-2xl text-center">
          <div className="w-16 h-16 rounded-2xl bg-gradient-to-tr from-red-500 to-amber-500 text-black mx-auto flex items-center justify-center text-3xl mb-4 shadow-lg shadow-red-500/20">
            🏆
          </div>
          <h2 className="font-righteous text-2xl sm:text-3xl text-amber-300 mb-2">MODO COMPETENCIA</h2>
          <p className="text-sm sm:text-base text-amber-100/90 font-medium mb-5 leading-relaxed">
            Multijugador en el mismo dispositivo. Gira la rueda temporal, demuestra lo que sabes y pon tu nombre en el hall de la fama.
          </p>

          {/* Mode Selection Options directly below description */}
          <div className="flex items-center justify-center gap-2 mb-6 bg-[#121016] p-1.5 rounded-xl border border-amber-500/30 max-w-sm mx-auto">
            <button
              type="button"
              onClick={() => {
                sound.playClick();
                if (onSwitchMode) onSwitchMode('Solo');
              }}
              className="flex-1 py-2 px-3 rounded-lg text-xs font-bold text-amber-200/70 hover:text-amber-200 hover:bg-amber-500/10 transition-all"
            >
              🕹️ Un Solo Jugador
            </button>
            <button
              type="button"
              onClick={() => {
                sound.playClick();
                if (onSwitchMode) onSwitchMode('Competencia');
              }}
              className="flex-1 py-2 px-3 rounded-lg text-xs font-bold bg-gradient-to-r from-red-500 to-amber-500 text-black shadow-md shadow-red-500/30"
            >
              🏆 Competencia
            </button>
          </div>

          {/* Player Setup */}
          <div className="space-y-4 text-left bg-zinc-900/60 p-4 rounded-2xl border border-amber-500/20 mb-6">
            <div className="flex items-center justify-between mb-2">
              <label className="text-xs font-bold text-amber-300 uppercase tracking-wider">
                Configurar Jugadores (2 a 4):
              </label>
              {players.length < 4 && (
                <button
                  onClick={handleAddPlayer}
                  className="px-2.5 py-1 rounded-lg bg-amber-500/20 hover:bg-amber-500/30 border border-amber-500/40 text-amber-300 text-xs font-bold"
                >
                  + Añadir Jugador
                </button>
              )}
            </div>

            <div className="space-y-2">
              {players.map((p, i) => (
                <div key={p.id} className="flex items-center gap-2 bg-[#121016] p-2 rounded-xl border border-amber-500/30">
                  <span className="text-xl pl-1">{p.avatar}</span>
                  <input
                    type="text"
                    value={p.name}
                    onChange={e => handleUpdatePlayerName(p.id, e.target.value)}
                    maxLength={16}
                    className="flex-1 bg-transparent text-amber-100 font-bold text-sm focus:outline-none"
                  />
                  {players.length > 2 && (
                    <button
                      onClick={() => handleRemovePlayer(p.id)}
                      className="text-red-400 hover:text-red-300 px-2 py-1 text-xs font-bold"
                    >
                      ✕
                    </button>
                  )}
                </div>
              ))}
            </div>

            {/* Difficulty Selector */}
            <div className="pt-2 border-t border-zinc-800">
              <label className="block text-xs font-bold text-amber-300/80 mb-1">Dificultad Acordada:</label>
              <div className="grid grid-cols-2 gap-2">
                <button
                  onClick={() => {
                    sound.playClick();
                    setDifficulty('Fácil');
                  }}
                  className={`py-2 rounded-xl border text-xs font-bold transition-all ${
                    difficulty === 'Fácil'
                      ? 'bg-teal-500/20 border-teal-400 text-teal-300 ring-2 ring-teal-500/30'
                      : 'bg-zinc-800 border-zinc-700 text-zinc-400'
                  }`}
                >
                  🟢 Nivel FÁCIL
                </button>
                <button
                  onClick={() => {
                    sound.playClick();
                    setDifficulty('Experto');
                  }}
                  className={`py-2 rounded-xl border text-xs font-bold transition-all ${
                    difficulty === 'Experto'
                      ? 'bg-purple-500/20 border-purple-400 text-purple-300 ring-2 ring-purple-500/30'
                      : 'bg-zinc-800 border-zinc-700 text-zinc-400'
                  }`}
                >
                  🟣 Nivel EXPERTO
                </button>
              </div>
            </div>
          </div>

          <button
            onClick={handleStartGame}
            className="w-full py-3.5 rounded-2xl bg-gradient-to-r from-red-500 via-amber-500 to-orange-500 hover:from-red-400 hover:to-orange-400 text-black font-righteous text-lg tracking-wider shadow-lg shadow-red-500/20 hover:scale-[1.02] transition-all flex items-center justify-center gap-2"
          >
            <Play className="w-5 h-5 fill-black" />
            <span>INICIAR COMPETENCIA RETRO</span>
          </button>
        </div>
      </div>
    );
  }

  if (winner) {
    return (
      <div className="w-full max-w-lg mx-auto py-6 px-4">
        <div className="bg-[#1a1724] border-2 border-amber-500/40 rounded-3xl p-6 shadow-2xl text-center">
          <div className="w-20 h-20 rounded-full bg-gradient-to-tr from-amber-400 to-orange-500 text-black mx-auto flex items-center justify-center text-4xl mb-4 shadow-xl shadow-amber-500/30 animate-bounce">
            👑
          </div>
          <h2 className="font-righteous text-2xl sm:text-3xl text-amber-300 mb-1">
            ¡{winner.name.toUpperCase()} HA GANADO!
          </h2>
          <p className="text-xs text-amber-200/80 mb-6">
            ¡Sincronización Temporal Completa! Domina las décadas de los 70s, 80s y 90s.
          </p>

          <div className="bg-zinc-900/80 p-4 rounded-2xl border border-amber-500/30 mb-6 space-y-3">
            <div className="flex justify-between items-center text-sm">
              <span className="text-amber-300/80">Puntuación Final:</span>
              <span className="font-pixel text-amber-400 text-lg">{winner.score} pts</span>
            </div>
            <div className="flex justify-between items-center text-sm">
              <span className="text-amber-300/80">Aciertos Totales:</span>
              <span className="font-bold text-emerald-400">{winner.correctAnswersCount}</span>
            </div>
            <div className="flex justify-between items-center text-sm">
              <span className="text-amber-300/80">Fichas Obtenidas:</span>
              <span className="font-bold text-amber-300">70s • 80s • 90s</span>
            </div>
          </div>

          <button
            onClick={handleStartGame}
            className="w-full py-3.5 rounded-2xl bg-amber-500 hover:bg-amber-400 text-black font-righteous text-base shadow-lg transition-all flex items-center justify-center gap-2"
          >
            <RotateCcw className="w-5 h-5" />
            <span>NUEVA PARTIDA EN COMPETENCIA</span>
          </button>
        </div>
      </div>
    );
  }

  const activePlayer = players[activePlayerIndex];

  return (
    <div className="w-full max-w-4xl mx-auto px-2 py-4 space-y-6">
      {/* Pegboard Score Console */}
      <TimeSyncConsole
        players={players}
        activePlayerIndex={activePlayerIndex}
        gameMode="COMPETENCIA"
      />

      {/* Host Voice Commentary */}
      <HostNarrator
        message={currentQuestion?.host_flavor_text || `¡Turno de ${activePlayer.name}! Gira la rueda para elegir tu coordenada de década y categoría.`}
        isThinking={isLoadingQuestion}
      />

      {/* Wheel Spinner + Question Card */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
        {/* Left Column: Wheel Spinner */}
        <div className="lg:col-span-5 bg-[#181522] border border-amber-500/20 rounded-2xl p-3 shadow-xl flex flex-col items-center">
          <div className="w-full text-center mb-2">
            <span className="text-xs font-bold uppercase tracking-wider text-amber-400">
              TURNO DE: <strong className="text-amber-200">{activePlayer.name}</strong>
            </span>
          </div>
          <VinylSpinner
            ref={spinnerRef}
            onSpinResult={handleSpinResult}
            isSpinning={isSpinning}
            setIsSpinning={setIsSpinning}
            selectedDecade={currentDecade}
            selectedCategory={currentCategory}
          />
        </div>

        {/* Right Column: Question Card Display & Integrated Action Button */}
        <div className="lg:col-span-7 space-y-4">
          {currentQuestion ? (
            <>
              <QuestionCard
                question={currentQuestion}
                onAnswer={handleAnswerQuestion}
                timerDurationSeconds={20}
                isLoading={isLoadingQuestion}
              />

              {/* Next Question / Pass Turn Button */}
              {showNextButton && (
                <button
                  onClick={handleNextTurn}
                  disabled={isSpinning || isLoadingQuestion}
                  className={`w-full py-4 rounded-2xl font-righteous text-lg tracking-wider transition-all shadow-xl flex items-center justify-center gap-2 ${
                    isSpinning || isLoadingQuestion
                      ? 'bg-zinc-800 border border-amber-500/30 text-amber-300/80 cursor-wait'
                      : 'bg-gradient-to-r from-red-500 via-amber-500 to-orange-500 hover:from-red-400 hover:to-orange-400 text-black shadow-red-500/20 hover:scale-[1.01] active:scale-[0.98] animate-bounce'
                  }`}
                >
                  {isSpinning || isLoadingQuestion ? (
                    <>
                      <RefreshCw className="w-5 h-5 animate-spin text-amber-400" />
                      <span>GIRANDO RUEDA TEMPORAL...</span>
                    </>
                  ) : (
                    <>
                      <span>SIGUIENTE PREGUNTA RETRO →</span>
                    </>
                  )}
                </button>
              )}
            </>
          ) : (
            <div className="bg-[#181522] border border-amber-500/20 rounded-2xl p-6 sm:p-8 text-center min-h-[300px] flex flex-col items-center justify-center space-y-5">
              <div>
                <Zap className="w-12 h-12 text-amber-400 mx-auto mb-3 animate-pulse" />
                <h3 className="font-righteous text-xl text-amber-300">¡Gira la Rueda Temporal!</h3>
                <p className="text-xs sm:text-sm text-amber-200/70 max-w-sm mx-auto mt-1 leading-relaxed">
                  <strong className="text-amber-400">{activePlayer.name}</strong>, haz clic en el botón inferior para girar la rueda, calcular tu coordenada y lanzar tu pregunta.
                </p>
              </div>

              {/* Primary Action Button (Initial Spin / Game Start) */}
              <button
                onClick={() => {
                  sound.playClick();
                  spinnerRef.current?.spin();
                }}
                disabled={isSpinning || isLoadingQuestion}
                className={`w-full max-w-sm py-4 rounded-2xl font-righteous text-lg tracking-wider transition-all shadow-xl flex items-center justify-center gap-2.5 ${
                  isSpinning || isLoadingQuestion
                    ? 'bg-zinc-800 border border-amber-500/30 text-amber-300/80 cursor-wait'
                    : 'bg-gradient-to-r from-red-500 via-amber-500 to-orange-500 hover:from-red-400 hover:to-orange-400 text-black shadow-red-500/20 hover:scale-[1.02] active:scale-[0.98] animate-pulse'
                }`}
              >
                {isSpinning || isLoadingQuestion ? (
                  <>
                    <RefreshCw className="w-5 h-5 animate-spin text-amber-400" />
                    <span>GIRANDO RUEDA TEMPORAL...</span>
                  </>
                ) : (
                  <>
                    <RefreshCw className="w-5 h-5" />
                    <span>¡GIRA LA RUEDA TEMPORAL!</span>
                  </>
                )}
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};