class UIDropdown extends HTMLElement {
  isOpen = false;
  contentEl: HTMLElement | null = null;
  isClosing = false; // debounce flag

  constructor() {
    super();
    this.toggle = this.toggle.bind(this);
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  connectedCallback(): void {
    const trigger = this.querySelector('[data-trigger]');
    this.contentEl = this.querySelector('[data-content]');

    if (trigger) {
      trigger.addEventListener('click', this.toggle);
    }

    document.addEventListener('click', this.handleClickOutside);
  }

  disconnectedCallback(): void {
    const trigger = this.querySelector('[data-trigger]');
    if (trigger) {
      trigger.removeEventListener('click', this.toggle);
    }
    document.removeEventListener('click', this.handleClickOutside);
  }

  toggle(): void {
    if (this.isClosing) {
      return;
    }
    this.isOpen = !this.isOpen;
    if (this.contentEl) {
      if (this.isOpen) {
        this.contentEl.classList.remove('hidden');
      } else {
        this.contentEl.classList.add('hidden');
      }
    }
  }

  close(): void {
    if (this.isClosing) {
      return;
    }
    this.isClosing = true;
    this.isOpen = false;
    if (this.contentEl) {
      this.contentEl.classList.add('hidden');
    }
    setTimeout(() => {
      this.isClosing = false;
    }, 100); // delay prevents rapid open/close flicker
  }

  handleClickOutside(event: MouseEvent): void {
    if (!this.contains(event.target as Node)) {
      this.close();
    }
  }
}

customElements.define('ui-dropdown', UIDropdown);