'use client'

import { useState, useCallback } from 'react'
import SearchBar from './SearchBar'
import SearchResults from './SearchResults'
import { searchItems } from '@/lib/actions'
import { useSearch } from '@/hooks'

interface ItemWithList {
  id: string
  title: string
  description: string | null
  completed: boolean
  priority: string
  dueDate: Date | null
  tags: any
  notes: string | null
  list: {
    id: string
    title: string
    color: string
  }
}

export default function GlobalSearch() {
  const [searchResults, setSearchResults] = useState<ItemWithList[]>([])
  const [isSearching, setIsSearching] = useState(false)

  const handleSearch = useCallback(async (query: string) => {
    if (!query.trim()) {
      setSearchResults([])
      setIsSearching(false)
      return
    }

    setIsSearching(true)
    try {
      const results = await searchItems(query)
      setSearchResults(results as ItemWithList[])
    } catch (error) {
      console.error('Search error:', error)
      setSearchResults([])
    } finally {
      setIsSearching(false)
    }
  }, [])

  const { debouncedQuery, clearSearch } = useSearch({
    onSearch: handleSearch
  })

  const handleClose = useCallback(() => {
    clearSearch()
    setSearchResults([])
  }, [clearSearch])

  return (
    <div className="space-y-4">
      <SearchBar 
        onSearch={handleSearch}
        placeholder="Search all tasks..."
      />

      {debouncedQuery.trim() && (
        <SearchResults 
          results={searchResults}
          query={debouncedQuery}
          onClose={handleClose}
        />
      )}
    </div>
  )
}