AB.clockTick = 100;
AB.maxSteps = 1000;

let buttonArea = { x: 100, y: 100, width: 200, height: 50 };
let forecastTriggered = false;

AB.world.newRun = function () {
  // Create button first
  const button = document.createElement("button");
  button.textContent = "Run Forecast";
  button.style.margin = "20px";
  button.style.fontSize = "16px";
  button.onclick = runForecast;
  document.body.appendChild(button);

  // Then initialize canvas below it
  ABWorld.init("white");
};


AB.world.nextStep = function () {};

AB.world.endRun = function () {};

function drawButton(label) {
  const ctx = ABWorld.getContext("2d");
  ctx.fillStyle = "lightblue";
  ctx.fillRect(buttonArea.x, buttonArea.y, buttonArea.width, buttonArea.height);
  ctx.strokeStyle = "black";
  ctx.strokeRect(buttonArea.x, buttonArea.y, buttonArea.width, buttonArea.height);
  ctx.fillStyle = "black";
  ctx.font = "20px Arial";
  ctx.fillText(label, buttonArea.x + 20, buttonArea.y + 30);
}

AB.mouseClick = function (x, y) {
  if (
    x >= buttonArea.x &&
    x <= buttonArea.x + buttonArea.width &&
    y >= buttonArea.y &&
    y <= buttonArea.y + buttonArea.height
  ) {
    runForecast();
  }
};

function runForecast() {
  const ctx = ABWorld.getContext("2d");
  ctx.fillStyle = "green";
  ctx.fillRect(150, 200, 200, 100);
  ctx.fillStyle = "white";
  ctx.font = "20px Arial";
  ctx.fillText("Forecast triggered", 160, 250);
}