'use client';

import { useCart } from '@/app/[name]/(Dialogs)/cart/hook/useCart';
import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileData';
import { glassSurfaceNav } from '@/lib/styles/glassSurface';
import clsx from 'clsx';
import type { Icon } from 'iconsax-react';
import { Bag2, Building, Heart, Home2, Receipt21 } from 'iconsax-react';
import Link from 'next/link';
import { useParams, usePathname, useRouter } from 'next/navigation';
import { useMemo } from 'react';
import { toast } from '../Toast';

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

function NavItem({ href, isActive, onClick, 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>
  );

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

function BottomNavBar() {
  const params = useParams();
  const name = params.name as string;
  const pathname = usePathname();
  const router = useRouter();
  const { isSuccess } = useGetProfile();
  const { items } = useCart();

  const cartItemCount = useMemo(
    () => Object.values(items).reduce((sum, item) => sum + (item?.quantity ?? 0), 0),
    [items],
  );

  const isCartActive = pathname.startsWith(`/${name}/cart`);
  const isOrderActive = pathname.includes('/order');
  const isHomeActive = pathname === `/${name}`;
  const isAboutActive = pathname.startsWith(`/${name}/about`);
  const isFavoriteActive = pathname.startsWith(`/${name}/favorite`);

  const handleFavoritesClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault();
    if (isSuccess) {
      router.push(`/${name}/favorite`);
    } else {
      e.stopPropagation();
      toast('ابتدا لاگین کنید', 'error');
      router.replace(`/${name}/auth`);
    }
  };

  return (
    <div className={glassSurfaceNav('mx-auto w-full rounded-full flex items-center h-14 max-w-md gap-2.5')}>
      <NavItem href={`/${name}/cart`} isActive={isCartActive} Icon={Bag2} badge={cartItemCount} />
      <NavItem href={`/${name}/order/history`} isActive={isOrderActive} Icon={Receipt21} />
      <NavItem href={`/${name}`} isActive={isHomeActive} Icon={Home2} />
      <NavItem href={`/${name}/about`} isActive={isAboutActive} Icon={Building} />
      <NavItem href={`/${name}/favorite`} isActive={isFavoriteActive} onClick={handleFavoritesClick} Icon={Heart} />
    </div>
  );
}

export default BottomNavBar;