p = 'frontend/src/pages/ResultsPage.jsx'
s = open(p).read()

s = s.replace("import QuestionReadingLinks from '../components/QuestionReadingLinks'",
              "import QuestionReadingLinks from '../components/QuestionReadingLinks'\nimport RichText from '../components/RichText'")

# 1. The stem, through the renderer the study page uses.
s = s.replace('''              <div className="quiz-stem" role="heading" aria-level={3}>{ans.question_text}</div>''',
'''              {/* Through the renderer, not as plain text. A stem carrying a
                  table of lab values reached this page as a run of pipes —
                  "| Test | Result | |---|---| | Glucose | 139 mg/dL" — while
                  the study page drew the same stem as a table. Review is the
                  same reading with the answers filled in; it cannot render
                  the question differently. */}
              <div className="quiz-stem" role="heading" aria-level={3}>
                <RichText value={ans.question_text} attemptId={id} />
              </div>''')

# 2. Options behave like study after reveal: every explanation open, one
#    coloured band, the learner's own pick named.
s = s.replace('''                    return (
                      <div key={i}
                        className={`option${isCorrect ? ' correct' : ''}${isUser && !isCorrect ? ' incorrect' : ''}${isUser ? ' selected' : ''}`}>
                        <span className="option-letter">{optionLetter(i)}</span>
                        <span className="option-text">
                          {opt}
                          {responseStats?.sample_size > 0 && stat && (
                            <span className="quiz-response-stat">
                              <span className="quiz-response-track">
                                <span style={{ width: `${stat.percentage}%` }} />
                              </span>
                              <span>{stat.percentage}%</span>
                              <span>{stat.count}/{responseStats.sample_size}</span>
                            </span>
                          )}
                        </span>
                        {isCorrect && <span className="option-status option-status-correct">
                          {isUser ? '✓ Your answer' : '✓ Correct answer'}</span>}
                        {isUser && !isCorrect && <span className="option-status option-status-wrong">✗ Your answer</span>}
                      </div>
                    )''',
'''                    const why = ans.option_explanations?.[opt]
                    return (
                      /* The same row the study page draws after the answer is
                         shown: every option in its own colour with its reason
                         under it, wrong meaning every option that is not the
                         answer. Reviewing is study with the answers already
                         given, so it must not be a quieter, flatter screen. */
                      <div key={i} className={`option-row${isCorrect ? ' is-correct' : ' is-wrong'}${why ? ' has-why' : ''}`}>
                        <div
                          className={`option${isCorrect ? ' correct' : ' incorrect'}${isUser ? ' selected' : ''}`}>
                          <span className="option-letter">{optionLetter(i)}</span>
                          <span className="option-text">
                            <RichText value={opt} className="rich-inline" />
                            {responseStats?.sample_size > 0 && stat && (
                              <span className="quiz-response-stat">
                                <span className="quiz-response-track">
                                  <span style={{ width: `${stat.percentage}%` }} />
                                </span>
                                {/* The share who chose it, and not how many
                                    people that was: a count of other learners
                                    is a number about them, not about this
                                    question. */}
                                <span>{stat.percentage}%</span>
                              </span>
                            )}
                          </span>
                          {isCorrect && <span className="option-status option-status-correct">
                            {isUser ? '✓ Your answer' : '✓ Correct answer'}</span>}
                          {isUser && !isCorrect && <span className="option-status option-status-wrong">✗ Your answer</span>}
                        </div>
                        {why && (
                          <div className="quiz-option-explanation">
                            <RichText value={why} className="rich-inline" linkArticles previewLinks={false} />
                          </div>
                        )}
                      </div>
                    )''')

# 3. No self-score anywhere in review.
s = s.replace('''              <small>{correct}/{total}</small>
              <span className="quiz-drawer-bar" aria-hidden="true">
                <span style={{ width: `${total ? (correct / total) * 100 : 0}%` }} />
              </span>''',
'''              {/* No score in review. The user: "It shouldn't show you 1/1 or
                  100%." Reviewing is for reading what you got wrong and why,
                  and a running mark at the top of it turns that into a
                  report card. The analysis page is where a score belongs. */}''')

s = s.replace('''          <div className="quiz-rail-tally">
            <span className="is-correct">{answers.filter(a => a.is_correct).length} correct</span>
            <span className="is-wrong">{answers.filter(a => !a.is_correct && a.user_answer).length} incorrect</span>
            <span className="is-skipped">{answers.filter(a => !a.user_answer).length} skipped</span>
          </div>
''', '')
open(p, 'w').write(s)
print('written')