class CustomSelect {
  constructor(element) {
    this.container = element
    this.trigger = element.querySelector('.custom-select__trigger')
    this.valueEl = element.querySelector('.custom-select__value')
    this.dropdown = element.querySelector('.custom-select__dropdown')
    this.options = element.querySelectorAll('.custom-select__option')
    this.nativeSelect = element.querySelector('select')

    // Определяем, является ли первая опция плейсхолдером (пустой value)
    this.hasPlaceholder = this.options[0]?.dataset.value === ''

    this.init()
  }

  init() {
    this.trigger.addEventListener('click', () => this.toggle())

    this.options.forEach(option => {
      option.addEventListener('click', () => this.select(option))
    })

    document.addEventListener('click', e => {
      if (!this.container.contains(e.target)) this.close()
    })

    this.container.addEventListener('keydown', e => this.handleKeydown(e))
  }

  toggle() {
    this.container.classList.contains('is-open') ? this.close() : this.open()
  }

  open() {
    // Закрываем все остальные открытые селекты
    document.querySelectorAll('.custom-select.is-open').forEach(el => {
      if (el !== this.container) el._customSelect?.close()
    })

    this.container.classList.add('is-open')
    this.trigger.setAttribute('aria-expanded', 'true')
  }

  close() {
    this.container.classList.remove('is-open')
    this.trigger.setAttribute('aria-expanded', 'false')
  }

  select(option) {
    const value = option.dataset.value
    const text = option.textContent

    this.valueEl.textContent = text

    // Подсвечиваем текст если выбрано не дефолтное значение
    if (this.hasPlaceholder) {
      this.valueEl.classList.toggle('is-active', value !== '')
    } else {
      this.valueEl.classList.add('is-active')
    }

    this.options.forEach(opt => {
      opt.classList.remove('is-selected')
      opt.setAttribute('aria-selected', 'false')
    })

    option.classList.add('is-selected')
    option.setAttribute('aria-selected', 'true')

    this.nativeSelect.value = value
    this.nativeSelect.dispatchEvent(new Event('change', { bubbles: true }))

    this.close()
  }

  handleKeydown(e) {
    const optionsList = [...this.options]
    const currentIndex = optionsList.findIndex(opt => opt.classList.contains('is-selected'))

    switch (e.key) {
      case 'Enter':
      case ' ':
        e.preventDefault()
        this.container.classList.contains('is-open') ? this.close() : this.open()
        break

      case 'ArrowDown':
        e.preventDefault()
        if (!this.container.classList.contains('is-open')) {
          this.open()
          break
        }
        const nextIndex = Math.min(currentIndex + 1, optionsList.length - 1)
        this.select(optionsList[nextIndex])
        break

      case 'ArrowUp':
        e.preventDefault()
        const prevIndex = Math.max(currentIndex - 1, 0)
        this.select(optionsList[prevIndex])
        break

      case 'Escape':
        this.close()
        this.trigger.focus()
        break
    }
  }
}

// Инициализация — сохраняем инстанс на элементе для доступа из других селектов
document.querySelectorAll('.custom-select').forEach(el => {
  el._customSelect = new CustomSelect(el)
})
