import React, { useState, useEffect } from 'react';
import { Sparkles, Trophy, Music, Heart, MapPin, RefreshCw, Star, Crown } from 'lucide-react';

const App = () => {
  const [gameState, setGameState] = useState('start'); // start, quiz, result
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [score, setScore] = useState(0);
  const [showFeedback, setShowFeedback] = useState(null);
  const [rank, setRank] = useState('');

  const questions = [
    {
      id: 1,
      question: "¡Primera prueba de 'Visual'! ¿Cómo se llaman las fuentes de agua hirviendo que son el centro de nuestro fandom?",
      options: ["As Burgas (Hot Debut)", "As Pozas de Outariz", "A Fonte do Rei", "As Termas de Chavasqueira"],
      correct: 0,
      kpopComment: "¡Ese brillo no lo tiene ni el 'lightstick' oficial!"
    },
    {
      id: 2,
      question: "En el 'Concept' de invierno, ¿cuál es el festival de disfraces más icónico (nuestro propio MAMA)?",
      options: ["San Froilán", "O Entroido", "Festa do Pulpo", "Arde Lucus"],
      correct: 1,
      kpopComment: "¡Esos 'outfits' son de alta costura, chingu!"
    },
    {
      id: 3,
      question: "¿Cuál es el 'Main Vocal' de la arquitectura ourensana, construido por los romanos?",
      options: ["Ponte de Rande", "Ponte Milenio", "A Ponte Vella (Romano)", "Ponte de Oira"],
      correct: 2,
      kpopComment: "¡Sostiene las notas (y el peso) desde hace siglos!"
    },
    {
      id: 4,
      question: "¿Qué 'Snack' es el 'Center' absoluto de cualquier comida en Ourense?",
      options: ["Sushi de Grelos", "Pulpo á feira", "Pizza de Lacón", "Ramen de Cocido"],
      correct: 1,
      kpopComment: "¡Ese aceite de oliva es puro 'fan service'!"
    },
    {
      id: 5,
      question: "Si quieres hacer un 'MV' (Music Video) con vistas increíbles, ¿adónde irías?",
      options: ["Ribeira Sacra (Sil Canyon)", "Plaza Mayor", "Estación del AVE", "Centro Comercial Ponte Vella"],
      correct: 0,
      kpopComment: "¡Escenario digno de un 'World Tour'!"
    }
  ];

  const handleAnswer = (index) => {
    if (showFeedback !== null) return;

    const isCorrect = index === questions[currentQuestion].correct;
    if (isCorrect) {
      setScore(score + 1);
      setShowFeedback('correct');
    } else {
      setShowFeedback('wrong');
    }

    setTimeout(() => {
      setShowFeedback(null);
      if (currentQuestion < questions.length - 1) {
        setCurrentQuestion(currentQuestion + 1);
      } else {
        calculateRank();
      }
    }, 1500);
  };

  const calculateRank = () => {
    const finalScore = score + (showFeedback === 'correct' ? 1 : 0);
    if (finalScore === 5) setRank('OURENSE LEGEND (All-Kill!)');
    else if (finalScore >= 3) setRank('GOLDEN MAKNAE DE GALICIA');
    else setRank('TRAINEE EN PRÁCTICAS');
    setGameState('result');
  };

  const resetGame = () => {
    setGameState('start');
    setCurrentQuestion(0);
    setScore(0);
    setRank('');
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-pink-400 via-purple-500 to-indigo-600 flex items-center justify-center p-4 font-sans text-white">
      <div className="max-w-md w-full bg-white/10 backdrop-blur-lg rounded-3xl p-8 border border-white/20 shadow-2xl overflow-hidden relative">
        
        {/* Decorative elements */}
        <div className="absolute -top-10 -right-10 w-32 h-32 bg-pink-300/30 rounded-full blur-2xl" />
        <div className="absolute -bottom-10 -left-10 w-32 h-32 bg-blue-300/30 rounded-full blur-2xl" />

        {gameState === 'start' && (
          <div className="text-center space-y-6 animate-in fade-in zoom-in duration-500">
            <div className="bg-white text-purple-600 w-20 h-20 rounded-2xl flex items-center justify-center mx-auto shadow-lg rotate-3">
              <Music size={40} />
            </div>
            <h1 className="text-4xl font-black tracking-tighter uppercase italic">
              Ourense <span className="text-pink-300">Idol</span> Training
            </h1>
            <p className="text-lg font-medium opacity-90 italic">
              "¿Tienes lo necesario para ser el 'Main Visual' de la provincia de las termas?"
            </p>
            <button 
              onClick={() => setGameState('quiz')}
              className="w-full bg-gradient-to-r from-pink-500 to-purple-500 py-4 rounded-2xl font-bold text-xl hover:scale-105 transition-transform active:scale-95 shadow-xl flex items-center justify-center gap-2"
            >
              ¡START MY DEBUT! <Sparkles size={24} />
            </button>
            <div className="flex justify-center gap-4 text-sm opacity-70">
              <span className="flex items-center gap-1"><Heart size={14}/> Bias: Miño</span>
              <span className="flex items-center gap-1"><MapPin size={14}/> Location: 32001</span>
            </div>
          </div>
        )}

        {gameState === 'quiz' && (
          <div className="space-y-6 animate-in slide-in-from-right duration-300">
            <div className="flex justify-between items-center mb-4">
              <span className="bg-black/20 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-widest">
                Round {currentQuestion + 1} / {questions.length}
              </span>
              <div className="flex gap-1">
                {[...Array(questions.length)].map((_, i) => (
                  <div key={i} className={`w-2 h-2 rounded-full ${i <= currentQuestion ? 'bg-pink-400' : 'bg-white/20'}`} />
                ))}
              </div>
            </div>

            <h2 className="text-2xl font-bold leading-tight min-h-[80px]">
              {questions[currentQuestion].question}
            </h2>

            <div className="grid gap-3">
              {questions[currentQuestion].options.map((option, index) => (
                <button
                  key={index}
                  onClick={() => handleAnswer(index)}
                  disabled={showFeedback !== null}
                  className={`w-full text-left p-4 rounded-xl border-2 transition-all duration-200 font-semibold
                    ${showFeedback === null ? 'border-white/20 bg-white/5 hover:bg-white/20 hover:border-white/50' : ''}
                    ${showFeedback === 'correct' && index === questions[currentQuestion].correct ? 'bg-green-500/50 border-green-300 scale-105' : ''}
                    ${showFeedback === 'wrong' && index !== questions[currentQuestion].correct ? 'opacity-50 grayscale' : ''}
                    ${showFeedback === 'wrong' && index === questions[currentQuestion].correct ? 'bg-green-500/50 border-green-300' : ''}
                  `}
                >
                  {option}
                </button>
              ))}
            </div>

            {showFeedback && (
              <div className="text-center animate-bounce pt-4">
                <p className="text-xl font-black uppercase italic tracking-wider">
                  {showFeedback === 'correct' ? 'DAEBAK! 🌟' : 'OTOKE? 😭'}
                </p>
                <p className="text-sm opacity-80 mt-1 italic">
                   {questions[currentQuestion].kpopComment}
                </p>
              </div>
            )}
          </div>
        )}

        {gameState === 'result' && (
          <div className="text-center space-y-8 animate-in zoom-in duration-500">
            <div className="relative inline-block">
              <div className="bg-yellow-400 text-black w-24 h-24 rounded-full flex items-center justify-center mx-auto shadow-2xl relative z-10 border-4 border-white">
                <Trophy size={48} />
              </div>
              <div className="absolute top-0 left-0 w-full h-full bg-yellow-400 rounded-full blur-xl animate-pulse -z-0 opacity-50" />
            </div>

            <div className="space-y-2">
              <h2 className="text-sm font-bold tracking-[0.3em] uppercase opacity-70">Official Ranking</h2>
              <p className="text-3xl font-black bg-gradient-to-r from-yellow-300 via-pink-300 to-purple-400 bg-clip-text text-transparent">
                {rank}
              </p>
            </div>

            <div className="bg-black/20 p-6 rounded-2xl border border-white/10">
              <p className="text-5xl font-black mb-1">{score * 20}%</p>
              <p className="text-xs font-bold uppercase tracking-widest opacity-60">Win Rate de Ourensanismo</p>
            </div>

            <div className="flex flex-col gap-3">
              <button 
                onClick={resetGame}
                className="w-full bg-white text-purple-600 py-4 rounded-xl font-bold text-lg hover:bg-purple-50 flex items-center justify-center gap-2"
              >
                COMEBACK (Retry) <RefreshCw size={20} />
              </button>
              <p className="text-[10px] uppercase opacity-40 tracking-tighter">
                Stan Ourense, Stan Talent. Ourense Entertainment Ltd.
              </p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default App;