"use client";

import { useGetCartItems } from "@/app/[name]/(Main)/cart/hooks/useCartData";
import { useGetProfile } from "@/app/[name]/(Profile)/profile/hooks/userProfileData";
import { glassSurfaceNav } from "@/lib/styles/glassSurface";
import { useReceiptStore } from "@/zustand/receiptStore";
import clsx from "clsx";
import type { Icon } from "iconsax-react";
import { Bag2, Heart, Home2, InfoCircle, Reserve } from "iconsax-react";
import Link from "next/link";
import { useParams, usePathname, useRouter } from "next/navigation";
import { useMemo } from "react";
import { toastLoginRequired } from "../Toast";

type BottomNavBarProps = {
  onPagerClick?: () => void;
};

type NavItemProps = {
  href?: string;
  isActive: boolean;
  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
  onButtonClick?: () => void;
  Icon: Icon;
  badge?: number;
};

function NavItem({ href, isActive, onClick, onButtonClick, Icon, badge }: NavItemProps) {
  const className = clsx("flex-1 flex items-center justify-center h-full rounded-full", isActive && "bg-primary/12");

  const icon = (
    <span className="relative">
      <Icon size={20} color="currentColor" variant={isActive ? "Bold" : "Linear"} className={isActive ? "text-primary" : "text-icon-deactive"} />
      {badge != null && badge > 0 && (
        <span className="absolute -right-1.5 -top-1 flex min-w-3.5 h-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[8px] font-medium text-container dark:bg-white dark:text-black">
          {badge > 99 ? "99+" : badge}
        </span>
      )}
    </span>
  );

  if (onButtonClick) {
    return (
      <button type="button" onClick={onButtonClick} className={className}>
        {icon}
      </button>
    );
  }

  return (
    <Link href={href ?? "#"} onClick={onClick} className={className}>
      {icon}
    </Link>
  );
}

function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
  const params = useParams();
  const name = params.name as string;
  const pathname = usePathname();
  const router = useRouter();
  const { isSuccess } = useGetProfile();
  const { data: cartData } = useGetCartItems(isSuccess);
  const localItems = useReceiptStore((state) => state.items);

  const guestItemCount = useMemo(
    () => Object.values(localItems).reduce((sum, item) => sum + (item?.quantity ?? 0), 0),
    [localItems],
  );
  const cartItemCount = isSuccess ? (cartData?.data?.totalItems ?? 0) : guestItemCount;

  const isHomeActive = pathname === `/${name}`;
  const isFavoriteActive = pathname.startsWith(`/${name}/favorite`);
  const isPagerActive = pathname.includes("/pager");
  const isAboutActive = pathname.startsWith(`/${name}/about`);
  const isCartActive = pathname.startsWith(`/${name}/cart`);

  const handleFavoritesClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault();
    if (isSuccess) {
      router.push(`/${name}/favorite`);
    } else {
      e.stopPropagation();
      toastLoginRequired(() => router.push(`/${name}/auth`), "error");
    }
  };

  return (
    <div className={glassSurfaceNav("mx-auto w-full rounded-full flex items-center h-14 max-w-md gap-2.5")}>
      <NavItem href={`/${name}`} isActive={isHomeActive} Icon={Home2} />
      <NavItem href={`/${name}/favorite`} isActive={isFavoriteActive} onClick={handleFavoritesClick} Icon={Heart} />
      {onPagerClick ? <NavItem isActive={isPagerActive} onButtonClick={onPagerClick} Icon={Reserve} /> : <NavItem href={`/${name}/pager`} isActive={isPagerActive} Icon={Reserve} />}
      <NavItem href={`/${name}/about`} isActive={isAboutActive} Icon={InfoCircle} />
      <NavItem href={`/${name}/cart`} isActive={isCartActive} Icon={Bag2} badge={cartItemCount} />
    </div>
  );
}

export default BottomNavBar;
