'use client'; import { useState, useEffect, useCallback } from 'react'; import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem, ComboboxList, ComboboxEmpty, ComboboxGroup, ComboboxLabel } from '@/components/ui/combobox'; import { useDebounce } from '@/hooks/star-forge/useDebounce'; import { Search, X, Clock, Loader2, TrendingUp } from 'lucide-react'; import { cn } from '@/lib/utils'; export interface SearchOption { id: string; title: string; description?: string; category?: string; } export interface SearchProps { onSearch?: (query: string) => Promise; trendingSearches?: SearchOption[]; onSelect?: (item: SearchOption) => void; placeholder?: string; className?: string; maxRecentSearches?: number; showRecentSearches?: boolean; showTrendingSearches?: boolean; } function getSearchDisplayValue(item: SearchOption) { return item.description ? `${item.title} - ${item.description}` : item.title; } const mockSearch = async (query: string): Promise => { await new Promise((resolve) => setTimeout(resolve, 500)); const mockData: SearchOption[] = [ { id: '1', title: 'React Documentation', description: 'Official React docs and tutorials', category: 'Documentation' }, { id: '2', title: 'TypeScript Handbook', description: 'Learn TypeScript from scratch', category: 'Documentation' }, { id: '3', title: 'Next.js Examples', description: 'Production-ready Next.js examples', category: 'Examples' }, { id: '4', title: 'Tailwind CSS', description: 'Utility-first CSS framework', category: 'Styling' }, { id: '5', title: 'Vite Configuration', description: 'Build tool configuration guide', category: 'Tools' }, { id: '6', title: 'React Hooks', description: 'Complete guide to React Hooks', category: 'React' }, { id: '7', title: 'JavaScript ES6+', description: 'Modern JavaScript features', category: 'JavaScript' }, { id: '8', title: 'Node.js Best Practices', description: 'Server-side JavaScript guide', category: 'Node.js' } ]; if (!query.trim()) return []; return mockData.filter( (item) => item.title.toLowerCase().includes(query.toLowerCase()) || item.description?.toLowerCase().includes(query.toLowerCase()) || item.category?.toLowerCase().includes(query.toLowerCase()) ); }; function SearchItem({ item }: { item: SearchOption }) { return (

{item.title}

{item.description && (

{item.description}

)} {item.category && (

{item.category}

)}

); } export function SearchComponent({ onSearch = mockSearch, trendingSearches = [], onSelect, placeholder = 'Search documentation, examples, and more...', className, maxRecentSearches = 5, showRecentSearches = true, showTrendingSearches = true }: SearchProps) { const [open, setOpen] = useState(false); const [query, setQuery] = useState(''); const [results, setResults] = useState([]); const [loading, setLoading] = useState(false); const [recentSearches, setRecentSearches] = useState([]); const debouncedQuery = useDebounce(query, 300); useEffect(() => { const saved = localStorage.getItem('recent-searches'); if (saved) { try { setRecentSearches(JSON.parse(saved)); } catch (e) { console.error('Failed to load recent searches:', e); } } }, []); const saveRecentSearch = useCallback( (searchQuery: string) => { if (!searchQuery.trim()) return; setRecentSearches((prev) => { const updated = [ searchQuery, ...prev.filter((s) => s !== searchQuery) ].slice(0, maxRecentSearches); localStorage.setItem('recent-searches', JSON.stringify(updated)); return updated; }); }, [maxRecentSearches] ); useEffect(() => { if (debouncedQuery.trim()) { const performSearch = async () => { setLoading(true); try { const searchResults = await onSearch(debouncedQuery); setResults(searchResults); } catch (error) { console.error('Search failed:', error); setResults([]); } finally { setLoading(false); } }; performSearch(); } else { setResults([]); setLoading(false); } }, [debouncedQuery, onSearch]); const handleSelect = useCallback( (item: SearchOption) => { const displayValue = getSearchDisplayValue(item); saveRecentSearch(displayValue); onSelect?.(item); setOpen(false); setQuery(displayValue); }, [onSelect, saveRecentSearch] ); const clearRecentSearches = useCallback(() => { setRecentSearches([]); localStorage.removeItem('recent-searches'); }, []); const removeRecentSearch = useCallback( (searchToRemove: string, e: React.MouseEvent) => { e.stopPropagation(); setRecentSearches((prev) => { const updated = prev.filter((s) => s !== searchToRemove); localStorage.setItem('recent-searches', JSON.stringify(updated)); return updated; }); }, [] ); const showTrending = showTrendingSearches && !query.trim() && open; const showRecent = showRecentSearches && !query.trim() && recentSearches.length > 0 && open; const showResults = query.trim() && (results.length > 0 || loading); return (

{ const stringValue = String(value); if (recentSearches.includes(stringValue)) { setQuery(stringValue); saveRecentSearch(stringValue); setOpen(false); return; } const allItems = [...trendingSearches, ...results]; const selectedItem = allItems.find( (item) => getSearchDisplayValue(item) === stringValue ); if (selectedItem) { handleSelect(selectedItem); } }} > {showTrending && ( Trending Searches {trendingSearches.map((item) => ( ))} )} {showRecent && ( Recent Searches {recentSearches.map((search, index) => (

{search}

))} )} {showResults && ( {loading ? (

Searching...

) : results.length > 0 ? ( <> Search Results {results.map((item) => ( ))} ) : (

No results found for "{query}"

)} )} {!query.trim() && !showRecent && !showTrending && (

Start typing to search

)}

); } export default SearchComponent;