import { useCallback, useEffect, useRef, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { FileText, Zap, PenTool, LayoutGrid, Search, Loader2 } from 'lucide-react'
import { searchDocuments, type DocumentRecord } from '../../lib/documents'
import { formatRelativeTime, getActivityDate, typeColors, typeLabels } from '../../lib/documentUtils'
import type { CreateType } from '../../data/createData'

const typeIcons: Record<CreateType, typeof FileText> = {
  silo: FileText,
  shed: Zap,
  sketch: PenTool,
  stead: LayoutGrid,
}

interface SearchOverlayProps {
  open: boolean
  onClose: () => void
  initialQuery?: string
}

export default function SearchOverlay({ open, onClose, initialQuery = '' }: SearchOverlayProps) {
  const [query, setQuery] = useState(initialQuery)
  const [results, setResults] = useState<DocumentRecord[]>([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const inputRef = useRef<HTMLInputElement>(null)
  const navigate = useNavigate()

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

  const runSearch = useCallback(async (value: string) => {
    if (!value.trim()) {
      setResults([])
      setError(null)
      return
    }
    setLoading(true)
    setError(null)
    try {
      const docs = await searchDocuments(value)
      setResults(docs)
    } catch {
      setError('Could not search. Is MongoDB running?')
      setResults([])
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    if (!open) return
    const timer = setTimeout(() => void runSearch(query), 250)
    return () => clearTimeout(timer)
  }, [query, open, runSearch])

  if (!open) return null

  return (
    <div className="fixed inset-0 z-[80] flex items-start justify-center bg-black/30 pt-24 px-4">
      <button type="button" className="absolute inset-0 cursor-default" onClick={onClose} aria-label="Close search" />
      <div className="relative z-10 w-full max-w-xl overflow-hidden rounded-2xl border border-silos-cream-dark bg-white shadow-2xl">
        <div className="flex items-center gap-2 border-b border-silos-cream-dark px-4">
          <Search className="h-4 w-4 text-silos-muted" />
          <input
            ref={inputRef}
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Search pages, spaces, whiteboards..."
            className="w-full bg-transparent py-3 text-sm text-silos-text outline-none"
          />
          {loading && <Loader2 className="h-4 w-4 animate-spin text-silos-muted" />}
          <kbd className="rounded border border-silos-cream-dark px-1.5 py-0.5 text-[10px] text-silos-muted">Esc</kbd>
        </div>
        <div className="max-h-80 overflow-y-auto">
          {error && <p className="px-4 py-6 text-center text-sm text-amber-700">{error}</p>}
          {!error && query.trim() && !loading && results.length === 0 && (
            <p className="px-4 py-6 text-center text-sm text-silos-muted">No matches for “{query}”.</p>
          )}
          {!query.trim() && (
            <p className="px-4 py-6 text-center text-sm text-silos-muted">
              Type to search your documents.
            </p>
          )}
          {results.map((doc) => {
            const Icon = typeIcons[doc.type]
            return (
              <button
                key={doc.id}
                type="button"
                onClick={() => {
                  onClose()
                  navigate(`/workspace/${doc.type}/${doc.id}`)
                }}
                className="flex w-full items-center gap-3 px-4 py-3 text-left hover:bg-silos-cream/60"
              >
                <div
                  className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg"
                  style={{ backgroundColor: `${typeColors[doc.type]}22` }}
                >
                  <Icon className="h-4 w-4" style={{ color: typeColors[doc.type] }} />
                </div>
                <div className="min-w-0 flex-1">
                  <p className="truncate text-sm font-medium text-silos-text">{doc.title}</p>
                  <p className="text-xs text-silos-muted">
                    {typeLabels[doc.type]} · {formatRelativeTime(getActivityDate(doc))}
                  </p>
                </div>
              </button>
            )
          })}
        </div>
      </div>
    </div>
  )
}