import { Link } from "wouter";
import { useTheme } from "@/hooks/use-theme";
import { Search, Moon, Sun, Menu } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export function NavHeader() {
  const { theme, setTheme } = useTheme();
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  return (
    <header className="navigation-header border-b border-sage/20 dark:border-sage/10 bg-cream dark:bg-dark-bg sticky top-0 z-10 shadow-sm">
      <div className="flex items-center justify-between px-4 py-3 md:px-6 max-w-[var(--content-width)] mx-auto">
        <div className="flex items-center space-x-4">
          <Link href="/" className="text-navy dark:text-sage font-serif text-2xl font-semibold tracking-tight">
            Tercul
          </Link>
          <nav className="hidden md:flex items-center space-x-6">
            <Link href="/explore" className="text-navy/80 dark:text-cream/80 hover:text-russet dark:hover:text-russet/90 font-sans text-sm font-medium transition-colors">
              Explore
            </Link>
            <Link href="/authors" className="text-navy/80 dark:text-cream/80 hover:text-russet dark:hover:text-russet/90 font-sans text-sm font-medium transition-colors">
              Authors
            </Link>
            <Link href="/collections" className="text-navy/80 dark:text-cream/80 hover:text-russet dark:hover:text-russet/90 font-sans text-sm font-medium transition-colors">
              Collections
            </Link>
            <Link href="/blog" className="text-navy/80 dark:text-cream/80 hover:text-russet dark:hover:text-russet/90 font-sans text-sm font-medium transition-colors">
              Blog
            </Link>
          </nav>
        </div>
        <div className="flex items-center space-x-3">
          <Link href="/search">
            <Button 
              variant="ghost" 
              size="icon"
              className="btn-feedback p-2 rounded-full text-navy/70 dark:text-cream/70 hover:bg-navy/10 dark:hover:bg-cream/10"
            >
              <Search className="h-5 w-5" />
              <span className="sr-only">Search</span>
            </Button>
          </Link>
          
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button 
                variant="ghost" 
                size="icon"
                className="btn-feedback p-2 rounded-full text-navy/70 dark:text-cream/70 hover:bg-navy/10 dark:hover:bg-cream/10"
              >
                {theme === 'dark' ? (
                  <Moon className="h-5 w-5" />
                ) : (
                  <Sun className="h-5 w-5" />
                )}
                <span className="sr-only">Toggle theme</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={() => setTheme("light")}>
                Light
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => setTheme("dark")}>
                Dark
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => setTheme("system")}>
                System
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
          
          <div className="h-6 w-px bg-sage/20 dark:bg-sage/10 mx-1"></div>
          
          <Link href="/profile">
            <Button
              className="btn-feedback flex items-center space-x-2 py-1 px-3 text-sm font-sans font-medium rounded-full bg-navy/10 dark:bg-cream/10 text-navy dark:text-cream/90 hover:bg-navy/20 dark:hover:bg-cream/20 transition-colors"
            >
              <span>Sign In</span>
            </Button>
          </Link>
          
          <Button 
            variant="ghost" 
            size="icon"
            className="md:hidden btn-feedback p-2 rounded-full text-navy/70 dark:text-cream/70 hover:bg-navy/10 dark:hover:bg-cream/10"
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          >
            <Menu className="h-5 w-5" />
            <span className="sr-only">Menu</span>
          </Button>
        </div>
      </div>
      
      {mobileMenuOpen && (
        <div className="md:hidden px-4 py-3 bg-cream dark:bg-dark-bg border-t border-sage/20 dark:border-sage/10">
          <nav className="flex flex-col space-y-3">
            <Link href="/explore" className="text-navy/80 dark:text-cream/80 hover:text-russet dark:hover:text-russet/90 font-sans text-sm font-medium transition-colors">
              Explore
            </Link>
            <Link href="/authors" className="text-navy/80 dark:text-cream/80 hover:text-russet dark:hover:text-russet/90 font-sans text-sm font-medium transition-colors">
              Authors
            </Link>
            <Link href="/collections" className="text-navy/80 dark:text-cream/80 hover:text-russet dark:hover:text-russet/90 font-sans text-sm font-medium transition-colors">
              Collections
            </Link>
            <Link href="/blog" className="text-navy/80 dark:text-cream/80 hover:text-russet dark:hover:text-russet/90 font-sans text-sm font-medium transition-colors">
              Blog
            </Link>
          </nav>
        </div>
      )}
    </header>
  );
}
