deckhearth/components/CardItem.js

import { useState } from 'react';
import { useRouter } from 'next/router';

export default function CardItem({ 
  card, 
  viewMode = 'grid', 
  isSelected = false, 
  onToggleSelect,
  onAddToCollection,
  onAddToDeck,
  onToggleFavorite,
  isFavorited = false
}) {
  const [imageError, setImageError] = useState(false);
  const router = useRouter();

  const handleSelectChange = (e) => {
    e.stopPropagation();
    onToggleSelect(card);
  };

  const handleImageError = () => {
    setImageError(true);
  };

  const handleCardClick = (e) => {
    // Don't navigate if clicking on interactive elements
    if (e.target.closest('input, button, a')) {
      return;
    }
    router.push(`/card/${card.id}`);
  };

  // Get rarity-based styling
  const getRarityEffects = (rarity) => {
    const rarityLower = rarity?.toLowerCase() || '';
    
    if (rarityLower.includes('mythic') || rarityLower.includes('legendary')) {
      return {
        glow: 'rarity-glow-mythic',
        particles: 'rarity-particles-mythic',
        border: 'border-yellow-400',
        shadow: 'shadow-yellow-400/50'
      };
    } else if (rarityLower.includes('rare') || rarityLower.includes('holo')) {
      return {
        glow: 'rarity-glow-rare',
        particles: 'rarity-particles-rare',
        border: 'border-purple-400',
        shadow: 'shadow-purple-400/50'
      };
    } else if (rarityLower.includes('uncommon')) {
      return {
        glow: 'rarity-glow-uncommon',
        particles: 'rarity-particles-uncommon',
        border: 'border-blue-400',
        shadow: 'shadow-blue-400/30'
      };
    } else if (rarityLower.includes('enchanted') || rarityLower.includes('secret')) {
      return {
        glow: 'rarity-glow-enchanted',
        particles: 'rarity-particles-enchanted',
        border: 'border-pink-400',
        shadow: 'shadow-pink-400/60'
      };
    }
    
    return {
      glow: '',
      particles: '',
      border: 'border-gray-200',
      shadow: ''
    };
  };

  const rarityEffects = getRarityEffects(card.rarity);

  // Panel positioning no longer needed - using simple hover buttons

  if (viewMode === 'list') {
    return (
      <div 
        className={`flex items-center p-4 border rounded-lg transition-all duration-200 cursor-pointer ${
          isSelected 
            ? 'border-purple-500 bg-purple-50 shadow-md' 
            : 'border-gray-200 hover:border-gray-300 hover:shadow-sm'
        }`}
        onClick={handleCardClick}
      >
        {/* Selection Checkbox */}
        <div className="flex-shrink-0 mr-4">
          <input
            type="checkbox"
            checked={isSelected}
            onChange={handleSelectChange}
            className="w-4 h-4 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500 focus:ring-2"
          />
        </div>

        {/* Card Image */}
        <div className="flex-shrink-0 mr-4">
          <div className="w-16 h-22 bg-gray-200 rounded-lg overflow-hidden">
            {!imageError ? (
              <img
                src={card.image_url}
                alt={card.name}
                className="w-full h-full object-cover"
                onError={handleImageError}
              />
            ) : (
              <div className="w-full h-full flex items-center justify-center text-gray-400 text-xs">
                No Image
              </div>
            )}
          </div>
        </div>

        {/* Card Info */}
        <div className="flex-1 min-w-0">
          <h3 className="font-semibold text-gray-900 truncate">{card.name}</h3>
          <p className="text-sm text-gray-600">{card.set_name} • {card.rarity}</p>
          <p className="text-sm text-gray-500">{card.card_type}</p>
        </div>

        {/* Game Badge */}
        <div className="flex-shrink-0 mx-4">
          <span className="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">
            {card.game}
          </span>
        </div>

        {/* Price */}
        <div className="flex-shrink-0 mx-4">
          <span className="text-lg font-bold text-green-600">
            ${card.market_price}
          </span>
        </div>

        {/* Actions */}
        <div className="flex-shrink-0 flex items-center space-x-2">
          <button
            onClick={(e) => {
              e.stopPropagation();
              onToggleFavorite(card);
            }}
            className={`p-2 rounded-lg transition-colors ${
              isFavorited 
                ? 'text-red-500 hover:text-red-600' 
                : 'text-gray-400 hover:text-red-500'
            }`}
          >
            <svg className="w-5 h-5" fill={isFavorited ? "currentColor" : "none"} stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
            </svg>
          </button>

          <button
            onClick={(e) => {
              e.stopPropagation();
              onAddToCollection(card);
            }}
            className="p-2 text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-lg transition-colors"
            title="Add to Collection"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
            </svg>
          </button>

          <button
            onClick={(e) => {
              e.stopPropagation();
              onAddToDeck(card);
            }}
            className="p-2 text-green-600 hover:text-green-700 hover:bg-green-50 rounded-lg transition-colors"
            title="Add to Deck"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
            </svg>
          </button>
        </div>
      </div>
    );
  }

  // Grid view
  return (
    <div className="card-item-container relative group bg-transparent rounded-xl transition-all duration-200 overflow-visible transform hover:scale-105 hover:z-10">
      {/* Main Card Container */}
      <div 
        className={`relative rounded-xl border-2 transition-all duration-200 overflow-hidden cursor-pointer ${
          isSelected 
            ? 'shadow-xl ring-2 ring-opacity-50' 
            : 'group-hover:shadow-xl'
        } ${rarityEffects.glow}`}
        style={{
          backgroundColor: 'var(--bg-primary)',
          borderColor: isSelected ? 'var(--accent-ember)' : 'var(--border)',
          '--tw-ring-color': isSelected ? 'var(--accent-ember)' : 'transparent'
        }}
        onClick={handleCardClick}
      >
        
        {/* Rarity Particles */}
        {rarityEffects.particles && (
          <div className={`absolute inset-0 pointer-events-none ${rarityEffects.particles}`}></div>
        )}



        {/* Card Image */}
        <div className="aspect-[2.5/3.5] bg-gray-200 overflow-hidden">
          {!imageError ? (
            <img
              src={card.image_url}
              alt={card.name}
              className="w-full h-full object-cover"
              onError={handleImageError}
            />
          ) : (
            <div className="w-full h-full flex items-center justify-center text-gray-400">
              <div className="text-center">
                <svg className="w-12 h-12 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                <p className="text-xs">No Image</p>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Hover Action Buttons */}
      {/* Top Right - Checkbox and Favorite */}
      <div className="absolute top-2 right-2 flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-20">
        {/* Selection Checkbox */}
        <button
          onClick={(e) => {
            e.stopPropagation();
            onToggleSelect(card);
          }}
          className="p-1.5 rounded-lg shadow-lg transition-all duration-200 hover:scale-110"
          style={{ backgroundColor: 'var(--bg-primary)' }}
        >
          <input
            type="checkbox"
            checked={isSelected}
            onChange={() => {}}
            className="w-4 h-4 rounded focus:ring-2 focus:ring-offset-2"
            style={{ 
              accentColor: 'var(--accent-ember)',
              backgroundColor: 'var(--bg-primary)',
              borderColor: 'var(--border)'
            }}
          />
        </button>

        {/* Favorite Button */}
        <button
          onClick={(e) => {
            e.stopPropagation();
            onToggleFavorite(card);
          }}
          className="p-1.5 rounded-lg shadow-lg transition-all duration-200 hover:scale-110"
          style={{ 
            backgroundColor: isFavorited ? 'var(--accent-ember)' : 'var(--bg-primary)',
            color: isFavorited ? 'white' : 'var(--accent-ember)'
          }}
          title="Toggle Favorite"
        >
          <svg className="w-4 h-4" fill={isFavorited ? "currentColor" : "none"} stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
          </svg>
        </button>
      </div>

      {/* Bottom Left - Ownership Status & Add Button */}
      <div className="absolute bottom-2 left-2 flex items-center space-x-1 z-20">
        {/* Ownership Indicator - Always visible */}
        <div className="flex items-center space-x-1">
          {/* This would be connected to actual ownership data */}
          <div 
            className="w-2 h-2 rounded-full"
            style={{ 
              backgroundColor: false ? 'var(--accent-gold)' : 'var(--text-secondary)',
              opacity: 0.7
            }}
            title={false ? "You own this card" : "Not owned"}
          />
        </div>

        {/* Add/Own Button - Appears on hover */}
        <button
          onClick={(e) => {
            e.stopPropagation();
            // This would toggle ownership status
            alert('Mark as owned (coming soon)');
          }}
          className="opacity-0 group-hover:opacity-100 transition-all duration-200 p-1.5 rounded-lg shadow-lg hover:scale-110"
          style={{ backgroundColor: 'var(--accent-wood)' }}
          title="Mark as Owned"
        >
          <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
          </svg>
        </button>
      </div>
    </div>
  );
}