import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { ShoppingCart, Eye } from "lucide-react";
import { cn } from "@/lib/utils";

interface ProductCardProps {
  product: {
    id: string;
    name: string;
    description?: string;
    price: number;
    image_url?: string;
    category?: string;
    stock_quantity: number;
    is_hot?: boolean;
  };
  onAddToCart?: (product: {
    id: string;
    name: string;
    price: number;
    image_url?: string;
    category?: string;
    stock_quantity: number;
  }) => void;
  onViewDetails?: (productId: string) => void;
}

export const ProductCard = ({ product, onAddToCart, onViewDetails }: ProductCardProps) => {
  const [imageError, setImageError] = useState(false);
  const isInStock = product.stock_quantity > 0;
  const isLowStock = isInStock && product.stock_quantity <= 5;
  const cleanName = product.name.replace(/^识别商品：/, '');

  return (
    <Card
      className={cn(
        "w-full max-w-sm bg-card border-border overflow-hidden cursor-pointer group",
        "transition-all duration-200 hover:border-primary/60 hover:shadow-lg hover:-translate-y-0.5"
      )}
      onClick={() => onViewDetails?.(product.id)}
    >
      {/* 商品图片 */}
      <div className="relative aspect-square w-full overflow-hidden bg-muted/40">
        {product.image_url && !imageError ? (
          <img
            src={product.image_url}
            alt={cleanName}
            loading="lazy"
            decoding="async"
            className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
            onError={() => setImageError(true)}
          />
        ) : (
          <div className="w-full h-full flex items-center justify-center text-muted-foreground text-sm">
            暂无图片
          </div>
        )}

        {/* 缺货遮罩 */}
        {!isInStock && (
          <div className="absolute inset-0 bg-background/70 backdrop-blur-[1px] flex items-center justify-center">
            <Badge variant="secondary" className="text-sm px-3 py-1">已售罄</Badge>
          </div>
        )}

        {/* 角标 */}
        <div className="absolute top-2 left-2 flex flex-col gap-1">
          {product.is_hot && (
            <Badge variant="destructive" className="text-[10px] px-1.5 py-0 h-5">热门</Badge>
          )}
          {isLowStock && (
            <Badge className="text-[10px] px-1.5 py-0 h-5 bg-warning text-warning-foreground border-0">
              仅剩 {product.stock_quantity} 件
            </Badge>
          )}
        </div>
      </div>

      {/* 商品信息 */}
      <CardContent className="p-2.5 space-y-1.5">
        <h3 className="text-xs font-medium text-foreground leading-snug line-clamp-2 min-h-[2rem]">
          {cleanName}
        </h3>

        {/* 价格 + 加购 */}
        <div className="flex items-end justify-between gap-2">
          <div className="flex items-baseline gap-0.5 min-w-0">
            <span className="text-[10px] text-primary">¥</span>
            <span className="text-base font-bold text-primary tracking-tight leading-none">
              {product.price.toFixed(2)}
            </span>
          </div>
          <Button
            size="icon"
            className="h-7 w-7 shrink-0 rounded-lg"
            disabled={!isInStock}
            onClick={(e) => {
              e.stopPropagation();
              onAddToCart?.({
                id: product.id,
                name: product.name,
                price: product.price,
                image_url: product.image_url,
                category: product.category,
                stock_quantity: product.stock_quantity,
              });
            }}
            title={isInStock ? '加入购物车' : '缺货'}
          >
            <ShoppingCart className="h-3.5 w-3.5" />
          </Button>
        </div>
      </CardContent>
    </Card>
  );
};
