feat: Implement modern search with autocomplete

src/hooks/useSearch.tsx

@@ -0,0 +1,204 @@
+import { useState, useEffect, useMemo } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+import { Park, Ride, Company } from '@/types/database';
+
+export interface SearchResult {
+  id: string;
+  type: 'park' | 'ride' | 'company';
+  title: string;
+  subtitle: string;
+  image?: string;
+  rating?: number;
+  slug?: string;
+  data: Park | Ride | Company;
+}
+
+interface UseSearchOptions {
+  types?: ('park' | 'ride' | 'company')[];
+  limit?: number;
+  minQuery?: number;
+  debounceMs?: number;
+}
+
+export function useSearch(options: UseSearchOptions = {}) {
+  const {
+    types = ['park', 'ride', 'company'],
+    limit = 10,
+    minQuery = 2,
+    debounceMs = 300
+  } = options;
+
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [recentSearches, setRecentSearches] = useState<string[]>([]);
+
+  // Debounced query
+  const [debouncedQuery, setDebouncedQuery] = useState('');
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedQuery(query);
+    }, debounceMs);
+
+    return () => clearTimeout(timer);
+  }, [query, debounceMs]);
+
+  // Load recent searches from localStorage
+  useEffect(() => {
+    const stored = localStorage.getItem('thrillwiki_recent_searches');
+    if (stored) {
+      setRecentSearches(JSON.parse(stored));
+    }
+  }, []);
+
+  // Search function
+  const search = async (searchQuery: string) => {
+    if (searchQuery.length < minQuery) {
+      setResults([]);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const searchResults: SearchResult[] = [];
+
+      // Search parks
+      if (types.includes('park')) {
+        const { data: parks } = await supabase
+          .from('parks')
+          .select(`
+            *,
+            location:locations(*),
+            operator:companies!parks_operator_id_fkey(*)
+          `)
+          .or(`name.ilike.%${searchQuery}%,description.ilike.%${searchQuery}%`)
+          .limit(Math.ceil(limit / types.length));
+
+        parks?.forEach((park) => {
+          searchResults.push({
+            id: park.id,
+            type: 'park',
+            title: park.name,
+            subtitle: `${park.location?.city || ''}, ${park.location?.country || ''}`.replace(/^, |, $/, ''),
+            image: park.banner_image_url || park.card_image_url,
+            rating: park.average_rating,
+            slug: park.slug,
+            data: park
+          });
+        });
+      }
+
+      // Search rides
+      if (types.includes('ride')) {
+        const { data: rides } = await supabase
+          .from('rides')
+          .select(`
+            *,
+            park:parks!inner(name, slug),
+            manufacturer:companies!rides_manufacturer_id_fkey(*)
+          `)
+          .or(`name.ilike.%${searchQuery}%,description.ilike.%${searchQuery}%`)
+          .limit(Math.ceil(limit / types.length));
+
+        rides?.forEach((ride) => {
+          searchResults.push({
+            id: ride.id,
+            type: 'ride',
+            title: ride.name,
+            subtitle: `at ${ride.park?.name || 'Unknown Park'}`,
+            image: ride.image_url,
+            rating: ride.average_rating,
+            data: ride
+          });
+        });
+      }
+
+      // Search companies
+      if (types.includes('company')) {
+        const { data: companies } = await supabase
+          .from('companies')
+          .select('*')
+          .or(`name.ilike.%${searchQuery}%,description.ilike.%${searchQuery}%`)
+          .limit(Math.ceil(limit / types.length));
+
+        companies?.forEach((company) => {
+          searchResults.push({
+            id: company.id,
+            type: 'company',
+            title: company.name,
+            subtitle: company.company_type?.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase()) || 'Company',
+            image: company.logo_url,
+            data: company
+          });
+        });
+      }
+
+      // Sort by relevance (exact matches first, then partial matches)
+      searchResults.sort((a, b) => {
+        const aExact = a.title.toLowerCase().startsWith(searchQuery.toLowerCase());
+        const bExact = b.title.toLowerCase().startsWith(searchQuery.toLowerCase());
+        
+        if (aExact && !bExact) return -1;
+        if (!aExact && bExact) return 1;
+        
+        return a.title.localeCompare(b.title);
+      });
+
+      setResults(searchResults.slice(0, limit));
+    } catch (error) {
+      console.error('Search error:', error);
+      setResults([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Effect for debounced search
+  useEffect(() => {
+    if (debouncedQuery) {
+      search(debouncedQuery);
+    } else {
+      setResults([]);
+    }
+  }, [debouncedQuery]);
+
+  // Save search to recent searches
+  const saveSearch = (searchQuery: string) => {
+    if (!searchQuery.trim()) return;
+    
+    const updated = [searchQuery, ...recentSearches.filter(s => s !== searchQuery)].slice(0, 5);
+    setRecentSearches(updated);
+    localStorage.setItem('thrillwiki_recent_searches', JSON.stringify(updated));
+  };
+
+  // Clear recent searches
+  const clearRecentSearches = () => {
+    setRecentSearches([]);
+    localStorage.removeItem('thrillwiki_recent_searches');
+  };
+
+  // Get suggestions (recent searches when no query)
+  const suggestions = useMemo(() => {
+    if (query.length > 0) return [];
+    return recentSearches.map(search => ({
+      id: search,
+      type: 'suggestion' as const,
+      title: search,
+      subtitle: 'Recent search',
+      data: null
+    }));
+  }, [query, recentSearches]);
+
+  return {
+    query,
+    setQuery,
+    results,
+    suggestions,
+    loading,
+    recentSearches,
+    saveSearch,
+    clearRecentSearches,
+    search
+  };
+}