import React from "react";
import { useNavigate } from "react-router-dom";

const TopProducts = ({ topProducts }) => {
  const navigate = useNavigate();

  return (
    <div className="bg-white shadow-xl rounded-2xl border border-gray-100 p-8 hover:shadow-2xl transition-shadow duration-300">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h3 className="text-2xl font-bold text-gray-900">Top Selling Products</h3>
          <p className="text-gray-500 text-sm mt-1">Best performers by revenue and orders</p>
        </div>
        <button
          onClick={() => navigate("/products")}
          className="text-[#704F38] hover:bg-[#FAF7F5] px-4 py-2 rounded-xl font-semibold text-sm transition-colors flex items-center gap-2"
        >
          View All
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6">
        {topProducts?.map((product, index) => (
          <div
            key={product._id}
            className="group relative bg-gradient-to-br from-white to-gray-50 rounded-2xl p-4 shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 hover:scale-105 cursor-pointer"
            onClick={() => navigate(`/products/${product._id}`)}
          >
            {/* Rank Badge */}
            <div className="absolute -top-3 -left-3 w-10 h-10 bg-gradient-to-br from-[#704F38] to-[#8d6449] rounded-full flex items-center justify-center shadow-lg z-10">
              <span className="text-white font-bold text-sm">#{index + 1}</span>
            </div>

            {/* Out of Stock Badge */}
            {product.stockStatus === "OUT_OF_STOCK" && (
              <div className="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full shadow-lg z-10">
                Out of Stock
              </div>
            )}

            {/* Product Image */}
            <div className="relative mb-4 overflow-hidden rounded-xl">
              <img
                src={product.displayImage || "/bitmap.png"}
                alt={product.name}
                className="w-full h-40 object-cover transform group-hover:scale-110 transition-transform duration-300"
                onError={(e) => { e.target.src = "/bitmap.png"; }}
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            </div>

            {/* Product Details */}
            <div className="space-y-2">
              <h4 className="font-bold text-gray-900 text-sm line-clamp-1">{product.name}</h4>
              <div className="flex items-center justify-between pt-3 border-t border-gray-200">
                <div className="bg-gradient-to-r from-[#FFE6B3] to-[#FFD280] px-3 py-1 rounded-full">
                  <span className="text-[#704F38] font-extrabold text-sm">
                    ₹{product.basePrice.toLocaleString()}
                  </span>
                </div>
              </div>
              <div className="space-y-1 pt-2 border-t border-gray-200">
                {[
                  { label: "Sold:", value: `${product.totalSold} units` },
                  { label: "Orders:", value: product.totalOrders },
                  { label: "Revenue:", value: `₹${product.revenue.toLocaleString()}`, green: true },
                ].map(({ label, value, green }) => (
                  <div key={label} className="flex items-center justify-between text-xs">
                    <span className="text-gray-500">{label}</span>
                    <span className={`font-bold ${green ? "text-green-600" : "text-gray-900"}`}>{value}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default TopProducts;