towercontrol/src/components/ui/SearchInput.tsx

import { InputHTMLAttributes, forwardRef, useState, useEffect, useRef, useCallback } from 'react';
import { Input } from './Input';
import { cn } from '@/lib/utils';

interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
  value?: string;
  onChange?: (value: string) => void;
  onDebouncedChange?: (value: string) => void;
  debounceMs?: number;
  placeholder?: string;
  className?: string;
}

const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
  ({ 
    value = '', 
    onChange, 
    onDebouncedChange, 
    debounceMs = 300, 
    placeholder = "Rechercher...",
    className,
    ...props 
  }, ref) => {
    const [localValue, setLocalValue] = useState(value);
    const timeoutRef = useRef<number | undefined>(undefined);

    // Fonction debouncée pour les changements
    const debouncedChange = useCallback((searchValue: string) => {
      if (timeoutRef.current) {
        window.clearTimeout(timeoutRef.current);
      }
      
      timeoutRef.current = window.setTimeout(() => {
        onDebouncedChange?.(searchValue);
      }, debounceMs);
    }, [onDebouncedChange, debounceMs]);

    // Gérer les changements locaux
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      const newValue = e.target.value;
      setLocalValue(newValue);
      onChange?.(newValue);
      debouncedChange(newValue);
    };

    // Synchroniser l'état local quand la valeur externe change
    useEffect(() => {
      setLocalValue(value);
    }, [value]);

    // Nettoyer le timeout au démontage
    useEffect(() => {
      return () => {
        if (timeoutRef.current) {
          window.clearTimeout(timeoutRef.current);
        }
      };
    }, []);

    return (
      <div className={cn('flex-1 min-w-0', className)}>
        <Input
          ref={ref}
          type="text"
          value={localValue}
          onChange={handleChange}
          placeholder={placeholder}
          className="bg-[var(--card)] border-[var(--border)] w-full h-[34px]"
          {...props}
        />
      </div>
    );
  }
);

SearchInput.displayName = 'SearchInput';

export { SearchInput };