"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
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")

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

      // 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)
  }, [])

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

  const navLinks = [
    { name: "主页", href: "#home", id: "home", en: "INDEX" },
    { name: "关于", href: "#about", id: "about", en: "INFORMATION" },
    { name: "团队", href: "#team-groups", id: "team-groups", en: "OPERATOR" },
    { name: "成就", href: "#achievements", id: "achievements", en: "GAMEPLAY" },
    { name: "机器人", href: "#robots", id: "robots", en: "ROBOTS" },
    { name: "联系我们", href: "#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",
                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",
                  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>
  )
}