thrilltrack-explorer/src-old/components/search/AutocompleteSearch.tsx

import { useRef, useEffect, useState } from 'react';
import { Search, X, Clock, Zap, Castle, FerrisWheel, Factory } from 'lucide-react';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { useSearch, SearchResult } from '@/hooks/useSearch';
import { useNavigate } from 'react-router-dom';
import { useToast } from '@/components/ui/use-toast';

interface AutocompleteSearchProps {
  onResultSelect?: (result: SearchResult) => void;
  onSearch?: (query: string) => void;
  placeholder?: string;
  className?: string;
  types?: ('park' | 'ride' | 'company')[];
  limit?: number;
  showRecentSearches?: boolean;
  variant?: 'default' | 'hero';
}

const DEFAULT_SEARCH_TYPES: ('park' | 'ride' | 'company')[] = ['park', 'ride', 'company'];

export function AutocompleteSearch({
  onResultSelect,
  onSearch,
  placeholder = "Search parks, rides, or companies...",
  className = "",
  types = DEFAULT_SEARCH_TYPES,
  limit = 8,
  showRecentSearches = true,
  variant = 'default'
}: AutocompleteSearchProps) {
  const navigate = useNavigate();
  const { toast } = useToast();
  const searchRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const [isOpen, setIsOpen] = useState(false);
  const [selectedIndex, setSelectedIndex] = useState(-1);

  const {
    query,
    setQuery,
    results,
    suggestions,
    loading,
    saveSearch,
    clearRecentSearches
  } = useSearch({ types, limit });

  const displayItems = query.length > 0 ? results : (showRecentSearches ? suggestions : []);

  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (searchRef.current && !searchRef.current.contains(event.target as Node)) {
        setIsOpen(false);
        setSelectedIndex(-1);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  // Handle keyboard navigation
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (!isOpen) return;

      switch (event.key) {
        case 'ArrowDown':
          event.preventDefault();
          setSelectedIndex(prev => Math.min(prev + 1, displayItems.length - 1));
          break;
        case 'ArrowUp':
          event.preventDefault();
          setSelectedIndex(prev => Math.max(prev - 1, -1));
          break;
        case 'Enter':
          event.preventDefault();
          if (selectedIndex >= 0 && displayItems[selectedIndex]) {
            handleResultClick(displayItems[selectedIndex]);
          } else if (query) {
            handleSearch();
          }
          break;
        case 'Escape':
          setIsOpen(false);
          setSelectedIndex(-1);
          inputRef.current?.blur();
          break;
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, [isOpen, selectedIndex, displayItems, query]);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setQuery(value);
    setIsOpen(true);
    setSelectedIndex(-1);
  };

  const handleInputFocus = () => {
    setIsOpen(true);
  };

  type SearchResultOrSuggestion = SearchResult | { 
    id: string; 
    type: 'suggestion'; 
    title: string; 
    subtitle: string; 
    data: Record<string, unknown> | null;
  };

  const handleResultClick = (result: SearchResultOrSuggestion) => {
    if (result.type === 'suggestion') {
      setQuery(result.title);
      setIsOpen(false);
      return;
    }

    const searchResult = result as SearchResult;
    saveSearch(searchResult.title);
    
    if (onResultSelect) {
      onResultSelect(searchResult);
    } else {
      // Default navigation with null/undefined safety checks
      switch (searchResult.type) {
        case 'park':
          const parkIdentifier = searchResult.slug || searchResult.id;
          if (parkIdentifier) {
            navigate(`/parks/${parkIdentifier}`);
          } else {
            toast({
              title: "Navigation Error",
              description: "Unable to navigate to this park. Missing park identifier.",
              variant: "destructive",
            });
            navigate(`/search?q=${encodeURIComponent(searchResult.title)}`);
          }
          break;
        case 'ride':
          const parkSlug = (searchResult.data as { park?: { slug?: string } })?.park?.slug;
          const rideSlug = searchResult.slug;
          const rideId = searchResult.id;
          
          if (parkSlug && rideSlug) {
            navigate(`/parks/${parkSlug}/rides/${rideSlug}`);
          } else if (rideId) {
            navigate(`/rides/${rideId}`);
          } else {
            toast({
              title: "Navigation Error",
              description: "Unable to navigate to this ride. Missing ride identifier.",
              variant: "destructive",
            });
            navigate(`/search?q=${encodeURIComponent(searchResult.title)}`);
          }
          break;
        case 'company':
          const companyType = (searchResult.data as { company_type?: string })?.company_type;
          const companySlug = searchResult.slug;
          
          if (companyType && companySlug) {
            switch (companyType) {
              case 'operator':
                navigate(`/operators/${companySlug}`);
                break;
              case 'property_owner':
                navigate(`/owners/${companySlug}`);
                break;
              case 'manufacturer':
                navigate(`/manufacturers/${companySlug}`);
                break;
              case 'designer':
                navigate(`/designers/${companySlug}`);
                break;
              default:
                toast({
                  title: "Unknown Company Type",
                  description: `Unable to navigate to this company type. Showing search results instead.`,
                  variant: "default",
                });
                navigate(`/search?q=${encodeURIComponent(searchResult.title)}`);
            }
          } else {
            toast({
              title: "Navigation Error",
              description: "Unable to navigate to this company. Missing required information.",
              variant: "destructive",
            });
            navigate(`/search?q=${encodeURIComponent(searchResult.title)}`);
          }
          break;
      }
    }
    
    setIsOpen(false);
    setSelectedIndex(-1);
  };

  const handleSearch = () => {
    if (!query.trim()) return;
    
    saveSearch(query);
    
    if (onSearch) {
      onSearch(query);
    } else {
      // Default search behavior - navigate to search results
      navigate(`/search?q=${encodeURIComponent(query)}`);
    }
    
    setIsOpen(false);
    setSelectedIndex(-1);
  };

  const handleClear = () => {
    setQuery('');
    setIsOpen(false);
    setSelectedIndex(-1);
    inputRef.current?.focus();
  };

  const getResultIcon = (result: SearchResult) => {
    switch (result.type) {
      case 'park':
        return <Castle className="w-5 h-5" />;
      case 'ride':
        return <FerrisWheel className="w-5 h-5" />;
      case 'company':
        return <Factory className="w-5 h-5" />;
      default:
        return <Search className="w-5 h-5" />;
    }
  };

  const getTypeColor = (type: string) => {
    switch (type) {
      case 'park':
        return 'bg-primary/10 text-primary border-primary/20';
      case 'ride':
        return 'bg-secondary/10 text-secondary border-secondary/20';      
      case 'company':
        return 'bg-accent/10 text-accent border-accent/20';
      default:
        return 'bg-muted text-muted-foreground';
    }
  };

  const getTypeLabel = (type: string) => {
    switch (type) {
      case 'park':
        return 'Park';
      case 'ride':
        return 'Ride';
      case 'company':
        return 'Manufacturer';
      default:
        return type.charAt(0).toUpperCase() + type.slice(1);
    }
  };

  const isHero = variant === 'hero';

  return (
    <div ref={searchRef} className={`relative w-full min-w-0 ${className}`}>
      <div className="relative w-full min-w-0">
        <Search className={`absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground flex-shrink-0 pointer-events-none ${isHero ? 'w-5 h-5' : 'w-4 h-4'}`} />
        <Input
          ref={inputRef}
          placeholder={placeholder}
          value={query}
          onChange={handleInputChange}
          onFocus={handleInputFocus}
          onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
          className={`w-full ${isHero ? 'pl-12 pr-28 sm:pr-32 h-14 text-base sm:text-lg rounded-full' : 'pl-10 pr-10'} bg-background/95 backdrop-blur border-border/50 focus:border-primary/50 transition-all duration-300 ${
            isOpen ? 'shadow-lg shadow-primary/10' : ''
          }`}
        />
        {query && (
          <Button
            variant="ghost"
            size="sm"
            onClick={handleClear}
            className={`absolute flex-shrink-0 ${isHero ? 'right-16 sm:right-20 top-2 h-10 w-10 min-w-[40px]' : 'right-1 top-1/2 transform -translate-y-1/2 h-8 w-8'} p-0 hover:bg-muted`}
          >
            <X className="w-3 h-3" />
          </Button>
        )}
        {isHero && (
          <Button
            onClick={handleSearch}
            className="absolute right-2 top-2 h-10 px-4 sm:px-6 text-sm sm:text-base min-w-[70px] bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 rounded-full flex-shrink-0"
          >
            <span className="hidden xs:inline">Search</span>
            <Search className="w-4 h-4 xs:hidden" />
          </Button>
        )}
      </div>

      {isOpen && (displayItems.length > 0 || loading) && (
        <div className={`absolute top-full mt-1 left-0 right-0 bg-popover border border-border rounded-lg shadow-xl z-[100] max-h-96 overflow-y-auto ${isHero ? 'max-w-2xl mx-auto' : ''}`}>
          <div className="p-2">
            {query.length === 0 && showRecentSearches && suggestions.length > 0 && (
              <>
                <div className="flex items-center justify-between px-3 py-2">
                  <span className="text-sm text-muted-foreground">Recent searches</span>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={clearRecentSearches}
                    className="text-xs text-muted-foreground hover:text-foreground"
                  >
                    Clear
                  </Button>
                </div>
                <Separator className="my-2" />
              </>
            )}

            {displayItems.length > 0 && displayItems.map((item, index) => (
              <div
                key={item.id}
                onClick={() => handleResultClick(item)}
                className={`flex items-start gap-2 sm:gap-3 p-2 sm:p-3 rounded-lg cursor-pointer transition-colors ${
                  index === selectedIndex
                    ? 'bg-accent/10 border border-accent/20'
                    : 'hover:bg-muted/50'
                }`}
              >
                {item.type === 'suggestion' ? (
                  <>
                    <Clock className="w-4 h-4 text-muted-foreground flex-shrink-0 mt-0.5" />
                    <div className="flex-1 min-w-0">
                      <div className="font-medium truncate">{item.title}</div>
                    </div>
                  </>
                ) : (
                  <>
                    <div className="flex-1 min-w-0">
                      <div className="flex flex-col gap-1">
                        <span className="font-semibold text-foreground text-sm sm:text-base line-clamp-1 text-left">{item.title}</span>
                        <div className="flex items-center gap-2 flex-wrap justify-start">
                          <Badge variant="outline" className={`text-[10px] sm:text-xs font-medium whitespace-nowrap flex-shrink-0 ${getTypeColor(item.type)}`}>
                            {getTypeLabel(item.type)}
                          </Badge>
                          {item.subtitle && (
                            <Badge variant="secondary" className="text-[10px] sm:text-xs whitespace-nowrap flex-shrink-0">
                              {item.subtitle}
                            </Badge>
                          )}
                        </div>
                      </div>
                    </div>
                    {((item as SearchResult).rating ?? 0) > 0 && (
                      <div className="flex items-center gap-1 flex-shrink-0">
                        <Zap className="w-3 h-3 text-yellow-500" />
                        <span className="text-xs sm:text-sm font-medium">{(item as SearchResult).rating!.toFixed(1)}</span>
                      </div>
                    )}
                  </>
                )}
              </div>
            ))}

            {loading && (
              <div className="flex items-center justify-center p-4">
                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
                <span className="text-sm text-muted-foreground ml-2">Searching...</span>
              </div>
            )}

            {query.length > 0 && results.length > 0 && !loading && (
              <>
                <Separator className="my-2" />
                <Button
                  variant="ghost"
                  onClick={handleSearch}
                  className="w-full text-left justify-start text-primary hover:text-primary hover:bg-primary/10"
                >
                  <Search className="w-4 h-4 mr-2" />
                  View all results for "{query}"
                </Button>
              </>
            )}
          </div>
        </div>
      )}
    </div>
  );
}