import { createElement, forwardRef, useRef, useEffect, useCallback, useLayoutEffect, useMemo } from 'react'
import { cn } from '@/lib/utils'
import type { SearchResult, VaultEntry } from '../types'
import { useUnifiedSearch } from '../hooks/useUnifiedSearch'
import { getTypeColor, buildTypeEntryMap } from '../utils/typeColors'
import { formatSearchSubtitle } from '../utils/noteListHelpers'
import type { DateDisplayFormat } from '../utils/dateDisplay'
import { scrollSelectedHTMLChildIntoView } from '../utils/domScroll'
import { getTypeIcon } from './NoteItem'
import { NoteTitleIcon } from './NoteTitleIcon'
import { WorkspaceInitialsBadge } from './WorkspaceInitialsBadge'
import { useDateDisplayFormat } from '../hooks/useAppPreferences'

interface SearchPanelProps {
  open: boolean
  vaultPath: string
  entries: VaultEntry[]
  onSelectNote: (entry: VaultEntry) => void
  onClose: () => void
}

type SearchKeyboardAction = 'close' | 'next' | 'previous' | 'select'
// WKWebView can emit duplicate non-text navigation keydowns around native key injection.
const NATIVE_KEYDOWN_DUPLICATE_WINDOW_MS = 500
const handledSearchKeyboardEvents = new WeakSet<Event>()

interface SearchKeyboardEvent {
  key: string
  nativeEvent?: Event
  preventDefault: () => void
  repeat?: boolean
  stopImmediatePropagation?: () => void
  stopPropagation?: () => void
  timeStamp?: number
}

interface SearchKeydownRecord {
  key: string
  timeStamp: number
}

interface SearchKeyboardActionContext {
  handleSelect: (result: SearchResult) => void
  onClose: () => void
  resultsRef: React.MutableRefObject<SearchResult[]>
  selectedIndexRef: React.MutableRefObject<number>
  setSelectedIndex: React.Dispatch<React.SetStateAction<number>>
}

function resolveSearchKeyboardAction(key: string): SearchKeyboardAction | null {
  switch (key) {
    case 'Escape':
      return 'close'
    case 'ArrowDown':
      return 'next'
    case 'ArrowUp':
      return 'previous'
    case 'Enter':
      return 'select'
    default:
      return null
  }
}

function nextSearchSelectionIndex(
  action: Extract<SearchKeyboardAction, 'next' | 'previous'>,
  currentIndex: number,
  resultCount: number,
): number {
  if (resultCount <= 0) return 0
  if (action === 'next') return Math.min(currentIndex + 1, resultCount - 1)
  return Math.max(currentIndex - 1, 0)
}

function shouldHandleKeydown(
  event: SearchKeyboardEvent,
  pressedKeys: Set<string>,
  handledEvents: WeakSet<Event>,
  recentKeydownRef: React.MutableRefObject<SearchKeydownRecord | null>,
): boolean {
  const eventIdentity = resolveSearchKeyboardEventIdentity(event)
  if (eventIdentity) {
    if (handledEvents.has(eventIdentity)) return false
    handledEvents.add(eventIdentity)
  }

  if (isDuplicateNativeKeydown(event, recentKeydownRef.current)) {
    return false
  }

  rememberSearchKeydown(event, recentKeydownRef)
  if (event.repeat) return true
  if (pressedKeys.has(event.key)) return false

  pressedKeys.add(event.key)
  return true
}

function isDuplicateNativeKeydown(
  event: SearchKeyboardEvent,
  previous: SearchKeydownRecord | null,
): boolean {
  const timeStamp = resolveSearchKeyboardEventTimestamp(event)
  if (!previous || timeStamp === null || previous.key !== event.key) return false

  const elapsedMs = timeStamp - previous.timeStamp
  return elapsedMs >= 0 && elapsedMs <= NATIVE_KEYDOWN_DUPLICATE_WINDOW_MS
}

function rememberSearchKeydown(
  event: SearchKeyboardEvent,
  recentKeydownRef: React.MutableRefObject<SearchKeydownRecord | null>,
) {
  const timeStamp = resolveSearchKeyboardEventTimestamp(event)
  if (timeStamp !== null) recentKeydownRef.current = { key: event.key, timeStamp }
}

