const ProductDetailMin = React.memo((props) => {
    const { 
        productInfo, 
        config,
        onAddToCart,
    } = props;
    
    const { useMemo, useCallback } = React;

    if (!productInfo?.product) return null;

    const { product, promotions = [] } = productInfo;
    const user_lang = config?.lang || 'vi';

    const displayName = useMemo(() => 
        user_lang === 'vi' ? product.Short_Description_VI : (product.Short_Description_EN || product.description),
        [user_lang, product.Short_Description_VI, product.Short_Description_EN, product.description]
    );
    
    const minPromotionPrice = useMemo(() => {
        if (!promotions) return null;
        const allDiscountedItems = promotions.flatMap(promo => 
            promo.conditions?.items?.filter(item => 
                item.promotion_price < item.normal_price && item.id === product.item_code
            ) || []
        );
        return allDiscountedItems.length > 0 
            ? Math.min(...allDiscountedItems.map(item => item.promotion_price))
            : null;
    }, [promotions, product.item_code]);

    const discountPercentage = useMemo(() => {
        if (minPromotionPrice && product.price > 0) {
            return Math.round(((product.price - minPromotionPrice) / product.price) * 100);
        }
        return null;
    }, [minPromotionPrice, product.price]);
    
    const mainImage = useMemo(() => (product?.images && product?.images?.length > 0) ? product.images[0] : null, [product?.images]);
    const hasStock = useMemo(() => parseInt(product.stock_on_hand, 10) > 0, [product.stock_on_hand]);

    const handleAddToCart = useCallback((e) => {
        e.preventDefault();
        e.stopPropagation();
        if (onAddToCart) {
            onAddToCart(product.item_code, 1);
        }
    }, [onAddToCart, product.item_code]);
    
    return (
        <div className="product-card-container h-100 p-1 p-md-2">
            <style>{`
                .product-card {
                    display: flex; flex-direction: column;
                    border-radius: 12px;
                    overflow: hidden;
                    background: #fff;
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    text-decoration: none !important;
                    color: inherit;
                    border: 1px solid #f0f0f0 !important; /* Border nhẹ */
                }
                .product-card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 12px 24px rgba(0,0,0,0.1) !important;
                    border-color: #e7339a !important; /* Border nổi bật khi hover */
                }

                /* Layout Media 70:30 */
                .media-section {
                    display: flex;
                    width: 100%;
                    height: 160px; /* Chiều cao cố định cho phần media */
                    background: #fff;
                }
                .image-left {
                    flex: 0 0 70%; /* 70% cho ảnh */
                    position: relative;
                    display: flex; align-items: center; justify-content: center;
                    padding: 10px;
                    overflow: hidden;
                }
                .product-card-img {
                    max-width: 100%; max-height: 100%;
                    object-fit: contain;
                    transition: transform 0.4s ease;
                }
                .product-card:hover .product-card-img {
                    transform: scale(1.08); /* Hiệu ứng zoom nhẹ khi hover */
                }

                .attr-right {
                    flex: 0 0 30%; /* 30% cho tags */
                    display: flex; flex-direction: column; align-items: center;
                    gap: 8px;
                    padding-top: 15px;
                }
                .attr-icon-box {
                    width: 28px; height: 28px;
                    display: flex; align-items: center; justify-content: center;
                    border-radius: 50%;
                    background: #f8f9fa;
                    color: #e7339a;
                    font-size: 12px;
                    border: 1px solid #eee;
                    cursor: help; /* Gợi ý người dùng có thể hover để xem tooltip */
                }

                .discount-badge {
                    position: absolute; top: 8px; left: 8px;
                    background: #ff4d4f;
                    color: white;
                    padding: 1px 5px;
                    border-radius: 4px;
                    font-size: 0.7rem;
                    font-weight: bold;
                    z-index: 2; /* Nằm trên ảnh */
                }

                .product-info-box {
                    padding: 10px 12px;
                    flex-grow: 1;
                    border-top: 1px solid #f8f8f8;
                    display: flex; flex-direction: column; /* Đảm bảo nút bấm luôn ở dưới */
                }
                .product-card-title {
                    font-size: 0.9rem;
                    font-weight: 500;
                    color: #262626;
                    margin-bottom: 4px;
                    line-height: 1.4; display: -webkit-box;
                    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                    overflow: hidden;
                    min-height: 2.8em; /* Luôn giữ 2 dòng cho tên SP */
                }

                .promo-tag-list {
                    display: flex; flex-wrap: wrap;
                    gap: 4px;
                    margin-bottom: 8px;
                }
                .promo-item {
                    font-size: 0.65rem;
                    background: #fff0f6; color: #c41d7f;
                    border: 1px solid #ffadd2;
                    padding: 0px 4px;
                    border-radius: 3px;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                    max-width: 100%;
                }

                /* Hàng chứa giá và nút mua */
                .price-action-row {
                    display: flex; align-items: center; justify-content: space-between;
                    margin-top: auto; /* Đẩy xuống dưới cùng */
                }
                .price-stack {
                    display: flex; flex-direction: column;
                }
                .current-price {
                    font-size: 1.1rem;
                    font-weight: 800;
                    color: #ff4d4f;
                    line-height: 1.2;
                }
                .old-price {
                    font-size: 0.75rem;
                    color: #bfbfbf;
                    text-decoration: line-through;
                    line-height: 1;
                }

                .btn-mini-cart {
                    width: 34px; height: 34px;
                    border-radius: 8px;
                    background: #e7339a;
                    color: #fff;
                    display: flex; align-items: center; justify-content: center;
                    border: none;
                    transition: all 0.2s;
                    flex-shrink: 0;
                }
                .btn-mini-cart:hover {
                    background: #c41d7f;
                    transform: scale(1.05);
                }
                .btn-mini-cart:disabled {
                    background: #f5f5f5;
                    color: #bfbfbf;
                    cursor: not-allowed; transform: none;
                }
            `}</style>

            <a href={`/products/${product.slug}`} className="product-card h-100">
                <div className="media-section"> {/* Phần header của card */}
                    <div className="image-left">
                        {discountPercentage && (
                            <div className="discount-badge">-{discountPercentage}%</div>
                        )}
                        <img 
                            src={mainImage ? `/api/get-product-image/${mainImage}` : '/static/libs/images/no_image.jpg'}
                            alt={displayName}
                            className="product-card-img"
                            //onError={(e) => { e.target.onerror = null; e.target.src='/static/libs/images/no_image.jpg'; }}
                        />
                    </div>
                    
                    <div className="attr-right"> {/* Phần tags bên phải */}
                        {product.is_new && <div className="attr-icon-box" title="New"><i className="fa fa-star"></i></div>}
                        {product.is_hot && <div className="attr-icon-box" title="Hot" style={{color: '#fa8c16'}}><i className="fa fa-fire"></i></div>}
                        {!hasStock && <div className="attr-icon-box" title="Out of stock" style={{color: '#999'}}><i className="fa fa-ban"></i></div>}
                    </div>
                </div>

                <div className="product-info-box"> {/* Phần body của card */}
                    <div className="product-card-title">{displayName}</div>

                    {promotions.length > 0 && (
                        <div className="promo-tag-list" title={promotions.map(p => p.name?.vi).join(', ')}>
                            {promotions.slice(0, 1).map((promo) => (
                                <div key={promo.id} className="promo-item">
                                    <i className="fa fa-tag me-1"></i>
                                    {user_lang === 'vi' ? promo.name?.vi : promo.name?.en}
                                </div>
                            ))}
                        </div>
                    )}

                    <div className="price-action-row">
                        <div className="price-stack">
                            {minPromotionPrice && minPromotionPrice < product.price ? (
                                <>
                                    <span className="current-price">
                                        {commonFunc.formatNumber(parseInt(minPromotionPrice))}đ
                                    </span>
                                    <span className="old-price">
                                        {commonFunc.formatNumber(parseInt(product.price))}đ
                                    </span>
                                </>
                            ) : (
                                <span className="current-price" style={{ color: '#262626' }}>
                                    {commonFunc.formatNumber(parseInt(product.price))}đ
                                </span>
                            )}
                        </div>

                        <button 
                            className="btn-mini-cart" 
                            onClick={handleAddToCart}
                            disabled={!hasStock}
                            title={config?.lang === 'vi' ? 'Thêm vào giỏ' : 'Add to Cart'}
                        >
                            <i className="fa fa-cart-plus"></i>
                        </button>
                    </div>
                </div>
            </a>
        </div>
    );
});