import { useEffect, useState } from "react"
import { Menu } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
import { cn } from "@/lib/utils"
import { navItems, scrollToSection } from "@/lib/scroll"
import { project } from "@/data/project"

export function Header() {
  const [scrolled, setScrolled] = useState(false)

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8)
    onScroll()
    window.addEventListener("scroll", onScroll, { passive: true })
    return () => window.removeEventListener("scroll", onScroll)
  }, [])

  return (
    <header
      className={cn(
        "fixed inset-x-0 top-0 z-40 transition-all duration-300",
        scrolled
          ? "border-b border-border bg-background/85 backdrop-blur-md"
          : "border-b border-transparent bg-transparent"
      )}
    >
      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-5 md:px-8">
        <button
          onClick={() => scrollToSection("home")}
          className={cn(
            "flex items-center gap-2 text-lg font-bold tracking-tight focus:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors duration-300",
            scrolled ? "text-primary" : "text-white"
          )}
        >
          <span className="inline-block h-5 w-1.5 rounded-full bg-brand" />
          {project.acronym}
        </button>

        {/* Desktop nav */}
        <nav className="hidden items-center gap-1 md:flex">
          {navItems.map((item) => (
            <button
              key={item.id}
              onClick={() => scrollToSection(item.id)}
              className={cn(
                "rounded-md px-4 py-2 text-sm font-medium transition-colors duration-300",
                scrolled
                  ? "text-muted-foreground hover:bg-secondary hover:text-primary"
                  : "text-white/80 hover:bg-white/10 hover:text-white"
              )}
            >
              {item.label}
            </button>
          ))}
        </nav>

        {/* Mobile menu */}
        <div className="md:hidden">
          <Sheet>
            <SheetTrigger asChild>
              <Button
                variant="outline"
                size="icon"
                aria-label="Open menu"
                className={cn(
                  "transition-colors duration-300",
                  !scrolled && "border-white/30 bg-transparent text-white hover:bg-white/10 hover:text-white"
                )}
              >
                <Menu className="h-5 w-5" />
              </Button>
            </SheetTrigger>
            <SheetContent>
              <SheetHeader>
                <SheetTitle>{project.acronym}</SheetTitle>
              </SheetHeader>
              <nav className="flex flex-col gap-1">
                {navItems.map((item) => (
                  <SheetClose asChild key={item.id}>
                    <button
                      onClick={() => scrollToSection(item.id)}
                      className="rounded-md px-3 py-3 text-left text-base font-medium text-foreground transition-colors hover:bg-secondary"
                    >
                      {item.label}
                    </button>
                  </SheetClose>
                ))}
              </nav>
            </SheetContent>
          </Sheet>
        </div>
      </div>
    </header>
  )
}