"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import { Menu, Search, User, Sun, Moon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { cva, type VariantProps } from "class-variance-authority";

const navbarVariants = cva("w-full bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 transition-all duration-200 border-b", {
  variants: {
    variant: {
      default: "h-16",
      centered: "h-16",
      "with-search": "h-16",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});

export interface NavbarItem {
  label: string;
  href: string;
  active?: boolean;
}

export interface NavbarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof navbarVariants> {
  items: NavbarItem[];
  logo?: React.ReactNode;
  user?: {
    name: string;
    avatar?: string;
  };
  onSearch?: (query: string) => void;
  onThemeToggle?: () => void;
}

/**
 * Navbar — a responsive top navigation bar with a mobile sheet.
 *
 * Mark the current route with `active` on the matching item.
 *
 * @example
 * <Navbar
 *   logo="Acme"
 *   items={[
 *     { label: "Home", href: "/", active: true },
 *     { label: "Pricing", href: "/pricing" },
 *   ]}
 *   onSearch={(query) => search(query)}
 * />
 */
export function Navbar({
  className,
  variant,
  items,
  logo,
  user,
  onSearch,
  onThemeToggle,
  ...props
}: NavbarProps) {
  const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
  const [isScrolled, setIsScrolled] = React.useState(false);

  React.useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 0);
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <div className={cn(
      navbarVariants({ variant }), 
      isScrolled ? "shadow-sm border-border/80" : "border-transparent",
      className
    )} {...props}>
      <div className="container mx-auto px-4 h-full">
        <div className={cn(
          "flex items-center justify-between h-full",
          variant === "centered" && "grid grid-cols-3"
        )}>
          {/* Logo Section */}
          <div className={cn(
            "flex items-center gap-4",
            variant === "centered" && "justify-start"
          )}>
            <div className="font-bold text-xl tracking-tight">
              {logo || "Logo"}
            </div>
          </div>

          {/* Nav Links - Desktop */}
          <div className={cn(
            "hidden md:flex items-center gap-6",
            variant === "centered" ? "justify-center" : "ml-6"
          )}>
            {items.map((item) => (
              <a
                key={item.label}
                href={item.href}
                className={cn(
                  "relative text-sm font-medium transition-colors hover:text-primary",
                  item.active ? "text-foreground" : "text-muted-foreground",
                  !item.active && "after:absolute after:bottom-[-18px] after:left-1/2 after:h-0.5 after:w-0 after:bg-primary/50 after:rounded-full after:-translate-x-1/2 after:transition-all hover:after:w-full"
                )}
              >
                {item.label}
                {item.active && (
                  <div className="absolute -bottom-[18px] left-0 right-0 h-0.5 bg-primary rounded-full" />
                )}
              </a>
            ))}
          </div>

          {/* Right Section */}
          <div className={cn(
            "flex items-center gap-4",
            variant === "centered" ? "justify-end" : "ml-auto"
          )}>
            {variant === "with-search" && (
              <div className="hidden lg:flex relative w-64 items-center">
                <Search className="absolute left-2.5 h-4 w-4 text-muted-foreground" />
                <Input
                  type="search"
                  placeholder="Search..."
                  className="w-full pl-9 h-9 bg-muted/50 rounded-full"
                  onChange={(e) => onSearch?.(e.target.value)}
                />
              </div>
            )}

            {onThemeToggle && (
              <Button variant="ghost" size="icon" onClick={onThemeToggle} className="rounded-full">
                <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
                <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
                <span className="sr-only">Toggle theme</span>
              </Button>
            )}

            {user && (
              <Button variant="ghost" size="icon" className="rounded-full bg-secondary">
                {user.avatar ? (
                  <img src={user.avatar} alt={user.name} className="w-full h-full rounded-full object-cover" />
                ) : (
                  <User className="h-4 w-4" />
                )}
                <span className="sr-only">User menu</span>
              </Button>
            )}

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

      {/* Mobile Menu */}
      <div 
        className={cn(
          "md:hidden bg-background transition-all duration-300 ease-in-out overflow-hidden",
          mobileMenuOpen ? "max-h-96 opacity-100 border-b" : "max-h-0 opacity-0 border-transparent"
        )}
      >
        <div className="px-4 py-4 space-y-4">
          {variant === "with-search" && (
            <div className="relative w-full">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
              <Input
                type="search"
                placeholder="Search..."
                className="w-full pl-9 bg-muted/50 rounded-md"
                onChange={(e) => onSearch?.(e.target.value)}
              />
            </div>
          )}
          <nav className="flex flex-col space-y-3">
            {items.map((item) => (
              <a
                key={item.label}
                href={item.href}
                className={cn(
                  "text-sm font-medium transition-colors hover:text-primary px-2 py-1.5 rounded-md hover:bg-muted",
                  item.active ? "text-foreground bg-muted/50" : "text-muted-foreground"
                )}
              >
                {item.label}
              </a>
            ))}
          </nav>
        </div>
      </div>
    </div>
  );
}
Top Navigation Bar
