function showProblem() {
  const problemEl = document.getElementById("problem");
  const stepsEl = document.getElementById("equation");

  const formatted = formatMath(problemData.problem);
  problemEl.innerHTML = `\\(${formatted}\\)`;
  stepsEl.innerHTML = "";

  MathJax.typesetPromise();
}

function showStep() {
  if (stepIndex >= problemData.steps.length) {
    setTimeout(requestNextProblem, 3000);
    return;
  }

  const eqEl = document.getElementById("equation");
  const expEl = document.getElementById("explanation");

  const step = problemData.steps[stepIndex];

  expEl.innerHTML = step.step;

  // STEP 1: fade out
  eqEl.classList.remove("fade-in");
  eqEl.classList.add("fade-out");

  setTimeout(() => {
    // STEP 2: update content
    eqEl.innerHTML = `\\(${formatMath(step.after)}\\)`;
    MathJax.typesetPromise();

    // STEP 3: force reflow (CRUCIAL)
    void eqEl.offsetWidth;

    // STEP 4: fade back in
    eqEl.classList.remove("fade-out");
    eqEl.classList.add("fade-in");

    stepIndex++;

    setTimeout(showStep, 2000);
  }, 500);
}
  
function startSteps() {
  stepIndex = 0;
  showStep();
}

function startSequence() {
  setTimeout(() => {
    showNextStep();
  }, 3000); // thinking time
}

function showNextStep() {
  const stepsEl = document.getElementById("steps");

  if (stepIndex >= problemData.steps.length) {
    // finished → request next problem
    setTimeout(() => {
      requestNextProblem();
    }, 3000);

    return;
  }

  const s = problemData.steps[stepIndex];
  const formatted_step_before = formatMath(s.before);
  const formatted_step_after = formatMath(s.after);

  const html = `
    <hr/>
    <div class="step">
      <div>\\(${formatted_step_before}\\)</div>
      <div>${s.step}</div>
      <div>\\(${formatted_step_after}\\)</div>
    </div>
  `;

  stepsEl.innerHTML = html;

  MathJax.typesetPromise();

  stepIndex++;

  setTimeout(showNextStep, 2000); // time between steps
}

function formatMath(str) {
  return str
    .replace(/\*\*/g, "^")												// Exponent Fix
    .replace(/(\d+)\s*\*\s*x/g, "$1x")  								// 4*x -> 4x
    .replace(/x\s*\*\s*(\d+)/g, "$1x")  								// x*4 -> 4x
    .replace(/\b1x\b/g, "x")											// 1x -> x
    .replace(/(\d+)\s*\*\s*\(/g, "$1(") 								// 4*( -> 4(
    .replace(/\)\s*\*\s*\(/g, ")(")     								// )*( -> )(
    .replace(/x\s*\*\s*\(/g, "x(")										// x*( -> x(
	
	    // FRACTIONS (order matters!)
    .replace(/\(([^()]+)\)\s*\/\s*\(([^()]+)\)/g, "\\frac{$1}{$2}")
    .replace(/\(([^()]+)\)\s*\/\s*([a-zA-Z0-9]+)/g, "\\frac{$1}{$2}")
    .replace(/([a-zA-Z0-9]+)\s*\/\s*\(([^()]+)\)/g, "\\frac{$1}{$2}")
    .replace(/([a-zA-Z0-9]+)\s*\/\s*([a-zA-Z0-9]+)/g, "\\frac{$1}{$2}");
}