'use client';

import { Search, X } from 'lucide-react';
import { useCallback, useState, useEffect } from 'react';

interface TaxonomySearchProps {
  value: string;
  onChange: (value: string) => void;
  resultCount?: number;
}

export default function TaxonomySearch({ value, onChange, resultCount }: TaxonomySearchProps) {
  const [localValue, setLocalValue] = useState(value);

  // Debounce the search
  useEffect(() => {
    const timer = setTimeout(() => {
      onChange(localValue);
    }, 200);

    return () => clearTimeout(timer);
  }, [localValue, onChange]);

  // Sync external changes
  useEffect(() => {
    setLocalValue(value);
  }, [value]);

  const handleClear = useCallback(() => {
    setLocalValue('');
    onChange('');
  }, [onChange]);

  return (
    <div className="relative">
      <div className="relative">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
        <input
          type="text"
          value={localValue}
          onChange={(e) => setLocalValue(e.target.value)}
          placeholder="Search codes..."
          className="w-full bg-gray-800 border border-gray-700 rounded-lg pl-9 pr-9 py-2 text-sm text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500"
        />
        {localValue && (
          <button
            onClick={handleClear}
            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
          >
            <X className="w-4 h-4" />
          </button>
        )}
      </div>
      {value && resultCount !== undefined && (
        <div className="absolute right-0 top-full mt-1 text-xs text-gray-500">
          {resultCount} {resultCount === 1 ? 'match' : 'matches'}
        </div>
      )}
    </div>
  );
}