elmeg-demo/frontend/components/ui/search-dialog.tsx

"use client"

import * as React from "react"
import {
    CommandDialog,
    CommandEmpty,
    CommandGroup,
    CommandInput,
    CommandItem,
    CommandList,
    CommandSeparator,
} from "@/components/ui/command"
import { Search, Music, MapPin, Calendar, Users, Globe } from "lucide-react"
import { useRouter } from "next/navigation"
import { getApiUrl } from "@/lib/api-config"

export function SearchDialog() {
    const [open, setOpen] = React.useState(false)
    const [query, setQuery] = React.useState("")
    const [results, setResults] = React.useState<any>({
        songs: [],
        venues: [],
        tours: [],
        groups: [],
        users: [],
        nicknames: [],
        performances: []
    })
    const router = useRouter()

    React.useEffect(() => {
        const down = (e: KeyboardEvent) => {
            if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
                e.preventDefault()
                setOpen((open) => !open)
            }
        }

        document.addEventListener("keydown", down)
        return () => document.removeEventListener("keydown", down)
    }, [])

    React.useEffect(() => {
        if (query.length < 2) {
            setResults({ songs: [], venues: [], tours: [], groups: [], users: [], nicknames: [], performances: [] })
            return
        }

        const timer = setTimeout(() => {
            fetch(`${getApiUrl()}/search/?q=${query}`)
                .then(res => res.json())
                .then(data => setResults(data))
                .catch(err => console.error(err))
        }, 300)

        return () => clearTimeout(timer)
    }, [query])

    const handleSelect = (url: string) => {
        setOpen(false)
        router.push(url)
    }

    return (
        <>
            <button
                onClick={() => setOpen(true)}
                className="inline-flex items-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 relative w-full justify-start text-sm text-muted-foreground sm:pr-12 md:w-40 lg:w-64"
            >
                <span className="hidden lg:inline-flex">Search...</span>
                <span className="inline-flex lg:hidden">Search...</span>
                <kbd className="pointer-events-none absolute right-1.5 top-1.5 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
                    <span className="text-xs">⌘</span>K
                </kbd>
            </button>
            <CommandDialog open={open} onOpenChange={setOpen}>
                <CommandInput placeholder="Type a command or search..." value={query} onValueChange={setQuery} />
                <CommandList>
                    <CommandEmpty>No results found.</CommandEmpty>

                    {results.songs.length > 0 && (
                        <CommandGroup heading="Songs">
                            {results.songs.map((song: any) => (
                                <CommandItem key={song.id} onSelect={() => handleSelect(`/songs/${song.id}`)}>
                                    <Music className="mr-2 h-4 w-4" />
                                    <span>{song.title}</span>
                                </CommandItem>
                            ))}
                        </CommandGroup>
                    )}

                    {results.venues.length > 0 && (
                        <CommandGroup heading="Venues">
                            {results.venues.map((venue: any) => (
                                <CommandItem key={venue.id} onSelect={() => handleSelect(`/venues/${venue.id}`)}>
                                    <MapPin className="mr-2 h-4 w-4" />
                                    <span>{venue.name}</span>
                                </CommandItem>
                            ))}
                        </CommandGroup>
                    )}

                    {results.tours.length > 0 && (
                        <CommandGroup heading="Tours">
                            {results.tours.map((tour: any) => (
                                <CommandItem key={tour.id} onSelect={() => handleSelect(`/tours/${tour.id}`)}>
                                    <Calendar className="mr-2 h-4 w-4" />
                                    <span>{tour.name}</span>
                                </CommandItem>
                            ))}
                        </CommandGroup>
                    )}

                    {results.groups.length > 0 && (
                        <CommandGroup heading="Communities">
                            {results.groups.map((group: any) => (
                                <CommandItem key={group.id} onSelect={() => handleSelect(`/groups/${group.id}`)}>
                                    <Globe className="mr-2 h-4 w-4" />
                                    <span>{group.name}</span>
                                </CommandItem>
                            ))}
                        </CommandGroup>
                    )}

                    {results.nicknames && results.nicknames.length > 0 && (
                        <CommandGroup heading="Nicknames">
                            {results.nicknames.map((nickname: any) => (
                                <CommandItem key={nickname.id} onSelect={() => handleSelect(`/performances/${nickname.performance_id}`)}>
                                    <Music className="mr-2 h-4 w-4" />
                                    <span>{nickname.nickname}</span>
                                </CommandItem>
                            ))}
                        </CommandGroup>
                    )}

                    {results.performances && results.performances.length > 0 && (
                        <CommandGroup heading="Performances">
                            {results.performances.map((perf: any) => (
                                <CommandItem key={perf.id} onSelect={() => handleSelect(`/performances/${perf.id}`)}>
                                    <Music className="mr-2 h-4 w-4" />
                                    <span>{perf.song?.title} - {perf.notes}</span>
                                </CommandItem>
                            ))}
                        </CommandGroup>
                    )}

                    {results.users.length > 0 && (
                        <CommandGroup heading="Users">
                            {results.users.map((user: any) => (
                                <CommandItem key={user.id} onSelect={() => handleSelect(`/profile/${user.id}`)}>
                                    <Users className="mr-2 h-4 w-4" />
                                    <span>{user.email}</span>
                                </CommandItem>
                            ))}
                        </CommandGroup>
                    )}
                </CommandList>
            </CommandDialog>
        </>
    )
}