'use client'; 

import { Phone, Plus, ShoppingCart, Minus, Trash2 } from "lucide-react";
import Image from "next/image";
import Link from 'next/link';
import { useCart, Product } from "./context/cartcontext"; 

interface ProductCardProps {
    product: Product;
}

export default function ProductCard({ product }: ProductCardProps) {
    const { addToCart, decreaseQuantity, cart } = useCart();
    
    // پیدا کردن محصول در سبد خرید
    const cartItem = cart.find(item => item.id === product.id);
    const quantity = cartItem ? cartItem.quantity : 0;

    const generateSlug = (text: string) => {
        if (!text) return "";
        return text
          .trim()
          .replace(/[\s\u200c]+/g, '-')
          .replace(/[^\w\u0600-\u06FF0-9\-]/g, '')
          .replace(/\-\-+/g, '-');
    };
      
    const slug = generateSlug(product.title);

    const handleIncrease = (e: React.MouseEvent) => {
        e.preventDefault();
        e.stopPropagation();
        addToCart(product);
    };

    const handleDecrease = (e: React.MouseEvent) => {
        e.preventDefault();
        e.stopPropagation();
        decreaseQuantity(product.id);
    };

    // پاکسازی قیمت از ویرگول و تبدیل به عدد برای نمایش صحیح
    const formattedPrice = product.price 
        ? Number(product.price.toString().replace(/,/g, '')).toLocaleString('fa-IR') 
        : null;
      
    return (
        <Link href={`/products/${product.id}/${slug}`} scroll={true} className="bg-white gap-1 flex flex-col justify-between border border-gray-200 rounded-xl shadow-sm p-4 transition-all hover:shadow-md">

            <div className="relative flex justify-center mb-4">
                <span
                    className={`absolute top-0 right-0 font-semibold text-[0.6em] px-2 py-1 rounded-2xl ${product.stock ? "bg-[#00c9512e] text-[#035702] border border-[#03570263] " : "bg-[#f92a3521] text-[#cf0000] border border-[#cf000047]"}`}
                >
                    {product.stock ? "موجود" : "ناموجود"}
                </span>

                <Image
                    src={product.image}
                    width={150}
                    height={150}
                    alt={product.title}
                />
            </div>

            <p className="text-[#808080] text-sm">{product.brand}</p>
            <h3 className="text-sm font-semibold">{product.title}</h3>

            <div className="text-xs text-gray-500 mt-2">
                <div className="flex border-b border-[#dfdfdf] mb-2 pb-2 justify-between">
                    <p>قطر داخلی (L):</p>
                    <p dir="ltr" className="font-semibold text-black">{product.l}</p>
                </div>

                <div className="flex justify-between">
                    <p>قطر خارجی (D):</p>
                    <p dir="ltr" className="font-semibold text-black">{product.d}</p>
                </div>
            </div>

            {/* بخش قیمت و دکمه خرید */}
            {product.price ? (
                <div className="flex justify-between mt-3 items-center min-h-[32px]">
                    <span className="text-[0.85em] font-bold text-gray-800">
                        {formattedPrice} تومان
                    </span>

                    {/* بررسی موجودی برای نمایش دکمه سبد خرید */}
                    {product.stock ? (
                        quantity > 0 ? (
                            <div 
                                className="flex items-center gap-3 bg-white border border-gray-200 rounded-lg py-1 px-2 shadow-sm"
                                onClick={(e) => {
                                    e.preventDefault();
                                    e.stopPropagation();
                                }}
                            >
                                <button 
                                    onClick={handleIncrease}
                                    className="text-gray-500 hover:text-green-600 transition-colors"
                                >
                                    <Plus size={16} />
                                </button>
                                
                                <span className="text-xs font-bold text-gray-800 w-3 text-center">
                                    {quantity}
                                </span>
                                
                                <button 
                                    onClick={handleDecrease}
                                    className="text-gray-500 hover:text-red-500 transition-colors"
                                >
                                    {quantity === 1 ? <Trash2 size={16} /> : <Minus size={16} />}
                                </button>
                            </div>
                        ) : (
                            <button 
                                onClick={handleIncrease}
                                className="rounded-lg border border-[#e6e6e6] bg-gray-50 flex items-center p-2 text-gray-600 hover:bg-gray-200 transition-colors"
                                title="افزودن به سبد خرید"
                            >
                                <ShoppingCart size={16} />
                            </button>
                        )
                    ) : (
                        // جایگزین دکمه خرید وقتی محصول ناموجود است
                        <span className="text-[10px] text-red-500 font-medium bg-red-50 px-2 py-1 rounded-md">
                            عدم موجودی
                        </span>
                    )}
                </div>
            ) : (
                <span className="flex justify-between mt-3 text-[0.85em] font-bold items-center gap-1 min-h-[32px] text-gray-700">
                    استعلام
                    <Phone className="mb-1" size={13} />
                </span>
            )}
        </Link>
    );
}