'use client';

import { cart_api } from '@/features/cart/lib/api';
import { Link } from '@/shared/config/i18n/navigation';
import { useCartId } from '@/shared/hooks/cartId';
import { getToken } from '@/shared/lib/token';
import { cn } from '@/shared/lib/utils';
import { Badge } from '@/shared/ui/badge';
import { Button } from '@/shared/ui/button';
import { useQuery } from '@tanstack/react-query';
import { Heart, Home, LayoutGrid, ShoppingCart, User } from 'lucide-react';
import { useTranslations } from 'next-intl';
import { usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';

const NavbarMobile = () => {
  const [mounted, setMounted] = useState(false);
  const t = useTranslations();
  useEffect(() => {
    setMounted(true);
  }, []);

  const pathname = usePathname();
  const token = getToken();

  const navItems = [
    { label: 'Asosiy', icon: Home, href: '/' },
    { label: 'Katalog', icon: LayoutGrid, href: '/category' },
    { label: 'Sevimli', icon: Heart, href: '/favourite' },
    { label: 'Savatda', icon: ShoppingCart, href: '/cart' },
    {
      label: 'Profil',
      icon: User,
      href: token ? '/profile' : '/auth',
    },
  ];
  const [cartQuenty, setCartQuenty] = useState<number>(0);
  const { cart_id } = useCartId();

  const { data: cartItems } = useQuery({
    queryKey: ['cart_items', cart_id],
    queryFn: () => cart_api.get_cart_items(cart_id!),
    enabled: !!cart_id,
    select(data) {
      return data.data.cart_item;
    },
  });

  useEffect(() => {
    if (cartItems) {
      const total = cartItems.length;
      setCartQuenty(total > 9 ? 9 : total);
    }
  }, [cartItems]);

  if (!mounted) return null;

  return (
    <nav className="fixed bottom-0 left-0 right-0 z-50 lg:hidden bg-white border-t shadow-xl rounded-t-3xl">
      <div className="grid grid-cols-5 h-14 px-2">
        {navItems.map((item) => {
          const isActive =
            item.href === '/'
              ? pathname === '/' || pathname === `/${pathname.split('/')[1]}`
              : pathname.includes(item.href);

          return (
            <Link key={item.href} href={item.href}>
              <Button
                id={item.href === '/cart' ? 'cart-icon-mobile' : undefined}
                variant="ghost"
                className={cn(
                  'h-full w-full flex flex-col items-center justify-center gap-1 rounded-xl',
                  isActive && 'text-green-500',
                )}
              >
                <div className="relative w-fit flex justify-center items-center ">
                  <item.icon
                    className={cn(
                      'size-6 transition-colors',
                      isActive ? 'text-green-500' : 'text-gray-500',
                    )}
                  />
                  {item.href === '/cart' && (
                    <Badge className="absolute -top-2.5 -right-2.5 line-clamp-1 w-5 h-5 flex justify-center items-center">
                      {cartQuenty === 9 ? cartQuenty + '+' : cartQuenty}
                    </Badge>
                  )}
                </div>
                <span
                  className={cn(
                    'text-[10px] font-medium',
                    isActive ? 'text-green-500' : 'text-gray-500',
                  )}
                >
                  {t(item.label)}
                </span>
              </Button>
            </Link>
          );
        })}
      </div>
    </nav>
  );
};

export default NavbarMobile;
