import Link from 'next/link';
import { BadgeCheck, PackageCheck, ShoppingBag, Star, Store, Tag } from 'lucide-react';
import ProductImageWithFallback from './ProductImageWithFallback';

interface Product {
  id: string;
  name: string;
  slug: string;
  price: number | string;
  stock?: number;
  soldCount?: number;
  image?: string | null;
  isFeatured?: boolean;
  category?: { name: string };
  seller?: {
    name?: string | null;
    sellerProfile?: {
      shopName?: string | null;
      shopSlug?: string | null;
      avatarUrl?: string | null;
    } | null;
  };
  sellerRating?: {
    average?: number;
    count?: number;
    percentage?: number;
  };
}

const formatMoney = (value: number | string) =>
  `${Number(value || 0).toLocaleString('vi-VN')} đ`;

export default function ProductCard({
  product,
  locale,
}: {
  product: Product;
  locale: string;
}) {
  const rating = product.sellerRating;
  const hasReviews = Number(rating?.count || 0) > 0;
  const shopName =
    product.seller?.sellerProfile?.shopName ||
    product.seller?.name ||
    'Gian hàng SHOPMMO';
  const stock = Math.max(0, Number(product.stock || 0));
  const soldCount = Math.max(0, Number(product.soldCount || 0));

  return (
    <Link
      href={`/${locale}/product/${product.slug}`}
      className="group flex h-full min-w-0 flex-col overflow-hidden rounded-xl border border-white/10 bg-[#111214] shadow-lg transition duration-300 hover:-translate-y-0.5 hover:border-rose-400/45 hover:shadow-[0_14px_40px_rgba(0,0,0,.35)]"
    >
      <div className="relative aspect-[16/10] overflow-hidden bg-[#191a1d]">
        {product.isFeatured && (
          <span className="absolute left-2 top-2 z-10 inline-flex items-center gap-1 rounded-md bg-gradient-to-r from-amber-400 to-orange-500 px-2 py-1 text-[10px] font-black uppercase text-black shadow-lg">
            <BadgeCheck className="h-3 w-3" />
            Nổi bật
          </span>
        )}
        {product.image ? (
          <ProductImageWithFallback
            src={product.image}
            alt={product.name}
            className="h-full w-full object-cover transition duration-500 group-hover:scale-[1.04]"
          />
        ) : (
          <div className="grid h-full place-items-center bg-gradient-to-br from-[#202126] to-[#121317]">
            <Tag className="h-12 w-12 text-gray-600" />
          </div>
        )}
      </div>

      <div className="flex flex-1 flex-col p-3.5">
        <h3 className="line-clamp-2 min-h-10 text-sm font-black leading-5 text-white transition group-hover:text-rose-300">
          {product.name}
        </h3>
        <p className="mt-1 truncate text-[11px] font-medium text-gray-500">
          {product.category?.name || 'Sản phẩm số'}
        </p>

        <div className="mt-2 flex items-center gap-1.5 text-[11px]">
          <Star
            className={`h-3.5 w-3.5 text-amber-400 ${
              hasReviews ? 'fill-amber-400' : ''
            }`}
          />
          <span className="font-bold text-amber-300">
            {hasReviews ? Number(rating?.average || 0).toFixed(1) : 'Chưa có'}
          </span>
          <span className="text-gray-600">•</span>
          <span className="truncate text-gray-400">
            {hasReviews ? `${rating?.count} đánh giá` : 'Chưa có đánh giá'}
          </span>
        </div>

        <p className="mt-2 text-lg font-black text-[#ff5664]">
          {formatMoney(product.price)}
        </p>

        <div className="mt-2 flex items-center justify-between gap-2 border-t border-white/8 pt-2 text-[11px]">
          <span className={`inline-flex items-center gap-1 font-semibold ${stock > 0 ? 'text-emerald-400' : 'text-rose-400'}`}>
            <PackageCheck className="h-3.5 w-3.5" />
            Còn {stock.toLocaleString('vi-VN')}
          </span>
          <span className="inline-flex items-center gap-1 font-semibold text-gray-400">
            <ShoppingBag className="h-3.5 w-3.5" />
            Đã bán {soldCount.toLocaleString('vi-VN')}
          </span>
        </div>

        <div className="mt-2.5 flex items-center gap-2 rounded-lg bg-white/[.035] px-2.5 py-2">
          {product.seller?.sellerProfile?.avatarUrl ? (
            <img
              src={product.seller.sellerProfile.avatarUrl}
              alt={shopName}
              className="h-6 w-6 rounded-full object-cover"
            />
          ) : (
            <span className="grid h-6 w-6 place-items-center rounded-full bg-violet-500/15 text-violet-300">
              <Store className="h-3.5 w-3.5" />
            </span>
          )}
          <span className="min-w-0 flex-1 truncate text-[11px] font-bold text-gray-300">
            {shopName}
          </span>
        </div>
      </div>
    </Link>
  );
}