tfm_ainventory/frontend/components/inventory/SearchModal.tsx

'use client';

import { useState, useEffect, useRef, useCallback } from 'react';
import { X, Search } from 'lucide-react';
import { Item } from '@/lib/db';
import { axiosInstance } from '@/lib/api';

interface SearchModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSelectItem: (item: Item) => void;
}

export default function SearchModal({
  isOpen,
  onClose,
  onSelectItem,
}: SearchModalProps) {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<Item[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);

  // Auto-focus input when modal opens
  useEffect(() => {
    if (isOpen && inputRef.current) {
      inputRef.current.focus();
    }
  }, [isOpen]);

  // Debounced search
  const performSearch = useCallback(async (searchQuery: string) => {
    if (searchQuery.length < 1) {
      setResults([]);
      setError(null);
      return;
    }

    setIsLoading(true);
    setError(null);

    try {
      const response = await axiosInstance.get('/items/search', {
        params: { q: searchQuery }
      });

      setResults(response.data || []);
    } catch (err) {
      const errorMsg = err instanceof Error ? err.message : 'Search failed';
      setError(errorMsg);
      setResults([]);
    } finally {
      setIsLoading(false);
    }
  }, []);

  // Handle input change with debouncing (300ms)
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newQuery = e.target.value;
    setQuery(newQuery);

    // Clear previous debounce timer
    if (debounceTimerRef.current) {
      clearTimeout(debounceTimerRef.current);
    }

    // Set new debounce timer
    debounceTimerRef.current = setTimeout(() => {
      performSearch(newQuery);
    }, 300);
  };

  // Handle Escape key
  useEffect(() => {
    if (!isOpen) return;

    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        onClose();
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [isOpen, onClose]);

  // Handle item selection
  const handleSelectItem = (item: Item) => {
    onSelectItem(item);
    setQuery('');
    setResults([]);
    onClose();
  };

  // Cleanup debounce on unmount
  useEffect(() => {
    return () => {
      if (debounceTimerRef.current) {
        clearTimeout(debounceTimerRef.current);
      }
    };
  }, []);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 bg-black/50 flex items-start justify-center pt-20">
      <div className="bg-slate-950 rounded-lg shadow-lg w-full max-w-2xl mx-4 max-h-[80vh] flex flex-col">
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-slate-800">
          <h2 className="text-xl font-normal">Search inventory</h2>
          <button
            onClick={onClose}
            aria-label="Close search modal"
            className="p-2 hover:bg-slate-800 rounded-lg transition-colors"
          >
            <X size={20} className="text-slate-400" />
          </button>
        </div>

        {/* Search Input */}
        <div className="p-4 border-b border-slate-800">
          <div className="relative">
            <Search size={18} className="absolute left-3 top-3 text-slate-500 pointer-events-none" />
            <input
              ref={inputRef}
              type="text"
              placeholder="Search by name, PN, barcode..."
              value={query}
              onChange={handleInputChange}
              aria-label="Search items"
              className="w-full bg-slate-900 border border-slate-800 rounded-lg pl-10 pr-4 py-2 text-slate-100 placeholder-slate-600 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/50"
            />
          </div>
        </div>

        {/* Results */}
        <div className="flex-1 overflow-y-auto">
          {error && (
            <div className="p-4 text-rose-500 bg-rose-500/10 border border-rose-500/20 m-4 rounded-lg">
              {error}
            </div>
          )}

          {isLoading && (
            <div className="flex items-center justify-center py-8">
              <div className="text-slate-400">
                <div className="inline-block animate-spin rounded-full h-6 w-6 border border-slate-600 border-t-primary"></div>
              </div>
            </div>
          )}

          {!isLoading && !error && results.length === 0 && query.length > 0 && (
            <div className="p-4 text-slate-500 text-center">
              No items found matching "{query}"
            </div>
          )}

          {!isLoading && !error && results.length === 0 && query.length === 0 && (
            <div className="p-4 text-slate-500 text-center">
              Start typing to search
            </div>
          )}

          {!isLoading && results.length > 0 && (
            <div className="divide-y divide-slate-800">
              {results.map((item) => (
                <button
                  key={item.id}
                  onClick={() => handleSelectItem(item)}
                  className="w-full p-4 text-left hover:bg-slate-900 transition-colors focus:outline-none focus:bg-slate-900 focus:ring-2 focus:ring-primary/50"
                >
                  <div className="flex justify-between items-start gap-2 mb-1">
                    <h3 className="font-normal text-slate-100 flex-1">
                      {item.name}
                    </h3>
                    <span className="text-primary font-normal text-sm whitespace-nowrap">
                      Qty: {item.quantity}
                    </span>
                  </div>
                  <div className="text-xs text-slate-500 space-y-1">
                    {item.part_number && (
                      <div>PN: {item.part_number}</div>
                    )}
                    {item.barcode && (
                      <div>Barcode: {item.barcode}</div>
                    )}
                  </div>
                </button>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}