jQuery(function ($) {
  const btn = $("#LUloadMore");
  const list = $("#LUlist");
  const spin = $("#LUspin");

  if (!btn.length) return;

  btn.on("click", function () {
    const catId = parseInt(btn.attr("data-cat"), 10);
    let page = parseInt(btn.attr("data-page"), 10);
    const max = parseInt(btn.attr("data-max"), 10);

    if (page >= max) return;

    page = page + 1;

    btn.addClass("is-loading").prop("disabled", true);
    spin.show();

    $.ajax({
      url: LU_AJAX.ajaxurl,
      type: "POST",
      dataType: "json",
      data: {
        action: "lu_load_more",
        nonce: LU_AJAX.nonce,
        cat_id: catId,
        page: page,
      },
      success: function (res) {
        if (res && res.success && res.data && res.data.html) {
          list.append(res.data.html);
          btn.attr("data-page", page);

          if (!res.data.has_more || page >= max) {
            btn.text("No More Posts").prop("disabled", true);
          } else {
            btn.prop("disabled", false);
          }
        } else {
          btn.prop("disabled", false);
          alert("Failed to load more posts.");
        }
      },
      error: function () {
        btn.prop("disabled", false);
        alert("AJAX error while loading posts.");
      },
      complete: function () {
        btn.removeClass("is-loading");
        spin.hide();
      },
    });
  });
});