import { Link } from 'react-router-dom';
import { Eye } from 'lucide-react';

function CardBody({ product }) {
    const imageUrl = product.images?.[0] ? `${product.images[0]}` : 'https://placehold.co/300x200?text=No+Image';

    const formattedPrice = product.price?.toLocaleString('vi-VN') + ' đ';

    const infoItems = product.info && typeof product.info === 'object' ? Object.entries(product.info) : [];

    return (
        <div className="group relative bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 border border-gray-100">
            {/* Image Container with Overlay */}
            <div className="relative h-52 overflow-hidden">
                <img
                    src={imageUrl}
                    alt={product.title}
                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                />
                {/* Gradient Overlay */}
                <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>

                {/* Product Code Badge - Top Right */}
                <div className="absolute top-3 right-3 bg-gradient-to-r from-orange-500 to-red-500 text-white text-xs font-bold px-3 py-1.5 rounded-full shadow-lg">
                    MS: {product.title}
                </div>

                {/* Status Badge - Top Left */}
                <div
                    className={`absolute top-3 left-3 text-xs font-semibold px-3 py-1.5 rounded-full shadow-lg ${
                        product.status === 'available' ? 'bg-green-500 text-white' : 'bg-gray-500 text-white'
                    }`}
                >
                    {product.status === 'available' ? '✓ Còn hàng' : 'Đã bán'}
                </div>
            </div>

            {/* Content Section */}
            <div className="p-4 space-y-3">
                {infoItems.length > 0 && (
                    <div className="flex flex-wrap gap-2">
                        {infoItems.slice(0, 3).map(([key, value]) => (
                            <span
                                key={key}
                                className="inline-flex items-center gap-1 bg-gradient-to-r from-blue-50 to-indigo-50 text-blue-700 text-xs font-medium px-3 py-1.5 rounded-full border border-blue-100"
                            >
                                <span className="font-semibold">{key}:</span> {value}
                            </span>
                        ))}
                    </div>
                )}

                {/* Divider */}
                <div className="border-t border-dashed border-gray-200"></div>

                {/* Price and Action */}
                <div className="flex items-center justify-between pt-1">
                    <div className="flex items-center gap-2">
                        <span className="text-2xl">💰</span>
                        <span className="text-xl font-bold bg-gradient-to-r from-orange-600 to-red-600 bg-clip-text text-transparent">
                            {formattedPrice}
                        </span>
                    </div>
                    <Link
                        to={`/san-pham/${product._id}`}
                        className="group/btn relative inline-flex items-center gap-2 bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white text-sm font-semibold px-5 py-2.5 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-0.5"
                    >
                        <Eye size={16} />
                        <span>Chi Tiết</span>
                    </Link>
                </div>
            </div>

            {/* Hover Border Effect */}
            <div className="absolute inset-0 rounded-xl border-2 border-transparent group-hover:border-orange-400 transition-colors duration-300 pointer-events-none"></div>
        </div>
    );
}

export default CardBody;
