function runSimulation() {
  const grammar = document.getElementById("grammar").value;
  const inputString = document.getElementById("inputString").value;

  fetch("/simulate", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      grammar: grammar,
      input: inputString
    })
  })
  .then(res => res.json())
  .then(data => {
    if (!data.success) {
      alert(data.message);
      return;
    }

    document.getElementById("resultBox").style.display = "block";
    document.getElementById("startSymbol").innerText = data.start_symbol;
    document.getElementById("showInput").innerText = data.input;
    document.getElementById("finalResult").innerText = data.final_result;

    const grammarList = document.getElementById("grammarList");
    grammarList.innerHTML = "";
    data.grammar.forEach(rule => {
      const li = document.createElement("li");
      li.innerText = rule;
      grammarList.appendChild(li);
    });

    const exploredList = document.getElementById("exploredList");
    exploredList.innerHTML = "";
    data.explored.forEach(step => {
      const li = document.createElement("li");
      li.innerText = step;
      exploredList.appendChild(li);
    });

    const derivationContainer = document.getElementById("derivationContainer");
    derivationContainer.innerHTML = "";

    if (data.derivations.length === 0) {
      derivationContainer.innerHTML = "<p>No valid derivation found.</p>";
    } else {
      data.derivations.forEach((derivation, index) => {
        const box = document.createElement("div");
        box.className = "derivation-box";

        let html = `<h4>Derivation ${index + 1}</h4>`;
        derivation.forEach(step => {
          html += `<div class="step">${step}</div>`;
        });

        box.innerHTML = html;
        derivationContainer.appendChild(box);
      });
    }

    const treeContainer = document.getElementById("treeContainer");
    treeContainer.innerHTML = "";

    if (data.trees.length === 0) {
      treeContainer.innerHTML = "<p>No parse tree available.</p>";
    } else {
      data.trees.forEach((tree, index) => {
        const box = document.createElement("div");
        box.className = "tree-box";

        let html = `<h4>Parse Tree ${index + 1}</h4>`;
        tree.steps.forEach((step, i) => {
          html += `<div class="step">Level ${i}: ${step}</div>`;
        });

        box.innerHTML = html;
        treeContainer.appendChild(box);
      });
    }

    document.getElementById("resultBox").scrollIntoView({
      behavior: "smooth"
    });
  })
  .catch(err => {
    console.error(err);
    alert("Something went wrong.");
  });
}