'use client';

import { Phone } from "lucide-react";
import Image from "next/image";
import Link from 'next/link';
import { useCart } from "./context/cartcontext";
import { Product } from "@/public/src/types/product";
import CartControls from "./CartControls";

interface ProductCardProps {
    product: Product;
}

export default function ProductCard({ product }: ProductCardProps) {
    // دریافت استیت‌های لوکال و سرور از کانتکست
    const { cart, serverCartItems, isLoggedIn } = useCart();

    const slug = product.slug;
    
    // منطق یافتن شناسه ردیف سبد خرید و تعداد بر اساس وضعیت لاگین
    let cartItemId = null;
    let quantity = 0;

    if (isLoggedIn && serverCartItems) {
        // اگر لاگین بود، از سبد خرید سرور می‌خوانیم
        const serverItem = serverCartItems.find((item) => item.product?.id === product.id);
        if (serverItem) {
            cartItemId = serverItem.id;
            quantity = serverItem.quantity;
        }
    } else {
        // اگر مهمان بود، از لوکال استوریج می‌خوانیم
        const localItem = cart.find(item => item.id === product.id);
        if (localItem) {
            quantity = localItem.quantity;
        }
    }

    const formattedPrice = product.price
        ? Number(product.price.toString().replace(/,/g, '')).toLocaleString('fa-IR')
        : null;

    return (
        <Link href={`/product/${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 || "/placeholder.png"}
                    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">
                {product.attributes?.[0] && (
                    <div className="flex border-b border-[#dfdfdf] mb-2 pb-2 justify-between">
                        <p className="text-[0.9em]">{product.attributes[0].name}:</p>
                        <p dir="rtl" className="font-semibold text-left text-[0.8em] text-black">{product.attributes[0].valueText || "-"}</p>
                    </div>
                )}

                {product.attributes?.[1] && (
                    <div className="flex justify-between">
                        <p className="text-[0.9em]">{product.attributes[1].name}:</p>
                        <p dir="rtl" className="font-semibold text-left text-[0.8em] text-black">{product.attributes[1].valueText || "-"}</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 ? (
                        // استفاده از کامپوننت CartControls دقیقا با همان UI قبلی
                        <CartControls 
                            product={product}
                            cartItemId={cartItemId}
                            quantity={quantity}
                        />
                    ) : (
                        <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>
    );
}