import React, { useEffect } from 'react';
import './Header.css';
import logo from '../assets/logo.png';
import { useUser } from '../context/UserContext';
import { BookOpen } from '@icon-park/react';
import { useLocation } from 'wouter';

const Header = () => {
  const { user } = useUser();
  const [location, setLocation] = useLocation();

  const navLinks = [
    { to: '/friend-moments', label: '好友动态' },
    { to: '/forum', label: '论坛' },
    { to: '/interest-groups', label: '兴趣小组' },
    { to: '/seed-list', label: '种子列表' },
    { to: '/publish-seed', label: '发布种子' },
  ];

  // 头像变化时刷新组件（这段其实 React 会自动做，但你手动 history 管理就错过了）
  useEffect(() => {}, [user?.avatarUrl]);

  return (
    <div className="main-page">
      <header className="header">
        <div className="logo-and-name">
          <img src={logo} alt="网站 logo" className="logo" />
          <span className="site-name">Echo</span>
        </div>
        <div className="user-and-message" style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <button
            className="guide-button"
            onClick={() => setLocation('/new-user-guide')}
            title="新手指南"
          >
            <BookOpen theme="outline" size="20" fill="#fff" />
            <span style={{ marginLeft: '6px' }}>新手指南</span>
          </button>

          <a href="/user/profile">
            <img
              src={user?.avatarUrl}
              alt="用户头像"
              className="user-avatar"
            />
          </a>

          {/* <span
            className="message-center"
            onClick={() => setLocation('/messages')}
            style={{ cursor: 'pointer' }}
          >
            消息
          </span> */}
        </div>
      </header>

      <nav className="nav">
        {navLinks.map(({ to, label }) => (
          <a
            key={to}
            href={to}
            onClick={(e) => {
              e.preventDefault();
              setLocation(to);
            }}
            className={`nav-item ${location.startsWith(to) ? 'active' : ''}`}
          >
            {label}
          </a>
        ))}
      </nav>
    </div>
  );
};

export default Header;