"use client"

import * as React from "react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Search, Bell, Menu, User, Settings, LogOut, Home, FolderOpen, Users, BarChart3 } from "lucide-react"
import { PercolateLogo } from "./percolate-logo"

export interface TopNavigationProps extends React.HTMLAttributes<HTMLElement> {
  variant?: "default" | "minimal" | "with-search" | "with-breadcrumbs"
  showNotifications?: boolean
  showUserMenu?: boolean
  showSearch?: boolean
  showMobileMenu?: boolean
  userName?: string
  notificationCount?: number
}

const TopNavigation = React.forwardRef<HTMLElement, TopNavigationProps>(
  (
    {
      className,
      variant = "default",
      showNotifications = true,
      showUserMenu = true,
      showSearch = false,
      showMobileMenu = true,
      userName = "John Doe",
      notificationCount = 3,
      ...props
    },
    ref,
  ) => {
    const navigationItems = [
      { name: "Dashboard", href: "#", icon: Home },
      { name: "Projects", href: "#", icon: FolderOpen },
      { name: "Team", href: "#", icon: Users },
      { name: "Analytics", href: "#", icon: BarChart3 },
    ]

    const breadcrumbs = [
      { name: "Dashboard", href: "#" },
      { name: "Projects", href: "#" },
      { name: "Website Redesign", href: "#" },
    ]

    return (
      <nav
        ref={ref}
        className={cn(
          "flex items-center justify-between w-full border-b bg-background",
          variant === "minimal" ? "px-4 py-2" : "px-6 py-3",
          className,
        )}
        {...props}
      >
        {/* Left Section - Logo and Navigation */}
        <div className="flex items-center space-x-6">
          {/* Mobile Menu Button */}
          {showMobileMenu && (
            <Button variant="ghost" size="sm" className="md:hidden">
              <Menu className="h-5 w-5" />
            </Button>
          )}

          {/* Logo */}
          <div className="flex items-center space-x-2">
            <PercolateLogo />
            <span className="font-semibold text-lg">percolate</span>
          </div>

          {/* Desktop Navigation */}
          {variant !== "minimal" && (
            <div className="hidden md:flex items-center space-x-1">
              {navigationItems.map((item) => (
                <Button
                  key={item.name}
                  variant="ghost"
                  size="sm"
                  className="text-muted-foreground hover:text-foreground"
                >
                  <item.icon className="h-4 w-4 mr-2" />
                  {item.name}
                </Button>
              ))}
            </div>
          )}

          {/* Breadcrumbs */}
          {variant === "with-breadcrumbs" && (
            <div className="hidden md:flex items-center space-x-2 text-sm text-muted-foreground">
              {breadcrumbs.map((crumb, index) => (
                <React.Fragment key={crumb.name}>
                  {index > 0 && <span>/</span>}
                  <button
                    className={cn(
                      "hover:text-foreground transition-colors",
                      index === breadcrumbs.length - 1 && "text-foreground font-medium",
                    )}
                  >
                    {crumb.name}
                  </button>
                </React.Fragment>
              ))}
            </div>
          )}
        </div>

        {/* Center Section - Search */}
        {(showSearch || variant === "with-search") && (
          <div className="flex-1 max-w-md mx-6">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input placeholder="Search..." className="pl-10 bg-muted/50" />
            </div>
          </div>
        )}

        {/* Right Section - Actions and User */}
        <div className="flex items-center space-x-3">
          {/* Search Icon (when not showing search bar) */}
          {!showSearch && variant !== "with-search" && (
            <Button variant="ghost" size="sm">
              <Search className="h-5 w-5" />
            </Button>
          )}

          {/* Notifications */}
          {showNotifications && (
            <Button variant="ghost" size="sm" className="relative">
              <Bell className="h-5 w-5" />
              {notificationCount > 0 && (
                <Badge
                  variant="destructive"
                  className="absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center p-0 text-xs"
                >
                  {notificationCount}
                </Badge>
              )}
            </Button>
          )}

          {/* User Menu */}
          {showUserMenu && (
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" className="relative h-8 w-8 rounded-full">
                  <Avatar className="h-8 w-8">
                    <AvatarImage src="/placeholder.svg?height=32&width=32" alt={userName} />
                    <AvatarFallback>
                      {userName
                        .split(" ")
                        .map((n) => n[0])
                        .join("")}
                    </AvatarFallback>
                  </Avatar>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent className="w-56" align="end" forceMount>
                <DropdownMenuLabel className="font-normal">
                  <div className="flex flex-col space-y-1">
                    <p className="text-sm font-medium leading-none">{userName}</p>
                    <p className="text-xs leading-none text-muted-foreground">john@example.com</p>
                  </div>
                </DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem>
                  <User className="mr-2 h-4 w-4" />
                  <span>Profile</span>
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <Settings className="mr-2 h-4 w-4" />
                  <span>Settings</span>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem>
                  <LogOut className="mr-2 h-4 w-4" />
                  <span>Log out</span>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          )}
        </div>
      </nav>
    )
  },
)

TopNavigation.displayName = "TopNavigation"

export { TopNavigation }