import React, { useState, useEffect } from 'react';
import './Header.css'; // 导入 Header.css 文件
import logo from '../assets/logo.png';

const Header = () => {
  const [currentPath, setCurrentPath] = useState(window.location.pathname);

  // 提取所有页面路径，简化 active 类逻辑
  const navLinks = [
    { to: '/friend-moments', label: '好友动态' },
    { to: '/forum', label: '论坛' },
    { to: '/interest-groups', label: '兴趣小组' },
    { to: '/seed-list', label: '种子列表' },
    { to: '/publish-seed', label: '发布种子' },
  ];

  // 更新当前路径状态
  useEffect(() => {
    const handleLocationChange = () => {
      setCurrentPath(window.location.pathname);
    };

    // 监听历史记录变化
    window.addEventListener('popstate', handleLocationChange);

    // 清理事件监听器
    return () => {
      window.removeEventListener('popstate', handleLocationChange);
    };
  }, []);

  // 判断路径是否是当前活动页面
  const isActive = (path) => currentPath.startsWith(path);

  // 自定义链接点击逻辑
  const handleLinkClick = (to) => {
    window.history.pushState({}, '', to);
    setCurrentPath(to); // 更新当前路径状态
  };

  return (
    <div className="main-page">
      {/* 顶部栏 */}
      <header className="header">
        {/* 左侧 logo 和网站名称 */}
        <div className="logo-and-name">
          <img src={logo} alt="网站 logo" className="logo" />
          <span className="site-name">Echo</span>
        </div>
        {/* 右侧用户头像和消息中心 */}
        <div className="user-and-message">
          {/* 用户头像点击跳转到个人主页 */}
          <a href="/user/profile">
            <img src="user-avatar.png" alt="用户头像" className="user-avatar" />
          </a>
          <span className="message-center">消息</span>
        </div>
      </header>

      {/* 导航栏 */}
      <nav className="nav">
        {navLinks.map(({ to, label }) => (
          <a 
            key={to} 
            href={to}
            onClick={(e) => {
              e.preventDefault(); // 防止默认跳转行为
              handleLinkClick(to); // 手动更新当前路径
            }}
            className={`nav-item ${isActive(to) ? 'active' : ''}`}
          >
            {label}
          </a>
        ))}
      </nav>
    </div>
  );
};

export default Header;