import React, { useState, useEffect, useCallback } from 'react';
import { Trophy, Clock, CheckCircle2, XCircle, ChevronRight, RefreshCcw, FileDown, GraduationCap } from 'lucide-react';

const QUIZ_DATA = [
  {
    question: "다음 영영풀이에 해당하는 단어는 무엇입니까?\n'in danger of disappearing because there are very few left alive'",
    options: ["wild", "various", "endangered", "global", "wonderful"],
    answer: 2,
    rationale: "멸종 위기에 처한(endangered)은 생존해 있는 개체 수가 매우 적어 사라질 위험에 처한 상태를 의미합니다."
  },
  {
    question: "다음 문장의 빈칸에 알맞은 표현을 고르세요.\n'Only one person _________ the fire in the building.'",
    options: ["searched", "prepared", "returned", "survived", "waved"],
    answer: 3,
    rationale: "화재와 같은 위험한 상황에서 계속 살아가다라는 뜻인 'survived(살아남았다)'가 문맥상 가장 적절합니다."
  },
  {
    question: "다음 중 '심부름하다'라는 의미의 이디엄(Idiom)은?",
    options: ["take part in", "run an errand", "at the same time", "search for", "cleanup"],
    answer: 1,
    rationale: "run an errand는 다른 사람을 위해 소소한 일을 하기 위해 어딘가에 다녀오는 '심부름하다'라는 뜻입니다."
  },
  {
    question: "다음 단어와 우리말 뜻의 연결이 옳지 않은 것은?",
    options: ["aquarium - 수족관", "ceremony - 의식", "issue - 문제, 사안", "various - 다양한", "luckily - 불행하게도"],
    answer: 4,
    rationale: "luckily는 '운 좋게도'라는 뜻이며, '불행하게도'는 unfortunately입니다."
  },
  {
    question: "다음 영영풀이에 해당하는 단어는 무엇입니까?\n'a sea animal that looks like a large fish and is very intelligent'",
    options: ["dolphin", "fishing net", "wave", "wild", "blog"],
    answer: 0,
    rationale: "큰 물고기처럼 생겼으며 매우 지능이 높은 바다 동물은 돌고래(dolphin)입니다."
  }
];

