import React, { useState, useEffect, useRef, useCallback } from 'react'
import SearchOverlay from './SearchOverlay'

const ARTWORKS_API = '/api/search/artworks'
const TAGS_API     = '/api/tags/search'
const USERS_API    = '/api/search/users'
const DEBOUNCE_MS  = 300

function useDebounce(value, delay) {
  const [debounced, setDebounced] = useState(value)
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay)
    return () => clearTimeout(id)
  }, [value, delay])
  return debounced
}

const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPod|iPad/.test(navigator.platform)

export default function SearchBar({ placeholder = 'Search artworks, artists, tags\u2026' }) {
  const [phase, setPhase]       = useState('idle')   // idle | opening | open | closing
  const [query, setQuery]       = useState('')
  const [artworks, setArtworks] = useState([])
  const [tags, setTags]         = useState([])
  const [users, setUsers]       = useState([])
  const [loading, setLoading]   = useState(false)
  const [open, setOpen]         = useState(false)
  const [activeIdx, setActiveIdx] = useState(-1)
  const [mobileOverlayPhase, setMobileOverlayPhase] = useState('closed') // closed | opening | open | closing

  const inputRef      = useRef(null)
  const mobileInputRef = useRef(null)
  const wrapperRef    = useRef(null)
  const abortRef      = useRef(null)
  const openTimerRef  = useRef(null)
  const closeTimerRef = useRef(null)
  const mobileOpenTimerRef = useRef(null)
  const mobileCloseTimerRef = useRef(null)

  const debouncedQuery = useDebounce(query, DEBOUNCE_MS)
  const isExpanded     = phase === 'opening' || phase === 'open'
  const isMobileOverlayVisible = mobileOverlayPhase !== 'closed'
  const hasSuggestions = artworks.length > 0 || users.length > 0 || tags.length > 0
  const suggestionListId = open && hasSuggestions ? 'sb-suggestions' : undefined

  // flat list of navigable items: artworks → users → tags
  const allItems = [
    ...artworks.map(a => ({ type: 'artwork', ...a })),
    ...users.map(u => ({ type: 'user', ...u })),
    ...tags.map(t => ({ type: 'tag', ...t })),
  ]

  // ── expand / collapse ────────────────────────────────────────────────────
  function expand() {
    clearTimeout(closeTimerRef.current)
    setPhase('opening')
    openTimerRef.current = setTimeout(() => {
      setPhase('open')
      inputRef.current?.focus()
    }, 80)
  }

  function collapse() {
    if (phase === 'idle' || phase === 'closing') return
    clearTimeout(openTimerRef.current)
    setPhase('closing')
    setOpen(false)
    setActiveIdx(-1)
    closeTimerRef.current = setTimeout(() => {
      setPhase('idle')
      setQuery('')
      setArtworks([])
      setTags([])
      setUsers([])
    }, 160)
  }

  function openMobileOverlay() {
    clearTimeout(mobileCloseTimerRef.current)
    setMobileOverlayPhase('opening')
    mobileOpenTimerRef.current = setTimeout(() => {
      setMobileOverlayPhase('open')
      mobileInputRef.current?.focus()
    }, 20)
  }

  function closeMobileOverlay() {
    if (mobileOverlayPhase === 'closed' || mobileOverlayPhase === 'closing') return
    clearTimeout(mobileOpenTimerRef.current)
    setMobileOverlayPhase('closing')
    clearTimeout(mobileCloseTimerRef.current)
    mobileCloseTimerRef.current = setTimeout(() => {
      setMobileOverlayPhase('closed')
      setQuery('')
      setActiveIdx(-1)
      setOpen(false)
      setArtworks([])
      setTags([])
      setUsers([])
    }, 150)
  }

  // ── Ctrl/Cmd+K ───────────────────────────────────────────────────────────
  useEffect(() => {
    function onKey(e) {
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); expand() }
    }
    document.addEventListener('keydown', onKey)
    return () => document.removeEventListener('keydown', onKey)
  }, [])

  // ── outside click ────────────────────────────────────────────────────────
  useEffect(() => {
    function onMouse(e) {
      if (!isExpanded) return
      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) collapse()
    }
    document.addEventListener('mousedown', onMouse)
    return () => document.removeEventListener('mousedown', onMouse)
  }, [isExpanded, phase])

  useEffect(() => {
    if (!isMobileOverlayVisible) {
      document.body.style.overflow = ''
      return
    }
    document.body.style.overflow = 'hidden'
    return () => {
      document.body.style.overflow = ''
    }
  }, [isMobileOverlayVisible])

  useEffect(() => {
    if (!isMobileOverlayVisible) return
    function onEscape(e) {
      if (e.key === 'Escape') closeMobileOverlay()
    }
    document.addEventListener('keydown', onEscape)
    return () => document.removeEventListener('keydown', onEscape)
  }, [isMobileOverlayVisible, mobileOverlayPhase])

  useEffect(() => {
    return () => {
      clearTimeout(mobileOpenTimerRef.current)
      clearTimeout(mobileCloseTimerRef.current)
    }
  }, [])

  // ── fetch (parallel artworks + tags) ────────────────────────────────────
  const fetchSuggestions = useCallback(async (q) => {
    const bare = q?.replace(/^@+/, '') ?? ''
    if (!bare || bare.length < 2) {
      setArtworks([]); setTags([]); setUsers([]); setOpen(false); return
    }
    if (abortRef.current) abortRef.current.abort()
    abortRef.current = new AbortController()
    const sig = abortRef.current.signal
    setLoading(true)
    try {
      const isAtMention = q.startsWith('@')
      // if user typed @foo: emphasise users (4 slots) and skip artworks
      const fetchArt = isAtMention
        ? Promise.resolve(null)
        : fetch(`${ARTWORKS_API}?q=${encodeURIComponent(bare)}&per_page=4`, { signal: sig })
      const fetchUsers = fetch(`${USERS_API}?q=${encodeURIComponent(q)}&per_page=4`, { signal: sig })
      const fetchTags  = isAtMention
        ? Promise.resolve(null)
        : fetch(`${TAGS_API}?q=${encodeURIComponent(bare)}&per_page=3`, { signal: sig })
      const [artRes, userRes, tagRes] = await Promise.all([fetchArt, fetchUsers, fetchTags])
      const artJson  = artRes  && artRes.ok  ? await artRes.json()  : {}
      const userJson = userRes && userRes.ok ? await userRes.json() : {}
      const tagJson  = tagRes  && tagRes.ok  ? await tagRes.json()  : {}
      const artItems  = Array.isArray(artJson.data  ?? artJson)  ? (artJson.data  ?? artJson).slice(0, 4)  : []
      const userItems = Array.isArray(userJson.data ?? userJson) ? (userJson.data ?? userJson).slice(0, 4) : []
      const tagItems  = Array.isArray(tagJson.data  ?? tagJson)  ? (tagJson.data  ?? tagJson).slice(0, 3)  : []
      setArtworks(artItems)
      setUsers(userItems)
      setTags(tagItems)
      setActiveIdx(-1)
      setOpen(artItems.length > 0 || userItems.length > 0 || tagItems.length > 0)
    } catch (e) {
      if (e.name !== 'AbortError') console.error('SearchBar fetch error', e)
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => { fetchSuggestions(debouncedQuery) }, [debouncedQuery, fetchSuggestions])

  // ── navigation helpers ───────────────────────────────────────────────────
  function navigate(item) {
    if (item.type === 'artwork') window.location.href = item.urls?.web ?? `/${item.slug ?? ''}`
    else if (item.type === 'user') window.location.href = item.profile_url ?? `/@${item.username}`
    else window.location.href = `/tags/${item.slug ?? item.name}`
  }

  function handleSubmit(e) {
    e.preventDefault()
    if (activeIdx >= 0 && allItems[activeIdx]) { navigate(allItems[activeIdx]); return }
    if (query.trim()) window.location.href = `/search?q=${encodeURIComponent(query.trim())}`
  }

  function handleKeyDown(e) {
    if (e.key === 'Escape') { collapse(); return }
    if (!open || allItems.length === 0) return
    if (e.key === 'ArrowDown') {
      e.preventDefault()
      setActiveIdx(i => (i + 1) % allItems.length)
    } else if (e.key === 'ArrowUp') {
      e.preventDefault()
      setActiveIdx(i => (i <= 0 ? allItems.length - 1 : i - 1))
    } else if (e.key === 'Enter' && activeIdx >= 0) {
      e.preventDefault()
      navigate(allItems[activeIdx])
    }
  }

  // ── widths / opacities ───────────────────────────────────────────────────
  const pillOpacity = phase === 'idle' ? 1 : 0
  const formOpacity = (phase === 'opening' || phase === 'open' || phase === 'closing') ? 1 : 0
  const collapsedWidth = 'clamp(8.75rem, 8vw + 4rem, 10.5rem)'
  const expandedWidth = 'min(100%, clamp(15rem, 42vw, 28rem))'

  return (
    <>
      <button
        type="button"
        onClick={openMobileOverlay}
        aria-label="Open search"
        className="md:hidden inline-flex items-center justify-center w-10 h-10 rounded-lg text-soft hover:text-white hover:bg-white/5 transition-colors"
      >
        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.2" aria-hidden="true">
          <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/>
        </svg>
      </button>

      <SearchOverlay
        phase={mobileOverlayPhase}
        query={query}
        inputRef={mobileInputRef}
        loading={loading}
        artworks={artworks}
        users={users}
        tags={tags}
        activeIdx={activeIdx}
        onQueryChange={(next) => { setQuery(next); setActiveIdx(-1) }}
        onClose={closeMobileOverlay}
        onSubmit={handleSubmit}
        onKeyDown={handleKeyDown}
        onNavigate={navigate}
      />

      <div
        className="hidden md:block"
        ref={wrapperRef}
        style={{
          position:   'relative',
          height:     '40px',
          width:      isExpanded ? expandedWidth : collapsedWidth,
          maxWidth:   '100%',
          minWidth:   '0',
          transition: 'width 340ms cubic-bezier(0.16,1,0.3,1), max-width 340ms cubic-bezier(0.16,1,0.3,1)',
        }}
      >
      {/* ── COLLAPSED PILL ── */}
      <button
        type="button"
        onClick={expand}
        aria-label="Search"
        style={{ position: 'absolute', inset: 0, opacity: pillOpacity, pointerEvents: phase === 'idle' ? 'auto' : 'none', transition: 'opacity 120ms ease' }}
        className="w-full h-full flex items-center gap-2.5 px-3.5 rounded-lg
                   bg-white/[0.05] border border-white/[0.09]
                   text-soft hover:bg-white/[0.1] hover:border-white/20 hover:text-white transition-colors"
      >
        <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
          <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/>
        </svg>
        <span className="text-sm flex-1 text-left truncate">Search</span>
        <kbd className="hidden lg:inline-flex shrink-0 items-center gap-0.5 text-[10px] font-medium px-1.5 py-0.5 rounded-md bg-white/[0.06] border border-white/[0.10] text-white/30">
          {isMac ? '\u2318' : 'Ctrl'}K
        </kbd>
      </button>

      {/* ── EXPANDED FORM ── */}
      <form
        onSubmit={handleSubmit}
        role="search"
        style={{ position: 'absolute', inset: 0, opacity: formOpacity, pointerEvents: phase === 'open' ? 'auto' : 'none', transition: 'opacity 160ms ease' }}
      >
        <div className="relative h-full">
          <svg className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-soft pointer-events-none"
               fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
            <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/>
          </svg>
          <input
            ref={inputRef}
            type="search"
            value={query}
            onChange={e => { setQuery(e.target.value); setActiveIdx(-1) }}
            onFocus={() => hasSuggestions && setOpen(true)}
            onKeyDown={handleKeyDown}
            placeholder={placeholder}
            aria-label="Search"
            aria-autocomplete="list"
            aria-expanded={open}
            aria-controls={suggestionListId}
            aria-activedescendant={activeIdx >= 0 ? `sb-item-${activeIdx}` : undefined}
            autoComplete="off"
            className="w-full h-full bg-white/[0.06] border border-white/[0.12] rounded-lg
                       py-0 pl-10 pr-11 lg:pr-16 text-sm text-white placeholder-soft outline-none
                       focus:border-accent focus:ring-1 focus:ring-accent/30 transition-colors"
          />
          <div className="absolute right-2.5 top-1/2 -translate-y-1/2 flex items-center gap-1.5">
            {loading && (
              <svg className="w-3.5 h-3.5 animate-spin text-soft" fill="none" viewBox="0 0 24 24">
                <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-8v8z"/>
              </svg>
            )}
            <kbd className="hidden lg:inline-flex text-[10px] font-medium px-1.5 py-0.5 rounded-md bg-white/[0.06] border border-white/[0.10] text-white/30 pointer-events-none select-none">Esc</kbd>
            <button type="button" onClick={collapse} aria-label="Close search"
              className="w-5 h-5 flex items-center justify-center rounded-md text-white/30 hover:text-white hover:bg-white/10 transition-colors">
              <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.5">
                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"/>
              </svg>
            </button>
          </div>
        </div>
      </form>

      {/* ── SUGGESTIONS DROPDOWN ── */}
      {open && hasSuggestions && (
        <ul
          id="sb-suggestions"
          role="listbox"
          aria-label="Search suggestions"
          className="absolute top-full left-0 right-0 mt-1.5 bg-[#151820] border border-white/[0.10] rounded-xl shadow-2xl overflow-hidden z-50"
          style={{ opacity: formOpacity, transition: 'opacity 180ms ease 60ms' }}
        >
          {/* Artworks section */}
          {artworks.length > 0 && (
            <>
              <li role="presentation" className="px-3 pt-2.5 pb-1 text-[10px] font-semibold uppercase tracking-wider text-white/30 select-none">Artworks</li>
              {artworks.map((item, i) => (
                <li key={item.slug ?? i} role="option" id={`sb-item-${i}`} aria-selected={activeIdx === i}>
                  <button type="button" onClick={() => navigate({ type: 'artwork', ...item })}
                    className={`w-full flex items-center gap-3 px-3 py-2.5 text-left transition-colors ${activeIdx === i ? 'bg-white/[0.09]' : 'hover:bg-white/[0.06]'}`}>
                    {item.thumbnail_url && (
                      <img src={item.thumbnail_url} alt="" aria-hidden="true"
                           className="w-9 h-9 rounded-lg object-cover shrink-0" loading="lazy" />
                    )}
                    <div className="min-w-0">
                      <div className="text-sm font-medium text-white truncate">{item.title}</div>
                      {item.author?.name && <div className="text-xs text-neutral-400 truncate">{item.author.name}</div>}
                    </div>
                    <svg className="w-3.5 h-3.5 text-white/20 ml-auto shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7"/>
                    </svg>
                  </button>
                </li>
              ))}
            </>
          )}

          {/* Users / Creators section */}
          {users.length > 0 && (
            <>
              <li role="presentation" className={`px-3 pb-1 text-[10px] font-semibold uppercase tracking-wider text-white/30 select-none ${artworks.length > 0 ? 'pt-2 border-t border-white/[0.06]' : 'pt-2.5'}`}>Creators</li>
              {users.map((user, j) => {
                const flatIdx = artworks.length + j
                return (
                  <li key={user.username} role="option" id={`sb-item-${flatIdx}`} aria-selected={activeIdx === flatIdx}>
                    <button type="button" onClick={() => navigate({ type: 'user', ...user })}
                      className={`w-full flex items-center gap-3 px-3 py-2 text-left transition-colors ${activeIdx === flatIdx ? 'bg-white/[0.09]' : 'hover:bg-white/[0.06]'}`}>
                      <img src={user.avatar_url} alt="" aria-hidden="true"
                           className="w-9 h-9 rounded-full object-cover shrink-0 bg-white/[0.04] border border-white/[0.08]" loading="lazy" />
                      <div className="min-w-0">
                        <div className="text-sm font-medium text-white truncate">@{user.username}</div>
                        {user.uploads > 0 && <div className="text-xs text-neutral-400">{user.uploads.toLocaleString()} upload{user.uploads !== 1 ? 's' : ''}</div>}
                      </div>
                    </button>
                  </li>
                )
              })}
            </>
          )}

          {/* Tags section */}
          {tags.length > 0 && (
            <>
              <li role="presentation" className={`px-3 pb-1 text-[10px] font-semibold uppercase tracking-wider text-white/30 select-none ${artworks.length > 0 || users.length > 0 ? 'pt-2 border-t border-white/[0.06]' : 'pt-2.5'}`}>Tags</li>
              {tags.map((tag, j) => {
                const flatIdx = artworks.length + users.length + j
                return (
                  <li key={tag.slug ?? tag.name ?? j} role="option" id={`sb-item-${flatIdx}`} aria-selected={activeIdx === flatIdx}>
                    <button type="button" onClick={() => navigate({ type: 'tag', ...tag })}
                      className={`w-full flex items-center gap-3 px-3 py-2 text-left transition-colors ${activeIdx === flatIdx ? 'bg-white/[0.09]' : 'hover:bg-white/[0.06]'}`}>
                      <span className="w-9 h-9 rounded-lg bg-white/[0.04] border border-white/[0.07] inline-flex items-center justify-center shrink-0">
                        <svg className="w-3.5 h-3.5 text-white/40" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                          <path strokeLinecap="round" strokeLinejoin="round" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>
                        </svg>
                      </span>
                      <div className="min-w-0">
                        <div className="text-sm font-medium text-white truncate">#{tag.name ?? tag.slug}</div>
                        {tag.artworks_count != null && <div className="text-xs text-neutral-400">{tag.artworks_count.toLocaleString()} artworks</div>}
                      </div>
                    </button>
                  </li>
                )
              })}
            </>
          )}

          {/* See all footer */}
          <li role="presentation" className="border-t border-white/[0.06]">
            <a href={`/search?q=${encodeURIComponent(query)}`}
               className="flex items-center justify-center gap-1.5 px-3 py-2 text-xs text-accent hover:text-accent/80 transition-colors">
              See all results for <span className="font-semibold">"{query}"</span>
              <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7"/>
              </svg>
            </a>
          </li>
        </ul>
      )}
      </div>
    </>
  )
}