import style from '../styles/item-action.module.css';

import React, { useEffect, useState } from 'react';

import { Spinner, Tooltip } from '@chakra-ui/react';
import { MinusIcon, PlusIcon, Trash2Icon } from 'lucide-react';

import { CartItem } from '~/types/cart';
import { getAuth } from '~/libs/auth';
import { deleteUserCart, upsertUserCart } from '~/services/cart';

import { useDebounce } from 'usehooks-ts';
import { useCartStore } from '../stores/useCartStore';
import { useProductCartContext } from '@/contexts/ProductCartContext';
import {
  removeSelectedItemsFromCookie,
  removeCartItemsFromCookie,
} from '~/utils/cart';
import { toast } from 'react-hot-toast';

type Props = {
  item: CartItem;
};

const CartItemAction = ({ item }: Props) => {
  const auth = getAuth();
  const { setRefreshCart } = useProductCartContext();
  const [isLoadDelete, setIsLoadDelete] = useState<boolean>(false);
  const [isLoadQuantity, setIsLoadQuantity] = useState<boolean>(false);

  const [quantity, setQuantity] = useState<number>(item.quantity);

  const { loadCart, cart, updateCartItem } = useCartStore(); // TAMBAHKAN cart dan updateCartItem

  const limitQty = item.limit_qty?.transaction || 0;

  // PERBAIKI FUNCTION INI
  const handleDelete = async () => {
    if (typeof auth !== 'object') return;

    setIsLoadDelete(true);

    try {
      // Step 1: Delete from server
      await deleteUserCart(auth.id, [item.cart_id]);

      // Step 2: Clean up cookies IMMEDIATELY
      removeSelectedItemsFromCookie([item.id]);
      removeCartItemsFromCookie([item.cart_id]);

      // Step 3: Update local cart state optimistically
      if (cart) {
        const updatedProducts = cart.products.filter(
          (product) => product.id !== item.id
        );
        const updatedCart = {
          ...cart,
          products: updatedProducts,
          product_total: updatedProducts.length,
        };
        updateCartItem(updatedCart);
      }

      // Step 4: Reload from server to ensure consistency
      await loadCart(auth.id);
      setRefreshCart(true);

      toast.success('Item berhasil dihapus');
    } catch (error) {
      console.error('Failed to delete cart item:', error);
      toast.error('Gagal menghapus item');

      // Reload on error
      await loadCart(auth.id);
    } finally {
      setIsLoadDelete(false);
    }
  };

  const decreaseQty = () => {
    setQuantity((quantity) => (quantity -= 1));
  };
  const increaseQty = () => {
    setQuantity((quantity) => (quantity += 1));
  };
  const debounceQty = useDebounce(quantity, 1000);

  useEffect(() => {
    if (isNaN(debounceQty)) setQuantity(1);
    if (limitQty > 0 && debounceQty > limitQty) setQuantity(limitQty);
  }, [debounceQty, limitQty]);

  useEffect(() => {
    const updateCart = async () => {
      if (typeof auth !== 'object' || isNaN(debounceQty)) return;

      setIsLoadQuantity(true);
      await upsertUserCart({
        userId: auth.id,
        type: item.cart_type,
        id: item.id,
        qty: debounceQty,
        selected: item.selected,
      });
      await loadCart(auth.id);
      setIsLoadQuantity(false);
    };
    updateCart();
    //eslint-disable-next-line react-hooks/exhaustive-deps
  }, [debounceQty]);

  return (
    <div className={style.actionSection}>
      <button
        className={style.deleteButton}
        onClick={handleDelete}
        disabled={isLoadDelete}
      >
        {isLoadDelete && <Spinner size='xs' />}
        {!isLoadDelete && <Trash2Icon size={16} />}
      </button>

      <div className={style.quantitySection}>
        {isLoadQuantity && (
          <div className={style.quantityLoading}>
            <Spinner size='sm' />
          </div>
        )}

        <button
          className={style.quantityControl}
          onClick={decreaseQty}
          disabled={quantity <= 1}
        >
          <MinusIcon size={16} />
        </button>

        <input
          type='number'
          className={style.quantity.toString()}
          onChange={(e) => setQuantity(parseInt(e.target.value))}
          value={quantity}
        />

        <Tooltip label={limitQty > 0 ? `Max. ${limitQty}` : ''}>
          <button
            className={style.quantityControl}
            onClick={increaseQty}
            disabled={limitQty > 0 && quantity >= limitQty}
          >
            <PlusIcon size={16} />
          </button>
        </Tooltip>
      </div>
    </div>
  );
};

export default CartItemAction;