// Copyright John Salguero All rights Reserved
function showProblem() {
  const problemEl = document.getElementById("problem");
  const mainEl = document.getElementById("equation-main");
  const nextEl = document.getElementById("equation-next");
  const expEl = document.getElementById("explanation");

  const formatted = formatMath(problemData.problem);

  // Set the top problem (static)
  problemEl.innerHTML = `\\(${formatted}\\)`;

  // Initialize the main equation (this is what evolves)
  mainEl.innerHTML = "";

  // Clear animation layer + explanation
  nextEl.innerHTML = "";
  nextEl.style.opacity = 0;

  expEl.innerHTML = "";

  MathJax.typesetPromise([problemEl, mainEl]);
}

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

  const mainEl = document.getElementById("equation-main");
  const nextEl = document.getElementById("equation-next");
  const expEl = document.getElementById("explanation");

  const step = problemData.steps[stepIndex];

  // 1. Start with the equation
  mainEl.innerHTML = `\\(${formatMath(step.before)}\\)`;
  MathJax.typesetPromise([mainEl]);
  mainEl.style.opacity = 1;
  nextEl.style.opacity = 0;

  setTimeout(() => {  
    // 2. Show explanation
    expEl.innerHTML = step.step;
    expEl.style.opacity = 1;
    
    // 3. Prepare next equation
    nextEl.innerHTML = `\\(${formatMath(step.after)}\\)`;
    nextEl.classList.remove("move-up");
    nextEl.style.opacity = 0;
    
    MathJax.typesetPromise([nextEl]);
    
    setTimeout(() => {
      // 3. Fade in next equation (below)
      nextEl.style.opacity = 1;
    
      setTimeout(() => {
        // 4. Fade out old and explanation
	    mainEl.style.opacity = 0;
	    expEl.style.opacity = 0;
      
        setTimeout(() => {
		  
		  // 5. Move up next equation
		  nextEl.classList.add("move-up");
		  
          // 5. Promote next → main
          mainEl.innerHTML = nextEl.innerHTML;
          MathJax.typesetPromise([mainEl]);
		  
          stepIndex++;
		  
          setTimeout(showStep, 1500);
        }, 1500); // Move up New Equation
      }, 3000); // Fade Out Explanation and old
	}, 1500); // Fade in Next Equation
  }, 1500); // Show Explanation
}
  
function startSteps() {
  stepIndex = 0;
  showStep();
}

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}");
}