"use client";

import Image from "next/image";
import Link from "next/link";
import { motion } from "framer-motion";
import { Star } from "lucide-react";
import { formatCurrency } from "@/lib/utils";
import { Badge } from "@/components/ui/section";

export type ProductCardData = {
  id: string;
  name: string;
  slug: string;
  price: number;
  compareAtPrice?: number | null;
  discountPercent?: number;
  thumbnail?: string | null;
  ratingAvg?: number;
  ratingCount?: number;
  isTrending?: boolean;
  isBestSeller?: boolean;
  category?: { name: string } | null;
};

export function ProductCard({ product }: { product: ProductCardData }) {
  const hasDiscount = (product.compareAtPrice || 0) > product.price || (product.discountPercent || 0) > 0;

  return (
    <motion.article
      initial={{ opacity: 0, y: 16 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-40px" }}
      transition={{ duration: 0.4 }}
      className="group overflow-hidden rounded-2xl border border-border bg-surface transition duration-300 hover:-translate-y-1 hover:border-accent/40 hover:shadow-[0_20px_50px_rgba(0,0,0,0.35)]"
    >
      <Link href={`/product/${product.slug}`} className="block">
        <div className="relative aspect-[4/3] overflow-hidden bg-surface-2">
          {product.thumbnail ? (
            <Image
              src={product.thumbnail}
              alt={product.name}
              fill
              className="object-cover transition duration-500 group-hover:scale-105"
              sizes="(max-width:768px) 50vw, 25vw"
            />
          ) : (
            <div className="flex h-full items-center justify-center bg-gradient-to-br from-surface-2 to-bg text-accent/40">
              <span className="font-[family-name:var(--font-space)] text-3xl font-bold">305</span>
            </div>
          )}
          <div className="absolute left-3 top-3 flex gap-2">
            {product.isTrending ? <Badge>Trending</Badge> : null}
            {product.isBestSeller ? <Badge className="bg-white/10 text-white">Best Seller</Badge> : null}
          </div>
        </div>
        <div className="space-y-2 p-4">
          <p className="text-xs uppercase tracking-wide text-muted">{product.category?.name || "Digital"}</p>
          <h3 className="line-clamp-2 min-h-[2.75rem] font-[family-name:var(--font-space)] text-base font-semibold leading-snug">
            {product.name}
          </h3>
          <div className="flex items-center gap-1 text-xs text-muted">
            <Star className="h-3.5 w-3.5 fill-accent text-accent" />
            <span>{(product.ratingAvg || 0).toFixed(1)}</span>
            <span>({product.ratingCount || 0})</span>
          </div>
          <div className="flex items-end gap-2 pt-1">
            <p className="text-lg font-bold text-accent">{formatCurrency(product.price)}</p>
            {hasDiscount && product.compareAtPrice ? (
              <p className="pb-0.5 text-xs text-muted line-through">{formatCurrency(product.compareAtPrice)}</p>
            ) : null}
          </div>
        </div>
      </Link>
    </motion.article>
  );
}