// Quiz / flashcards screen
const QuizScreen = ({ onNavigate, onComplete, tweaks }) => {
  const { QUIZ_BANK } = window.COPTIC_DATA;
  const [idx, setIdx] = React.useState(0);
  const [picked, setPicked] = React.useState(null);
  const [score, setScore] = React.useState(0);
  const [done, setDone] = React.useState(false);
  const [revealed, setRevealed] = React.useState(false);

  const q = QUIZ_BANK[idx];
  const total = QUIZ_BANK.length;

  const onPick = (i) => {
    if (revealed) return;
    setPicked(i);
    setRevealed(true);
    if (i === q.correct) setScore(s => s + 1);
  };

  const onNext = () => {
    if (idx + 1 >= total) {
      setDone(true);
      onComplete && onComplete();
    } else {
      setIdx(idx + 1);
      setPicked(null);
      setRevealed(false);
    }
  };

  if (done) {
    const pct = Math.round((score / total) * 100);
    return (
      <div className="screen quiz-screen">
        <div className="quiz-result">
          <div className="quiz-result-glyph">
            {pct >= 80 ? <Icon name="trophy" size={64} /> : pct >= 50 ? <Icon name="star" size={64} /> : <Icon name="cross" size={64} />}
          </div>
          <div className="quiz-result-title">
            {pct >= 80 ? 'Excellent service' : pct >= 50 ? 'Good progress' : 'Keep studying'}
          </div>
          <div className="quiz-result-score">{score}/{total}</div>
          <div className="quiz-result-pct">{pct}% correct</div>
          <div className="quiz-result-actions">
            <button className="btn-secondary" onClick={() => onNavigate('today')}>Back home</button>
            <button className="btn-primary" onClick={() => { setIdx(0); setScore(0); setDone(false); setPicked(null); setRevealed(false); }}>
              Try again
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="screen quiz-screen">
      <div className="quiz-head">
        <button className="icon-btn" onClick={() => onNavigate('today')}><Icon name="x" size={22} /></button>
        <div className="quiz-progress">
          {QUIZ_BANK.map((_, i) => (
            <div key={i} className={`qp-pip ${i < idx ? 'done' : ''} ${i === idx ? 'active' : ''}`} />
          ))}
        </div>
        <div className="quiz-streak"><Icon name="flame" size={16} /> {score}</div>
      </div>

      <div className="quiz-body">
        <div className="quiz-eyebrow">{q.type === 'audio' ? 'Listen and identify' : q.type === 'fill-blank' ? 'Complete the phrase' : 'Multiple choice'}</div>
        <div className="quiz-prompt">{q.prompt}</div>

        {q.coptic && (
          <div className="quiz-coptic-display">{q.coptic}</div>
        )}
        {q.type === 'audio' && (
          <button className="quiz-audio">
            <Icon name="play" size={32} />
            <div className="quiz-audio-wave">
              {[...Array(24)].map((_, i) => (
                <div key={i} className="quiz-wave-bar" style={{ animationDelay: `${i * 0.06}s` }} />
              ))}
            </div>
          </button>
        )}

        <div className="quiz-options">
          {q.options.map((opt, i) => {
            const state =
              !revealed ? '' :
              i === q.correct ? 'correct' :
              i === picked ? 'wrong' : 'dim';
            return (
              <button
                key={i}
                className={`quiz-option ${state}`}
                onClick={() => onPick(i)}
                disabled={revealed}
              >
                <div className="qo-letter">{String.fromCharCode(65 + i)}</div>
                <div className="qo-text">{opt}</div>
                {revealed && i === q.correct && <Icon name="check-circle" size={20} />}
                {revealed && i === picked && i !== q.correct && <Icon name="x" size={20} />}
              </button>
            );
          })}
        </div>

        {revealed && (
          <div className={`quiz-explain ${picked === q.correct ? 'right' : 'wrong'}`}>
            <div className="qe-title">
              {picked === q.correct ? <><Icon name="check-circle" size={18} /> Correct</> : <><Icon name="x" size={18} /> Not quite</>}
            </div>
            <div className="qe-text">{q.explain}</div>
          </div>
        )}
      </div>

      <div className="quiz-footer">
        {revealed && <button className="btn-primary lg" onClick={onNext}>{idx + 1 >= total ? 'See results' : 'Continue'} <Icon name="arrow-r" size={18} /></button>}
      </div>
    </div>
  );
};

window.QuizScreen = QuizScreen;