import React, { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import './Navbar.css';

const Navbar = () => {
  const navigate = useNavigate();
  const { user, logout } = useAuth();
  const [search, setSearch] = useState('');

  const handleLoginClick = () => {
    navigate('/login');
  };

  const handleLogoutClick = () => {
    logout();
    navigate('/');
  };

  const handleSearchKeyDown = (e) => {
    if (e.key === 'Enter') {
      if (user) {
        navigate('/aircraft', { state: { searchTerm: search } });
      } else {
        navigate('/login');
      }
    }
  };

  return (
    <nav className="navbar">
      <div className="navbar-inner">
        <div className="navbar-left">
          <Link to="/" className="logo">主页</Link>

          <div className="nav-item">
            <span className="nav-label">产品</span>
            <div className="dropdown">
              <Link to="/" className="dropdown-item">产品一</Link>
              <Link to="/" className="dropdown-item">产品二</Link>
              <Link to="/" className="dropdown-item">产品三</Link>
            </div>
          </div>

          <div className="nav-item">
            <span className="nav-label">解决方案</span>
            <div className="dropdown">
              <Link to="/" className="dropdown-item">解决方案A</Link>
              <Link to="/" className="dropdown-item">解决方案B</Link>
              <Link to="/" className="dropdown-item">解决方案C</Link>
            </div>
          </div>

          <div className="nav-item">
            <span className="nav-label">行业</span>
            <div className="dropdown">
              <Link to="/" className="dropdown-item">民航</Link>
              <Link to="/" className="dropdown-item">通航</Link>
              <Link to="/" className="dropdown-item">研发制造</Link>
            </div>
          </div>
        </div>

        <div className="navbar-right">
          <input
            type="text"
            className="search-input"
            placeholder="搜索..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            onKeyDown={handleSearchKeyDown}
          />

          {user ? (
            <div className="user-area">
              <span className="username">{user.name || user.username}</span>
              <button className="btn btn-secondary" onClick={handleLogoutClick}>退出</button>
            </div>
          ) : (
            <button className="btn btn-primary" onClick={handleLoginClick}>登录</button>
          )}
        </div>
      </div>
    </nav>
  );
};

export default Navbar;