import { useNavigate } from "react-router-dom"
import { Button } from "@/components/ui/button"
import type { Product } from "@/lib/models/product"
import vector from "../_assets/vector.webp"

type ProductGridProps = {
  products: Product[]
}

export default function ProductGrid({ products }: ProductGridProps) {
  const navigate = useNavigate()

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-6 gap-6">
      {products.map(product => (
        <div
          key={product.id}
          className="relative overflow-visible rounded-xl shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white p-6 flex flex-col min-h-60"
        >
          {product.tag && (
            <div className="absolute -top-5 -right-5">
              <div className="relative">
                <img src={vector} alt="打折" />
                <span className="absolute inset-0 flex items-center justify-center text-xs font-bold">
                  {product.tag}
                </span>
              </div>
            </div>
          )}

          <div className="text-lg font-bold text-center text-gray-700">
            {product.title}
          </div>

          {product.desc ? (
            <div className="py-2 text-sm text-center  text-orange-400 font-bold">
              {product.desc}
            </div>
          ) : (
            <div className="py-2 text-sm text-center font-bold text-orange-400">
              ¥ {product.price.toFixed(2)}
            </div>
          )}

          <div className="text-xs text-gray-400 flex flex-col space-y-0.5 mt-10">
            {product.card && (
              <div className="flex justify-between">
                <span>卡种：</span>
                <span>{product.card}</span>
              </div>
            )}
            {product.originalPrice !== undefined && (
              <div className="flex justify-between">
                <span>原价：</span>
                <span>¥{product.originalPrice.toFixed(2)}</span>
              </div>
            )}
            {product.duration && (
              <div className="flex justify-between">
                <span>套餐有效期：</span>
                <span>{product.duration}</span>
              </div>
            )}
          </div>

          {product.features && product.features.length > 0 && (
            <div className="text-xs text-gray-400 text-center space-y-0.5 mt-1">
              {product.features.map((feature, index) => (
                <div key={index}>{feature}</div>
              ))}
            </div>
          )}

          <div className="pt-4 mt-auto">
            <Button
              variant="outline"
              className="w-full text-blue-500 border-blue-400 hover:bg-blue-50"
              onClick={() => navigate("/product/buy", { state: { product } })}
            >
              立即购买
            </Button>
          </div>
        </div>
      ))}
    </div>
  )
}
