'use client';

import { useWishlist } from '@/lib/wishlist-context';

interface WishlistButtonProps {
  productId: string;
  /** 'card' = small overlay on product card, 'detail' = full button on product detail page */
  variant?: 'card' | 'detail';
}

export default function WishlistButton({ productId, variant = 'card' }: WishlistButtonProps) {
  const { isInWishlist, toggleWishlist, isLoading, isWishlistEnabled } = useWishlist();
  const inWishlist = isInWishlist(productId);

  if (!isWishlistEnabled) return null;

  const handleClick = async (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    await toggleWishlist(productId);
  };

  if (variant === 'detail') {
    // Text-link style matching Shopware default — no border, no background
    return (
      <button
        onClick={handleClick}
        disabled={isLoading}
        aria-label={inWishlist ? 'Remove from wishlist' : 'Add to wishlist'}
        className={`inline-flex items-center gap-1.5 text-sm transition-colors ${
          inWishlist
            ? 'text-red-500 hover:text-red-600'
            : 'text-surface-500 hover:text-red-500'
        }`}
      >
        <svg
          className="w-4 h-4 flex-shrink-0"
          fill={inWishlist ? 'currentColor' : 'none'}
          viewBox="0 0 24 24"
          stroke="currentColor"
          strokeWidth={1.5}
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
          />
        </svg>
        {inWishlist ? 'In wishlist' : 'Add to wishlist'}
      </button>
    );
  }

  // Card variant — small icon button overlaid on product image
  return (
    <button
      onClick={handleClick}
      disabled={isLoading}
      aria-label={inWishlist ? 'Remove from wishlist' : 'Add to wishlist'}
      className={`absolute bottom-3 right-3 w-8 h-8 flex items-center justify-center rounded-full shadow-md transition-all ${
        inWishlist
          ? 'bg-white text-red-500'
          : 'bg-white/80 text-surface-400 hover:text-red-500 hover:bg-white'
      }`}
    >
      <svg
        className="w-4 h-4"
        fill={inWishlist ? 'currentColor' : 'none'}
        viewBox="0 0 24 24"
        stroke="currentColor"
        strokeWidth={2}
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
        />
      </svg>
    </button>
  );
}