import React from "react";
import { Link, useNavigate } from "react-router-dom";
import { useAuth } from "../AuthContext";

const Header = () => {
  const { isAuthenticated, logout } = useAuth();
  const navigate = useNavigate();
  const user = JSON.parse(localStorage.getItem("user"));
  const role = JSON.parse(localStorage.getItem("role"));

  const handleLogout = () => {
    logout();
    navigate("/login");
  };

  return (
    <header className="navbar navbar-expand-lg navbar-light bg-light">
      <div className="container-fluid">
        <Link className="navbar-brand" to="/">
          <img
            src="delivery-icon.png"
            alt="Логотип"
            style={{ width: "60px", height: "60px", marginRight: "8px" }}
          />
        </Link>
        <button
          className="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarNav">
          <ul className="navbar-nav me-auto">
            <li className="nav-item">
              <Link className="nav-link" to="/">
                Заказы
              </Link>
            </li>
            {role === "Администратор" && (
              <>
                <li className="nav-item">
                  <Link className="nav-link" to="/accessories">
                    Компоненты
                  </Link>
                </li>
                <li className="nav-item">
                  <Link className="nav-link" to="/users">
                    Пользователи
                  </Link>
                </li>
                <li className="nav-item">
                  <Link className="nav-link" to="/cities">
                    Города
                  </Link>
                </li>
                <li className="nav-item">
                  <Link className="nav-link" to="/trucks">
                    Грузовики
                  </Link>
                </li>
                <li className="nav-item">
                  <Link className="nav-link" to="/statuses">
                    Статусы
                  </Link>
                </li>
                <li className="nav-item">
                  <Link className="nav-link" to="/federal_districts">
                    Федеральные округа
                  </Link>
                </li>
                <li className="nav-item">
                  <Link className="nav-link" to="/roles">
                    Роли
                  </Link>
                </li>
              </>
            )}
          </ul>
          <div className="d-flex align-items-center ml-auto">
            {isAuthenticated ? (
              <div className="nav-item d-flex align-items-center">
                <span className="nav-link">{user?.login}</span>{" "}
                <button
                  className="btn btn-outline-danger"
                  onClick={handleLogout}
                >
                  Logout
                </button>
              </div>
            ) : (
              <Link className="btn btn-outline-primary" to="/login">
                Login
              </Link>
            )}
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;
