import { useState, useEffect, useMemo, useCallback } from 'react'; import { supabase } from '@/lib/supabaseClient'; import { Park, Ride, Company } from '@/types/database'; import * as storage from '@/lib/localStorage'; import { toast } from 'sonner'; import { handleNonCriticalError } from '@/lib/errorHandler'; 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; } // Hoist default values to prevent recreating on every render const DEFAULT_TYPES: ('park' | 'ride' | 'company')[] = ['park', 'ride', 'company']; const DEFAULT_LIMIT = 10; const DEFAULT_MIN_QUERY = 2; const DEFAULT_DEBOUNCE_MS = 300; export function useSearch(options: UseSearchOptions = {}) { // All hooks declarations in stable order const [query, setQuery] = useState(''); const [results, setResults] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [recentSearches, setRecentSearches] = useState([]); const [debouncedQuery, setDebouncedQuery] = useState(''); // Use useMemo to stabilize options, but use safe defaults to prevent undefined errors during HMR const stableOptions = useMemo(() => { const safeOptions = options || {}; return { types: safeOptions.types || DEFAULT_TYPES, limit: safeOptions.limit ?? DEFAULT_LIMIT, minQuery: safeOptions.minQuery ?? DEFAULT_MIN_QUERY, debounceMs: safeOptions.debounceMs ?? DEFAULT_DEBOUNCE_MS, }; }, [options]); const { types, limit, minQuery, debounceMs } = stableOptions; useEffect(() => { const timer = setTimeout(() => { setDebouncedQuery(query); }, debounceMs); return () => clearTimeout(timer); }, [query, debounceMs]); // Load recent searches from localStorage useEffect(() => { const searches = storage.getJSON('thrillwiki_recent_searches', []); if (Array.isArray(searches)) { setRecentSearches(searches); } }, []); // Search function const search = useCallback(async (searchQuery: string) => { if (searchQuery.length < minQuery) { setResults([]); setError(null); return; } setLoading(true); setError(null); 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?.state_province, park.location?.country].filter(Boolean).join(', '), image: park.banner_image_url || park.card_image_url || undefined, rating: park.average_rating ?? undefined, 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 || undefined, rating: ride.average_rating ?? undefined, slug: ride.slug, data: ride }); }); } // Search companies if (types.includes('company')) { const { data: companies } = await supabase .from('companies') .select('id, name, slug, description, company_type, logo_url, average_rating, review_count') .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 || undefined, slug: company.slug, 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: unknown) { handleNonCriticalError(error, { action: 'Search', metadata: { query: searchQuery, types }, }); toast.error('Search failed', { description: 'Unable to search. Please try again.', }); setError('Failed to search. Please try again.'); setResults([]); } finally{ setLoading(false); } }, [types, limit, minQuery]); // Effect for debounced search useEffect(() => { if (debouncedQuery) { search(debouncedQuery); } else { setResults([]); } }, [debouncedQuery, search]); // 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); storage.setJSON('thrillwiki_recent_searches', updated); }; // Clear recent searches const clearRecentSearches = () => { setRecentSearches([]); storage.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, error, recentSearches, saveSearch, clearRecentSearches, search }; }