import { useState } from "react";
import { logout, useNumCredits } from "../redux/UserSlice";
import { useDispatch } from "react-redux";
import { useLocation, useNavigate } from "react-router-dom";
import {
  billingPath,
  apiKeyDashboardPath,
  downloadPrivateGPTPath,
  organizationsPath,
  languagesDirectoryPath,
  personsPath,
} from "../constants/RouteConstants";
import { Dropdown, Avatar } from "flowbite-react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCoins } from "@fortawesome/free-solid-svg-icons";
import { useUser } from "../redux/UserSlice";
import LoginModal from "./LoginModal";

export function MainNav({ isLoggedIn, onAuthChange, isSidebarCollapsed }) {
  const [showLoginModal, setShowLoginModal] = useState(false);
  const user = useUser();
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const numCredits = useNumCredits();
  const imageUrl = user?.profile_pic_url || "";

  function handleLogout() {
    dispatch(logout()).then(() => {
      navigate("/");
      onAuthChange?.();
    });
  }
  const location = useLocation();

  const chat =
    location.pathname === "/" || location.pathname.startsWith("/chat/");

  return (
    <div
      className={`fixed ${
        chat
          ? isLoggedIn
            ? isSidebarCollapsed
              ? "md:pl-16"
              : "md:pl-72 md:blur-none blur md:fixed"
            : ""
          : ""
      } z-50 flex items-center justify-between w-full px-2 py-4 text-white transition-all duration-300`}
    >
      {showLoginModal && (
        <LoginModal
          onClose={() => setShowLoginModal(false)}
          isOpen={showLoginModal}
        />
      )}
      <div className="flex items-center gap-2">
        <button className="flex" onClick={() => navigate("/")}>
          <img
            alt="pancea logo"
            className={
              chat
                ? (isLoggedIn && !isSidebarCollapsed && "hidden") ||
                  (isSidebarCollapsed && "md:block hidden")
                : ""
            }
            width={30}
            height={30}
            src="/logonew.png"
          />

          <span className="self-center whitespace-nowrap text-lg font-semibold text-white md:pl-2 pl-8">
            Panacea
          </span>
        </button>
        {!user ? <span className="self-center whitespace-nowrap text-xs rounded-xl bg-gradient-to-r from-accent to-accent-light px-3 py-1.5 font-semibold text-white shadow-md">
          Guest
        </span> : ""}
      </div>
        <button
          onClick={() => setShowLoginModal(true)}
          className={`py-2 ${
            isLoggedIn && "hidden"
          } px-4 bg-gradient-to-r from-accent to-accent-light text-white rounded-lg font-medium hover:opacity-90 transition-opacity`}
        >
          Log In
        </button>
      <div className={`${!isLoggedIn && "hidden"} flex`}>
        <Dropdown
          theme={{
            arrowIcon: "text-white ml-2 h-4 w-4",
          }}
          className={`bg-primary text-white`}
          inline
          label={
            imageUrl === "" ? (
              <Avatar rounded />
            ) : (
              <Avatar img={imageUrl} rounded />
            )
          }
        >
          <Dropdown.Header>
            {user && user.name && (
              <span className="block text-sm text-white">{user.name}</span>
            )}
            <span className="block truncate text-sm font-medium text-white hover:bg-[#141414]">
              {numCredits} Credits Remaining
              <FontAwesomeIcon icon={faCoins} className="ml-2" />
            </span>
          </Dropdown.Header>
          <Dropdown.Item
            onClick={() => navigate(billingPath)}
            className="text-white hover:text-black"
          >
            Billing
          </Dropdown.Item>

          <Dropdown.Item
            onClick={() => navigate(apiKeyDashboardPath)}
            className="text-white hover:text-black"
          >
            API
          </Dropdown.Item>
          <Dropdown.Item
            onClick={() => navigate(organizationsPath)}
            className="text-white hover:text-black"
          >
            Organizations
          </Dropdown.Item>
          <Dropdown.Item
            onClick={() => navigate(languagesDirectoryPath)}
            className="text-white hover:text-black"
          >
            Languages
          </Dropdown.Item>
          <Dropdown.Item
            onClick={() => navigate(personsPath)}
            className="text-white hover:text-black"
          >
            Person
          </Dropdown.Item>
          <Dropdown.Item
            onClick={() => (window.location.href = downloadPrivateGPTPath)}
            className="text-white hover:text-black"
          >
            Download Panacea
          </Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item
            onClick={() => handleLogout()}
            className="text-white hover:text-black"
          >
            Sign out
          </Dropdown.Item>
        </Dropdown>
      </div>
    </div>
  );
}

export default MainNav;
