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);

const initStudioDropdown = (): void => {
  document.addEventListener('click', e => {
    const target = e.target;
    if (!(target instanceof Element)) return;

    const btn = target.closest<HTMLButtonElement>('button[data-studio-select]');
    if (!btn) return;

    const input = document.getElementById('studio-input') as HTMLInputElement | null;
    const form = document.getElementById('browse-search-form') as HTMLFormElement | null;
    if (!input || !form) return;

    input.value = btn.dataset.studioSelect ?? '';
    form.requestSubmit();

    const dropdown = btn.closest('ui-dropdown') as { close?: () => void } | null;
    dropdown?.close?.();
  });
};

initStudioDropdown();