"use client";

import { addToCart } from "@/store/slices/cart-slice";
import React, { useMemo, useState } from "react";
import toast from "react-hot-toast";
import { FaPlus } from "react-icons/fa";
import { TiMinus } from "react-icons/ti";
import { useDispatch, useSelector } from "react-redux";
import { useTranslations } from "next-intl";

export default function ProductIncementOrDecrement({
  product,
  quantity,
}: {
  product: any;
  quantity: number | string;
}) {
  const dispatch = useDispatch();
  const t = useTranslations("cart");
  const [loadingProductId, setLoadingProductId] = useState<number | null>(null);
  const isLoading = loadingProductId === product?.id;
  const cartData = useSelector((state: any) => state.cart.data);

  const currentQty: number = useMemo(() => {
    const cartItems = cartData?.data?.items ?? cartData?.items ?? [];
    const cartItem = cartItems.find(
      (i: any) => i?.product?.id === product?.id || i?.additional?.product_id === product?.id
    );
    const fromCart = cartItem?.quantity;

    const candidate = fromCart ?? quantity ?? 0;
    const num =
      typeof candidate === "string" ? parseInt(candidate, 10) : candidate;
    return Number.isFinite(num) && num > 0 ? num : 0;
  }, [cartData, product?.id, quantity]);

  const handleUpdateQuantity = async (productId: number, qtyChange: number) => {
    try {
      setLoadingProductId(productId);
      await dispatch(
        addToCart({
          productId,
          productQTY: qtyChange,
        })
      );
    } finally {
      setLoadingProductId(null);
    }
  };

  return (
    /* Always LTR so buttons are [−] qty [+] regardless of page direction */
    <div className="flex items-center gap-3 sm:gap-4" dir="ltr">
      {/* Decrease */}
      <button
        type="button"
        disabled={isLoading || currentQty <= 1}
        onClick={() => {
          if (!isLoading && currentQty > 1) {
            handleUpdateQuantity(product?.id, -1);
          }
        }}
        className={`flex items-center justify-center w-8 h-8 sm:w-9 sm:h-9 rounded-full transition-opacity ${isLoading || currentQty <= 1 ? "opacity-30 cursor-not-allowed" : "cursor-pointer hover:opacity-80"
          }`}
        style={{ backgroundColor: '#1e2a4a' }}
        aria-label={t("decrease-quantity")}
      >
        <TiMinus className="text-white text-sm sm:text-base" />
      </button>

      {/* Quantity */}
      <span className="text-base sm:text-lg font-bold min-w-[20px] text-center">{Math.round(currentQty)}</span>

      {/* Increase */}
      <button
        type="button"
        disabled={isLoading}
        onClick={() => {
          if (!isLoading) {
            handleUpdateQuantity(product?.id, 1);
          } else {
            toast.error(t("please-wait"));
          }
        }}
        className={`flex items-center justify-center w-8 h-8 sm:w-9 sm:h-9 rounded-full transition-opacity ${isLoading ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:opacity-80"
          }`}
        style={{ backgroundColor: '#1e2a4a' }}
        aria-label={t("increase-quantity")}
      >
        <FaPlus className="text-white text-xs sm:text-sm" />
      </button>
    </div>
  );
}