function resolveSearchKeyboardEventTimestamp(event: SearchKeyboardEvent): number | null {
  if (typeof performance !== 'undefined' && typeof performance.now === 'function') return performance.now()

  const { timeStamp } = event
  return typeof timeStamp === 'number' && Number.isFinite(timeStamp) ? timeStamp : null
}

function resolveSearchKeyboardEventIdentity(event: SearchKeyboardEvent): Event | null {
  if (event.nativeEvent instanceof Event) return event.nativeEvent
  if (event instanceof Event) return event
  return null
}

function applySearchSelection(
  action: Extract<SearchKeyboardAction, 'next' | 'previous'>,
  resultsRef: React.MutableRefObject<SearchResult[]>,
  selectedIndexRef: React.MutableRefObject<number>,
  setSelectedIndex: React.Dispatch<React.SetStateAction<number>>,
) {
  const nextIndex = nextSearchSelectionIndex(action, selectedIndexRef.current, resultsRef.current.length)
  selectedIndexRef.current = nextIndex
  setSelectedIndex(nextIndex)
}

function performSearchKeyboardAction(action: SearchKeyboardAction, context: SearchKeyboardActionContext) {
  if (action === 'close') {
    context.onClose()
    return
  }

  if (action === 'select') {
    const result = context.resultsRef.current[context.selectedIndexRef.current]
    if (result) context.handleSelect(result)
    return
  }

  applySearchSelection(action, context.resultsRef, context.selectedIndexRef, context.setSelectedIndex)
}

function useSearchKeyboardDocumentListeners({
  handleKeyDown,
  handleKeyUp,
  open,
  pressedKeysRef,
}: {
  handleKeyDown: (event: KeyboardEvent) => void
  handleKeyUp: (event: KeyboardEvent) => void
  open: boolean
  pressedKeysRef: React.MutableRefObject<Set<string>>
}) {
  useEffect(() => {
    const pressedKeys = pressedKeysRef.current
    if (!open) {
      pressedKeys.clear()
      return
    }

    document.addEventListener('keydown', handleKeyDown, true)
    document.addEventListener('keyup', handleKeyUp, true)
    return () => {
      document.removeEventListener('keydown', handleKeyDown, true)
      document.removeEventListener('keyup', handleKeyUp, true)
      pressedKeys.clear()
    }
  }, [handleKeyDown, handleKeyUp, open, pressedKeysRef])
}

function searchVaultPathsForEntries(entries: VaultEntry[], fallbackVaultPath: string): string | string[] {
  const paths = entries
    .map((entry) => entry.workspace?.path)
    .filter((path): path is string => !!path)
  return paths.length > 0 ? [...new Set(paths)] : fallbackVaultPath
}

function shouldShowWorkspace(entries: VaultEntry[]): boolean {
  return new Set(entries.map((entry) => entry.workspace?.alias).filter(Boolean)).size > 1
}

function useSearchSelectionRefs(results: SearchResult[], selectedIndex: number) {
  const resultsRef = useRef(results)
  const selectedIndexRef = useRef(selectedIndex)

  useLayoutEffect(() => {
    resultsRef.current = results
    selectedIndexRef.current = selectedIndex
  }, [results, selectedIndex])

  return { resultsRef, selectedIndexRef }
}

function useSearchEntryData(entries: VaultEntry[]) {
  const typeEntryMap = useMemo(() => buildTypeEntryMap(entries), [entries])
  const entryLookup = useMemo(() => {
    const map = new Map<string, VaultEntry>()
    for (const e of entries) map.set(e.path, e)
    return map
  }, [entries])
  const showWorkspace = useMemo(() => shouldShowWorkspace(entries), [entries])

  return { entryLookup, showWorkspace, typeEntryMap }
}

