/**
 * MEM Connector — Admin JavaScript
 *
 * Handles disconnect flow and UI interactions on the
 * MEM Connector settings page.
 *
 * @package Mem_Connector
 * @since   1.0.0
 */

/* global jQuery, memwcConnector */

(function ($) {
  "use strict";

  var MEM = {
    init: function () {
      $("#mem-disconnect-btn").on("click", MEM.handleDisconnect);

      // Image lightbox — click to preview step images.
      $(".mem-step-img-clickable:not(.is-missing)").on("click", function () {
        var $img = $(this).find("img");
        if ($img.length && $img.is(":visible")) {
          MEM.openLightbox($img.attr("src"), $img.attr("alt"));
        }
      });

      // Close lightbox on backdrop, close button, or Escape key.
      $(
        "#mem-lightbox .mem-lightbox-backdrop, #mem-lightbox .mem-lightbox-close"
      ).on("click", MEM.closeLightbox);
      $(document).on("keydown", function (e) {
        if (e.key === "Escape" && $("#mem-lightbox").is(":visible")) {
          MEM.closeLightbox();
        }
      });
    },

    handleDisconnect: function () {
      if (!window.confirm(memwcConnector.i18n.confirmDisconnect)) {
        return;
      }

      var $btn = $("#mem-disconnect-btn");

      $btn
        .prop("disabled", true)
        .html(
          '<span class="mem-spinner"></span><span class="mem-btn-label">' +
            memwcConnector.i18n.disconnecting +
            "</span>"
        );

      MEM.hideNotice();

      $.ajax({
        url: memwcConnector.ajaxUrl,
        type: "POST",
        data: {
          action: "memwc_disconnect_store",
          nonce: memwcConnector.disconnectNonce,
        },
        success: function (response) {
          if (response.success) {
            MEM.showNotice(response.data.message, "success");
            setTimeout(function () {
              window.location.reload();
            }, 1200);
          } else {
            var msg =
              response.data && response.data.message
                ? response.data.message
                : memwcConnector.i18n.error;
            MEM.showNotice(msg, "error");
            MEM.resetDisconnectButton();
          }
        },
        error: function () {
          MEM.showNotice(memwcConnector.i18n.error, "error");
          MEM.resetDisconnectButton();
        },
      });
    },

    showNotice: function (message, type) {
      var $notice = $("#mem-connector-notice");
      $notice
        .removeClass("mem-notice-success mem-notice-error")
        .addClass("mem-notice-" + type)
        .css("display", "flex")
        .hide()
        .slideDown(250);

      $notice.find(".mem-notice-text").text(message);
    },

    hideNotice: function () {
      $("#mem-connector-notice").slideUp(200);
    },

    resetDisconnectButton: function () {
      $("#mem-disconnect-btn")
        .prop("disabled", false)
        .html(
          '<span class="dashicons dashicons-dismiss"></span>' +
            '<span class="mem-btn-label">' +
            (memwcConnector.i18n.disconnectLabel || "Disconnect Store") +
            "</span>"
        );
    },

    openLightbox: function (src, alt) {
      $("#mem-lightbox-img")
        .attr("src", src)
        .attr("alt", alt || "");
      $("#mem-lightbox").fadeIn(200);
      $("body").css("overflow", "hidden");
    },

    closeLightbox: function () {
      $("#mem-lightbox").fadeOut(200, function () {
        $("#mem-lightbox-img").attr("src", "");
      });
      $("body").css("overflow", "");
    },
  };

  $(document).ready(MEM.init);
})(jQuery);
