import { useState, useEffect, useRef, useCallback } from 'react'
import { Search, X } from 'lucide-react'
import { debounce } from '@/lib/debounce'
import { cn } from '@/lib/utils'

interface SearchInputProps {
  value?: string
  onSearch: (value: string) => void
  placeholder?: string
  className?: string
}

export function SearchInput({ value = '', onSearch, placeholder = 'Search...', className }: SearchInputProps) {
  const [localValue, setLocalValue] = useState(value)
  const debouncedRef = useRef<ReturnType<typeof debounce> | null>(null)

  useEffect(() => {
    setLocalValue(value)
  }, [value])

  useEffect(() => {
    debouncedRef.current = debounce((v: string) => {
      onSearch(v)
    }, 300)
    return () => {
      debouncedRef.current?.cancel()
    }
  }, [onSearch])

  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const v = e.target.value
    setLocalValue(v)
    debouncedRef.current?.(v)
  }, [])

  const handleClear = () => {
    setLocalValue('')
    onSearch('')
  }

  return (
    <div className={cn('relative', className)}>
      <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
      <input
        type="text"
        value={localValue}
        onChange={handleChange}
        placeholder={placeholder}
        className={cn(
          'h-9 w-full rounded-md border border-border bg-card pl-9 pr-8 text-sm text-foreground',
          'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
        )}
      />
      {localValue && (
        <button
          onClick={handleClear}
          className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-muted-foreground hover:text-foreground"
        >
          <X className="h-3.5 w-3.5" />
        </button>
      )}
    </div>
  )
}

export default SearchInput