function useSearchKeyboard({
  open,
  onClose,
  handleSelect,
  resultsRef,
  selectedIndexRef,
  setSelectedIndex,
}: {
  open: boolean
  onClose: () => void
  handleSelect: (result: SearchResult) => void
  resultsRef: React.MutableRefObject<SearchResult[]>
  selectedIndexRef: React.MutableRefObject<number>
  setSelectedIndex: React.Dispatch<React.SetStateAction<number>>
}) {
  const pressedKeysRef = useRef(new Set<string>())
  const recentKeydownRef = useRef<SearchKeydownRecord | null>(null)
  const handleKeyDown = useCallback((e: SearchKeyboardEvent) => {
    const action = resolveSearchKeyboardAction(e.key)
    if (!action) return

    e.preventDefault()
    e.stopImmediatePropagation?.()
    e.stopPropagation?.()
    if (!shouldHandleKeydown(e, pressedKeysRef.current, handledSearchKeyboardEvents, recentKeydownRef)) return

    performSearchKeyboardAction(action, { handleSelect, onClose, resultsRef, selectedIndexRef, setSelectedIndex })
  }, [handleSelect, onClose, resultsRef, selectedIndexRef, setSelectedIndex])

  const handleKeyUp = useCallback((e: { key: string }) => {
    if (resolveSearchKeyboardAction(e.key)) pressedKeysRef.current.delete(e.key)
  }, [])

  useSearchKeyboardDocumentListeners({ handleKeyDown, handleKeyUp, open, pressedKeysRef })
}

function useSearchPanelController({ open, vaultPath, entries, onSelectNote, onClose }: SearchPanelProps) {
  const searchVaultPaths = useMemo(() => searchVaultPathsForEntries(entries, vaultPath), [entries, vaultPath])
  const {
    query, setQuery, results, selectedIndex, setSelectedIndex, loading, elapsedMs,
  } = useUnifiedSearch(searchVaultPaths, open)

  const inputRef = useRef<HTMLInputElement>(null)
  const listRef = useRef<HTMLDivElement>(null)
  const { resultsRef, selectedIndexRef } = useSearchSelectionRefs(results, selectedIndex)

  useEffect(() => {
    scrollSelectedHTMLChildIntoView(listRef.current, selectedIndex)
  }, [selectedIndex])

  const handleSelect = useCallback((result: SearchResult) => {
    const entry = entries.find(e => e.path === result.path)
    if (entry) {
      onSelectNote(entry)
      onClose()
    }
  }, [entries, onSelectNote, onClose])

  useEffect(() => {
    if (open) setTimeout(() => inputRef.current?.focus(), 50)
  }, [open])

  useSearchKeyboard({
    open,
    onClose,
    handleSelect,
    resultsRef,
    selectedIndexRef,
    setSelectedIndex,
  })
  const entryData = useSearchEntryData(entries)

  return {
    elapsedMs,
    handleSelect,
    inputRef,
    listRef,
    loading,
    query,
    results,
    selectedIndex,
    setQuery,
    setSelectedIndex,
    ...entryData,
  }
}

export function SearchPanel({
  open,
  vaultPath,
  entries,
  onSelectNote,
  onClose,
}: SearchPanelProps) {
  const dateDisplayFormat = useDateDisplayFormat()
  const rootRef = useRef<HTMLDivElement>(null)
  const {
    elapsedMs,
    entryLookup,
    handleSelect,
    inputRef,
    listRef,
    loading,
    query,
    results,
    selectedIndex,
    setQuery,
    setSelectedIndex,
    showWorkspace,
    typeEntryMap,
  } = useSearchPanelController({ open, vaultPath, entries, onSelectNote, onClose })
  const handleResultHover = useCallback((index: number, event: React.MouseEvent<HTMLDivElement>) => {
    if (shouldApplySearchResultHover(event)) setSelectedIndex(index)
  }, [setSelectedIndex])

  useEffect(() => {
    if (!open) return
    const root = rootRef.current
    if (!root) return

    const handleRootClick = (event: MouseEvent) => {
      if (event.target === root) onClose()
    }

    root.addEventListener('click', handleRootClick)
    return () => root.removeEventListener('click', handleRootClick)
  }, [open, onClose])

  if (!open) return null

  return (
    <div
      ref={rootRef}
      className="fixed inset-0 z-[1000] flex justify-center bg-[var(--shadow-dialog)] pt-[15vh]"
    >
      <button
        type="button"
        aria-label="Close search"
        className="absolute inset-0 z-0 cursor-default border-0 bg-transparent p-0"
        onClick={onClose}
      />
      <div
        className="relative z-10 flex w-[540px] max-w-[90vw] max-h-[480px] flex-col self-start overflow-hidden rounded-xl border border-[var(--border-dialog)] bg-popover shadow-[0_8px_32px_var(--shadow-dialog)]"
      >
        <SearchInput
          ref={inputRef}
          query={query}
          loading={loading}
          onChange={setQuery}
        />
        <SearchContent
          query={query}
          results={results}
          selectedIndex={selectedIndex}
          loading={loading}
          elapsedMs={elapsedMs}
          entryLookup={entryLookup}
          typeEntryMap={typeEntryMap}
          showWorkspace={showWorkspace}
          dateDisplayFormat={dateDisplayFormat}
          listRef={listRef}
          onSelect={handleSelect}
          onHover={handleResultHover}
        />
      </div>
    </div>
  )
}

