'use client';

import AppImage from '@/components/ui/AppImage';
import Link from 'next/link';
import { Heart, ShoppingCart } from 'lucide-react';
import { LocalizedProduct } from '@/lib/product-i18n';
import { formatPrice, getFormatLocale } from '@/lib/utils';
import { useWishlist } from '@/presentation/hooks/useWishlist';
import { useTranslation } from '@/hooks/useTranslation';
import { cn } from '@/lib/utils';
import { products } from '@/lib/products';
interface ProductCardProps {
  product: LocalizedProduct;
}

export default function ProductCard({ product }: ProductCardProps) {
  const { isInWishlist, toggleItem } = useWishlist();
  const { t, locale } = useTranslation();
  const rawProduct = products.find((p) => p.id === product.id)!;
  const inWishlist = isInWishlist(product.id);

  return (
    <div className="card-premium group overflow-hidden">
      <div className="relative aspect-[4/3] overflow-hidden bg-white">
        <Link href={`/product/${product.slug}`}>
          <AppImage
            src={product.image}
            alt={product.name}
            fill
            className="object-contain p-2 transition-transform duration-500 group-hover:scale-[1.03]"
            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 320px"
          />
        </Link>
        {product.badge && (
          <span className="absolute start-3 top-3 rounded-full bg-gold-500 px-3 py-1 text-xs font-semibold text-white shadow-gold">
            {product.badge}
          </span>
        )}
        <button
          onClick={() => toggleItem(rawProduct)}
          className={cn(
            'absolute end-3 top-3 flex h-9 w-9 items-center justify-center rounded-full bg-white/90 shadow-sm backdrop-blur transition-all hover:scale-110',
            inWishlist && 'text-red-500'
          )}
          aria-label={inWishlist ? t('product.removeWishlist') : t('product.addWishlist')}
        >
          <Heart className={cn('h-4 w-4', inWishlist && 'fill-current')} />
        </button>
      </div>

      <div className="p-5">
        <div className="mb-1 flex items-center gap-2">
          <span className="text-xs font-medium uppercase tracking-wider text-brand-600">
            {t(`categories.${product.category}.name`)}
          </span>
          {product.weight && (
            <span className="text-xs text-gray-400">· {product.weight}</span>
          )}
        </div>

        <Link href={`/product/${product.slug}`}>
          <h3 className="mb-1 font-display text-lg font-semibold text-brand-900 transition-colors group-hover:text-brand-700">
            {product.name}
          </h3>
        </Link>

        <p className="mb-4 line-clamp-2 text-sm text-gray-500">{product.description}</p>

        <div className="flex items-center justify-between">
          <div>
            <span className="text-lg font-bold text-brand-800">
              {formatPrice(product.price, getFormatLocale(locale))}
            </span>
            <span className="ms-1 text-xs text-gray-400">{product.priceUnit}</span>
          </div>

          <Link
            href={`/product/${product.slug}`}
            className="flex h-10 w-10 items-center justify-center rounded-full bg-brand-700 text-white transition-all hover:bg-brand-800 hover:shadow-premium"
            aria-label={t('product.viewProduct', { name: product.name })}
          >
            <ShoppingCart className="h-4 w-4" />
          </Link>
        </div>
      </div>
    </div>
  );
}