// Реализуем доступный Modal на чистом JavaScript:
// focus trap, Escape to close, aria-атрибуты, возврат фокуса.

// --- Вспомогательные функции ---

function getFocusableElements(container) {
  const selector = [
    'a[href]',
    'button:not([disabled])',
    'input:not([disabled])',
    'select:not([disabled])',
    'textarea:not([disabled])',
    '[tabindex]:not([tabindex="-1"])',
  ].join(', ')

  return Array.from(container.querySelectorAll(selector))
}

// --- Класс Modal ---

class AccessibleModal {
  constructor(config) {
    this.title = config.title || 'Диалог'
    this.content = config.content || ''
    this.onClose = config.onClose || (() => {})

    this.element = null
    this.previouslyFocused = null  // куда вернуть фокус
    this.isOpen = false

    this.handleKeyDown = this.handleKeyDown.bind(this)
  }

  open(triggerElement) {
    if (this.isOpen) return

    // Сохраняем элемент, который открыл модал
    this.previouslyFocused = triggerElement || document.activeElement

    // Создаём DOM
    this.element = document.createElement('div')
    this.element.setAttribute('role', 'dialog')
    this.element.setAttribute('aria-modal', 'true')
    this.element.setAttribute('aria-labelledby', 'modal-title')
    this.element.setAttribute('aria-describedby', 'modal-desc')
    this.element.setAttribute('tabindex', '-1')  // чтобы можно было сфокусировать div
    this.element.style.cssText = [
      'position: fixed',
      'inset: 0',
      'background: rgba(0,0,0,0.5)',
      'display: flex',
      'align-items: center',
      'justify-content: center',
      'z-index: 1000',
    ].join(';')

    const dialog = document.createElement('div')
    dialog.style.cssText = 'background: white; padding: 24px; border-radius: 8px; min-width: 300px;'

    const titleEl = document.createElement('h2')
    titleEl.id = 'modal-title'
    titleEl.textContent = this.title

    const descEl = document.createElement('p')
    descEl.id = 'modal-desc'
    descEl.textContent = this.content

    const closeBtn = document.createElement('button')
    closeBtn.textContent = 'Закрыть'
    closeBtn.setAttribute('aria-label', 'Закрыть диалог')
    closeBtn.addEventListener('click', () => this.close())

    const cancelBtn = document.createElement('button')
    cancelBtn.textContent = 'Отмена'
    cancelBtn.addEventListener('click', () => this.close())

    dialog.appendChild(titleEl)
    dialog.appendChild(descEl)
    dialog.appendChild(closeBtn)
    dialog.appendChild(cancelBtn)
    this.element.appendChild(dialog)

    // Клик по оверлею закрывает
    this.element.addEventListener('click', (e) => {
      if (e.target === this.element) this.close()
    })

    document.body.appendChild(this.element)
    document.addEventListener('keydown', this.handleKeyDown)

    this.isOpen = true

    // Фокус на первый интерактивный элемент (или на сам модал)
    const focusable = getFocusableElements(dialog)
    if (focusable.length > 0) {
      focusable[0].focus()
    } else {
      this.element.focus()
    }

    console.log('Modal открыт. Фокус установлен на:', document.activeElement?.tagName)
    console.log('aria-labelledby указывает на:', this.element.getAttribute('aria-labelledby'))
  }

  handleKeyDown(event) {
    if (!this.isOpen) return

    // Escape закрывает модал
    if (event.key === 'Escape') {
      console.log('Escape нажат — закрываем модал')
      this.close()
      return
    }

    // Tab: ловушка фокуса
    if (event.key === 'Tab') {
      const focusable = getFocusableElements(this.element)
      if (focusable.length === 0) return

      const firstEl = focusable[0]
      const lastEl = focusable[focusable.length - 1]

      if (event.shiftKey) {
        // Shift+Tab: идём назад
        if (document.activeElement === firstEl) {
          lastEl.focus()
          event.preventDefault()
          console.log('Focus trap: переход от первого к последнему')
        }
      } else {
        // Tab: идём вперёд
        if (document.activeElement === lastEl) {
          firstEl.focus()
          event.preventDefault()
          console.log('Focus trap: переход от последнего к первому')
        }
      }
    }
  }

  close() {
    if (!this.isOpen) return

    document.removeEventListener('keydown', this.handleKeyDown)
    this.element?.remove()
    this.element = null
    this.isOpen = false

    // Возвращаем фокус на элемент, который открыл модал
    this.previouslyFocused?.focus()
    console.log('Modal закрыт. Фокус возвращён на:', this.previouslyFocused?.tagName || 'нет')

    this.onClose()
  }
}

// --- Демонстрация без DOM ---
console.log('=== Проверка доступности модала (без DOM) ===')

// Симулируем логику focus trap без реального DOM
function simulateFocusTrap(focusableCount) {
  let currentIndex = 0
  const elements = Array.from({ length: focusableCount }, (_, i) => 'element-' + i)

  console.log('
Focus Trap с', focusableCount, 'фокусируемыми элементами:')

  function pressTab() {
    currentIndex = (currentIndex + 1) % elements.length
    console.log('Tab → фокус на:', elements[currentIndex])
  }

  function pressShiftTab() {
    currentIndex = (currentIndex - 1 + elements.length) % elements.length
    console.log('Shift+Tab → фокус на:', elements[currentIndex])
  }

  // Симулируем несколько нажатий Tab
  pressTab()
  pressTab()
  pressTab()
  pressTab()  // должен вернуться к первому
  pressShiftTab()  // назад
}

simulateFocusTrap(3)

// ARIA атрибуты
console.log('
=== Необходимые ARIA атрибуты для Modal ===')
const ariaRequirements = {
  'role="dialog"':              'Сообщает скринридеру что это диалог',
  'aria-modal="true"':          'Скринридер не читает фон',
  'aria-labelledby="title-id"': 'Привязка к заголовку',
  'aria-describedby="desc-id"': 'Привязка к описанию',
  'tabindex="-1"':              'Позволяет сфокусировать div программно',
}

Object.entries(ariaRequirements).forEach(([attr, description]) => {
  console.log(attr.padEnd(35), '←', description)
})