complated

src/features/product/ui/Product.tsx

@@ -4,20 +4,32 @@ import { cart_api } from '@/features/cart/lib/api';
 import { product_api } from '@/shared/config/api/product/api';
 import { BASE_URL } from '@/shared/config/api/URLs';
 import { useCartId } from '@/shared/hooks/cartId';
+import formatDate from '@/shared/lib/formatDate';
 import formatPrice from '@/shared/lib/formatPrice';
+import { cn } from '@/shared/lib/utils';
+import { Button } from '@/shared/ui/button';
 import {
   Carousel,
+  CarouselApi,
   CarouselContent,
   CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
 } from '@/shared/ui/carousel';
 import { Input } from '@/shared/ui/input';
 import { Skeleton } from '@/shared/ui/skeleton';
 import { ProductCard } from '@/widgets/categories/ui/product-card';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
-import { Heart, Minus, Plus, Shield, ShoppingCart, Truck } from 'lucide-react';
+import {
+  Banknote,
+  ChevronLeft,
+  ChevronRight,
+  Heart,
+  Minus,
+  Plus,
+  Shield,
+  ShoppingCart,
+  Truck,
+} from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Image from 'next/image';
 import { useParams } from 'next/navigation';
@@ -29,6 +41,9 @@ const ProductDetail = () => {
   const { product } = useParams<{ product: string }>();
   const queryClient = useQueryClient();
   const { cart_id } = useCartId();
+  const [api, setApi] = useState<CarouselApi>();
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
 
   const [quantity, setQuantity] = useState(1);
   const [selectedImage, setSelectedImage] = useState(0);
@@ -58,6 +73,7 @@ const ProductDetail = () => {
 
   /* ---------------- DERIVED DATA ---------------- */
   const price = Number(data?.prices?.[0]?.price || 0);
+  const maxBalance = data?.balance ?? 0; // <-- balance limit
 
   /* ---------------- SYNC CART QUANTITY ---------------- */
   useEffect(() => {
@@ -134,12 +150,25 @@ const ProductDetail = () => {
 
   /* ---------------- HANDLERS ---------------- */
   const handleAddToCart = () => {
+    if (quantity >= maxBalance) {
+      toast.warning(t(`only_available`, { maxBalance }), {
+        richColors: true,
+        position: 'top-center',
+      });
+      return;
+    }
     if (!data || !cart_id) return;
 
     const cartItem = cartItems?.data.cart_item.find(
       (i) => Number(i.product.id) === data.id,
     );
 
+    if (quantity > maxBalance) {
+      toast.error(t(`Faqat ${maxBalance} dona mavjud`), { richColors: true });
+      setQuantity(maxBalance);
+      return;
+    }
+
     if (cartItem) {
       updateCartItem({
         cart_item_id: cartItem.id.toString(),
@@ -154,6 +183,43 @@ const ProductDetail = () => {
     }
   };
 
+  const handleIncrease = () => {
+    if (quantity >= maxBalance) {
+      toast.warning(t(`Faqat ${maxBalance} dona mavjud`), {
+        richColors: true,
+        position: 'top-center',
+      });
+      return;
+    }
+    setQuantity((q) => q + 1);
+  };
+
+  const handleDecrease = () => {
+    setQuantity((q) => Math.max(1, q - 1));
+  };
+
+  /* ---------------- CAROUSEL ---------------- */
+  useEffect(() => {
+    if (!api) return;
+
+    const updateButtons = () => {
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    };
+
+    updateButtons();
+    api.on('select', updateButtons);
+    api.on('reInit', updateButtons);
+
+    return () => {
+      api.off('select', updateButtons);
+      api.off('reInit', updateButtons);
+    };
+  }, [api]);
+
+  const scrollPrev = () => api?.scrollPrev();
+  const scrollNext = () => api?.scrollNext();
+
   /* ---------------- LOADING ---------------- */
   if (isLoading) {
     return (
@@ -216,41 +282,51 @@ const ProductDetail = () => {
         {/* INFO */}
         <div>
           <h1 className="text-3xl font-bold mb-2">{data?.name}</h1>
-
           <div className="text-4xl font-bold text-blue-600 mb-4">
             {formatPrice(price, true)}
           </div>
-
           <p className="text-gray-600 mb-6">{data?.short_name}</p>
 
-          <div className="grid grid-cols-2 gap-4 mb-6">
-            <div>
-              <span className="text-gray-500">Kategoriya:</span>
-              <p className="font-semibold">{data?.groups[0].name}</p>
+          {/* IMPROVED UPDATED_AT WARNING */}
+          {data?.updated_at && (
+            <div className="bg-yellow-50 border-2 border-yellow-500 text-yellow-900 p-4 mb-6 rounded-lg shadow-sm">
+              <p className="text-base font-bold mb-2 flex items-center gap-2">
+                <span className="text-yellow-600">⚠️</span>
+                {t("Diqqat! Mahsulot narxi o'zgargan bo'lishi mumkin")}
+              </p>
+              <p className="text-sm font-medium text-gray-700">
+                {t("So'nggi yangilanish:")}{' '}
+                <span className="font-semibold text-gray-900">
+                  {formatDate.format(data.updated_at, 'DD-MM-YYYY')}
+                </span>
+              </p>
             </div>
-          </div>
+          )}
 
+          {/* QUANTITY */}
           <div className="flex items-center gap-4 mb-6">
-            <button
-              onClick={() => setQuantity((q) => Math.max(1, q - 1))}
-              className="p-2 border rounded"
-            >
+            <button onClick={handleDecrease} className="p-2 border rounded">
               <Minus />
             </button>
 
             <Input
               value={quantity}
               onChange={(e) => {
-                const v = Number(e.target.value);
-                if (v > 0) setQuantity(v);
+                let v = Number(e.target.value);
+                if (v < 1) v = 1;
+                if (v > maxBalance) {
+                  toast.warning(t(`Faqat ${maxBalance} dona mavjud`), {
+                    richColors: true,
+                    position: 'top-center',
+                  });
+                  v = maxBalance;
+                }
+                setQuantity(v);
               }}
               className="w-16 text-center"
             />
 
-            <button
-              onClick={() => setQuantity((q) => q + 1)}
-              className="p-2 border rounded"
-            >
+            <button onClick={handleIncrease} className="p-2 border rounded">
               <Plus />
             </button>
           </div>
@@ -280,9 +356,12 @@ const ProductDetail = () => {
               />
             </button>
           </div>
-
-          {/* FEATURES */}
-          <div className="grid grid-cols-2 gap-4 mt-6 border-t pt-4">
+          <div
+            className={cn(
+              'grid gap-4 mt-6 border-t pt-4',
+              data?.payment_type ? 'grid-cols-3' : 'grid-cols-2',
+            )}
+          >
             <div className="text-center">
               <Truck className="mx-auto mb-1" />
               {t('Bepul yetkazib berish')}
@@ -291,19 +370,41 @@ const ProductDetail = () => {
               <Shield className="mx-auto mb-1" />
               {t('Kafolat')}
             </div>
+            {data?.payment_type && (
+              <div className="text-center">
+                <Banknote className="mx-auto mb-1" size={28} />
+
+                {data.payment_type === 'cash'
+                  ? t('Naqd bilan olinadi')
+                  : t("Pul o'tkazish yo'li bilan olinadi")}
+              </div>
+            )}
           </div>
         </div>
       </div>
 
-      {/* RELATED */}
-      <div className="mt-10 bg-white p-6 rounded-lg shadow">
+      {/* RELATED PRODUCTS */}
+      <div className="mt-10 bg-white p-6 rounded-lg shadow relative">
+        <Button
+          onClick={scrollPrev}
+          disabled={!canScrollPrev}
+          className="absolute top-1/2 left-0 -translate-x-1/2 z-20 rounded-full"
+          size={'icon'}
+          variant={'outline'}
+        >
+          <ChevronLeft size={32} />
+        </Button>
+
         <h2 className="text-2xl font-bold mb-4">{t("O'xshash mahsulotlar")}</h2>
 
-        <Carousel>
+        <Carousel setApi={setApi}>
           <CarouselContent>
             {recLoad &&
               Array.from({ length: 6 }).map((_, i) => (
-                <CarouselItem key={i} className="basis-1/5">
+                <CarouselItem
+                  key={i}
+                  className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6 pb-2"
+                >
                   <Skeleton className="h-60 w-full" />
                 </CarouselItem>
               ))}
@@ -311,15 +412,25 @@ const ProductDetail = () => {
             {recomendation
               ?.filter((p) => p.state === 'A')
               .map((p) => (
-                <CarouselItem key={p.id} className="basis-1/5">
+                <CarouselItem
+                  key={p.id}
+                  className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6 pb-2"
+                >
                   <ProductCard product={p} />
                 </CarouselItem>
               ))}
           </CarouselContent>
-
-          <CarouselPrevious />
-          <CarouselNext />
         </Carousel>
+
+        <Button
+          onClick={scrollNext}
+          disabled={!canScrollNext}
+          className="absolute top-1/2 -translate-x-1/2 z-20 -right-10 rounded-full"
+          size={'icon'}
+          variant={'outline'}
+        >
+          <ChevronRight size={32} />
+        </Button>
       </div>
     </div>
   );