import {
  useCallback,
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,
  type KeyboardEvent as ReactKeyboardEvent,
} from 'react'
import { useNavigate } from 'react-router-dom'

import { machineRegistry } from '../../data/machineRegistry'
import {
  createCommandPaletteItems,
  filterCommandPaletteItems,
  type CommandPaletteSearchResult,
} from '../../utils/commandPalette'

const MAX_VISIBLE_RESULTS = 10

const FOCUSABLE_SELECTOR = [
  'a[href]',
  'button:not([disabled])',
  'textarea:not([disabled])',
  'input:not([disabled])',
  'select:not([disabled])',
  '[tabindex]:not([tabindex="-1"])',
].join(',')

export function CommandPalette() {
  const navigate = useNavigate()
  const headingId = useId()
  const descriptionId = useId()
  const inputId = useId()
  const listboxId = useId()

  const panelRef = useRef<HTMLDivElement>(null)
  const inputRef = useRef<HTMLInputElement>(null)

  const [isOpen, setIsOpen] = useState(false)
  const [query, setQuery] = useState('')
  const [activeIndex, setActiveIndex] = useState(0)
  const [isApplePlatform, setIsApplePlatform] = useState(false)

  const commandItems = useMemo(
    () => createCommandPaletteItems(machineRegistry),
    [],
  )

  const results = useMemo(
    () =>
      filterCommandPaletteItems(commandItems, query, {
        maxResults: MAX_VISIBLE_RESULTS,
      }),
    [commandItems, query],
  )

  const activeResult = results[activeIndex]
  const activeOptionId = activeResult
    ? getOptionId(listboxId, activeResult.id, activeIndex)
    : undefined

  const primaryShortcutLabel = isApplePlatform ? '⌘K' : 'Ctrl K'
  const spokenShortcutLabel = isApplePlatform ? 'Command K' : 'Control K'
  const resultStatus = query.trim()
    ? `${results.length} ${results.length === 1 ? 'result' : 'results'} for ${query}`
    : `${results.length} quick ${results.length === 1 ? 'destination' : 'destinations'} available`

  const openPalette = useCallback(() => {
    setIsOpen(true)
  }, [])

  const closePalette = useCallback(() => {
    setIsOpen(false)
    setQuery('')
    setActiveIndex(0)
  }, [])

  const selectResult = useCallback(
    (result: CommandPaletteSearchResult) => {
      closePalette()
      navigate(result.href)
    },
    [closePalette, navigate],
  )

  useEffect(() => {
    setIsApplePlatform(detectApplePlatform())
  }, [])

  useEffect(() => {
    const handleShortcut = (event: KeyboardEvent) => {
      if (event.defaultPrevented) {
        return
      }

      const key = event.key.toLocaleLowerCase()
      const isCommandK = key === 'k' && (event.metaKey || event.ctrlKey)
      const isSlashSearch =
        event.key === '/' &&
        !event.metaKey &&
        !event.ctrlKey &&
        !event.altKey &&
        !isEditableTarget(event.target)

      if (!isCommandK && !isSlashSearch) {
        return
      }

      event.preventDefault()
      openPalette()
    }

    window.addEventListener('keydown', handleShortcut)

    return () => {
      window.removeEventListener('keydown', handleShortcut)
    }
  }, [openPalette])

  useEffect(() => {
    setActiveIndex(0)
  }, [query])

  useEffect(() => {
    setActiveIndex((currentIndex) => {
      if (results.length === 0) {
        return 0
      }

      return Math.min(currentIndex, results.length - 1)
    })
  }, [results.length])

  useEffect(() => {
    if (!isOpen) {
      return
    }

    const previousActiveElement =
      document.activeElement instanceof HTMLElement
        ? document.activeElement
        : null
    const previousBodyOverflow = document.body.style.overflow
    const focusTimer = window.setTimeout(() => {
      inputRef.current?.focus()
    }, 0)

    document.body.style.overflow = 'hidden'

    const handleDialogKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        event.preventDefault()
        closePalette()
        return
      }

      if (event.key === 'Tab') {
        trapFocus(event, panelRef.current)
      }
    }

    document.addEventListener('keydown', handleDialogKeyDown)

    return () => {
      window.clearTimeout(focusTimer)
      document.removeEventListener('keydown', handleDialogKeyDown)
      document.body.style.overflow = previousBodyOverflow

      if (previousActiveElement?.isConnected) {
        previousActiveElement.focus({ preventScroll: true })
      }
    }
  }, [closePalette, isOpen])

  const handleInputKeyDown = (
    event: ReactKeyboardEvent<HTMLInputElement>,
  ) => {
    if (event.nativeEvent.isComposing) {
      return
    }

    if (event.key === 'ArrowDown') {
      event.preventDefault()

      if (results.length === 0) {
        return
      }

      setActiveIndex((currentIndex) => (currentIndex + 1) % results.length)
      return
    }

    if (event.key === 'ArrowUp') {
      event.preventDefault()

      if (results.length === 0) {
        return
      }

      setActiveIndex(
        (currentIndex) =>
          (currentIndex - 1 + results.length) % results.length,
      )
      return
    }

    if (event.key === 'Enter') {
      const result = results[activeIndex]

      if (!result) {
        return
      }

      event.preventDefault()
      selectResult(result)
    }
  }

  return (
    <>
      <button
        type="button"
        className="fixed bottom-5 right-5 z-40 inline-flex items-center gap-2 rounded-full border border-slate-700/80 bg-slate-950/90 px-3 py-2 text-sm font-medium text-slate-100 shadow-2xl shadow-cyan-950/30 backdrop-blur transition hover:border-cyan-400/70 hover:bg-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-300 sm:px-4"
        aria-label={`Open command palette. Shortcut ${spokenShortcutLabel}`}
        aria-keyshortcuts="Control+K Meta+K /"
        aria-expanded={isOpen}
        onClick={openPalette}
      >
        <span aria-hidden="true" className="text-cyan-300">
          ⌕
        </span>
        <span className="hidden sm:inline">Quick find</span>
        <span className="sm:hidden">Find</span>
        <kbd className="rounded-md border border-slate-700 bg-slate-900 px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-wide text-slate-300">
          {primaryShortcutLabel}
        </kbd>
      </button>

      {isOpen ? (
        <div
          className="fixed inset-0 z-50 flex items-start justify-center bg-slate-950/75 px-4 py-6 backdrop-blur-md sm:py-16"
          onMouseDown={(event) => {
            if (event.target === event.currentTarget) {
              closePalette()
            }
          }}
        >
          <div
            ref={panelRef}
            role="dialog"
            aria-modal="true"
            aria-labelledby={headingId}
            aria-describedby={descriptionId}
            className="w-full max-w-2xl overflow-hidden rounded-2xl border border-slate-700/80 bg-slate-950/95 shadow-2xl shadow-cyan-950/40 ring-1 ring-white/10"
          >
            <div className="border-b border-slate-800 px-4 py-3 sm:px-5">
              <div className="flex items-center gap-3">
                <div
                  className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-cyan-400/30 bg-cyan-400/10 text-lg text-cyan-200"
                  aria-hidden="true"
                >
                  ⌕
                </div>

                <div className="min-w-0 flex-1">
                  <h2 id={headingId} className="sr-only">
                    Command palette
                  </h2>
                  <p id={descriptionId} className="sr-only">
                    Search machines, categories, difficulties, and catalogue
                    destinations. Use arrow keys to move through results and
                    Enter to open the selected destination.
                  </p>

                  <label htmlFor={inputId} className="sr-only">
                    Search the mechanical systems catalogue
                  </label>
                  <input
                    ref={inputRef}
                    id={inputId}
                    role="combobox"
                    type="search"
                    value={query}
                    autoComplete="off"
                    spellCheck={false}
                    aria-autocomplete="list"
                    aria-expanded="true"
                    aria-controls={listboxId}
                    aria-activedescendant={activeOptionId}
                    className="w-full border-0 bg-transparent text-base font-medium text-slate-50 outline-none placeholder:text-slate-500 sm:text-lg"
                    placeholder="Search machines, pumps, engines, gearboxes…"
                    onChange={(event) => setQuery(event.target.value)}
                    onKeyDown={handleInputKeyDown}
                  />
                </div>

                <button
                  type="button"
                  className="rounded-lg border border-slate-700 bg-slate-900 px-2.5 py-1.5 text-xs font-semibold uppercase tracking-[0.18em] text-slate-300 transition hover:border-slate-500 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-300"
                  onClick={closePalette}
                >
                  Esc
                  <span className="sr-only"> Close command palette</span>
                </button>
              </div>
            </div>

            <p className="sr-only" aria-live="polite">
              {resultStatus}
            </p>

            <div className="max-h-[min(32rem,calc(100vh-12rem))] overflow-y-auto p-2">
              <ul
                id={listboxId}
                role="listbox"
                aria-label="Command palette results"
                className="space-y-1"
              >
                {results.map((result, index) => {
                  const isActive = index === activeIndex
                  const optionId = getOptionId(listboxId, result.id, index)

                  return (
                    <li
                      key={result.id}
                      id={optionId}
                      role="option"
                      aria-selected={isActive}
                      aria-label={result.ariaLabel}
                      className={cx(
                        'group grid cursor-pointer grid-cols-[auto,minmax(0,1fr)] gap-3 rounded-xl border px-3 py-3 transition',
                        isActive
                          ? 'border-cyan-400/60 bg-cyan-400/10 text-white shadow-lg shadow-cyan-950/30'
                          : 'border-transparent text-slate-200 hover:border-slate-700 hover:bg-slate-900/80',
                      )}
                      onMouseEnter={() => setActiveIndex(index)}
                      onPointerDown={(event) => {
                        event.preventDefault()
                        selectResult(result)
                      }}
                    >
                      <span
                        className={cx(
                          'flex h-10 w-10 items-center justify-center rounded-xl border text-base',
                          isActive
                            ? 'border-cyan-300/50 bg-cyan-300/15 text-cyan-100'
                            : 'border-slate-800 bg-slate-900 text-slate-400 group-hover:text-slate-200',
                        )}
                        aria-hidden="true"
                      >
                        {result.kind === 'machine' ? '⚙' : '⌂'}
                      </span>

                      <span className="min-w-0">
                        <span className="flex min-w-0 flex-wrap items-center gap-2">
                          <span className="truncate font-semibold">
                            {result.label}
                          </span>

                          {result.category ? (
                            <span className="rounded-full border border-slate-700 bg-slate-900 px-2 py-0.5 text-[11px] font-medium uppercase tracking-[0.16em] text-slate-300">
                              {result.category}
                            </span>
                          ) : null}

                          {result.difficulty ? (
                            <span className="rounded-full border border-cyan-400/25 bg-cyan-400/10 px-2 py-0.5 text-[11px] font-medium uppercase tracking-[0.16em] text-cyan-200">
                              {result.difficulty}
                            </span>
                          ) : null}
                        </span>

                        {result.subtitle ? (
                          <span className="mt-1 block truncate text-sm text-slate-400">
                            {result.subtitle}
                          </span>
                        ) : null}

                        <span className="mt-1 hidden truncate font-mono text-[11px] text-slate-600 sm:block">
                          {result.href}
                        </span>
                      </span>
                    </li>
                  )
                })}
              </ul>

              {results.length === 0 ? (
                <div
                  role="status"
                  className="px-4 py-10 text-center text-slate-400"
                >
                  <p className="text-sm font-semibold text-slate-200">
                    No matching destination
                  </p>
                  <p className="mt-1 text-sm">
                    Try a machine name, category, difficulty, or engineering
                    keyword.
                  </p>
                </div>
              ) : null}
            </div>

            <div className="flex flex-wrap items-center gap-x-4 gap-y-2 border-t border-slate-800 px-4 py-3 text-xs text-slate-500 sm:px-5">
              <span className="inline-flex items-center gap-1.5">
                <kbd className="rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 font-mono text-[10px] text-slate-300">
                  ↑
                </kbd>
                <kbd className="rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 font-mono text-[10px] text-slate-300">
                  ↓
                </kbd>
                Navigate
              </span>
              <span className="inline-flex items-center gap-1.5">
                <kbd className="rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 font-mono text-[10px] text-slate-300">
                  Enter
                </kbd>
                Open
              </span>
              <span className="inline-flex items-center gap-1.5">
                <kbd className="rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 font-mono text-[10px] text-slate-300">
                  Esc
                </kbd>
                Close
              </span>
              <span className="ml-auto hidden text-slate-600 sm:inline">
                Also opens with /
              </span>
            </div>
          </div>
        </div>
      ) : null}
    </>
  )
}

