import React, { JSX } from "react";
import {
  EqualsIcon,
  HomeIcon as HomeIconOutline,
  UserIcon,
} from "@heroicons/react/24/outline";
import {
  HomeIcon as HomeIconSolid,
  UserIcon as UserIconSolid,
} from "@heroicons/react/24/solid";
import { motion } from "framer-motion";
import {
  useBackdropStore,
  useDrawerStore,
  useModalStore,
} from "../context/zustand-store/appStore";
import { Link, useRouter } from "@tanstack/react-router";
import { MENU, PROFILE } from "../routes/paths";

interface NavItem {
  label: string;
  path: string;
  icon: JSX.Element;
  activeIcon: JSX.Element;
}

const BottomNavigation: React.FC = () => {
  const router = useRouter();
  const { isOpen } = useBackdropStore();
  const { drawerState } = useDrawerStore();
  const { isOpen: modalState } = useModalStore();

  const navItems: NavItem[] = [
    {
      label: "منو",
      icon: <EqualsIcon className="w-6 h-6" />,
      activeIcon: <EqualsIcon className="w-6 h-6" />,
      path: MENU,
    },
    {
      label: "خانه",
      icon: <HomeIconOutline className="w-6 h-6" />,
      activeIcon: <HomeIconSolid className="w-6 h-6" />,
      path: "/",
    },
    {
      label: "پروفایل",
      icon: <UserIcon className="w-6 h-6" />,
      activeIcon: <UserIconSolid className="w-6 h-6" />,
      path: PROFILE,
    },
  ];

  const currentPath = router.state.location.pathname;

  const isActive = (path: string) => {
    if (path === "/") {
      return currentPath === path;
    }
    return currentPath.startsWith(path);
  };

  return (
    <motion.nav
      initial={{ y: 0 }}
      animate={{ y: drawerState.isOpen || modalState ? 100 : 0 }}
      transition={{ type: "spring", stiffness: 300, damping: 30 }}
      className={`fixed bottom-0 left-0 right-0 bg-white dark:bg-dark-900 rounded-t-[60px] shadow-2xl z-50 select-none ${
        isOpen && "opacity-30"
      }`}
    >
      <ul className="flex justify-between items-center h-20 px-8 bg-white dark:bg-dark-900 border-t border-dark-200 dark:border-dark-800 rounded-t-[60px]">
        {navItems.map((item, index) => (
          <li
            key={index}
            style={{ pointerEvents: isOpen ? "none" : "unset" }}
            className={`flex flex-col items-center justify-center cursor-pointer transition-colors duration-150 ${
              isActive(item.path) ? "text-primary-600" : "text-dark-500"
            } ${
              index === 1 ? "absolute left-1/2 transform -translate-x-1/2" : ""
            }`}
          >
            <Link
              to={item.path}
              className="flex flex-col items-center"
              activeProps={{ className: "text-primary-600" }}
              inactiveProps={{ className: "text-dark-500" }}
            >
              {isActive(item.path) ? item.activeIcon : item.icon}
              <span className="text-xs mt-1">{item.label}</span>
            </Link>
          </li>
        ))}
      </ul>
    </motion.nav>
  );
};

export default BottomNavigation;
