/* Game demo — mirrors the real Quiz.jsx UI from uasa-v2 repo exactly
   (subject crumb, timer pill, coin pill, mint progress bar, MCQ A/B/C/D, mint=correct, coral=wrong, +5 coin pop, feedback card) */

const { useState, useEffect, useRef } = React;

const QUESTIONS = [
  {
    subject: 'MATEMATIK', year: 4,
    q: 'Berapakah hasil tambah 248 + 156?',
    options: ['394', '404', '414', '384'],
    correct: 1,
    explain: '248 + 156 = 404. Tambah sa: 8+6=14. Tambah puluh: 4+5+1=10. Tambah ratus: 2+1+1=4.',
  },
  {
    subject: 'SAINS', year: 4,
    q: 'Bahagian tumbuhan yang membuat makanan?',
    options: ['Akar', 'Batang', 'Daun', 'Bunga'],
    correct: 2,
    explain: 'Daun membuat makanan melalui proses fotosintesis dengan bantuan cahaya matahari.',
  },
  {
    subject: 'BAHASA MELAYU', year: 4,
    q: 'Apakah maksud "rajin bagai semut"?',
    options: ['Sangat malas', 'Sangat rajin', 'Sangat lemah', 'Sangat kecil'],
    correct: 1,
    explain: 'Simpulan bahasa "rajin bagai semut" bermaksud sangat rajin bekerja.',
  },
  {
    subject: 'ENGLISH', year: 4,
    q: 'Choose the correct sentence:',
    options: ['She go to school', 'She goes to school', 'She going to school', 'She gone to school'],
    correct: 1,
    explain: 'For singular subjects (he/she/it), we add "-s" to the verb in simple present tense.',
  },
  {
    subject: 'SEJARAH', year: 4,
    q: 'Bilakah negara kita mencapai kemerdekaan?',
    options: ['31 Ogos 1957', '16 September 1963', '31 Ogos 1963', '16 September 1957'],
    correct: 0,
    explain: 'Tanah Melayu mencapai kemerdekaan pada 31 Ogos 1957 di Stadium Merdeka.',
  },
];

