/* Shared Import Demo Data behavior for admin/system-maintenance and v2 dashboard
 * - Attaches to buttons with IDs: #importDemoData, #importDemoDataQuickBtn and #importDemoDataV2
 * - Shows a big confirmation overlay with reset instructions
 * - Displays full-screen spinner while importing to block all user interaction
 * - Uses optional status/result elements when present (#demoImportStatus, #demoImportResults, #demoImportResultsList)
 */
(function ($) {
  // Inject shared styles once
  function injectStyles() {
    if ($("#demo-import-styles").length === 0) {
      $("head").append(`
        <style id="demo-import-styles">
          body.demo-import-open {
            overflow: hidden;
          }
          .demo-import-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.85);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            z-index: 99999;
          }
          .demo-import-overlay.show {
            display: flex !important;
          }
          .demo-import-overlay.confirm {
            z-index: 99999;
          }
          .demo-import-overlay.spinner {
            z-index: 100000;
          }
          .demo-import-confirm-modal {
            width: 100%;
            max-width: 700px;
            position: relative;
            z-index: 100001;
          }
          .demo-import-confirm-content {
            background: white;
            padding: 60px;
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
            max-height: 90vh;
            overflow-y: auto;
            animation: slideIn 0.3s ease-out;
          }
          @keyframes slideIn {
            from {
              transform: translateY(-20px) scale(0.95);
              opacity: 0;
            }
            to {
              transform: translateY(0) scale(1);
              opacity: 1;
            }
          }
          .demo-import-confirm-content h2 {
            font-size: 36px;
            font-weight: 700;
            color: #222;
            margin-bottom: 28px;
            display: flex;
            align-items: center;
            gap: 12px;
          }
          .demo-import-confirm-content h2 i {
            color: #27ae60;
          }
          .demo-import-confirm-content .alert {
            font-size: 16px;
            padding: 18px;
            margin-bottom: 28px;
            border-radius: 6px;
            font-weight: 500;
          }
          .demo-import-confirm-content h4 {
            font-size: 18px;
            font-weight: 700;
            color: #333;
            margin-top: 0;
            margin-bottom: 18px;
          }
          .demo-import-confirm-content p {
            font-size: 15px;
            line-height: 1.7;
            color: #555;
            margin-bottom: 16px;
          }
          .demo-import-instructions {
            background: #fafafa;
            padding: 24px;
            border-radius: 8px;
            border-left: 5px solid #ffc107;
            margin-bottom: 32px;
          }
          .demo-import-instructions p:last-child {
            margin-bottom: 0;
          }
          .demo-import-options {
            margin-bottom: 28px;
            background: #f5f5f5;
            padding: 20px;
            border-radius: 8px;
          }
          .demo-import-options h4 {
            margin-top: 0;
          }
          .demo-import-options .form-check {
            text-align: left;
            padding-left: 0;
            margin-bottom: 14px;
            display: block;
          }
          .demo-import-options .form-check:last-child {
            margin-bottom: 0;
          }
          .demo-import-options .form-check-input {
            cursor: pointer;
            width: 22px;
            height: 22px;
            margin-right: 12px;
            margin-top: 0;
            vertical-align: middle;
            position: relative;
            top: 1px;
            accent-color: #27ae60;
          }
          .demo-import-options .form-check-label {
            user-select: none;
            cursor: pointer;
            margin-bottom: 0;
            font-size: 15px;
            line-height: 1.6;
            display: inline;
            margin-left: 4px;
            color: #444;
          }
          .demo-import-buttons {
            display: flex;
            gap: 16px;
            margin-top: 40px;
          }
          .demo-import-buttons .btn {
            flex: 1;
            padding: 16px 24px;
            font-size: 16px;
            font-weight: 700;
            border-radius: 6px;
            border: none;
            transition: all 0.2s ease;
          }
          .demo-import-buttons .btn-success {
            background-color: #27ae60;
            color: white;
          }
          .demo-import-buttons .btn-success:hover {
            background-color: #229954;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
          }
          .demo-import-buttons .btn-secondary {
            background-color: #95a5a6;
            color: white;
          }
          .demo-import-buttons .btn-secondary:hover {
            background-color: #7f8c8d;
            transform: translateY(-2px);
          }
          .demo-import-spinner {
            text-align: center;
            position: relative;
            z-index: 100001;
          }
          .demo-import-spinner .spinner-border {
            width: 80px;
            height: 80px;
            border-width: 6px;
            margin-bottom: 24px;
            animation: spin 1s linear infinite;
          }
          @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
          }
          .demo-import-spinner h3 {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 12px;
          }
          .demo-import-spinner p {
            font-size: 16px;
            opacity: 0.9;
          }
        </style>
      `);
    }
  }

  // Create and inject confirmation overlay HTML if not already present
  function ensureConfirmOverlay() {
    if ($("#demoImportConfirmOverlay").length === 0) {
      injectStyles();
      $("body").append(`
        <div id="demoImportConfirmOverlay" class="demo-import-overlay confirm" style="display: none;">
          <div class="demo-import-confirm-modal">
            <div class="demo-import-confirm-content">
              <h2 class="mb-4">
                <i class="fa fa-users mr-2 text-success"></i>
                ${i18next.t("Import Demo Data")}
              </h2>
              
              <div class="alert alert-info mb-4">
                <strong>This will add sample families, people, and groups to your database.</strong>
              </div>

              <div class="demo-import-options mb-4">
                <h4 class="mb-3">${i18next.t("Optional Data to Include")}</h4>
                <div class="form-check mb-2">
                  <input type="checkbox" class="form-check-input" id="includeDemoFinancial" checked>
                  <label class="form-check-label" for="includeDemoFinancial">
                    ${i18next.t("Include financial data (donation funds, pledges)")}
                  </label>
                </div>
                <div class="form-check mb-2">
                  <input type="checkbox" class="form-check-input" id="includeDemoEvents" disabled>
                  <label class="form-check-label text-muted" for="includeDemoEvents">
                    ${i18next.t("Include events and calendars")} <span class="text-muted small">(${i18next.t("Coming soon")})</span>
                  </label>
                </div>
                <div class="form-check">
                  <input type="checkbox" class="form-check-input" id="includeDemoSundaySchool" checked>
                  <label class="form-check-label" for="includeDemoSundaySchool">
                    ${i18next.t("Include Sunday School classes and enrollments")}
                  </label>
                </div>
              </div>

              <div class="demo-import-instructions mb-4">
                <h4 class="mb-3">${i18next.t("Need to remove this data later?")}</h4>
                <p>After importing, you can visit the <strong>Admin Dashboard</strong> and click the <strong>Reset Database</strong> button to clear all data and start fresh. Your application configuration will be preserved.</p>
              </div>

              <div class="demo-import-buttons">
                <button type="button" class="btn btn-success" id="demoImportConfirmBtn">
                  <i class="fa fa-users mr-2"></i>${i18next.t("Import Demo Data")}
                </button>
                <button type="button" class="btn btn-secondary" id="demoImportCancelBtn">
                  ${i18next.t("Cancel")}
                </button>
              </div>
            </div>
          </div>
        </div>
      `);
    }
  }

  // Create and inject loading spinner overlay
  function ensureSpinnerOverlay() {
    if ($("#demoImportSpinnerOverlay").length === 0) {
      injectStyles();
      $("body").append(`
        <div id="demoImportSpinnerOverlay" class="demo-import-overlay spinner" style="display: none;">
          <div class="demo-import-spinner">
            <div class="spinner-border text-primary mb-3" role="status" style="width: 60px; height: 60px;">
              <span class="sr-only">Loading...</span>
            </div>
            <h3 class="text-white mb-0">Importing demo data...</h3>
            <p class="text-white-50 mt-2">Please do not refresh or navigate away</p>
          </div>
        </div>
      `);
    }
  }

  function showConfirmOverlay() {
    ensureConfirmOverlay();
    $("body").addClass("demo-import-open");
    $("#demoImportConfirmOverlay").addClass("show");
  }

  function hideConfirmOverlay() {
    $("body").removeClass("demo-import-open");
    $("#demoImportConfirmOverlay").removeClass("show");
  }

  function showSpinnerOverlay() {
    ensureSpinnerOverlay();
    $("#demoImportSpinnerOverlay").addClass("show");
  }

  function hideSpinnerOverlay() {
    $("body").removeClass("demo-import-open");
    $("#demoImportSpinnerOverlay").removeClass("show");
  }

  // Track if we're in force import mode
  var forceImportMode = false;

  function doImport($button, includeFinancial, includeEvents, includeSundaySchool, forceImport) {
    var $status = $("#demoImportStatus");
    var $results = $("#demoImportResults");
    var $resultsList = $("#demoImportResultsList");

    hideConfirmOverlay();
    showSpinnerOverlay();

    if ($status.length) {
      $status.show();
    }
    if ($results.length) {
      $results.hide();
    }

    $button.prop("disabled", true);

    window.CRM.AdminAPIRequest({
      path: "demo/load",
      method: "POST",
      data: JSON.stringify({
        includeFinancial: includeFinancial,
        includeEvents: includeEvents,
        includeSundaySchool: includeSundaySchool,
        force: forceImport || false,
      }),
    })
      .done(function (data) {
        hideSpinnerOverlay();

        if ($status.length) {
          $status.hide();
        }
        $button.prop("disabled", false);

        if (data && data.success) {
          // Reset force import mode on success
          forceImportMode = false;
          resetImportButton();

          if ($resultsList.length) {
            $resultsList.empty();
            var imported = data.imported || {};
            for (var key in imported) {
              if (Object.prototype.hasOwnProperty.call(imported, key) && imported[key] > 0) {
                var label = key.replace(/_/g, " ").replace(/\b\w/g, function (l) {
                  return l.toUpperCase();
                });
                $resultsList.append("<li>" + label + ": <strong>" + imported[key] + "</strong></li>");
              }
            }
            if (data.warnings && data.warnings.length > 0) {
              $resultsList.append(
                '<li class="text-warning">' + i18next.t("Warnings") + ": " + data.warnings.length + "</li>",
              );
            }
            $results.show();
          }

          window.CRM.notify(i18next.t("Demo data imported successfully"), { type: "success", delay: 3000 });
        } else {
          // Enable force import mode on failure
          forceImportMode = true;

          var errorMsg = data && data.message ? data.message : i18next.t("Unknown error");

          // Update button to Force Import and show overlay again with error
          setForceImportButton(errorMsg);
          showConfirmOverlay();
        }
      })
      .fail(function (xhr) {
        hideSpinnerOverlay();

        if ($status.length) {
          $status.hide();
        }
        $button.prop("disabled", false);

        // Enable force import mode on error
        forceImportMode = true;

        var errorMessage = i18next.t("An error occurred during demo data import");
        if (xhr && xhr.responseJSON && xhr.responseJSON.message) {
          errorMessage = xhr.responseJSON.message;
        } else if (xhr && xhr.status) {
          errorMessage = i18next.t("Server error") + " (" + xhr.status + ")";
        }

        // Update button to Force Import and show overlay again with error
        setForceImportButton(errorMessage);
        showConfirmOverlay();
      });
  }

  function setForceImportButton(errorMessage) {
    // Remove existing warning if any
    $("#demoImportWarning").remove();

    // Show inline warning message with specific error - better readability
    var warningHtml =
      '<div id="demoImportWarning" class="alert alert-danger mb-4" style="border-left: 4px solid #dc3545; padding: 16px;">' +
      '<div style="font-weight: 600; font-size: 15px; margin-bottom: 8px; color: #721c24;">' +
      '<i class="fa fa-exclamation-circle mr-2"></i>' +
      i18next.t("Import failed") +
      "</div>" +
      '<div style="font-size: 14px; color: #495057; margin-bottom: 12px; line-height: 1.5;">' +
      (errorMessage || i18next.t("Unknown error")) +
      "</div>" +
      '<div style="font-size: 13px; color: #856404; background: #fff3cd; padding: 10px 12px; border-radius: 4px; border: 1px solid #ffeeba;">' +
      '<i class="fa fa-info-circle mr-1"></i>' +
      i18next.t("Force Import will retry and may create duplicate data.") +
      "</div></div>";
    $(".demo-import-options").before(warningHtml);

    $("#demoImportConfirmBtn")
      .removeClass("btn-success")
      .addClass("btn-danger")
      .html('<i class="fa fa-exclamation-triangle mr-2"></i>' + i18next.t("Force Import"));
  }

  function resetImportButton() {
    $("#demoImportWarning").remove();
    $("#demoImportConfirmBtn")
      .removeClass("btn-danger")
      .addClass("btn-success")
      .html('<i class="fa fa-users mr-2"></i>' + i18next.t("Import Demo Data"));
  }

  function attachHandlers() {
    var selectors = ["#importDemoData", "#importDemoDataQuickBtn", "#importDemoDataV2"];
    selectors.forEach(function (sel) {
      var $btn = $(sel);
      if ($btn.length) {
        $btn.off("click").on("click", function (e) {
          e.preventDefault();
          console.log("Import button clicked, showing confirmation overlay");
          showConfirmOverlay();
        });
      }
    });

    // Attach confirm button handler
    $(document)
      .off("click", "#demoImportConfirmBtn")
      .on("click", "#demoImportConfirmBtn", function (e) {
        e.preventDefault();
        console.log("Confirm button clicked, starting import");
        var includeFinancial = $("#includeDemoFinancial").is(":checked");
        var includeEvents = $("#includeDemoEvents").is(":checked");
        var includeSundaySchool = $("#includeDemoSundaySchool").is(":checked");
        var $btn = $("#importDemoData, #importDemoDataQuickBtn, #importDemoDataV2").first();

        // Pass forceImport flag based on current mode
        doImport($btn, includeFinancial, includeEvents, includeSundaySchool, forceImportMode);
      });

    // Attach cancel button handler
    $(document)
      .off("click", "#demoImportCancelBtn")
      .on("click", "#demoImportCancelBtn", function (e) {
        e.preventDefault();
        console.log("Cancel button clicked");
        hideConfirmOverlay();
      });
  }

  $(document).ready(function () {
    if (window.CRM && typeof window.CRM.onLocalesReady === "function") {
      window.CRM.onLocalesReady(function () {
        attachHandlers();
      });
    } else {
      attachHandlers();
    }
  });
})(jQuery);
