import React, { useState, useEffect, useCallback } from 'react';
import { Trophy, Clock, CheckCircle2, XCircle, ChevronRight, RotateCcw, Download, User, Hash } from 'lucide-react';

const QUIZ_DATA = [
  {
    question: "다음 영영풀이에 해당하는 단어는 무엇인가요?\n'to share information with others by speaking, writing, moving your body, etc.'",
    options: ["apologize", "communicate", "expression", "understand", "repeat"],
    answer: 1,
    rationale: "말하기, 쓰기, 몸짓 등을 통해 정보를 공유하는 것은 'communicate(의사소통하다)'입니다."
  },
  {
    question: "다음 단어 중 '민감한, 예민한'이라는 의미를 가진 형용사는 무엇인가요?",
    options: ["simple", "casual", "correctly", "sensitive", "probable"],
    answer: 3,
    rationale: "'sensitive'는 주변 환경에 의해 쉽게 상처받거나 영향을 받는 '민감한' 상태를 뜻합니다."
  },
  {
    question: "문장의 빈칸에 알맞은 단어를 고르세요.\n'A smile is an __________ of happiness.'",
    options: ["arrival", "expression", "emoji", "misunderstanding", "meaning"],
    answer: 1,
    rationale: "미소는 행복의 'expression(표현)'입니다."
  },
  {
    question: "다음 단어의 관계가 '영어-우리말'로 잘못 짝지어진 것은?",
    options: ["capital - 수도", "arrival - 도착", "gift - 선물", "wonder - 궁금하다", "spell - 말하다"],
    answer: 4,
    rationale: "'spell'은 '철자를 말하다(쓰다)'라는 의미입니다. 단순히 '말하다'는 'talk'나 'say'가 적절합니다."
  },
  {
    question: "다음 중 '남의 뒷말을 하다(험담하다)'라는 의미의 숙어는?",
    options: ["sign up for", "in addition", "talk behind one's back", "apologize for", "repeat after me"],
    answer: 2,
    rationale: "'talk behind one's back'은 말 그대로 등 뒤에서 말한다는 뜻으로, 험담하다라는 의미입니다."
  }
];