function GameDemo({ autoplay = false, onWin }) {
  const [qIndex, setQIndex] = useState(0);
  const [selected, setSelected] = useState(null);
  const [revealed, setRevealed] = useState(false);
  const [score, setScore] = useState(0);
  const [coins, setCoins] = useState(125);
  const [streak, setStreak] = useState(0);
  const [maxStreak, setMaxStreak] = useState(0);
  const [timeLeft, setTimeLeft] = useState(90);
  const [coinPop, setCoinPop] = useState(false);
  const [done, setDone] = useState(false);
  const timerRef = useRef(null);
  const autoplayRef = useRef(null);

  const current = QUESTIONS[qIndex];
  const totalQ = QUESTIONS.length;
  const progressPct = (qIndex / totalQ) * 100;
  const isCorrect = revealed && selected === current.correct;

  // Timer
  useEffect(() => {
    if (revealed || done) return;
    if (timeLeft <= 0) return;
    timerRef.current = setTimeout(() => setTimeLeft(t => t - 1), 1000);
    return () => clearTimeout(timerRef.current);
  }, [timeLeft, revealed, done]);

  // Autoplay loop
  useEffect(() => {
    if (!autoplay || done) return;
    autoplayRef.current = setTimeout(() => {
      if (!revealed) {
        handleAnswer(current.correct);
      } else {
        handleNext();
      }
    }, revealed ? 1600 : 1900);
    return () => clearTimeout(autoplayRef.current);
    // eslint-disable-next-line
  }, [qIndex, revealed, done, autoplay]);

  function handleAnswer(i) {
    if (revealed || done) return;
    setSelected(i);
    setRevealed(true);
    if (i === current.correct) {
      setScore(s => s + 10);
      setCoins(c => c + 5);
      setStreak(s => {
        const next = s + 1;
        setMaxStreak(m => Math.max(m, next));
        return next;
      });
      setCoinPop(true);
      setTimeout(() => setCoinPop(false), 1200);
    } else {
      setStreak(0);
    }
  }

  function handleNext() {
    const next = qIndex + 1;
    if (next >= totalQ) {
      setDone(true);
      onWin && onWin();
    } else {
      setQIndex(next);
      setSelected(null);
      setRevealed(false);
      setTimeLeft(90);
    }
  }

  function reset() {
    setQIndex(0); setSelected(null); setRevealed(false);
    setScore(0); setCoins(125); setStreak(0); setMaxStreak(0);
    setTimeLeft(90); setDone(false);
  }

  const fmt = (s) => {
    const m = Math.floor(s/60), r = s%60;
    return `${String(m).padStart(2,'0')}:${String(r).padStart(2,'0')}`;
  };

  return (
    <div className="game-demo">
      {/* Head */}
      <div className="gd-head">
        <div>
          <div className="gd-crumb">{current.subject} · TAHUN {current.year}</div>
          <div className="gd-title">Quiz</div>
        </div>
        <div className="gd-pills">
          <span className={'gd-pill' + (timeLeft <= 10 ? ' gd-pill--coral' : '')}>
            <span className="ico">⏱</span>{fmt(timeLeft)}
          </span>
          <span className="gd-pill gd-pill--sun">
            <span className="ico">🪙</span>+5
          </span>
        </div>
      </div>

      {/* Progress */}
      <div className="gd-progress">
        <div className="gd-progress-track">
          <div className="gd-progress-fill" style={{ width: progressPct + '%' }}></div>
        </div>
        <div className="gd-progress-label">{qIndex + 1} / {totalQ}</div>
      </div>

      {/* Question card */}
      <div className="gd-qcard">
        <div className="gd-qcard__prompt">PILIH JAWAPAN BETUL</div>
        <div className="gd-qcard__text">{current.q}</div>
      </div>

      {/* Options */}
      <div className="gd-options">
        {current.options.map((opt, i) => {
          let cls = 'gd-opt';
          if (revealed && i === current.correct) cls += ' correct';
          else if (revealed && i === selected && i !== current.correct) cls += ' wrong';
          else if (revealed) cls += ' disabled';
          return (
            <button key={i} className={cls} onClick={() => handleAnswer(i)} disabled={revealed}>
              <span className="gd-opt__letter">{String.fromCharCode(65 + i)}</span>
              <span className="gd-opt__text">{opt}</span>
            </button>
          );
        })}
      </div>

      {/* Feedback */}
      {revealed && (
        <div className={'gd-feedback' + (isCorrect ? '' : ' wrong')}>
          <div className="gd-feedback__ico">{isCorrect ? '✓' : '✕'}</div>
          <div style={{flex: 1, minWidth: 0}}>
            <div className="gd-feedback__title">
              {isCorrect ? 'Betul! +5 coin' : 'Hampir!'}
            </div>
            <div className="gd-feedback__sub">
              {isCorrect
                ? 'Bagus — teruskan!'
                : 'Jawapan: ' + String.fromCharCode(65 + current.correct) + ' — ' + current.options[current.correct]}
            </div>
          </div>
        </div>
      )}

      {/* Coin pop */}
      {coinPop && <div className="gd-coinpop">+5 🪙</div>}

      {/* Results overlay */}
      {done && (
        <div className="gd-win">
          <div className="gd-win__trophy">🏆</div>
          <h3>Cemerlang!</h3>
          <p>Anda dapat {score} markah</p>
          <div className="gd-win__stats">
            <div className="gd-win__stat">
              <div className="gd-win__stat-label">SCORE</div>
              <div className="gd-win__stat-value">{score}/{totalQ * 10}</div>
            </div>
            <div className="gd-win__stat sun">
              <div className="gd-win__stat-label">COINS</div>
              <div className="gd-win__stat-value">+{coins - 125}</div>
            </div>
            <div className="gd-win__stat coral">
              <div className="gd-win__stat-label">STREAK</div>
              <div className="gd-win__stat-value">{maxStreak}🔥</div>
            </div>
            <div className="gd-win__stat">
              <div className="gd-win__stat-label">GRADE</div>
              <div className="gd-win__stat-value">A+</div>
            </div>
          </div>
          {!autoplay && <button className="gd-win__replay" onClick={reset}>↻ Cuba Lagi</button>}
        </div>
      )}
    </div>
  );
}

window.GameDemo = GameDemo;