export default CommandPalette

function detectApplePlatform(): boolean {
  if (typeof navigator === 'undefined') {
    return false
  }

  return /Mac|iPhone|iPad|iPod/.test(navigator.platform)
}

function isEditableTarget(target: EventTarget | null): boolean {
  if (!(target instanceof HTMLElement)) {
    return false
  }

  return (
    target.isContentEditable ||
    target.tagName === 'INPUT' ||
    target.tagName === 'TEXTAREA' ||
    target.tagName === 'SELECT'
  )
}

function trapFocus(event: KeyboardEvent, container: HTMLElement | null): void {
  if (!container) {
    return
  }

  const focusableElements = Array.from(
    container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),
  ).filter(
    (element) =>
      element.tabIndex !== -1 && element.getAttribute('aria-hidden') !== 'true',
  )

  if (focusableElements.length === 0) {
    event.preventDefault()
    return
  }

  const firstElement = focusableElements[0]
  const lastElement = focusableElements[focusableElements.length - 1]
  const activeElement = document.activeElement

  if (!container.contains(activeElement)) {
    event.preventDefault()
    firstElement.focus()
    return
  }

  if (event.shiftKey && activeElement === firstElement) {
    event.preventDefault()
    lastElement.focus()
    return
  }

  if (!event.shiftKey && activeElement === lastElement) {
    event.preventDefault()
    firstElement.focus()
  }
}

function getOptionId(listboxId: string, itemId: string, index: number): string {
  const safeItemId = itemId.replace(/[^a-zA-Z0-9_-]+/g, '-')

  return `${listboxId}-option-${index}-${safeItemId}`
}

function cx(...classes: Array<string | false | null | undefined>): string {
  return classes.filter(Boolean).join(' ')
}