import React from 'react';
import { View, Alert, TouchableOpacity, Text } from 'react-native';
import { Image } from 'expo-image';
import { tw, theme, MyText, MyTouchableOpacity, Quantifier, MiniQuantifier } from 'common-ui';
import CartIcon from '@/components/icons/CartIcon';
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
import Ionicons from '@expo/vector-icons/Ionicons';
import dayjs from 'dayjs';
import {
  useGetCart,
  useUpdateCartItem,
  useRemoveFromCart,
  useAddToCart,
} from '@/hooks/cart-query-hooks';
import { useProductSlotIdentifier } from '@/hooks/useProductSlotIdentifier';


interface ProductCardProps {
  item: any;
  itemWidth: number;
  onPress?: () => void;
  showDeliveryInfo?: boolean;
  miniView?: boolean;
  nullIfNotAvailable?: boolean;
  containerComp?: React.ComponentType<any> | React.JSXElementConstructor<any>;
}

const formatQuantity = (quantity: number, unit: string): { value: string; display: string } => {
  if (unit?.toLowerCase() === 'kg' && quantity < 1) {
    return { value: `${Math.round(quantity * 1000)} g`, display: `${Math.round(quantity * 1000)}g` };
  }
  return { value: `${quantity} ${unit}(s)`, display: `${quantity}${unit}` };
};

const ProductCard: React.FC<ProductCardProps> = ({
  item,
  itemWidth,
  onPress,
  showDeliveryInfo = true,
  miniView = false,
  nullIfNotAvailable = false,
  containerComp: ContainerComp = React.Fragment,
}) => {
  const { data: cartData } = useGetCart();
  const { getQuickestSlot } = useProductSlotIdentifier();
  const updateCartItem = useUpdateCartItem({
    showSuccessAlert: false,
    showErrorAlert: false,
    refetchCart: true,
  });
  const removeFromCart = useRemoveFromCart({
    showSuccessAlert: false,
    showErrorAlert: false,
    refetchCart: true,
  });
  const { addToCart = () => {} } = useAddToCart({
    showSuccessAlert: false,
    showErrorAlert: false,
    refetchCart: true,
  }) || {};

  // Find current quantity from cart data
  const cartItem = cartData?.items?.find((cartItem: any) => cartItem.productId === item.id);
  const quantity = cartItem?.quantity || 0;

  // Precompute the next slot and determine display out of stock status
  const slotId = getQuickestSlot(item.id);
  const displayIsOutOfStock = item.isOutOfStock || !slotId;

  // Return null if nullIfNotAvailable is true and the product is out of stock
  if (nullIfNotAvailable && displayIsOutOfStock) {
    return null;
  }

  const handleQuantityChange = (newQuantity: number) => {
    if (newQuantity === 0 && cartItem) {
      removeFromCart.mutate({ itemId: cartItem.id });
    } else if (newQuantity === 1 && !cartItem) {
      const slotId = getQuickestSlot(item.id);
      if (!slotId) {
        Alert.alert("Error", "No available delivery slot for this product");
        return;
      }
      addToCart(item.id, 1, slotId, () => {});
    } else if (cartItem) {
      updateCartItem.mutate({ itemId: cartItem.id, quantity: newQuantity });
    }
  };

  return (
    <ContainerComp>
      <MyTouchableOpacity
        style={[
          tw`bg-white rounded-2xl overflow-hidden border border-gray-200 pb-2`,
          { width: itemWidth },
        ]}
        onPress={onPress || (() => {/* TODO: Navigate to product detail */})}
        activeOpacity={0.9}
      >
        <View style={tw`relative`}>
          <Image
            source={{ uri: item.images?.[0] }}
            style={{ width: "100%", height: itemWidth, resizeMode: "cover" }}
          />
          {displayIsOutOfStock && (
            <View style={tw`absolute inset-0 bg-black/40 items-center justify-center`}>
              <View style={tw`bg-red-500 px-3 py-1 rounded-full`}>
                <MyText style={tw`text-white text-xs font-bold`}>Out of Stock</MyText>
              </View>
            </View>
          )}
          {miniView && (
            <View style={tw`absolute bottom-2 right-2`}>
               {quantity > 0 ? (
                 <MiniQuantifier value={quantity} onChange={handleQuantityChange} step={item.incrementStep} />
               ) : (
                 <MyTouchableOpacity
                   style={tw`w-8 h-8 rounded-full bg-white items-center justify-center shadow-md`}
                   onPress={() => handleQuantityChange(1)}
                   activeOpacity={0.8}
                 >
                   <CartIcon focused={false} size={16} color="#2E90FA" />
                 </MyTouchableOpacity>
              )}
            </View>
          )}
        </View>

        <View style={tw`px-3 pt-3`}>
          <MyText style={tw`text-gray-900 font-bold text-sm mb-1`} numberOfLines={2}>
            {item.name}
          </MyText>

          <View style={tw`flex-row items-baseline mb-2`}>
            <MyText style={tw`text-brand500 font-bold text-base`}>₹{item.price}</MyText>
            {item.marketPrice && Number(item.marketPrice) > Number(item.price) && (
              <MyText style={tw`text-gray-400 text-xs ml-2 line-through`}>₹{item.marketPrice}</MyText>
            )}
          </View>
          <View style={tw`flex-row items-center mb-2`}>
            <MyText style={tw`text-gray-500 text-xs font-medium`}>Quantity: <MyText style={tw`text-[#f81260] font-semibold`}>{formatQuantity(item.productQuantity || 1, item.unitNotation).display}</MyText></MyText>
          </View>

          {showDeliveryInfo && item.nextDeliveryDate && (
            <View style={tw`flex-row items-center bg-brand50 px-2 py-1.5 rounded-lg self-start mb-2 border border-brand100`}>
              <MaterialIcons name="local-shipping" size={12} color="#2E90FA" />
              <MyText style={tw`text-[10px] text-brand700 ml-1.5 font-bold`}>
                {dayjs(item.nextDeliveryDate).format("ddd, DD MMM • h:mm A")}
              </MyText>
            </View>
          )}

          {!miniView && (
            <>
              {displayIsOutOfStock ? (
                <View style={tw`bg-gray-100 rounded-lg items-center mt-1`}>
                  <MyText style={tw`text-gray-400 text-xs font-bold uppercase tracking-wide`}>Unavailable</MyText>
                </View>
              ) : quantity > 0 ? (
                 <Quantifier
                   value={quantity}
                   setValue={handleQuantityChange}
                   step={item.incrementStep}
                   unit={item.unitNotation}
                 />
              ) : (
                <MyTouchableOpacity
                  style={tw`bg-brand500 py-2 rounded-lg items-center mt-1`}
                  onPress={() => handleQuantityChange(1)}
                >
                   <View style={tw`flex-row items-center`}>
                     <CartIcon focused={false} size={16} color="white" />
                     <MyText style={tw`text-white text-xs font-bold uppercase tracking-wide ml-1`}>Add to Cart</MyText>
                   </View>
                </MyTouchableOpacity>
              )}
            </>
          )}
        </View>
      </MyTouchableOpacity>
    </ContainerComp>
  );
};

export default ProductCard;