import React, { useState, useEffect } from 'react';
import Image from 'next/image';
import { Heart, Minus, Plus } from 'lucide-react';
import { currency, getValidImage } from '@/lib/utils';
import { useRouter } from 'next/navigation';
import apis from '@/utils/apis';
import { useGlobalContext } from '@/context/Provider';
import { Icons } from '../icons';

interface ProductCardProps {
    product: any;
    quantity: number;
    onAdd: (product: any) => void;
    onRemove: (productId: string | number) => void;
    onToggleFavorite?: (product: any) => void;
}

const ProductCard: React.FC<ProductCardProps> = ({ product, quantity, onAdd, onRemove, onToggleFavorite }) => {
    const router = useRouter();
    const { Toast, userInfo } = useGlobalContext();
    const [isFav, setIsFav] = useState(product?.is_fav);

    useEffect(() => {
        setIsFav(product?.is_fav);
    }, [product?.is_fav]);

    const toggleFavorite = async (e: React.MouseEvent) => {
        e.stopPropagation();
        if (!userInfo) {
            Toast.error("Login Required: Please log in to proceed");
            return;
        }
        try {
            const payLoad = {
                grocery_item_id: product._id,
                restaurant_id: product.restaurant_id || product.restaurantId,
                status: isFav ? "dislike" : "favourite",
            };
            const apiRes = await apis.Favourite.toggle(payLoad);
            if (apiRes) {
                setIsFav(!isFav);
                if (onToggleFavorite) {
                    onToggleFavorite({ ...product, is_fav: !isFav });
                }
                Toast.success(
                    isFav
                        ? "Food Item removed from favourites"
                        : "Food Item added to favourites"
                );
            }
        } catch (error: any) {
            Toast.error(error?.response?.body?.message || error?.message || "Something went wrong");
        }
    };

    const isOutOfStock = product?.stock === 0 || product?.total_stock === 0 || product?.is_available === false || product?.availability_status === 'out_of_stock';

    const hasDiscount = (product?.is_discount_active !== false) &&
        product?.discounted_price !== undefined &&
        product?.discounted_price !== null &&
        Number(product?.discounted_price) > 0 &&
        Number(product?.discounted_price) < Number(product?.price);

    const displayPrice = hasDiscount ? product.discounted_price : product.price;
    const originalPrice = product.price;

    const discountLabel = product?.discount_value
        ? (product?.discount_type === 'percentage' ? `${product.discount_value}% OFF` : `${currency}${product.discount_value} OFF`)
        : (hasDiscount ? `${Math.round(((originalPrice - displayPrice) / originalPrice) * 100)}% OFF` : null);

    return (
        <div
            onClick={() => router.push(`/grocery/product/${product._id}?restaurantId=${product.restaurant_id || product.restaurantId}`)}
            className={`bg-white rounded-[2rem] shadow-sm hover:shadow-xl transition-all duration-500 border border-gray-100 group cursor-pointer h-full flex flex-col overflow-hidden relative ${isOutOfStock ? 'opacity-65' : ''}`}
        >
            <div className="relative aspect-square rounded-2xl overflow-hidden bg-gray-50">
                <Image
                    src={getValidImage(product.imageUrl)}
                    alt={product.name}
                    fill
                    sizes="(max-width: 768px) 50vw, (max-width: 1200px) 25vw, 20vw"
                    className={`object-cover group-hover:scale-110 transition-transform duration-700 ${isOutOfStock ? 'grayscale opacity-60' : ''}`}
                />
                {hasDiscount && !isOutOfStock && (
                    <div className="absolute top-2 left-2 bg-red-500 text-white text-[10px] font-extrabold px-2 py-0.5 rounded-full shadow-md z-10 uppercase tracking-wider">
                        {discountLabel}
                    </div>
                )}
                {isOutOfStock && (
                    <div className="absolute top-0 left-1/2 -translate-x-1/2 z-20">
                        <span className="bg-[#1C1D22] text-white text-[10px] font-bold px-5 py-1.5 rounded-b-2xl uppercase tracking-wider shadow-lg whitespace-nowrap">
                            Out of Stock
                        </span>
                    </div>
                )}
                <button
                    onClick={toggleFavorite}
                    className="absolute top-2 right-2 w-8 h-8 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center text-gray-600 hover:text-red-500 transition-colors z-10"
                >
                    {isFav ? <Icons.Heart /> : <Heart className="w-4 h-4" />}
                </button>
                <div className="absolute bottom-2 left-2 bg-white px-3 py-1.5 rounded-xl text-[10px] font-extrabold text-gray-900 shadow-lg z-10">
                    {product.quantity} {product.unit}
                </div>
            </div>

            <div className="px-4 pb-4 space-y-3 flex-grow flex flex-col">
                <h4 className="font-bold text-gray-900 text-md text-left truncate">{product?.name}</h4>

                {/* <div className="flex items-center justify-between">
                    <div className="flex items-center gap-1 bg-brand-500 text-white px-2 py-0.5 rounded-full">
                        <Star className="w-3 h-3 fill-white" />
                        <span className="text-[10px] font-bold">4.5</span>
                    </div>
                </div> */}

                <div className="flex items-center justify-between pt-2">
                    <div className="flex flex-col text-left">
                        {hasDiscount ? (
                            <div className="flex items-baseline gap-1.5 flex-wrap">
                                <span className="font-extrabold text-sm text-gray-900">{currency}{displayPrice}.00</span>
                                <span className="text-xs text-gray-400 line-through font-semibold">{currency}{originalPrice}.00</span>
                            </div>
                        ) : (
                            <span className="font-extrabold text-sm text-gray-900">{currency}{product?.price}.00</span>
                        )}
                    </div>

                    {isOutOfStock ? (
                        <span className="text-[11px] font-bold text-red-500 uppercase bg-red-50 px-2.5 py-1 rounded-md">
                            Out of Stock
                        </span>
                    ) : quantity === 0 ? (
                        <button
                            onClick={(e) => {
                                e.stopPropagation();
                                onAdd(product);
                            }}
                            className="px-6 py-1.5 rounded-lg border border-primary text-primary font-bold bg-brand-50 hover:bg-brand-100 transition-colors uppercase text-sm shadow-sm"
                        >
                            Add
                        </button>
                    ) : (
                        <div className="flex items-center bg-primary rounded-lg overflow-hidden shadow-md">
                            <button
                                onClick={(e) => {
                                    e.stopPropagation();
                                    onRemove(product._id);
                                }}
                                className="p-1.5 hover:bg-primary/90 text-white transition-colors"
                            >
                                <Minus className="w-4 h-4" />
                            </button>
                            <span className="px-2 text-white font-bold min-w-[24px] text-center text-sm">
                                {quantity}
                            </span>
                            <button
                                onClick={(e) => {
                                    e.stopPropagation();
                                    onAdd(product);
                                }}
                                disabled={quantity >= product.stock}
                                className="p-1.5 hover:bg-primary/90 text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                            >
                                <Plus className="w-4 h-4" />
                            </button>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
};

export default React.memo(ProductCard);