interface SearchInputProps {
  query: string
  loading: boolean
  onChange: (value: string) => void
}

const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
  function SearchInput({ query, loading, onChange }, ref) {
    return (
      <div className="flex items-center gap-3 border-b border-border px-4 py-3">
        <svg aria-hidden="true" className="h-4 w-4 shrink-0 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <circle cx="11" cy="11" r="8" />
          <path d="m21 21-4.35-4.35" />
        </svg>
        <input
          ref={ref}
          className="flex-1 bg-transparent text-[15px] text-foreground outline-none placeholder:text-muted-foreground"
          type="text"
          placeholder="Search in all notes..."
          value={query}
          onChange={e => onChange(e.target.value)}
        />
        {loading && (
          <svg
            aria-hidden="true"
            className="h-4 w-4 shrink-0 animate-spin text-muted-foreground"
            data-testid="search-spinner"
            viewBox="0 0 24 24"
            fill="none"
          >
            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
          </svg>
        )}
      </div>
    )
  },
)

interface SearchContentProps {
  query: string
  results: SearchResult[]
  selectedIndex: number
  loading: boolean
  elapsedMs: number | null
  entryLookup: Map<string, VaultEntry>
  typeEntryMap: Record<string, VaultEntry>
  showWorkspace: boolean
  dateDisplayFormat: DateDisplayFormat
  listRef: React.RefObject<HTMLDivElement | null>
  onSelect: (result: SearchResult) => void
  onHover: (index: number, event: React.MouseEvent<HTMLDivElement>) => void
}

interface SearchResultRowProps {
  result: SearchResult
  entry: VaultEntry | undefined
  selected: boolean
  index: number
  typeEntryMap: Record<string, VaultEntry>
  showWorkspace: boolean
  dateDisplayFormat: DateDisplayFormat
  onSelect: (result: SearchResult) => void
  onHover: (index: number, event: React.MouseEvent<HTMLDivElement>) => void
}

interface SearchResultPresentation {
  TypeIcon: ReturnType<typeof getTypeIcon>
  icon?: string | null
  noteType: string | null
  subtitle: string | null
  title: string
  typeColor?: string
  workspace: VaultEntry['workspace'] | null
}

function resolveSearchResultPresentation({
  result,
  entry,
  typeEntryMap,
  showWorkspace,
  dateDisplayFormat,
}: Pick<SearchResultRowProps, 'result' | 'entry' | 'typeEntryMap' | 'showWorkspace' | 'dateDisplayFormat'>): SearchResultPresentation {
  const isA = entry?.isA ?? result.noteType
  const noteType = isA || null
  const typeEntry = typeEntryMap[isA ?? '']

  return {
    TypeIcon: getTypeIcon(isA ?? null, typeEntry?.icon),
    icon: entry?.icon,
    noteType,
    subtitle: entry ? formatSearchSubtitle(entry, dateDisplayFormat) : null,
    title: entry?.title ?? result.title,
    typeColor: resolveSearchResultTypeColor(noteType, isA, typeEntry),
    workspace: resolveSearchResultWorkspace(showWorkspace, entry),
  }
}

function resolveSearchResultTypeColor(
  noteType: string | null,
  isA: string | null,
  typeEntry: VaultEntry | undefined,
): string | undefined {
  return noteType ? getTypeColor(isA, typeEntry?.color) : undefined
}

function resolveSearchResultWorkspace(showWorkspace: boolean, entry: VaultEntry | undefined): VaultEntry['workspace'] | null {
  return showWorkspace ? entry?.workspace ?? null : null
}