const App = () => {
  const [gameState, setGameState] = useState('START'); // START, PLAYING, RESULT
  const [currentIdx, setCurrentIdx] = useState(0);
  const [score, setScore] = useState(0);
  const [timeLeft, setTimeLeft] = useState(60);
  const [selectedIdx, setSelectedIdx] = useState(null);
  const [showRationale, setShowRationale] = useState(false);
  const [isCorrect, setIsCorrect] = useState(false);

  // 타이머 로직
  useEffect(() => {
    let timer;
    if (gameState === 'PLAYING' && timeLeft > 0 && !showRationale) {
      timer = setInterval(() => {
        setTimeLeft((prev) => prev - 1);
      }, 1000);
    } else if (timeLeft === 0 && !showRationale) {
      handleAnswer(-1); // 시간 초과 시 오답 처리
    }
    return () => clearInterval(timer);
  }, [gameState, timeLeft, showRationale]);

  const handleStart = () => {
    setGameState('PLAYING');
    setCurrentIdx(0);
    setScore(0);
    setTimeLeft(60);
    setSelectedIdx(null);
    setShowRationale(false);
  };

  const handleAnswer = (index) => {
    if (showRationale) return;
    
    setSelectedIdx(index);
    const correct = index === QUIZ_DATA[currentIdx].answer;
    setIsCorrect(correct);
    
    if (correct) {
      setScore(prev => prev + 10 + timeLeft);
    }
    
    setShowRationale(true);
  };

  const handleNext = () => {
    if (currentIdx < QUIZ_DATA.length - 1) {
      setCurrentIdx(prev => prev + 1);
      setTimeLeft(60);
      setSelectedIdx(null);
      setShowRationale(false);
    } else {
      setGameState('RESULT');
    }
  };

  const handlePrint = () => {
    window.print();
  };

  if (gameState === 'START') {
    return (
      <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4">
        <div className="max-w-md w-full bg-white rounded-3xl shadow-xl p-8 text-center aspect-[4/3] flex flex-col justify-center items-center border border-slate-100">
          <div className="bg-indigo-100 p-4 rounded-full mb-6">
            <Trophy className="w-12 h-12 text-indigo-600" />
          </div>
          <h1 className="text-3xl font-bold text-slate-800 mb-4">Lesson 2. How Teens Talk Now</h1>
          <p className="text-slate-500 mb-8 text-lg">핵심 영어 단어 및 숙어 퀴즈</p>
          <button
            onClick={handleStart}
            className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-4 rounded-2xl text-xl font-bold transition-all transform hover:scale-105"
          >
            <CheckCircle2 className="w-6 h-6" />
            수업 시작하기
          </button>
        </div>
      </div>
    );
  }

  if (gameState === 'PLAYING') {
    const currentQuiz = QUIZ_DATA[currentIdx];
    return (
      <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4">
        <div className="max-w-3xl w-full bg-white rounded-3xl shadow-2xl overflow-hidden relative border border-slate-100">
          {/* Progress Bar */}
          <div className="absolute top-0 left-0 w-full h-2 bg-slate-100">
            <div 
              className={`h-full transition-all duration-1000 ${timeLeft < 10 ? 'bg-rose-500' : 'bg-emerald-500'}`}
              style={{ width: `${(timeLeft / 60) * 100}%` }}
            ></div>
          </div>

          <div className="p-8">
            <div className="flex justify-between items-center mb-8">
              <span className="bg-slate-800 text-white px-4 py-1.5 rounded-full text-sm font-bold">
                문항 {currentIdx + 1} / {QUIZ_DATA.length}
              </span>
              <div className="flex items-center gap-4">
                <div className={`flex items-center gap-2 font-mono text-xl font-bold ${timeLeft < 10 ? 'text-rose-500' : 'text-slate-600'}`}>
                  <Clock className="w-6 h-6" />
                  {timeLeft}s
                </div>
                <div className="text-indigo-600 font-bold text-xl">
                  {score} pts
                </div>
              </div>
            </div>

            <h2 className="text-2xl font-bold text-slate-800 mb-8 leading-snug whitespace-pre-wrap min-h-[4rem]">
              {currentQuiz.question}
            </h2>

            <div className="space-y-3">
              {currentQuiz.options.map((option, idx) => {
                let buttonStyle = "border-slate-200 hover:border-indigo-300 hover:bg-indigo-50";
                let icon = <span className="w-8 h-8 rounded-full border border-slate-300 flex items-center justify-center text-sm mr-3">{idx + 1}</span>;

                if (showRationale) {
                  if (idx === currentQuiz.answer) {
                    buttonStyle = "border-emerald-500 bg-emerald-50 ring-2 ring-emerald-500 ring-offset-2";
                    icon = <CheckCircle2 className="w-8 h-8 text-emerald-500 mr-3" />;
                  } else if (idx === selectedIdx) {
                    buttonStyle = "border-rose-500 bg-rose-50 ring-2 ring-rose-500 ring-offset-2";
                    icon = <XCircle className="w-8 h-8 text-rose-500 mr-3" />;
                  } else {
                    buttonStyle = "opacity-50 border-slate-200 grayscale";
                  }
                }

                return (
                  <button
                    key={idx}
                    disabled={showRationale}
                    onClick={() => handleAnswer(idx)}
                    className={`w-full flex items-center p-4 rounded-2xl border-2 text-left transition-all text-xl font-medium ${buttonStyle}`}
                  >
                    {icon}
                    {option}
                  </button>
                );
              })}
            </div>
          </div>

          {/* Rationale Overlay */}
          {showRationale && (
            <div className={`p-6 animate-in slide-in-from-bottom duration-300 ${isCorrect ? 'bg-emerald-600' : 'bg-rose-600'} text-white flex justify-between items-center`}>
              <div className="flex-1 mr-4">
                <h3 className="text-xl font-bold mb-1">{isCorrect ? "정답입니다!" : "아쉬워요!"}</h3>
                <p className="text-white/90">{currentQuiz.rationale}</p>
              </div>
              <button
                onClick={handleNext}
                className="bg-white text-slate-900 px-6 py-3 rounded-xl font-bold flex items-center gap-2 hover:bg-slate-100 transition-colors whitespace-nowrap"
              >
                {currentIdx < QUIZ_DATA.length - 1 ? "다음 문제" : "결과 보기"}
                <ChevronRight className="w-5 h-5" />
              </button>
            </div>
          )}
        </div>
      </div>
    );
  }

  if (gameState === 'RESULT') {
    return (
      <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4">
        <div className="max-w-md w-full bg-white rounded-3xl shadow-xl p-10 text-center border border-slate-100 print:shadow-none print:border-none">
          <div className="mb-6 flex justify-center">
            <div className="relative">
              <Trophy className="w-20 h-20 text-yellow-500" />
              <div className="absolute inset-0 animate-ping rounded-full bg-yellow-200 -z-10"></div>
            </div>
          </div>
          
          <h1 className="text-3xl font-bold text-slate-800 mb-2">학습 완료!</h1>
          <p className="text-slate-500 mb-8">수고하셨습니다. 단어 실력이 쑥쑥 늘었네요!</p>
          
          <div className="bg-indigo-50 rounded-2xl p-6 mb-8">
            <div className="text-indigo-600 text-sm font-bold uppercase tracking-wider mb-1">Final Score</div>
            <div className="text-5xl font-black text-indigo-700">{score}</div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <button
              onClick={handlePrint}
              className="flex flex-col items-center gap-2 bg-slate-100 hover:bg-slate-200 text-slate-700 p-4 rounded-2xl font-bold transition-all"
            >
              <Download className="w-6 h-6" />
              <span>PDF 저장</span>
            </button>
            <button
              onClick={handleStart}
              className="flex flex-col items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white p-4 rounded-2xl font-bold transition-all"
            >
              <RotateCcw className="w-6 h-6" />
              <span>다시 하기</span>
            </button>
          </div>

          {/* Hidden Print Section */}
          <div className="hidden print:block fixed inset-0 bg-white z-[9999] p-10 text-left overflow-auto">
            <style>{`
              @media print {
                @page { size: A4; margin: 20mm; }
                body { -webkit-print-color-adjust: exact; }
                .no-print { display: none; }
              }
            `}</style>
            <div className="border-b-4 border-slate-900 pb-4 mb-8 flex justify-between items-end">
              <div>
                <h1 className="text-3xl font-black mb-1">Lesson 2 Vocabulary Quiz</h1>
                <p className="text-slate-600 font-bold uppercase tracking-tight">How Teens Talk Now - Worksheet</p>
              </div>
              <div className="flex gap-4 mb-1">
                <div className="border-2 border-slate-300 px-4 py-2 rounded-lg flex items-center gap-2">
                  <Hash className="w-4 h-4" /> <span className="text-slate-400">학번: ________</span>
                </div>
                <div className="border-2 border-slate-300 px-4 py-2 rounded-lg flex items-center gap-2">
                  <User className="w-4 h-4" /> <span className="text-slate-400">이름: ________</span>
                </div>
              </div>
            </div>

            {QUIZ_DATA.map((quiz, qIdx) => (
              <div key={qIdx} className="mb-10 break-inside-avoid">
                <h3 className="text-xl font-bold mb-4 flex gap-2">
                  <span className="text-indigo-600">{qIdx + 1}.</span>
                  {quiz.question}
                </h3>
                <div className="grid grid-cols-1 gap-2 ml-6">
                  {quiz.options.map((opt, oIdx) => (
                    <div key={oIdx} className="flex items-center gap-3 py-1">
                      <div className="w-5 h-5 border border-slate-400 rounded-full text-xs flex items-center justify-center font-bold">
                        {oIdx + 1}
                      </div>
                      <span className="text-lg">{opt}</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
            
            <div className="mt-12 text-center text-slate-400 text-sm border-t pt-4 italic">
              Gusan Middle School - English Class Grade 2
            </div>
          </div>
        </div>
      </div>
    );
  }
};

export default App;