import React, { useState, useEffect } from "react";

const navbarStyle = {
  position: "fixed" as const,
  top: 0,
  width: "100%",
  zIndex: 100,
  background: "white",
  boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
  borderBottom: "1px solid #eaeaea"
};

const containerStyle = {
  maxWidth: "1200px",
  margin: "0 auto",
  padding: "12px 16px",
  display: "flex",
  alignItems: "center",
  justifyContent: "space-between"
};

const logoStyle = {
  fontWeight: "bold",
  fontSize: "20px",
  color: "#3182ce"
};

const navLinksStyle = {
  display: "flex",
  gap: "32px"
};

const linkStyle = {
  color: "#4a5568",
  fontWeight: 500,
  textDecoration: "none",
  padding: "8px 0",
  position: "relative" as const,
  transition: "color 0.3s ease"
};

const activeLinkStyle = {
  ...linkStyle,
  color: "#3182ce",
};

const linkHoverStyle = {
  color: "#3182ce",
};

const linkAfterStyle = {
  content: '""',
  position: "absolute" as const,
  width: "0%",
  height: "2px",
  bottom: "0",
  left: "50%",
  backgroundColor: "#3182ce",
  transition: "all 0.3s ease",
  transform: "translateX(-50%)"
};

const activeLinkAfterStyle = {
  ...linkAfterStyle,
  width: "100%"
};

const buttonStyle = {
  padding: "8px 16px",
  backgroundColor: "#3182ce",
  color: "white",
  border: "none",
  borderRadius: "4px",
  cursor: "pointer",
  transition: "background-color 0.3s ease",
};

const buttonHoverStyle = {
  backgroundColor: "#2c5282",
};

const mobileMenuStyle = {
  display: "none",
  "@media (max-width: 768px)": {
    display: "block"
  }
};

const Navbar = () => {
  const [activeSection, setActiveSection] = useState("home");
  const [hoveredLink, setHoveredLink] = useState<string | null>(null);
  const [isButtonHovered, setIsButtonHovered] = useState(false);

  // 监听滚动事件，更新当前活动的导航项
  useEffect(() => {
    const handleScroll = () => {
      const scrollPosition = window.scrollY;
      
      // 获取各个部分的位置
      const homeSection = document.getElementById("home")?.offsetTop || 0;
      const skillsSection = document.getElementById("skills")?.offsetTop || 0;
      const experienceSection = document.getElementById("experience")?.offsetTop || 0;
      const projectsSection = document.getElementById("projects")?.offsetTop || 0;
      const contactSection = document.getElementById("contact")?.offsetTop || 0;
      
      // 设置一个偏移量，使导航项在滚动到相应部分之前就高亮显示
      const offset = 100;
      
      // 根据滚动位置更新活动的导航项
      if (scrollPosition < skillsSection - offset) {
        setActiveSection("home");
      } else if (scrollPosition < experienceSection - offset) {
        setActiveSection("skills");
      } else if (scrollPosition < projectsSection - offset) {
        setActiveSection("experience");
      } else if (scrollPosition < contactSection - offset) {
        setActiveSection("projects");
      } else {
        setActiveSection("contact");
      }
    };
    
    window.addEventListener("scroll", handleScroll);
    
    // 组件卸载时移除事件监听
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  // 获取链接样式
  const getLinkStyle = (section: string) => {
    const isActive = activeSection === section;
    const isHovered = hoveredLink === section;
    
    return {
      ...(isActive ? activeLinkStyle : linkStyle),
      ...(isHovered ? linkHoverStyle : {}),
      "&::after": isActive ? activeLinkAfterStyle : isHovered ? { ...linkAfterStyle, width: "50%" } : linkAfterStyle
    };
  };

  return (
    <nav style={navbarStyle}>
      <div style={containerStyle}>
        <div style={logoStyle}>
          Java开发者
        </div>

        <div style={navLinksStyle}>
          <a 
            href="/" 
            id="home-link"
            style={getLinkStyle("home")}
            onMouseEnter={() => setHoveredLink("home")}
            onMouseLeave={() => setHoveredLink(null)}
            onClick={() => setActiveSection("home")}
          >
            首页
            <div style={activeSection === "home" ? activeLinkAfterStyle : hoveredLink === "home" ? { ...linkAfterStyle, width: "50%" } : linkAfterStyle} />
          </a>
          <a 
            href="#skills" 
            id="skills-link"
            style={getLinkStyle("skills")}
            onMouseEnter={() => setHoveredLink("skills")}
            onMouseLeave={() => setHoveredLink(null)}
            onClick={() => setActiveSection("skills")}
          >
            技能
            <div style={activeSection === "skills" ? activeLinkAfterStyle : hoveredLink === "skills" ? { ...linkAfterStyle, width: "50%" } : linkAfterStyle} />
          </a>
          <a 
            href="#experience" 
            id="experience-link"
            style={getLinkStyle("experience")}
            onMouseEnter={() => setHoveredLink("experience")}
            onMouseLeave={() => setHoveredLink(null)}
            onClick={() => setActiveSection("experience")}
          >
            经验
            <div style={activeSection === "experience" ? activeLinkAfterStyle : hoveredLink === "experience" ? { ...linkAfterStyle, width: "50%" } : linkAfterStyle} />
          </a>
          <a 
            href="#projects" 
            id="projects-link"
            style={getLinkStyle("projects")}
            onMouseEnter={() => setHoveredLink("projects")}
            onMouseLeave={() => setHoveredLink(null)}
            onClick={() => setActiveSection("projects")}
          >
            项目
            <div style={activeSection === "projects" ? activeLinkAfterStyle : hoveredLink === "projects" ? { ...linkAfterStyle, width: "50%" } : linkAfterStyle} />
          </a>
          <a 
            href="#contact" 
            id="contact-link"
            style={getLinkStyle("contact")}
            onMouseEnter={() => setHoveredLink("contact")}
            onMouseLeave={() => setHoveredLink(null)}
            onClick={() => setActiveSection("contact")}
          >
            联系
            <div style={activeSection === "contact" ? activeLinkAfterStyle : hoveredLink === "contact" ? { ...linkAfterStyle, width: "50%" } : linkAfterStyle} />
          </a>
        </div>

        <div>
          <button 
            style={{
              ...buttonStyle,
              ...(isButtonHovered ? buttonHoverStyle : {})
            }}
            onMouseEnter={() => setIsButtonHovered(true)}
            onMouseLeave={() => setIsButtonHovered(false)}
            onClick={() => {
              const contactSection = document.getElementById('contact');
              if (contactSection) {
                contactSection.scrollIntoView({ behavior: 'smooth' });
                setActiveSection("contact");
              }
            }}
          >
            联系我
          </button>
        </div>

        <div style={mobileMenuStyle}>
          <button
            style={{ background: "transparent", border: "none" }}
            onClick={() => {}}
          >
            菜单
          </button>
        </div>
      </div>
    </nav>
  );
};

export default Navbar; 