document.addEventListener('DOMContentLoaded', function() {
  if (!window.updateGlobalCardFilters) {
    window.updateGlobalCardFilters = function() {
        const selects = document.querySelectorAll('.card-multiselect');
  
        // Rebuild global selections and rarity filtering.
        const globalSelectedIds = [];
        let globalRarity = null;
  
        selects.forEach(select => {
            const selectedValues = select.choicesInstance ? select.choicesInstance.getValue(true) : [];
            selectedValues.forEach(cardId => {
                if (cardId && globalSelectedIds.indexOf(cardId) === -1) {
                    globalSelectedIds.push(cardId);
                }
            });
            if (selectedValues.length > 0 && globalRarity === null) {
                const option = select.querySelector('option[value="${selectedValues[0]}"]');
                if (option) {
                    globalRarity = option.getAttribute('data-rarity');
                }
            }
        });
  
        selects.forEach(select => {
          if (select.choicesInstance && select.choicesInstance.dropdown.element) {
              // Reset all options to enabled.
              select.querySelectorAll('option').forEach(function(option) {
                  option.disabled = false;
              });
              // Reset all items to visible.
              select.choicesInstance.dropdown.element.querySelectorAll('[data-card-id]').forEach(function(item) {
                  item.style.display = '';
              });
              // Filter out options/items that do not match the global rarity.
              if (globalRarity) {
                select.querySelectorAll('option[data-rarity]:not([data-rarity="'+globalRarity+'"])').forEach(function(option) {
                    option.disabled = true;
                });
                select.choicesInstance.dropdown.element.querySelectorAll('[data-rarity]:not([data-rarity="'+globalRarity+'"])').forEach(function(item) {
                    item.style.display = 'none';
                });
              }
              // Filter out options/items that match the global selected card IDs.
              for (const cardId of globalSelectedIds) {
                  select.choicesInstance.dropdown.element.querySelectorAll('[data-card-id="' + cardId + '"]').forEach(function(item) {
                      item.style.display = 'none';
                  });
                  select.querySelectorAll('option[data-card-id="'+cardId+'"]:not(option[selected])').forEach(function(option) {
                      option.disabled = true;
                  });
              }
          }
        });
    };
  }

  if (!window.updateOptionQuantity) {
    window.updateOptionQuantity = function(item, quantity) {
    const cardId = item.getAttribute('data-card-id');
    const option = item.closest('.choices__inner').querySelector('option[value="' + cardId + '"]');
    if (option) {
      option.setAttribute('data-quantity', quantity);
    }
    }
  }

  if (!window.getOptionQuantity) {
    window.getOptionQuantity = function(item) {
      const cardId = item.getAttribute('data-card-id');
      const option = item.closest('.choices__inner').querySelector('option[value="' + cardId + '"]');
      return option ? parseInt(option.getAttribute('data-quantity')) : "";
    }
  }

  
  const selectFields = document.querySelectorAll('.card-multiselect');
  selectFields.forEach(selectField => {
    const placeholder = selectField.getAttribute('data-placeholder') || '';

    const choicesInstance = new Choices(selectField, {
      removeItemButton: false,
      placeholderValue: placeholder,
      searchEnabled: true,
      shouldSort: false,
      allowHTML: true,
      closeDropdownOnSelect: true,
      removeItemButton: true,
      searchFields: ['label'],
      resetScrollPosition: false,
      callbackOnCreateTemplates: function(template) {
        const getCardContent = (data) => {
          let htmlContent = (data.element && data.element.getAttribute('data-html-content')) || data.label;
          let quantity = data.element.getAttribute('data-quantity');
          quantity = quantity ? parseInt(quantity) : 1;
          htmlContent = htmlContent.replace('__QUANTITY__', quantity);
          return htmlContent;
        };

        const renderCard = (classNames, data, type) => {
          const rarity = data.element ? data.element.getAttribute('data-rarity') : '';
          const cardId = data.element ? data.element.getAttribute('data-card-id') : 0;
          const cardname = data.element ? data.element.getAttribute('data-name') : '';
          const content = getCardContent(data);
          if (type === 'item') {
            return template(`
              <div class="${classNames.item} mx-auto w-max ${data.highlighted ? classNames.highlightedState : ''} relative"
                data-id="${data.id}"
                data-card-id="${cardId}"
                data-item
                data-rarity="${rarity}"
                data-name="${cardname}"
                aria-selected="true"
                style="cursor: pointer; padding: 1rem;">
                <button type="button" class="decrement absolute left-[-1.5rem] top-1/2 transform -translate-y-1/2 bg-base-300 text-base-content px-2">-</button>
                <button type="button" class="increment absolute right-[-1.5rem] top-1/2 transform -translate-y-1/2 bg-base-300 text-base-content px-2">+</button>
                <div class="card-content">${content}</div>
              </div>
            `);
          } else {
            const extraAttributes = `data-select-text="${this.config.itemSelectText}" data-choice ${
              data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'
            }`;
            const extraClasses = classNames.itemChoice;
            return template(`
              <div class="${classNames.item} ${extraClasses} ${data.highlighted ? classNames.highlightedState : ''} mx-auto w-max"
                ${extraAttributes}
                data-id="${data.id}"
                data-card-id="${cardId}"
                data-name="${cardname}"
                data-choice
                data-rarity="${rarity}"
                style="cursor: pointer;">
                ${content}
              </div>
            `);
          }
        };

        return {
          choice: function(classNames, data) {
            return renderCard(classNames, data, 'choice');
          },
          item: function(classNames, data) {
            return renderCard(classNames, data, 'item');
          }
        };
      }
    });

    // Associate the Choices instance with the select field.
    selectField.choicesInstance = choicesInstance;

    if (!window.cardMultiselectInstances) {
      window.cardMultiselectInstances = [];
    }
    window.cardMultiselectInstances.push(selectField);

    selectField.addEventListener('change', function() {
      if (window.updateGlobalCardFilters) {
        window.updateGlobalCardFilters();
      }
    });

    // Listen for increment/decrement clicks (scoped to the choices container).
    const choicesContainer = selectField.closest('.choices') || document;

    choicesContainer.addEventListener('click', function(e) {
      if (e.target.classList.contains('increment')) {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
        const container = e.target.closest('[data-item]');
        if (container) {
          let quantityBadge = container.querySelector('.card-quantity-badge');
          let quantity = window.getOptionQuantity(container);
          quantity = quantity + 1;
          quantityBadge.innerText = quantity;
          window.updateOptionQuantity(container, quantity);
        }
      }
      if (e.target.classList.contains('decrement')) {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
        const container = e.target.closest('[data-item]');
        if (container) {
          let quantityBadge = container.querySelector('.card-quantity-badge');
          let quantity = window.getOptionQuantity(container);
          const cardId = container.getAttribute('data-card-id');
          if (quantity === 1) {
            const option = selectField.querySelector('option[value="' + cardId + '"]');
            if (option) {
                choicesInstance.removeActiveItemsByValue(option.value);
                option.selected = false;
            }
            if (window.updateGlobalCardFilters) {
              window.updateGlobalCardFilters();
            }
          } else {
            quantity = quantity - 1;
            quantityBadge.innerText = quantity;
            window.updateOptionQuantity(container, quantity);
          }
        }
      }
      if (e.target.closest('[data-item]') && 
          !e.target.classList.contains('increment') && 
          !e.target.classList.contains('decrement')) {
        e.stopPropagation();
        e.stopImmediatePropagation();
      }
    });
  });

  if (choicesInstance.getValue(true).length > 0 && window.updateGlobalCardFilters) {
    window.updateGlobalCardFilters();
  }
});