document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".run-btn").forEach((button) => {
    button.addEventListener("click", function () {
      let command = this.getAttribute("data-command");
      runCommand(this, command);
    });
  });
});

function runCommand(button, command) {
  const originalText = button.innerHTML;
  button.innerHTML =
    '<span class="spinner-border spinner-border-sm"></span> Running...';
  button.disabled = true;

  fetch("/run-command", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ command: command }),
  })
    .then((response) => response.json())
    .then((data) => {
      // Kiểm tra xem lệnh có chạy thành công không
      if (data.output) {
        showToast("Success", "success"); // Hiển thị thông báo "Success"
      } else {
        showToast("Error", "danger"); // Hiển thị thông báo "Error"
      }
    })
    .catch(() => {
      showToast("Error", "danger"); // Hiển thị "Error" nếu request thất bại
    })
    .finally(() => {
      button.innerHTML = originalText;
      button.disabled = false;
    });
}

// Hàm hiển thị Toast chỉ với "Success" hoặc "Error"
function showToast(status, type) {
  const toastContainer = document.getElementById("toastContainer");
  const toast = document.createElement("div");

  toast.className = `toast align-items-center text-bg-${type} border-0 show`;
  toast.role = "alert";
  toast.innerHTML = `<div class="toast-body text-center fw-bold">${status}</div>`;

  toastContainer.appendChild(toast);

  // Tự động ẩn sau 5 giây
  setTimeout(() => {
    toast.remove();
  }, 5000);
}