EmberClone/apps/web/src/components/SearchBar.tsx

import React, { useState, useEffect } from 'react';
import { useNavigate } from '@tanstack/react-router';
import { Search, User, Folder, Clock, X, History } from 'lucide-react';
import { useQuery } from '@tanstack/react-query';
import { api } from '../lib/api';

interface SearchResult {
  id: string;
  type: 'customer' | 'project' | 'time-entry';
  label: string;
  subtitle?: string;
}

export default function SearchBar() {
  const [query, setQuery] = useState('');
  const [isOpen, setIsOpen] = useState(false);
  const [history, setHistory] = useState<string[]>([]);
  const navigate = useNavigate();

  useEffect(() => {
    const saved = localStorage.getItem('search_history');
    if (saved) {
      try {
        setHistory(JSON.parse(saved));
      } catch (e) {
        console.error('Failed to parse search history');
      }
    }
  }, []);

  const addToHistory = (term: string) => {
    if (!term.trim()) return;
    const updated = [term, ...history.filter((item) => item !== term)].slice(0, 10);
    setHistory(updated);
    localStorage.setItem('search_history', JSON.stringify(updated));
  };

  const { data: results, isLoading } = useQuery({
    queryKey: ['search', query],
    queryFn: async () => {
      if (query.length >= 2) {
        addToHistory(query);
      }
      return api.search(query);
    },
    enabled: query.length >= 2,
  });

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') setIsOpen(false);
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, []);

  const handleSelect = (result: SearchResult) => {
    const paths: Record<SearchResult['type'], string> = {
      customer: `/customers/${result.id}`,
      project: `/projects/${result.id}`,
      'time-entry': `/time-entries/${result.id}`,
    };
    navigate({ to: paths[result.type] });
    setQuery('');
    setIsOpen(false);
  };

  const handleHistoryClick = (term: string) => {
    setQuery(term);
    setIsOpen(true);
  };

  const getIcon = (type: SearchResult['type']) => {
    switch (type) {
      case 'customer': return <User className="w-4 h-4 text-purple-500" />;
      case 'project': return <Folder className="w-4 h-4 text-orange-500" />;
      case 'time-entry': return <Clock className="w-4 h-4 text-green-500" />;
    }
  };

  return (
    <div className="relative w-64">
      <div className="relative group">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-400 group-focus-within:text-zinc-600 dark:group-focus-within:text-zinc-300" />
        <input
          type="text"
          className="w-full pl-9 pr-4 py-1.5 bg-zinc-100 dark:bg-zinc-800 border border-transparent focus:border-zinc-300 dark:focus:border-zinc-700 rounded-md text-sm outline-none transition-all placeholder-zinc-500 dark:placeholder-zinc-400"
          placeholder="Search... (⌘K)"
          value={query}
          onChange={(e) => {
            setQuery(e.target.value);
            setIsOpen(true);
          }}
          onFocus={() => setIsOpen(true)}
        />
        {query && (
          <button 
            onClick={() => setQuery('')}
            className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"
          >
            <X className="w-3 h-3" />
          </button>
        )}
      </div>

      {isOpen && (
        <div className="absolute top-full left-0 right-0 mt-2 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-lg shadow-xl z-50 overflow-hidden">
          {query.length === 0 ? (
            <div className="p-1">
              <div className="px-2 py-1 text-[10px] font-bold uppercase tracking-wider text-zinc-400 dark:text-zinc-500 flex items-center gap-1">
                <History className="w-3 h-3" /> Recent Searches
              </div>
              {history.length > 0 ? (
                history.map((term) => (
                  <button
                    key={term}
                    onClick={() => handleHistoryClick(term)}
                    className="w-full flex items-center gap-3 px-2 py-2 text-left text-sm rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors group"
                  >
                    <Search className="w-3 h-3 text-zinc-400" />
                    <span className="text-zinc-600 dark:text-zinc-300">{term}</span>
                  </button>
                ))
              ) : (
                <div className="p-4 text-center text-xs text-zinc-500">No recent searches</div>
              )}
            </div>
          ) : isLoading ? (
            <div className="p-4 text-center text-xs text-zinc-500">Searching...</div>
          ) : results && results.length > 0 ? (
            <div className="max-h-96 overflow-y-auto p-1">
              {(['customer', 'project', 'time-entry'] as const).map((type) => {
                const filtered = results.filter((r: SearchResult) => r.type === type);
                if (filtered.length === 0) return null;

                return (
                  <div key={type} className="mb-2">
                    <div className="px-2 py-1 text-[10px] font-bold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
                      {type}s
                    </div>
                    {filtered.map((result: SearchResult) => (
                      <button
                        key={result.id}
                        onClick={() => handleSelect(result)}
                        className="w-full flex items-center gap-3 px-2 py-2 text-left text-sm rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors group"
                      >
                        {getIcon(result.type)}
                        <div className="flex flex-col overflow-hidden">
                          <span className="text-zinc-700 dark:text-zinc-200 truncate">{result.label}</span>
                          {result.subtitle && <span className="text-[11px] text-zinc-500 truncate">{result.subtitle}</span>}
                        </div>
                      </button>
                    ))}
                  </div>
                );
              })}
            </div>
          ) : (
            <div className="p-4 text-center text-xs text-zinc-500">No results found</div>
          )}
        </div>
      )}
    </div>
  );
}