import React, { useState, useEffect, useRef } from 'react';
import { Timer, Zap, CheckCircle2, XCircle, RotateCcw, Trophy, Settings, Activity } from 'lucide-react';

// Utility to generate a base number with statistical preference to 1-10
const generateBaseNumber = () => {
  // 75% chance to get a number between 1 and 10
  const preferSmall = Math.random() < 0.75;
  if (preferSmall) {
    return Math.floor(Math.random() * 10) + 1; // 1 to 10
  } else {
    return Math.floor(Math.random() * 10) + 11; // 11 to 20
  }
};

export default function MathGame() {
  const [gameState, setGameState] = useState('menu'); // 'menu', 'playing', 'summary'
  
  // Game Settings
  const [mode, setMode] = useState('power');
  const [timeLimit, setTimeLimit] = useState(60); // in seconds
  const [powerMin, setPowerMin] = useState(2);
  const [powerMax, setPowerMax] = useState(2);

  // Active Game State
  const [score, setScore] = useState(0);
  const [timeLeft, setTimeLeft] = useState(0);
  const [currentQuestion, setCurrentQuestion] = useState(null);
  const [inputValue, setInputValue] = useState('');
  const [history, setHistory] = useState([]);
  
  // Visual feedback state
  const [feedback, setFeedback] = useState(null); // 'correct' | 'incorrect' | null

  const inputRef = useRef(null);

  // Focus input automatically when playing
  useEffect(() => {
    if (gameState === 'playing' && inputRef.current) {
      inputRef.current.focus();
    }
  }, [gameState, currentQuestion]);

  // Timer logic
  useEffect(() => {
    let timer;
    if (gameState === 'playing' && timeLeft > 0) {
      timer = setInterval(() => {
        setTimeLeft((prev) => {
          if (prev <= 1) {
            endGame();
            return 0;
          }
          return prev - 1;
        });
      }, 1000);
    }
    return () => clearInterval(timer);
  }, [gameState, timeLeft]);

  const generateQuestion = () => {
    const base = generateBaseNumber();
    const power = Math.floor(Math.random() * (powerMax - powerMin + 1)) + powerMin;
    const answer = Math.pow(base, power);
    setCurrentQuestion({ base, power, answer });
  };

  const startGame = () => {
    setScore(0);
    setTimeLeft(timeLimit);
    setHistory([]);
    setFeedback(null);
    setInputValue('');
    generateQuestion();
    setGameState('playing');
  };

  const endGame = () => {
    setGameState('summary');
  };

  const handlePowerMinChange = (e) => {
    const val = parseInt(e.target.value) || 1;
    setPowerMin(val);
    if (val > powerMax) setPowerMax(val);
  };

  const handlePowerMaxChange = (e) => {
    const val = parseInt(e.target.value) || 1;
    setPowerMax(val);
    if (val < powerMin) setPowerMin(val);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!inputValue.trim() || !currentQuestion) return;

    const userAnswer = parseInt(inputValue, 10);
    const isCorrect = userAnswer === currentQuestion.answer;

    if (isCorrect) {
      setScore(s => s + 1);
      setFeedback('correct');
    } else {
      setFeedback('incorrect');
    }

    // Add to history
    setHistory(prev => [...prev, {
      ...currentQuestion,
      userAnswer,
      isCorrect
    }]);

    // Briefly show feedback then next question
    setTimeout(() => setFeedback(null), 300);
    
    setInputValue('');
    generateQuestion();
  };

  // --- RENDERERS ---

  const renderMenu = () => (
    <div className="max-w-xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden border border-slate-100">
      <div className="bg-indigo-600 p-8 text-center text-white">
        <Zap className="w-16 h-16 mx-auto mb-4 text-indigo-200" />
        <h1 className="text-4xl font-extrabold tracking-tight">Math Mastery</h1>
        <p className="text-indigo-200 mt-2 text-lg">Test your mental calculation limits</p>
      </div>

      <div className="p-8 space-y-8">
        {/* Game Mode Selection */}
        <section>
          <div className="flex items-center gap-2 mb-4 text-slate-800">
            <Activity className="w-5 h-5 text-indigo-500" />
            <h2 className="text-lg font-bold">Game Mode</h2>
          </div>
          <div className="grid grid-cols-2 gap-3">
            <button 
              className={`p-3 rounded-xl border-2 font-semibold transition-all ${mode === 'power' ? 'border-indigo-600 bg-indigo-50 text-indigo-700' : 'border-slate-200 text-slate-500 hover:border-slate-300'}`}
              onClick={() => setMode('power')}
            >
              Power Mode
            </button>
            <button disabled className="p-3 rounded-xl border-2 border-slate-100 bg-slate-50 text-slate-400 font-semibold cursor-not-allowed relative overflow-hidden group">
              Root Mode
              <span className="absolute inset-0 bg-slate-100/80 flex items-center justify-center text-xs tracking-wider uppercase font-bold text-slate-500 opacity-0 group-hover:opacity-100 transition-opacity">Coming Soon</span>
            </button>
            <button disabled className="p-3 rounded-xl border-2 border-slate-100 bg-slate-50 text-slate-400 font-semibold cursor-not-allowed relative overflow-hidden group">
              Survival Power
              <span className="absolute inset-0 bg-slate-100/80 flex items-center justify-center text-xs tracking-wider uppercase font-bold text-slate-500 opacity-0 group-hover:opacity-100 transition-opacity">Coming Soon</span>
            </button>
            <button disabled className="p-3 rounded-xl border-2 border-slate-100 bg-slate-50 text-slate-400 font-semibold cursor-not-allowed relative overflow-hidden group">
              Survival Root
              <span className="absolute inset-0 bg-slate-100/80 flex items-center justify-center text-xs tracking-wider uppercase font-bold text-slate-500 opacity-0 group-hover:opacity-100 transition-opacity">Coming Soon</span>
            </button>
          </div>
        </section>

        {/* Time Limit Selection */}
        <section>
          <div className="flex items-center gap-2 mb-4 text-slate-800">
            <Timer className="w-5 h-5 text-indigo-500" />
            <h2 className="text-lg font-bold">Time Limit</h2>
          </div>
          <div className="flex gap-3">
            {[30, 60, 120].map(time => (
              <button
                key={time}
                onClick={() => setTimeLimit(time)}
                className={`flex-1 p-3 rounded-xl border-2 font-semibold transition-all ${timeLimit === time ? 'border-indigo-600 bg-indigo-50 text-indigo-700' : 'border-slate-200 text-slate-600 hover:border-slate-300'}`}
              >
                {time === 60 ? '1 min' : time === 120 ? '2 min' : '30 sec'}
              </button>
            ))}
          </div>
        </section>

        {/* Power Range Selection */}
        <section>
          <div className="flex items-center gap-2 mb-4 text-slate-800">
            <Settings className="w-5 h-5 text-indigo-500" />
            <h2 className="text-lg font-bold">Power Range</h2>
          </div>
          <p className="text-sm text-slate-500 mb-3">Set both to the same number for a specific power (e.g., ^2), or different numbers for a random range (e.g., ^2 to ^5).</p>
          <div className="flex items-center gap-4">
            <div className="flex-1">
              <label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1">Min Power</label>
              <input 
                type="number" 
                min="1" 
                max="10" 
                value={powerMin} 
                onChange={handlePowerMinChange}
                className="w-full p-3 rounded-xl border-2 border-slate-200 focus:border-indigo-500 focus:ring-0 outline-none text-lg font-bold text-slate-700 transition-colors"
              />
            </div>
            <span className="text-slate-400 font-bold mt-5">to</span>
            <div className="flex-1">
              <label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1">Max Power</label>
              <input 
                type="number" 
                min="1" 
                max="10" 
                value={powerMax} 
                onChange={handlePowerMaxChange}
                className="w-full p-3 rounded-xl border-2 border-slate-200 focus:border-indigo-500 focus:ring-0 outline-none text-lg font-bold text-slate-700 transition-colors"
              />
            </div>
          </div>
        </section>

        <button 
          onClick={startGame}
          className="w-full py-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-bold text-lg shadow-lg shadow-indigo-200 transition-all transform hover:-translate-y-0.5"
        >
          Start Game
        </button>
      </div>
    </div>
  );

  const renderPlaying = () => {
    if (!currentQuestion) return null;

    // Visual feedback styling
    let inputBorderColor = 'border-slate-300 focus:border-indigo-500';
    let inputBgColor = 'bg-slate-50';
    if (feedback === 'correct') {
      inputBorderColor = 'border-green-500';
      inputBgColor = 'bg-green-50';
    } else if (feedback === 'incorrect') {
      inputBorderColor = 'border-red-500';
      inputBgColor = 'bg-red-50';
    }

    return (
      <div className="max-w-md mx-auto h-full flex flex-col justify-center">
        {/* Header HUD */}
        <div className="flex justify-between items-center bg-white p-4 rounded-2xl shadow-sm border border-slate-100 mb-8">
          <div className="flex items-center gap-2 text-slate-600">
            <Timer className={`w-6 h-6 ${timeLeft <= 10 ? 'text-red-500 animate-pulse' : 'text-indigo-500'}`} />
            <span className={`text-2xl font-mono font-bold ${timeLeft <= 10 ? 'text-red-500' : ''}`}>
              {Math.floor(timeLeft / 60)}:{(timeLeft % 60).toString().padStart(2, '0')}
            </span>
          </div>
          <div className="flex items-center gap-2 text-slate-600">
            <span className="text-2xl font-mono font-bold text-emerald-500">{score}</span>
            <Trophy className="w-6 h-6 text-yellow-500" />
          </div>
        </div>

        {/* Question Area */}
        <div className="bg-white p-10 rounded-3xl shadow-xl border border-slate-100 text-center relative overflow-hidden">
          <div className="absolute top-0 left-0 w-full h-1 bg-indigo-100">
            <div 
              className="h-full bg-indigo-500 transition-all duration-1000 linear"
              style={{ width: `${(timeLeft / timeLimit) * 100}%` }}
            />
          </div>
          
          <div className="mb-8 flex justify-center items-start text-7xl font-black text-slate-800">
            {currentQuestion.base}
            <sup className="text-4xl text-indigo-600 ml-1">{currentQuestion.power}</sup>
          </div>

          <form onSubmit={handleSubmit}>
            <input
              ref={inputRef}
              type="number"
              value={inputValue}
              onChange={(e) => setInputValue(e.target.value)}
              className={`w-full text-center text-4xl font-bold py-4 rounded-2xl border-4 outline-none transition-colors shadow-inner ${inputBorderColor} ${inputBgColor} text-slate-800`}
              placeholder="?"
              autoComplete="off"
            />
          </form>
          <p className="text-slate-400 mt-6 text-sm">Press <kbd className="px-2 py-1 bg-slate-100 rounded text-slate-600 font-mono text-xs border border-slate-200 shadow-sm">Enter</kbd> to submit</p>
        </div>
      </div>
    );
  };

  const renderSummary = () => {
    const accuracy = history.length > 0 
      ? Math.round((score / history.length) * 100) 
      : 0;

    const powerRangeText = powerMin === powerMax 
      ? `Power of ${powerMin}` 
      : `Powers ${powerMin} to ${powerMax}`;

    return (
      <div className="max-w-2xl mx-auto bg-white rounded-3xl shadow-xl overflow-hidden border border-slate-100 flex flex-col max-h-[90vh]">
        {/* Summary Header */}
        <div className="bg-slate-800 p-8 text-center text-white shrink-0">
          <Trophy className="w-16 h-16 mx-auto mb-4 text-yellow-400" />
          <h2 className="text-4xl font-extrabold mb-2">Time's Up!</h2>
          <p className="text-slate-300">Here is how you performed.</p>
        </div>

        {/* Stats Grid */}
        <div className="grid grid-cols-3 gap-4 p-6 bg-slate-50 border-b border-slate-100 shrink-0">
          <div className="bg-white p-4 rounded-xl shadow-sm text-center border border-slate-100">
            <div className="text-sm font-bold text-slate-400 uppercase tracking-wider mb-1">Score</div>
            <div className="text-3xl font-black text-indigo-600">{score}</div>
          </div>
          <div className="bg-white p-4 rounded-xl shadow-sm text-center border border-slate-100">
            <div className="text-sm font-bold text-slate-400 uppercase tracking-wider mb-1">Accuracy</div>
            <div className="text-3xl font-black text-emerald-500">{accuracy}%</div>
          </div>
          <div className="bg-white p-4 rounded-xl shadow-sm text-center border border-slate-100">
            <div className="text-sm font-bold text-slate-400 uppercase tracking-wider mb-1">Settings</div>
            <div className="text-lg font-bold text-slate-700 leading-tight">
              {timeLimit >= 60 ? `${timeLimit/60}m` : `${timeLimit}s`}<br/>
              <span className="text-sm text-slate-500">{powerRangeText}</span>
            </div>
          </div>
        </div>

        {/* Scrollable History List */}
        <div className="overflow-y-auto p-6 flex-grow space-y-3 bg-white">
          <h3 className="font-bold text-slate-800 mb-4 flex items-center gap-2">
            <Activity className="w-5 h-5 text-indigo-500" /> 
            Answer History ({history.length})
          </h3>
          
          {history.length === 0 ? (
            <div className="text-center text-slate-400 py-8 italic">No questions answered.</div>
          ) : (
            history.map((item, index) => (
              <div 
                key={index} 
                className={`flex items-center justify-between p-4 rounded-xl border ${item.isCorrect ? 'bg-emerald-50 border-emerald-100' : 'bg-red-50 border-red-100'}`}
              >
                <div className="flex items-center gap-4">
                  <div className="flex items-center justify-center w-10 h-10 rounded-full bg-white shadow-sm shrink-0">
                    {item.isCorrect ? (
                      <CheckCircle2 className="w-6 h-6 text-emerald-500" />
                    ) : (
                      <XCircle className="w-6 h-6 text-red-500" />
                    )}
                  </div>
                  <div>
                    <div className="text-lg font-bold text-slate-700">
                      {item.base}<sup className="text-sm">{item.power}</sup> = {item.userAnswer}
                    </div>
                    {!item.isCorrect && (
                      <div className="text-sm font-semibold text-red-600">
                        Correct answer: {item.answer}
                      </div>
                    )}
                  </div>
                </div>
              </div>
            ))
          )}
        </div>

        {/* Footer Action */}
        <div className="p-6 bg-slate-50 border-t border-slate-100 shrink-0">
          <button 
            onClick={() => setGameState('menu')}
            className="w-full py-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-bold text-lg shadow-lg flex items-center justify-center gap-2 transition-all transform hover:-translate-y-0.5"
          >
            <RotateCcw className="w-5 h-5" />
            Play Again
          </button>
        </div>
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-slate-100 font-sans text-slate-900 p-4 md:p-8 flex items-center justify-center">
      <div className="w-full h-full max-w-4xl mx-auto">
        {gameState === 'menu' && renderMenu()}
        {gameState === 'playing' && renderPlaying()}
        {gameState === 'summary' && renderSummary()}
      </div>
    </div>
  );
}