const App = () => {
  const [gameState, setGameState] = useState('START'); // START, QUIZ, RESULT
  const [currentIndex, setCurrentIndex] = useState(0);
  const [score, setScore] = useState(0);
  const [timeLeft, setTimeLeft] = useState(60);
  const [selectedOption, setSelectedOption] = useState(null);
  const [isAnswered, setIsAnswered] = useState(false);

  // Timer logic
  useEffect(() => {
    let timer;
    if (gameState === 'QUIZ' && !isAnswered && timeLeft > 0) {
      timer = setInterval(() => {
        setTimeLeft((prev) => prev - 1);
      }, 1000);
    } else if (timeLeft === 0 && !isAnswered) {
      handleOptionClick(-1); // Time out
    }
    return () => clearInterval(timer);
  }, [gameState, isAnswered, timeLeft]);

  const handleStart = () => {
    setGameState('QUIZ');
    setCurrentIndex(0);
    setScore(0);
    setTimeLeft(60);
    setIsAnswered(false);
    setSelectedOption(null);
  };

  const handleOptionClick = (index) => {
    if (isAnswered) return;
    
    setSelectedOption(index);
    setIsAnswered(true);
    
    if (index === QUIZ_DATA[currentIndex].answer) {
      const bonus = 10 + timeLeft;
      setScore((prev) => prev + bonus);
    }
  };

  const handleNext = () => {
    if (currentIndex < QUIZ_DATA.length - 1) {
      setCurrentIndex((prev) => prev + 1);
      setIsAnswered(false);
      setSelectedOption(null);
      setTimeLeft(60);
    } else {
      setGameState('RESULT');
    }
  };

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

  return (
    <div className="min-h-screen bg-slate-100 flex items-center justify-center p-2 sm:p-4 font-sans text-slate-900">
      <div className="w-full max-w-4xl min-h-[600px] bg-white rounded-3xl shadow-2xl overflow-hidden relative flex flex-col print:shadow-none print:rounded-none print:w-full print:h-full print:m-0 print:p-8">
        
        {/* PRINT ONLY SECTION */}
        <div className="hidden print:block mb-8">
          <h1 className="text-3xl font-bold border-b-4 border-indigo-600 pb-2 mb-6">
            Lesson 1 Vocabulary Quiz (Student Worksheet)
          </h1>
          <div className="flex gap-10 mb-8 text-xl">
            <span>학번: ____________________</span>
            <span>이름: ____________________</span>
          </div>
          {QUIZ_DATA.map((q, idx) => (
            <div key={idx} className="mb-10 break-inside-avoid">
              <p className="text-2xl font-semibold mb-4">{idx + 1}. {q.question}</p>
              <div className="grid grid-cols-1 gap-2 pl-4">
                {q.options.map((opt, oIdx) => (
                  <div key={oIdx} className="text-xl">
                    ({oIdx + 1}) {opt}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* WEB INTERFACE */}
        <div className="flex-1 flex flex-col print:hidden">
          {gameState === 'START' && (
            <div className="flex-1 flex flex-col items-center justify-center space-y-6 p-8 text-center">
              <div className="w-24 h-24 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 animate-bounce">
                <GraduationCap size={48} />
              </div>
              <div className="space-y-2">
                <h1 className="text-4xl md:text-5xl font-black text-indigo-900 tracking-tight">
                  The Future Is in Our Hands
                </h1>
                <p className="text-xl md:text-2xl text-slate-500 font-medium">Lesson 1: 핵심 단어 마스터 퀴즈</p>
              </div>
              <button 
                onClick={handleStart}
                className="group flex items-center space-x-3 bg-indigo-600 hover:bg-indigo-700 text-white px-10 py-4 rounded-2xl text-2xl font-bold transition-all transform hover:scale-105 active:scale-95 shadow-lg shadow-indigo-200"
              >
                <span>수업 시작하기</span>
                <ChevronRight size={28} className="group-hover:translate-x-1 transition-transform" />
              </button>
            </div>
          )}

          {gameState === 'QUIZ' && (
            <div className="flex-1 flex flex-col relative">
              {/* Timer Bar */}
              <div className="h-2 w-full bg-slate-100">
                <div 
                  className={`h-full transition-all duration-1000 ${timeLeft < 10 ? 'bg-rose-500 animate-pulse' : 'bg-emerald-500'}`}
                  style={{ width: `${(timeLeft / 60) * 100}%` }}
                ></div>
              </div>

              <div className="p-4 sm:p-6 md:p-8 flex-1 flex flex-col overflow-y-auto">
                <div className="flex justify-between items-center mb-4">
                  <div className="bg-slate-800 text-white px-3 py-1 rounded-full font-bold text-base">
                    <span>{currentIndex + 1} / {QUIZ_DATA.length}</span>
                  </div>
                  <div className="flex items-center space-x-4">
                    <div className="flex items-center space-x-1 text-rose-600 font-mono font-black text-2xl">
                      <Clock size={20} />
                      <span>{timeLeft}s</span>
                    </div>
                    <div className="flex items-center space-x-1 text-indigo-600 font-black text-2xl">
                      <Trophy size={20} />
                      <span>{score}pt</span>
                    </div>
                  </div>
                </div>

                <div className="flex-1 flex flex-col">
                  <h2 className="text-2xl md:text-3xl font-bold text-slate-800 mb-6 leading-snug whitespace-pre-wrap">
                    {QUIZ_DATA[currentIndex].question}
                  </h2>

                  <div className="grid grid-cols-1 gap-2 sm:gap-3 mb-24">
                    {QUIZ_DATA[currentIndex].options.map((option, idx) => {
                      let bgColor = "bg-white border-2 border-slate-200 hover:border-indigo-400";
                      let textColor = "text-slate-700";
                      
                      if (isAnswered) {
                        if (idx === QUIZ_DATA[currentIndex].answer) {
                          bgColor = "bg-emerald-50 border-emerald-500 ring-2 ring-emerald-500";
                          textColor = "text-emerald-700 font-bold";
                        } else if (idx === selectedOption) {
                          bgColor = "bg-rose-50 border-rose-500 ring-2 ring-rose-500";
                          textColor = "text-rose-700 font-bold";
                        } else {
                          bgColor = "bg-slate-50 border-slate-200 opacity-50";
                        }
                      }

                      return (
                        <button
                          key={idx}
                          onClick={() => handleOptionClick(idx)}
                          disabled={isAnswered}
                          className={`${bgColor} ${textColor} p-3 sm:p-4 rounded-xl text-xl md:text-2xl text-left transition-all flex items-center space-x-3 shadow-sm`}
                        >
                          <span className="flex-shrink-0 w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center font-bold text-indigo-600 text-lg">
                            {idx + 1}
                          </span>
                          <span className="flex-1 truncate">{option}</span>
                          {isAnswered && idx === QUIZ_DATA[currentIndex].answer && <CheckCircle2 className="text-emerald-500 flex-shrink-0" size={24} />}
                          {isAnswered && idx === selectedOption && idx !== QUIZ_DATA[currentIndex].answer && <XCircle className="text-rose-500 flex-shrink-0" size={24} />}
                        </button>
                      );
                    })}
                  </div>
                </div>
              </div>

              {/* Rationale Overlay - Always fixed at bottom when answered */}
              {isAnswered && (
                <div className={`absolute bottom-0 left-0 right-0 p-4 sm:p-6 transform transition-transform duration-300 translate-y-0 ${selectedOption === QUIZ_DATA[currentIndex].answer ? 'bg-emerald-600' : 'bg-rose-600'} text-white shadow-2xl flex flex-col sm:flex-row items-center justify-between gap-4 z-10`}>
                  <div className="flex-1">
                    <h3 className="text-xl font-black mb-1 flex items-center">
                      {selectedOption === QUIZ_DATA[currentIndex].answer ? (
                        <><CheckCircle2 className="mr-2" size={20} /> 정답!</>
                      ) : (
                        <><XCircle className="mr-2" size={20} /> 오답!</>
                      )}
                    </h3>
                    <p className="text-lg font-medium opacity-95 leading-tight">{QUIZ_DATA[currentIndex].rationale}</p>
                  </div>
                  <button 
                    onClick={handleNext}
                    className="bg-white text-slate-900 px-6 py-3 rounded-xl font-bold text-xl flex items-center space-x-2 hover:bg-slate-100 transition-colors shrink-0 shadow-lg"
                  >
                    <span>{currentIndex === QUIZ_DATA.length - 1 ? '결과 보기' : '다음 문제'}</span>
                    <ChevronRight size={20} />
                  </button>
                </div>
              )}
            </div>
          )}

          {gameState === 'RESULT' && (
            <div className="flex-1 flex flex-col items-center justify-center p-8 space-y-8 text-center">
              <div className="space-y-2">
                <div className="inline-block p-4 bg-yellow-100 rounded-full text-yellow-600 mb-2">
                  <Trophy size={60} />
                </div>
                <h2 className="text-4xl font-black text-slate-900">학습 완료!</h2>
                <p className="text-xl text-slate-500 font-medium">모든 문제를 성실히 해결했습니다.</p>
              </div>

              <div className="bg-indigo-50 px-10 py-6 rounded-3xl">
                <p className="text-slate-600 text-lg font-bold mb-1 uppercase tracking-widest">최종 점수</p>
                <p className="text-7xl font-black text-indigo-600">{score}<span className="text-2xl ml-1 font-bold">pt</span></p>
              </div>

              <div className="flex flex-col sm:flex-row gap-4 w-full max-w-md">
                <button 
                  onClick={handlePrint}
                  className="flex-1 flex items-center justify-center space-x-2 bg-slate-800 hover:bg-slate-900 text-white py-4 rounded-2xl text-xl font-bold transition-all shadow-lg"
                >
                  <FileDown size={24} />
                  <span>PDF 다운로드</span>
                </button>
                <button 
                  onClick={handleStart}
                  className="flex-1 flex items-center justify-center space-x-2 bg-indigo-600 hover:bg-indigo-700 text-white py-4 rounded-2xl text-xl font-bold transition-all shadow-lg"
                >
                  <RefreshCcw size={24} />
                  <span>다시 하기</span>
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
      
      <style dangerouslySetInnerHTML={{ __html: `
        @media print {
          body { background: white !important; }
          .print\\:hidden { display: none !important; }
          .print\\:block { display: block !important; }
        }
        /* 스크롤바 숨기기 (깔끔한 UI용) */
        .overflow-y-auto::-webkit-scrollbar { width: 0px; background: transparent; }
      `}} />
    </div>
  );
};

export default App;