'use client';

import Image from 'next/image';
import Link from 'next/link';
import { Artwork, getAssetUrl } from '@/lib/directus';
import { useCart } from '@/context/cart-context';

interface ArtworkCardProps {
  artwork: Artwork;
  priority?: boolean;
  showAddToCart?: boolean;
  aspectRatio?: '3:2' | '4:5' | 'square'; // 3:2 matches original site
}

export function ArtworkCard({
  artwork,
  priority = false,
  showAddToCart = true,
  aspectRatio = '3:2',
}: ArtworkCardProps) {
  const imageUrl = getAssetUrl(artwork.image, { width: 800, quality: 85, format: 'webp' });
  const slug = artwork.slug || artwork.id;
  const { addItem, isInCart } = useCart();
  const inCart = isInCart(artwork.id);
  const isSold = artwork.status === 'sold';
  const isAvailable = artwork.status === 'published' && artwork.price && artwork.price > 0;

  const handleAddToCart = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    if (isAvailable && !inCart) {
      addItem(artwork);
    }
  };

  // Aspect ratio classes
  const aspectClasses = {
    '3:2': 'aspect-[3/2]',
    '4:5': 'aspect-[4/5]',
    'square': 'aspect-square',
  };

  return (
    <article className="group">
      <Link href={`/store/${slug}`} className="block">
        {/* Image with zoom on hover - matching original's 2.5x zoom factor */}
        <div className={`relative ${aspectClasses[aspectRatio]} bg-gray-100 overflow-hidden`}>
          {artwork.image ? (
            <Image
              src={imageUrl}
              alt={artwork.title}
              fill
              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 50vw"
              className="object-cover transition-transform duration-500 ease-out group-hover:scale-[1.05]"
              priority={priority}
            />
          ) : (
            <div className="flex h-full items-center justify-center text-gray-400">
              <span className="text-sm">No image</span>
            </div>
          )}

          {/* Sold badge */}
          {isSold && <span className="badge-sold">Sold</span>}

          {/* Quick add button - appears on hover */}
          {showAddToCart && isAvailable && !isSold && (
            <button
              onClick={handleAddToCart}
              disabled={inCart}
              className={`absolute bottom-4 left-4 right-4 py-3 text-center text-xs font-medium uppercase tracking-wider opacity-0 transition-all duration-300 group-hover:opacity-100 ${
                inCart
                  ? 'bg-gray-200 text-gray-500'
                  : 'bg-white text-gray-900 hover:bg-gray-900 hover:text-white'
              }`}
            >
              {inCart ? 'In Cart' : 'Add to Cart'}
            </button>
          )}
        </div>

        {/* Details - centered like original */}
        <div className="mt-4 text-center">
          <h3 className="font-serif text-lg">{artwork.title}</h3>
          {isSold ? (
            <p className="mt-2 text-sm font-medium text-gray-400">Sold</p>
          ) : artwork.price ? (
            <p className="mt-2 text-sm font-medium">
              {artwork.currency === 'GBP' ? '£' : '$'}{artwork.price.toLocaleString()}
            </p>
          ) : (
            <p className="mt-2 text-sm text-gray-500">Price on request</p>
          )}
        </div>
      </Link>
    </article>
  );
}
