import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { ShoppingCart, Heart, Share2 } from "lucide-react";
import { PLACEHOLDER_PRODUCT } from "@/utils/placeholderImage";

interface MobileProductCardProps {
  product: {
    id: string;
    name: string;
    price: number;
    image?: string;
    status?: string;
    category?: string;
    stock_quantity?: number;
    is_hot?: boolean;
  };
  onAddToCart?: (productId: string) => void;
  onViewDetails?: (productId: string) => void;
  compact?: boolean;
}

export const MobileProductCard = ({ 
  product, 
  onAddToCart, 
  onViewDetails, 
  compact = false 
}: MobileProductCardProps) => {
  const isInStock = (product.stock_quantity ?? 0) > 0;
  const displayImage = product.image || PLACEHOLDER_PRODUCT;

  if (compact) {
    return (
      <Card 
        className="w-full bg-card hover:shadow-md transition-all duration-200 cursor-pointer active:scale-95"
        onClick={() => onViewDetails?.(product.id)}
      >
        <CardContent className="p-3">
          <div className="flex space-x-3">
            <div className="w-16 h-16 bg-muted rounded-lg flex-shrink-0 overflow-hidden">
              <img 
                src={displayImage} 
                alt={product.name}
                className="w-full h-full object-cover"
                onError={(e) => {
                  e.currentTarget.src = PLACEHOLDER_PRODUCT;
                }}
              />
            </div>
            <div className="flex-1 min-w-0 flex flex-col justify-between">
              <div>
                <h4 className="text-sm font-medium text-foreground line-clamp-2 mb-1">
                  {product.name.replace(/^识别商品：/, '')}
                </h4>
                {product.status && (
                  <Badge variant="secondary" className="text-xs mb-2">
                    {product.status}
                  </Badge>
                )}
              </div>
              <div className="flex items-center justify-between">
                <span className="text-primary font-bold text-base">
                  ¥{product.price.toFixed(2)}
                </span>
                <Button
                  size="sm"
                  variant="default"
                  className="h-7 px-3 text-xs"
                  disabled={!isInStock}
                  onClick={(e) => {
                    e.stopPropagation();
                    onAddToCart?.(product.id);
                  }}
                >
                  {isInStock ? '加购' : '缺货'}
                </Button>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card 
      className="w-full bg-card hover:shadow-lg transition-all duration-200 cursor-pointer active:scale-95 overflow-hidden"
      onClick={() => onViewDetails?.(product.id)}
    >
      {/* 商品图片 */}
      <div className="aspect-square w-full overflow-hidden bg-muted relative">
        <img
          src={displayImage}
          alt={product.name}
          className="w-full h-full object-cover"
          onError={(e) => {
            e.currentTarget.src = PLACEHOLDER_PRODUCT;
          }}
        />
        {/* 收藏和分享按钮 */}
        <div className="absolute top-2 right-2 flex space-x-1">
          <Button
            size="icon"
            variant="secondary"
            className="w-8 h-8 bg-black/20 hover:bg-black/40 backdrop-blur-sm"
            onClick={(e) => {
              e.stopPropagation();
              // TODO: 实现收藏功能
            }}
          >
            <Heart className="w-4 h-4 text-white" />
          </Button>
          <Button
            size="icon"
            variant="secondary"
            className="w-8 h-8 bg-black/20 hover:bg-black/40 backdrop-blur-sm"
            onClick={(e) => {
              e.stopPropagation();
              // TODO: 实现分享功能
            }}
          >
            <Share2 className="w-4 h-4 text-white" />
          </Button>
        </div>
        
        {/* 库存状态标签 */}
        {!isInStock && (
          <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
            <Badge variant="destructive" className="text-white">
              暂时缺货
            </Badge>
          </div>
        )}
      </div>
      
      {/* 商品信息 */}
      <CardContent className="p-4 space-y-3">
        {/* 分类和热门标签 */}
        <div className="flex gap-1 flex-wrap">
          {product.is_hot && (
            <Badge variant="destructive" className="text-xs">
              热门
            </Badge>
          )}
          {product.category && (
            <Badge variant="outline" className="text-xs">
              {product.category}
            </Badge>
          )}
        </div>
        
        {/* 商品名称 */}
        <h3 className="text-base font-medium text-foreground leading-tight line-clamp-2 min-h-[2.5rem]">
          {product.name.replace(/^识别商品：/, '')}
        </h3>

        {/* 价格和库存信息 */}
        <div className="space-y-2">
          <div className="flex items-baseline justify-between">
            <span className="text-xl font-bold text-primary">
              ¥{product.price.toFixed(2)}
            </span>
            {product.stock_quantity !== undefined && (
              <span className="text-sm text-muted-foreground">
                库存 {product.stock_quantity}
              </span>
            )}
          </div>
        </div>

        {/* 操作按钮 */}
        <div className="flex space-x-2 pt-2">
          <Button
            className="flex-1 h-10"
            disabled={!isInStock}
            onClick={(e) => {
              e.stopPropagation();
              onAddToCart?.(product.id);
            }}
          >
            <ShoppingCart className="w-4 h-4 mr-2" />
            {isInStock ? '加入购物车' : '暂时缺货'}
          </Button>
        </div>
      </CardContent>
    </Card>
  );
};