import React from "react";
import logo from "../assets/images/navlogo.png";
import logoSmall from "../assets/images/logo.png";
import {
  BellAlertIcon,
  ArrowRightIcon,
  UserIcon,
} from "@heroicons/react/24/outline";
import { useNavigate, useRouterState } from "@tanstack/react-router";
import { HOME, PROFILE } from "../routes/paths";
import { checkIsMobile } from "../utils/checkIsMobile";
import { useSideBarStore } from "../context/zustand-store/appStore";
import { motion, AnimatePresence } from "framer-motion";

const Navbar: React.FC = () => {
  const isMobile = checkIsMobile();
  const navigate = useNavigate();
  const { isSideBarOpen } = useSideBarStore();

  const location = useRouterState({ select: (state) => state.location });
  const showBackButton =
    location.pathname !== "/" &&
    location.pathname !== "/profile" &&
    location.pathname !== "/menu";

  if (isMobile && showBackButton) {
    return (
      <nav className="bg-gray-50 dark:bg-dark-700 border border-b-dark-500 py-2 px-4 flex items-center justify-between shadow sticky z-50 mb-2 top-0">
        <button
          onClick={() => window.history.back()}
          className="p-2 hover:bg-primary-200 rounded-full"
        >
          <ArrowRightIcon className="h-6 w-6 text-gray-500 dark:text-gray-100" />
        </button>
        <img src={logo} alt="Logo" className="h-8 w-auto mx-auto mr-[25%]" />
      </nav>
    );
  }

  if (isMobile) {
    return null;
  }

  return (
    <nav className="bg-gray-50 dark:bg-dark-700 px-5 py-1 z-50 flex items-center justify-between shadow top-0 sticky">
      <div
        onClick={() => {
          navigate({ to: HOME });
        }}
        className="flex items-center justify-start flex-1 select-none cursor-pointer"
      >
        <AnimatePresence mode="wait">
          {isSideBarOpen ? (
            <motion.img
              key="large-logo"
              src={logo}
              alt="Logo"
              className="h-8 w-auto"
              initial={{ x: 20, opacity: 0.5 }}
              animate={{ x: 0, opacity: 1 }}
              exit={{ x: -20, opacity: 0 }}
              transition={{ type: "spring", stiffness: 500, damping: 30 }}
            />
          ) : (
            <motion.img
              key="small-logo"
              src={logoSmall}
              alt="Logo"
              className="h-6 w-auto"
              initial={{ x: 20, opacity: 0 }}
              animate={{ x: 0, opacity: 1 }}
              exit={{ x: -20, opacity: 0 }}
              transition={{ type: "spring", stiffness: 500, damping: 30 }}
            />
          )}
        </AnimatePresence>
      </div>

      <div className="flex-1 flex justify-end">
        <div className="flex items-center space-x-1">
          <button className="p-2 hover:bg-primary-100 dark:hover:bg-dark-600 rounded-full cursor-pointer">
            <BellAlertIcon className="h-6 w-6 text-gray-500 dark:text-gray-100" />
          </button>
          <button
            onClick={() => {
              if (location.pathname === PROFILE) {
                if (window.history.length > 1) {
                  window.history.back();
                  return;
                }
                navigate({ to: HOME });
                return;
              }
              navigate({ to: PROFILE });
            }}
            className="p-2 hover:bg-primary-100 dark:hover:bg-dark-600 rounded-full cursor-pointer"
          >
            <UserIcon className="h-6 w-6 text-gray-500 dark:text-gray-100" />
          </button>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;
