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

const browseLinks = [
    { href: "/shows", label: "Shows" },
    { href: "/venues", label: "Venues" },
    { href: "/songs", label: "Songs" },
    { href: "/performances", label: "Top Performances" },
    { href: "/tours", label: "Tours" },
    { href: "/videos", label: "Videos" },
    { href: "/leaderboards", label: "Leaderboards" },
]

export function Navbar() {
    const { user, logout } = useAuth()
    const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

    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 justify-between">
                {/* Logo - always visible */}
                <Link href="/" className="flex items-center space-x-2">
                    <Music className="h-6 w-6" />
                    <span className="font-bold">Elmeg</span>
                </Link>

                {/* Desktop Navigation */}
                <nav className="hidden md: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">
                            {browseLinks.map((link) => (
                                <Link key={link.href} href={link.href}>
                                    <DropdownMenuItem>{link.label}</DropdownMenuItem>
                                </Link>
                            ))}
                        </DropdownMenuContent>
                    </DropdownMenu>

                    <Link href="/about" className="transition-colors hover:text-foreground/80 text-foreground/60">
                        About
                    </Link>
                </nav>

                {/* Right side - search, theme, auth */}
                <div className="flex items-center gap-2">
                    <div className="hidden sm:block">
                        <SearchDialog />
                    </div>
                    <ThemeToggle />

                    {/* Desktop auth */}
                    <div className="hidden md: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>
                            </>
                        ) : (
                            <>
                                <Link href="/login">
                                    <Button variant="ghost" size="sm">Sign In</Button>
                                </Link>
                                <Link href="/register">
                                    <Button size="sm">Sign Up</Button>
                                </Link>
                            </>
                        )}
                    </div>

                    {/* Mobile menu button */}
                    <Button
                        variant="ghost"
                        size="icon"
                        className="md:hidden"
                        onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                    >
                        {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
                        <span className="sr-only">Toggle menu</span>
                    </Button>
                </div>
            </div>

            {/* Mobile Menu */}
            {mobileMenuOpen && (
                <div className="md:hidden border-t bg-background">
                    <div className="container mx-auto max-w-7xl px-4 py-4 space-y-4">
                        {/* Mobile search */}
                        <div className="sm:hidden">
                            <SearchDialog />
                        </div>

                        {/* Mobile nav links */}
                        <nav className="flex flex-col space-y-2">
                            <Link
                                href="/archive"
                                className="px-3 py-2 rounded-md hover:bg-muted transition-colors"
                                onClick={() => setMobileMenuOpen(false)}
                            >
                                Archive
                            </Link>

                            <div className="px-3 py-2 text-sm font-medium text-muted-foreground">Browse</div>
                            {browseLinks.map((link) => (
                                <Link
                                    key={link.href}
                                    href={link.href}
                                    className="px-6 py-2 rounded-md hover:bg-muted transition-colors"
                                    onClick={() => setMobileMenuOpen(false)}
                                >
                                    {link.label}
                                </Link>
                            ))}

                            <Link
                                href="/about"
                                className="px-3 py-2 rounded-md hover:bg-muted transition-colors"
                                onClick={() => setMobileMenuOpen(false)}
                            >
                                About
                            </Link>
                        </nav>

                        {/* Mobile auth */}
                        <div className="border-t pt-4">
                            {user ? (
                                <div className="flex flex-col space-y-2">
                                    <div className="px-3 py-2 text-sm text-muted-foreground">{user.email}</div>
                                    {(user.role === 'admin' || user.role === 'moderator') && (
                                        <Link
                                            href="/mod"
                                            className="px-3 py-2 rounded-md hover:bg-muted transition-colors"
                                            onClick={() => setMobileMenuOpen(false)}
                                        >
                                            Moderation
                                        </Link>
                                    )}
                                    <Link
                                        href="/profile"
                                        className="px-3 py-2 rounded-md hover:bg-muted transition-colors"
                                        onClick={() => setMobileMenuOpen(false)}
                                    >
                                        Profile
                                    </Link>
                                    <Link
                                        href="/settings"
                                        className="px-3 py-2 rounded-md hover:bg-muted transition-colors"
                                        onClick={() => setMobileMenuOpen(false)}
                                    >
                                        Settings
                                    </Link>
                                    <button
                                        onClick={() => { logout(); setMobileMenuOpen(false); }}
                                        className="px-3 py-2 text-left rounded-md text-red-500 hover:bg-muted transition-colors"
                                    >
                                        Sign Out
                                    </button>
                                </div>
                            ) : (
                                <div className="flex gap-2">
                                    <Link href="/login" className="flex-1" onClick={() => setMobileMenuOpen(false)}>
                                        <Button variant="outline" className="w-full">Sign In</Button>
                                    </Link>
                                    <Link href="/register" className="flex-1" onClick={() => setMobileMenuOpen(false)}>
                                        <Button className="w-full">Sign Up</Button>
                                    </Link>
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            )}
        </header>
    )
}