"use client";

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { ShoppingCart, Heart, Star } from "lucide-react";

import { cn } from "@/lib/utils";
import { Card, CardContent, CardFooter, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

const productCardVariants = cva(
  "group overflow-hidden transition-all duration-300 hover:shadow-md hover:-translate-y-1",
  {
    variants: {
      variant: {
        default: "flex flex-col",
        compact: "flex flex-col p-0",
        horizontal: "flex flex-row",
        featured: "flex flex-col border-primary/50 shadow-sm ring-1 ring-primary/20",
        minimal: "border-none shadow-none bg-transparent hover:shadow-none hover:bg-muted/50",
        gallery: "flex flex-col",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);

export interface ProductCardProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof productCardVariants> {
  title: string;
  price: number;
  originalPrice?: number;
  description?: string;
  image?: string;
  badge?: string;
  onAddToCart?: (quantity: number) => void;
  rating?: number;
  onWishlistToggle?: () => void;
  wishlisted?: boolean;
  inStock?: boolean;
  /** Renders an animated skeleton in place of the card content — for the gap between "rendered" and "data arrived". */
  loading?: boolean;
  /** Units left in stock. When at or below `lowStockThreshold`, shows an urgency hint. */
  stockCount?: number;
  lowStockThreshold?: number;
  /** Shows a −/+ quantity stepper next to the Add to Cart button. */
  showQuantitySelector?: boolean;
}

/**
 * ProductCard — an e-commerce product tile.
 *
 * `onAddToCart` receives the chosen quantity, so it works whether or not you
 * enable `showQuantitySelector`. Pass `stockCount` to surface a low-stock nudge,
 * or `loading` to render a skeleton in the same footprint.
 *
 * @example
 * <ProductCard
 *   title="Wireless Headphones"
 *   price={79.99}
 *   originalPrice={129.99}
 *   image="/headphones.jpg"
 *   rating={4.5}
 *   stockCount={3}
 *   showQuantitySelector
 *   onAddToCart={(quantity) => addToCart(product.id, quantity)}
 * />
 */
export function ProductCard({
  className,
  variant,
  title,
  price,
  originalPrice,
  description,
  image,
  badge,
  onAddToCart,
  rating,
  onWishlistToggle,
  wishlisted = false,
  inStock = true,
  loading = false,
  stockCount,
  lowStockThreshold = 5,
  showQuantitySelector = false,
  ...props
}: ProductCardProps) {
  const isHorizontal = variant === "horizontal";
  const isCompact = variant === "compact";
  const isFeatured = variant === "featured";
  const isGallery = variant === "gallery";

  const [quantity, setQuantity] = React.useState(1);
  const maxQuantity = stockCount && stockCount > 0 ? stockCount : 99;
  const isLowStock = inStock && typeof stockCount === "number" && stockCount > 0 && stockCount <= lowStockThreshold;

  const discount =
    originalPrice && originalPrice > price
      ? Math.round(((originalPrice - price) / originalPrice) * 100)
      : 0;

  if (loading) {
    return (
      <Card className={cn(productCardVariants({ variant }), "w-full animate-pulse", className)} {...props}>
        <div
          className={cn(
            "shrink-0 bg-muted",
            isHorizontal ? "w-1/3" : isGallery ? "aspect-square w-full" : "aspect-[4/3] w-full"
          )}
        />
        <div className={cn("flex flex-1 flex-col gap-3", isCompact || isGallery ? "p-4" : "p-6", isHorizontal ? "w-2/3 justify-center" : "")}>
          <div className="h-4 w-3/4 rounded bg-muted" />
          {!isCompact && !isGallery && <div className="h-3 w-full rounded bg-muted" />}
          <div className="h-6 w-1/3 rounded bg-muted" />
          <div className="h-9 w-full rounded bg-muted" />
        </div>
      </Card>
    );
  }

  const renderStars = () => {
    if (rating === undefined) return null;
    const filledStars = Math.floor(rating);
    const maxStars = 5;
    
    return (
      <div className="flex items-center gap-0.5 mt-1">
        {[...Array(maxStars)].map((_, i) => (
          <Star
            key={i}
            className={cn(
              "h-3.5 w-3.5",
              i < filledStars
                ? "fill-primary text-primary"
                : "fill-muted text-muted-foreground opacity-30"
            )}
          />
        ))}
      </div>
    );
  };

  return (
    <Card className={cn(productCardVariants({ variant }), className)} {...props}>
      <div
        className={cn(
          "relative overflow-hidden bg-gradient-to-br from-muted to-muted/50",
          isHorizontal
            ? "w-1/3 shrink-0"
            : isGallery
            ? "aspect-square w-full"
            : "aspect-[4/3] w-full"
        )}
      >
        <div className="absolute inset-0 z-10 bg-black/0 transition-colors duration-300 group-hover:bg-black/10 pointer-events-none" />
        
        {image ? (
          <img
            src={image}
            alt={title}
            className={cn(
              "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105",
              !inStock && "grayscale opacity-80"
            )}
          />
        ) : (
          <div className="flex h-full w-full items-center justify-center text-muted-foreground">
            <ShoppingCart className="h-10 w-10 opacity-20" />
          </div>
        )}

        {(discount > 0 || badge) && (
          <Badge
            className="absolute left-2 top-2 z-20"
            variant={discount > 0 || badge?.toLowerCase() === "sale" ? "destructive" : "default"}
          >
            {discount > 0 ? `-${discount}%` : badge}
          </Badge>
        )}

        {isFeatured && (
          <Badge className="absolute right-2 top-2 z-20" variant="secondary">
            Featured
          </Badge>
        )}

        {onWishlistToggle && (
          <button
            onClick={(e) => {
              e.stopPropagation();
              onWishlistToggle();
            }}
            className={cn(
              "absolute top-2 right-2 z-20 p-2 rounded-full bg-background/80 backdrop-blur-sm shadow-sm transition-transform active:scale-90 hover:bg-background",
              isFeatured && "top-10"
            )}
          >
            <Heart
              className={cn("h-4 w-4 transition-colors", wishlisted ? "fill-red-500 text-red-500" : "text-foreground")}
            />
          </button>
        )}
      </div>

      <div className={cn("flex flex-1 flex-col", isHorizontal ? "w-2/3" : "w-full")}>
        <CardHeader className={cn(isCompact || isGallery ? "p-4 pb-2" : "p-6 pb-4")}>
          <div className="flex items-start justify-between gap-4">
            <div className="space-y-1 w-full">
              <CardTitle className={cn("line-clamp-1", isGallery ? "text-sm sm:text-base" : "text-base sm:text-lg")}>
                {title}
              </CardTitle>
              {renderStars()}
              {!isCompact && !isGallery && description && (
                <CardDescription className="line-clamp-2 text-xs sm:text-sm mt-1">
                  {description}
                </CardDescription>
              )}
            </div>
          </div>
        </CardHeader>
        <CardContent className={cn("flex-1", isCompact || isGallery ? "p-4 pt-0 pb-2" : "p-6 pt-0 pb-4")}>
          <div className="flex items-baseline gap-2">
            <span className={cn("font-bold", isGallery ? "text-lg sm:text-xl" : "text-xl sm:text-2xl")}>
              ${price.toFixed(2)}
            </span>
            {originalPrice && (
              <span className="text-xs text-muted-foreground line-through sm:text-sm">
                ${originalPrice.toFixed(2)}
              </span>
            )}
          </div>
          {isLowStock && (
            <p className="mt-1.5 flex items-center gap-1.5 text-xs font-medium text-amber-600 dark:text-amber-400">
              <span className="relative flex h-1.5 w-1.5">
                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-amber-500 opacity-75" />
                <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-amber-500" />
              </span>
              Only {stockCount} left in stock
            </p>
          )}
        </CardContent>
        <CardFooter className={cn("gap-2", isCompact || isGallery ? "p-4 pt-0" : "p-6 pt-0")}>
          {showQuantitySelector && inStock && (
            <div className="flex shrink-0 items-center rounded-md border">
              <button
                type="button"
                onClick={() => setQuantity((q) => Math.max(1, q - 1))}
                disabled={quantity <= 1}
                className="flex h-9 w-8 items-center justify-center text-muted-foreground transition-colors hover:text-foreground disabled:opacity-40"
                aria-label="Decrease quantity"
              >
                −
              </button>
              <span className="w-6 text-center text-sm font-medium tabular-nums">{quantity}</span>
              <button
                type="button"
                onClick={() => setQuantity((q) => Math.min(maxQuantity, q + 1))}
                disabled={quantity >= maxQuantity}
                className="flex h-9 w-8 items-center justify-center text-muted-foreground transition-colors hover:text-foreground disabled:opacity-40"
                aria-label="Increase quantity"
              >
                +
              </button>
            </div>
          )}
          <Button
            className="w-full gap-2 transition-transform active:scale-[0.98]"
            size={isCompact || isGallery ? "sm" : "default"}
            onClick={() => onAddToCart?.(quantity)}
            disabled={!inStock}
          >
            <ShoppingCart className={cn("h-4 w-4", isCompact || isGallery ? "h-3.5 w-3.5" : "")} />
            {inStock ? "Add to Cart" : "Out of Stock"}
          </Button>
        </CardFooter>
      </div>
    </Card>
  );
}
Product Card

Wireless Headphones

Wireless Headphones
