"use client"
import Link from "next/link"
import { Music, User, ChevronDown } from "lucide-react"
import { Button } from "@/components/ui/button"
import { SearchDialog } from "@/components/ui/search-dialog"
import { NotificationBell } from "@/components/notifications/notification-bell"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { useAuth } from "@/contexts/auth-context"

export function Navbar() {
    const { user, logout } = useAuth()
    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 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 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="/performances">
                                    <DropdownMenuItem>Top Performances</DropdownMenuItem>
                                </Link>
                                <Link href="/tours">
                                    <DropdownMenuItem>Tours</DropdownMenuItem>
                                </Link>
                                {/* Leaderboards hidden until community activity grows */}
                            </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">
                        {user ? (
                            <>
                                {(user.role === 'admin' || user.role === 'moderator') && (
                                    <Link href="/mod">
                                        <Button variant="ghost" size="sm">
                                            Mod
                                        </Button>
                                    </Link>
                                )}
                                <NotificationBell />
                                <DropdownMenu>
                                    <DropdownMenuTrigger asChild>
                                        <Button variant="ghost" size="icon">
                                            <User className="h-5 w-5" />
                                            <span className="sr-only">User</span>
                                        </Button>
                                    </DropdownMenuTrigger>
                                    <DropdownMenuContent align="end">
                                        <DropdownMenuItem disabled className="font-semibold">
                                            {user.email}
                                        </DropdownMenuItem>
                                        <DropdownMenuSeparator />
                                        <Link href="/profile">
                                            <DropdownMenuItem>Profile</DropdownMenuItem>
                                        </Link>
                                        <Link href="/settings">
                                            <DropdownMenuItem>Settings</DropdownMenuItem>
                                        </Link>
                                        <DropdownMenuSeparator />
                                        <DropdownMenuItem onClick={logout} className="text-red-500 focus:text-red-500">
                                            Sign Out
                                        </DropdownMenuItem>
                                    </DropdownMenuContent>
                                </DropdownMenu>
                            </>
                        ) : (
                            <div className="flex items-center gap-2">
                                <Link href="/login">
                                    <Button variant="ghost" size="sm">
                                        Sign In
                                    </Button>
                                </Link>
                                <Link href="/register">
                                    <Button size="sm">
                                        Sign Up
                                    </Button>
                                </Link>
                            </div>
                        )}
                    </nav>
                </div>
            </div>
        </header>
    )
}