function SearchResultRow({
  result, entry, selected, index, typeEntryMap, showWorkspace, dateDisplayFormat, onSelect, onHover,
}: SearchResultRowProps) {
  const presentation = resolveSearchResultPresentation({
    result,
    entry,
    typeEntryMap,
    showWorkspace,
    dateDisplayFormat,
  })

  return (
    <div
      role="option"
      aria-selected={selected}
      tabIndex={-1}
      className={cn(
        "w-full cursor-pointer border-0 bg-transparent px-4 py-2.5 text-left transition-colors",
        selected ? "bg-accent" : "hover:bg-secondary",
      )}
      onClick={() => onSelect(result)}
      onMouseMove={(event) => onHover(index, event)}
    >
      <div className="flex items-center gap-2">
        {createElement(presentation.TypeIcon, {
          width: 14,
          height: 14,
          className: 'shrink-0',
          style: { color: presentation.typeColor ?? 'var(--muted-foreground)' },
        })}
        <SearchResultTitle icon={presentation.icon} title={presentation.title} />
        <SearchResultTypeLabel noteType={presentation.noteType} />
        <WorkspaceInitialsBadge workspace={presentation.workspace} testId="search-result-workspace-badge" />
      </div>
      <SearchResultSubtitle subtitle={presentation.subtitle} />
    </div>
  )
}

function SearchResultTitle({ icon, title }: { icon?: string | null; title: string }) {
  return (
    <span className="min-w-0 flex-1 truncate text-[13px] font-medium text-foreground">
      <NoteTitleIcon icon={icon} size={14} className="mr-1" />
      {title}
    </span>
  )
}

function SearchResultTypeLabel({ noteType }: { noteType: string | null }) {
  return noteType ? <span className="shrink-0 text-[11px] text-muted-foreground/70">{noteType}</span> : null
}

function SearchResultSubtitle({ subtitle }: { subtitle: string | null }) {
  return subtitle ? <p className="mt-0.5 pl-[22px] text-[11px] text-muted-foreground">{subtitle}</p> : null
}

function SearchIdleMessage() {
  return (
    <div className="px-4 py-8 text-center">
      <p className="text-[13px] text-muted-foreground">Search across all note contents</p>
      <p className="mt-1 text-[11px] text-muted-foreground/60">Enter to open · Esc to close</p>
    </div>
  )
}

function SearchLoadingMessage() {
  return <div className="px-4 py-8 text-center text-[13px] text-muted-foreground">Searching...</div>
}

function SearchNoResultsMessage() {
  return (
    <div className="px-4 py-8 text-center">
      <p className="text-[13px] text-muted-foreground">No results found</p>
    </div>
  )
}

function SearchResultsHeader({ count, elapsedMs }: { count: number; elapsedMs: number | null }) {
  return (
    <div className="border-b border-border/50 px-4 py-1.5">
      <span className="text-[11px] text-muted-foreground">
        {count} result{count !== 1 ? 's' : ''}{elapsedMs !== null ? ` · ${elapsedMs}ms` : ''}
      </span>
    </div>
  )
}

function SearchContent({
  query, results, selectedIndex, loading, elapsedMs, entryLookup, typeEntryMap, showWorkspace, dateDisplayFormat, listRef, onSelect, onHover,
}: SearchContentProps) {
  const hasQuery = query.trim().length > 0
  const hasResults = results.length > 0
  return (
    <div className="flex-1 overflow-y-auto">
      {!hasQuery && <SearchIdleMessage />}
      {hasQuery && !hasResults && loading && <SearchLoadingMessage />}
      {hasQuery && !hasResults && !loading && <SearchNoResultsMessage />}
      {hasResults && (
        <>
          <SearchResultsHeader count={results.length} elapsedMs={elapsedMs} />
          <div ref={listRef} role="listbox" aria-label="Search results">
            {results.map((result, i) => (
              <SearchResultRow
                key={result.path}
                result={result}
                entry={entryLookup.get(result.path)}
                selected={i === selectedIndex}
                index={i}
                typeEntryMap={typeEntryMap}
                showWorkspace={showWorkspace}
                dateDisplayFormat={dateDisplayFormat}
                onSelect={onSelect}
                onHover={onHover}
              />
            ))}
          </div>
        </>
      )}
    </div>
  )
}

function shouldApplySearchResultHover(event: React.MouseEvent<HTMLDivElement>): boolean {
  return event.movementX !== 0 || event.movementY !== 0
}