import { ref, onMounted } from 'vue'

export function useFormFieldNavigation() {
  const inputRef = ref<HTMLElement | null>(null)

  function findFormElement(): HTMLElement | null {
    if (!inputRef.value) return null

    // Try to find a form first
    const form = inputRef.value.closest('form')
    if (form) return form

    // If no form, find the nearest container or use body
    let container: HTMLElement | null = inputRef.value.parentElement
    for (let i = 0; i < 15; i++) {
      if (!container) break
      if (container.tagName === 'BODY') break
      container = container.parentElement
    }
    return container || document.body
  }

  function getFormInputElements(): HTMLElement[] {
    const form = findFormElement()
    if (!form) return []

    const selector = 'input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), textarea, select, button, [role="button"]'

    return Array.from(form.querySelectorAll(selector))
      .filter((el: any) => !el.disabled && !el.hidden && el.offsetParent && el.tabIndex !== -1)
  }

  function findNextField(): HTMLElement | null {
    const elements = getFormInputElements()
    if (!inputRef.value || elements.length === 0) return null

    const currentIndex = elements.indexOf(inputRef.value)
    if (currentIndex === -1) return null

    const nextIndex = currentIndex + 1
    return nextIndex < elements.length ? elements[nextIndex] : elements[0]
  }

  function moveToNextField(): void {
    const nextField = findNextField()
    if (nextField) {
      nextField.focus()
      if (nextField instanceof HTMLInputElement || nextField instanceof HTMLTextAreaElement) {
        nextField.select?.()
      }
    }
  }

  function handleKeyDown(event: KeyboardEvent, isTextArea: boolean = false): boolean {
    if (!isTextArea) {
      if (event.key === 'Enter') {
        event.preventDefault()
        moveToNextField()
        return true
      }
    } else {
      if (event.key === 'Enter') {
        if (event.ctrlKey || event.metaKey) {
          return false
        } else {
          event.preventDefault()
          moveToNextField()
          return true
        }
      }
    }
    return false
  }

  return {
    inputRef,
    handleKeyDown,
    moveToNextField,
    findNextField,
    getFormInputElements
  }
}