"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,
    LayoutDashboard, Library, Star, History, ArrowRight
} from "lucide-react"
import { useRouter } from "next/navigation"
import { getApiUrl } from "@/lib/api-config"
import { Badge } from "@/components/ui/badge"

export function SearchDialog() {
    const [open, setOpen] = React.useState(false)
    const [query, setQuery] = React.useState("")
    const [loading, setLoading] = React.useState(false)
    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
        }

        setLoading(true)
        const timer = setTimeout(() => {
            fetch(`${getApiUrl()}/search/?q=${query}`)
                .then(res => res.json())
                .then(data => {
                    setResults(data)
                    setLoading(false)
                })
                .catch(err => {
                    console.error(err)
                    setLoading(false)
                })
        }, 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-lg font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background/50 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"
            >
                <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
                <span className="hidden lg:inline-flex">Search Elmeg...</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} commandProps={{ shouldFilter: false }}>
                <CommandInput
                    placeholder="Type to search songs, venues, tours..."
                    value={query}
                    onValueChange={setQuery}
                />
                <CommandList className="max-h-[500px]">
                    <CommandEmpty>
                        {loading ? (
                            <div className="flex items-center justify-center py-6 text-sm text-muted-foreground">
                                Searching...
                            </div>
                        ) : (
                            query.length >= 2 ? "No results found." : "Type at least 2 characters..."
                        )}
                    </CommandEmpty>

                    {query.length < 2 && (
                        <CommandGroup heading="Quick Navigation">
                            <CommandItem onSelect={() => handleSelect("/shows")}>
                                <Calendar className="mr-2 h-4 w-4" />
                                <span>Browse Shows</span>
                            </CommandItem>
                            <CommandItem onSelect={() => handleSelect("/leaderboards")}>
                                <Star className="mr-2 h-4 w-4" />
                                <span>Leaderboards</span>
                            </CommandItem>
                            <CommandItem onSelect={() => handleSelect("/songs")}>
                                <Music className="mr-2 h-4 w-4" />
                                <span>Song Catalog</span>
                            </CommandItem>
                            <CommandItem onSelect={() => handleSelect("/venues")}>
                                <MapPin className="mr-2 h-4 w-4" />
                                <span>Venues</span>
                            </CommandItem>
                        </CommandGroup>
                    )}

                    {results.songs?.length > 0 && (
                        <CommandGroup heading="Songs">
                            {results.songs.map((song: any) => (
                                <CommandItem key={song.slug || song.id} onSelect={() => handleSelect(`/songs/${song.slug}`)}>
                                    <Music className="mr-2 h-4 w-4" />
                                    <div className="flex flex-col">
                                        <span>{song.title}</span>
                                        {song.original_artist && (
                                            <span className="text-[10px] text-muted-foreground">Original by {song.original_artist}</span>
                                        )}
                                    </div>
                                </CommandItem>
                            ))}
                        </CommandGroup>
                    )}

                    {results.venues?.length > 0 && (
                        <CommandGroup heading="Venues">
                            {results.venues.map((venue: any) => (
                                <CommandItem key={venue.slug || venue.id} onSelect={() => handleSelect(`/venues/${venue.slug}`)}>
                                    <MapPin className="mr-2 h-4 w-4" />
                                    <div className="flex flex-col">
                                        <span>{venue.name}</span>
                                        <span className="text-[10px] text-muted-foreground">
                                            {venue.city}, {venue.state}
                                        </span>
                                    </div>
                                </CommandItem>
                            ))}
                        </CommandGroup>
                    )}

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

                    {results.performances?.length > 0 && (
                        <CommandGroup heading="Performances & Notes">
                            {results.performances.map((perf: any) => (
                                <CommandItem key={perf.slug || perf.id} onSelect={() => handleSelect(`/shows/${perf.show?.slug}`)}>
                                    <Music className="mr-2 h-4 w-4" />
                                    <div className="flex flex-col">
                                        <span>{perf.song?.title || "Unknown Song"}</span>
                                        <span className="text-[10px] text-muted-foreground">
                                            {perf.show?.date} • {perf.notes}
                                        </span>
                                    </div>
                                    <Badge variant="outline" className="ml-auto text-[10px] h-5">Performance</Badge>
                                </CommandItem>
                            ))}
                        </CommandGroup>
                    )}

                    {results.nicknames?.length > 0 && (
                        <CommandGroup heading="Heady Nicknames">
                            {results.nicknames.map((nickname: any) => (
                                <CommandItem key={nickname.id} onSelect={() => handleSelect(`/shows/${nickname.performance?.show?.slug}`)}>
                                    <Star className="mr-2 h-4 w-4 text-yellow-500" />
                                    <div className="flex flex-col">
                                        <span>{nickname.nickname}</span>
                                        <span className="text-[10px] text-muted-foreground">
                                            ({nickname.performance?.song?.title} - {nickname.performance?.show?.date})
                                        </span>
                                    </div>
                                </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.username || user.email.split('@')[0]}</span>
                                </CommandItem>
                            ))}
                        </CommandGroup>
                    )}
                </CommandList>
            </CommandDialog>
        </>
    )
}