/* eslint-disable @next/next/no-img-element -- Collection thumbnail images; next/image migration is out of scope. */
export default function CollectionsThumbnail({ collection }) {
  const { thumbnails = [], image } = collection;

  if (image) {
    return (
      <div className="w-full h-48 rounded-xl overflow-hidden mb-4 relative">
        <img src={image} alt={collection.name} className="w-full h-full object-cover" />
        <div className="absolute top-3 right-3 flex gap-2">
          {collection.userRole === 'owner' && (
            <span className="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800 backdrop-blur-sm bg-opacity-90">
              👑 Owner
            </span>
          )}
          {collection.isPublic && (
            <span className="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800 backdrop-blur-sm bg-opacity-90">
              🌍 Public
            </span>
          )}
        </div>
      </div>
    );
  }

  if (!thumbnails || thumbnails.length === 0) {
    return (
      <div
        className="w-full h-48 rounded-xl mb-4 flex items-center justify-center relative"
        style={{ backgroundColor: 'var(--bg-tertiary)' }}
      >
        <div className="text-center">
          <div className="text-6xl mb-2">😢</div>
          <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
            No cards yet
          </p>
        </div>
        <div className="absolute top-3 right-3 flex gap-2">
          {collection.userRole === 'owner' && (
            <span className="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800 backdrop-blur-sm bg-opacity-90">
              👑 Owner
            </span>
          )}
          {collection.isPublic && (
            <span className="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800 backdrop-blur-sm bg-opacity-90">
              🌍 Public
            </span>
          )}
        </div>
      </div>
    );
  }

  const mainCard = thumbnails[0];
  const gridCards = thumbnails.slice(1, 5);

  return (
    <div
      className="w-full h-48 rounded-xl overflow-hidden mb-4 p-3 flex gap-2 relative"
      style={{ backgroundColor: 'var(--bg-tertiary)' }}
    >
      <div className="flex-2 h-full">
        {mainCard ? (
          <div
            className="w-full h-full bg-white rounded-lg overflow-hidden shadow-sm border"
            style={{ borderColor: 'var(--border)' }}
          >
            <img
              src={mainCard.image_url || mainCard.stock_image_url}
              alt={mainCard.name}
              className="w-full h-full object-cover"
            />
          </div>
        ) : (
          <div className="w-full h-full bg-white rounded-lg border" style={{ borderColor: 'var(--border)' }} />
        )}
      </div>
      <div className="flex-1 h-full">
        <div className="grid grid-cols-2 gap-2 h-full">
          {Array.from({ length: 4 }).map((_, index) => {
            const card = gridCards[index];
            return (
              <div key={index} className="relative">
                {card ? (
                  <div
                    className="w-full h-full bg-white rounded-md overflow-hidden shadow-sm border"
                    style={{ borderColor: 'var(--border)' }}
                  >
                    <img
                      src={card.image_url || card.stock_image_url}
                      alt={card.name}
                      className="w-full h-full object-cover"
                    />
                  </div>
                ) : (
                  <div
                    className="w-full h-full bg-white rounded-md border"
                    style={{ borderColor: 'var(--border)' }}
                  />
                )}
              </div>
            );
          })}
        </div>
      </div>
      <div className="absolute top-3 right-3 flex gap-2">
        {collection.userRole === 'owner' && (
          <span className="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800 backdrop-blur-sm bg-opacity-90">
            👑 Owner
          </span>
        )}
        {collection.isPublic && (
          <span className="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800 backdrop-blur-sm bg-opacity-90">
            🌍 Public
          </span>
        )}
      </div>
    </div>
  );
}