"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import { usePathname } from "next/navigation"
import { Menu, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

export default function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [scrolled, setScrolled] = useState(false)
  const [activeSection, setActiveSection] = useState("home")
  const pathname = usePathname()
  const isHomePage = pathname === "/"

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 10)

      // 只在主页上确定活动部分
      if (isHomePage) {
        // Determine active section based on scroll position
        const sections = ["home", "about", "team-groups", "achievements", "robots", "contact"]
        for (const section of sections.reverse()) {
          const element = document.getElementById(section)
          if (element && window.scrollY >= element.offsetTop - 100) {
            setActiveSection(section)
            break
          }
        }
      }
    }

    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [isHomePage])

  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen)
  }

  const navLinks = [
    { name: "主页", href: isHomePage ? "#home" : "/#home", id: "home", en: "INDEX" },
    { name: "关于", href: isHomePage ? "#about" : "/#about", id: "about", en: "INFORMATION" },
    { name: "团队", href: isHomePage ? "#team-groups" : "/#team-groups", id: "team-groups", en: "OPERATOR" },
    { name: "成就", href: isHomePage ? "#achievements" : "/#achievements", id: "achievements", en: "GAMEPLAY" },
    { name: "机器人", href: isHomePage ? "#robots" : "/#robots", id: "robots", en: "ROBOTS" },
    { name: "联系我们", href: isHomePage ? "#contact" : "/#contact", id: "contact", en: "NEWS" },
  ]

  return (
    <header
      className={cn(
        "fixed top-0 left-0 right-0 z-50 transition-all duration-300",
        scrolled ? "bg-background/90 backdrop-blur-md" : "bg-transparent",
      )}
    >
      <div className="flex items-center justify-between px-4 py-3">
        <Link href="/" className="flex items-center gap-2 z-10">
          <Image src="/logo.svg" alt="Simba Robotics Logo" width={40} height={40} className="w-10 h-10" />
          <div className="flex flex-col">
            <span className="font-bold text-lg tracking-wider">SIMBA</span>
            <span className="text-xs text-muted-foreground font-mono">ROBOTICS</span>
          </div>
        </Link>

        {/* Desktop Navigation */}
        <nav className="hidden md:flex items-center">
          {navLinks.map((link) => (
            <Link
              key={link.name}
              href={link.href}
              className={cn(
                "px-6 py-2 flex flex-col items-center text-sm transition-colors",
                isHomePage && activeSection === link.id
                  ? "text-foreground nav-active"
                  : "text-muted-foreground hover:text-foreground",
              )}
            >
              <span className="text-xs font-mono uppercase">{link.en}</span>
              <span>{link.name}</span>
            </Link>
          ))}
        </nav>

        <div className="flex items-center gap-2">
          {/* Mobile Menu Button */}
          <Button variant="ghost" size="icon" className="md:hidden button-hover-effect" onClick={toggleMenu}>
            {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
          </Button>
        </div>
      </div>

      {/* Mobile Navigation */}
      {isMenuOpen && (
        <div className="md:hidden bg-background/95 backdrop-blur-md">
          <nav className="flex flex-col">
            {navLinks.map((link) => (
              <Link
                key={link.name}
                href={link.href}
                className={cn(
                  "px-4 py-3 border-b border-border/30 transition-colors flex items-center justify-between",
                  isHomePage && activeSection === link.id ? "text-primary" : "text-muted-foreground",
                )}
                onClick={() => setIsMenuOpen(false)}
              >
                <span>{link.name}</span>
                <span className="text-xs font-mono uppercase">{link.en}</span>
              </Link>
            ))}
          </nav>
        </div>
      )}
    </header>
  )
}