import Link from "next/link"
import { Music, Search, User, ChevronDown } from "lucide-react"
import { Button } from "@/components/ui/button"
import { SearchDialog } from "@/components/ui/search-dialog"
import { NotificationBell } from "@/components/layout/notification-bell"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function Navbar() {
    return (
        <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
            <div className="container flex h-14 items-center">
                <div className="mr-4 hidden md:flex">
                    <Link href="/" className="mr-6 flex items-center space-x-2">
                        <Music className="h-6 w-6" />
                        <span className="hidden font-bold sm:inline-block">
                            Elmeg
                        </span>
                    </Link>
                    <nav className="flex items-center space-x-6 text-sm font-medium">
                        <Link href="/archive" className="transition-colors hover:text-foreground/80 text-foreground/60">
                            Archive
                        </Link>

                        <DropdownMenu>
                            <DropdownMenuTrigger className="flex items-center space-x-1 transition-colors hover:text-foreground/80 text-foreground/60 outline-none">
                                <span>Browse</span>
                                <ChevronDown className="h-4 w-4" />
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="start">
                                <Link href="/shows">
                                    <DropdownMenuItem>Shows</DropdownMenuItem>
                                </Link>
                                <Link href="/venues">
                                    <DropdownMenuItem>Venues</DropdownMenuItem>
                                </Link>
                                <Link href="/songs">
                                    <DropdownMenuItem>Songs</DropdownMenuItem>
                                </Link>
                                <Link href="/tours">
                                    <DropdownMenuItem>Tours</DropdownMenuItem>
                                </Link>
                                <DropdownMenuSeparator />
                                <Link href="/leaderboards">
                                    <DropdownMenuItem>Leaderboards</DropdownMenuItem>
                                </Link>
                            </DropdownMenuContent>
                        </DropdownMenu>

                        <Link href="/about" className="transition-colors hover:text-foreground/80 text-foreground/60">
                            About
                        </Link>
                    </nav>
                </div>
                <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
                    <div className="w-full flex-1 md:w-auto md:flex-none">
                        <SearchDialog />
                    </div>
                    <nav className="flex items-center gap-2">
                        <Link href="/mod">
                            <Button variant="ghost" size="sm">
                                Mod
                            </Button>
                        </Link>
                        <NotificationBell />
                        <Link href="/profile">
                            <Button variant="ghost" size="icon">
                                <User className="h-5 w-5" />
                                <span className="sr-only">User</span>
                            </Button>
                        </Link>
                    </nav>
                </div>
            </div>
        </header>
    )
}