/**
 * ChurchCRM Event Checkin JavaScript
 * Person check-in with dual search: person (child) + supervisor (adult)
 *
 * Uses Select2 AJAX following official documentation patterns:
 * https://select2.org/data-sources/ajax
 */

$(function () {
  // Initialize DataTable for already checked-in people
  if ($("#checkedinTable").length > 0) {
    $("#checkedinTable").DataTable(window.CRM.plugin.dataTable);
  }

  // Initialize all person search Select2 elements
  initializePersonSearchFields();
});

/**
 * Initialize Select2 on all person search fields
 * Called on document ready and can be called again if new fields are added dynamically
 */
function initializePersonSearchFields() {
  // Select2 AJAX configuration for person search
  // Following Select2 official documentation for AJAX data sources
  var personSearchConfig = {
    minimumInputLength: 2,
    language: window.CRM.shortLocale,
    allowClear: true,
    placeholder: "", // Will be overridden by data-placeholder attribute
    width: "100%",
    ajax: {
      // Use a URL function that returns the dynamic search URL
      // The API expects the search term in the URL path: /api/persons/search/{query}
      url: function (params) {
        return window.CRM.root + "/api/persons/search/" + encodeURIComponent(params.term);
      },
      dataType: "json",
      delay: 250,
      // The API returns results directly, no need to send additional query params
      data: function (_params) {
        return {}; // Empty object - search term is in URL
      },
      // Process the API response to match Select2's expected format
      // API returns: [{id: 1, objid: 123, text: "John Doe", uri: "..."}, ...]
      processResults: function (data) {
        return {
          results: data.map(function (person) {
            return {
              id: person.objid, // Select2 uses 'id' for the value
              text: person.text, // Select2 uses 'text' for display
              objid: person.objid, // Keep original for hidden field
              uri: person.uri, // Keep for linking
            };
          }),
        };
      },
      cache: true,
    },
    // Custom template for displaying results with better formatting
    templateResult: function (person) {
      if (person.loading) {
        return person.text;
      }
      return $("<span>").text(person.text);
    },
    // Template for selected item
    templateSelection: function (person) {
      return person.text || person.placeholder;
    },
  };

  // Initialize Select2 on all person search fields that haven't been initialized yet
  $(".person-search").each(function () {
    var $element = $(this);

    // Skip if already initialized
    if ($element.hasClass("select2-hidden-accessible")) {
      return;
    }

    var config = $.extend({}, personSearchConfig);

    // Use data-placeholder attribute if available
    if ($element.data("placeholder")) {
      config.placeholder = $element.data("placeholder");
    }

    $element.select2(config);
  });

  // Bind event handlers (use .off first to prevent duplicate bindings)
  bindPersonSearchEvents();
}

/**
 * Bind event handlers for person search fields
 */
function bindPersonSearchEvents() {
  // Handle person selection for child field - update hidden field and show details
  $("#child")
    .off("select2:select")
    .on("select2:select", function (e) {
      var selectedData = e.params.data;
      $("#child-id").val(selectedData.objid);
      displayPersonDetails($("#childDetails"), selectedData);
    });

  $("#child")
    .off("select2:clear")
    .on("select2:clear", function () {
      $("#child-id").val("");
      displayPersonDetails($("#childDetails"), null);
    });

  // Handle person selection for adult field
  $("#adult")
    .off("select2:select")
    .on("select2:select", function (e) {
      var selectedData = e.params.data;
      $("#adult-id").val(selectedData.objid);
      displayPersonDetails($("#adultDetails"), selectedData);
    });

  $("#adult")
    .off("select2:clear")
    .on("select2:clear", function () {
      $("#adult-id").val("");
      displayPersonDetails($("#adultDetails"), null);
    });

  // Handle person selection for adultout field (checkout form)
  // Only update hidden field, no details display needed for checkout
  $("#adultout")
    .off("select2:select")
    .on("select2:select", function (e) {
      var selectedData = e.params.data;
      $("#adultout-id").val(selectedData.objid);
    });

  $("#adultout")
    .off("select2:clear")
    .on("select2:clear", function () {
      $("#adultout-id").val("");
    });

  // When form is reset, clear all selections and details
  $("#AddAttendees")
    .off("reset")
    .on("reset", function () {
      // Use setTimeout to allow the form reset to complete first
      setTimeout(function () {
        $("#child").val(null).trigger("change");
        $("#adult").val(null).trigger("change");
        $("#child-id").val("");
        $("#adult-id").val("");
        displayPersonDetails($("#childDetails"), null);
        displayPersonDetails($("#adultDetails"), null);
      }, 0);
    });
}

/**
 * Display person details as a compact inline confirmation
 *
 * @param {jQuery} element - The container element to render into
 * @param {Object|null} person - Person data object or null to clear
 */
function displayPersonDetails(element, person) {
  if (!element || !element.length) {
    return;
  }

  if (person && person.objid) {
    var personViewUrl = "PersonView.php?PersonID=" + person.objid;

    // Compact inline display with name and check icon
    var html =
      '<div class="d-inline-flex align-items-center p-2 border border-success rounded" style="background-color: #d4edda;">' +
      '<i class="fa-solid fa-check-circle text-success mr-2"></i>' +
      '<a href="' +
      personViewUrl +
      '" class="text-dark font-weight-bold" target="_blank">' +
      escapeHtml(person.text) +
      "</a>" +
      "</div>";

    element.html(html).show();
  } else {
    element.html("").hide();
  }
}

/**
 * Escape HTML entities to prevent XSS
 *
 * @param {string} text - Text to escape
 * @returns {string} Escaped text
 */
function escapeHtml(text) {
  if (!text) return "";
  var div = document.createElement("div");
  div.textContent = text;
  return div.innerHTML;
}
