deckhearth/components/BulkSelectionToolbar.js

import { useState } from 'react';
import { VOCAB } from '../lib/collection-vocabulary.js';

export default function BulkSelectionToolbar({ 
  selectedCards, 
  onClearSelection, 
  onAddToCollection, 
  onAddToDeck, 
  onMarkAsOwned,
  onRemoveFromOwned,
  onBulkFavorite,
  onBulkDelete 
}) {
  const [showActions, setShowActions] = useState(false);
  const selectedCount = selectedCards.length;

  if (selectedCount === 0) return null;

  const handleAddToCollection = () => {
    onAddToCollection(selectedCards);
  };

  const handleAddToDeck = () => {
    onAddToDeck(selectedCards);
  };

  const handleMarkAsOwned = () => {
    onMarkAsOwned(selectedCards);
  };

  const handleRemoveFromOwned = () => {
    onRemoveFromOwned(selectedCards);
  };

  const handleBulkFavorite = () => {
    onBulkFavorite(selectedCards);
  };

  const handleBulkDelete = () => {
    if (confirm(`Are you sure you want to delete ${selectedCount} selected cards?`)) {
      onBulkDelete(selectedCards);
    }
  };

  return (
    <div className="fixed bottom-4 left-4 right-4 sm:bottom-6 sm:left-1/2 sm:right-auto sm:transform sm:-translate-x-1/2 z-50">
      <div className="bg-white rounded-xl shadow-2xl border border-gray-200 px-3 sm:px-6 py-3 sm:py-4 flex items-center justify-between sm:justify-start sm:space-x-4 sm:min-w-96">
        {/* Selection Count */}
        <div className="flex items-center space-x-2">
          <div className="w-8 h-8 rounded-full flex items-center justify-center" style={{ backgroundColor: 'var(--accent-ember)' }}>
            <span className="text-white text-sm font-bold">{selectedCount}</span>
          </div>
          <span className="text-gray-700 font-medium text-sm sm:text-base">
            <span className="hidden sm:inline">{selectedCount} card{selectedCount !== 1 ? 's' : ''} selected</span>
            <span className="sm:hidden">{selectedCount}</span>
          </span>
        </div>

        {/* Divider - Hidden on mobile */}
        <div className="hidden sm:block h-6 w-px bg-gray-300"></div>

        {/* Quick Actions */}
        <div className="flex items-center space-x-1 sm:space-x-2">
          <button
            onClick={handleAddToCollection}
            className="px-2 sm:px-3 py-2 text-white rounded-lg text-sm font-medium flex items-center space-x-1 transition-colors"
            style={{ backgroundColor: 'var(--accent-flame)' }}
            onMouseEnter={(e) => e.target.style.backgroundColor = 'var(--accent-ember)'}
            onMouseLeave={(e) => e.target.style.backgroundColor = 'var(--accent-flame)'}
          >
            <svg className="w-4 h-4" 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>
            <span className="hidden sm:inline">Collection</span>
          </button>

          <button
            onClick={handleAddToDeck}
            className="px-2 sm:px-3 py-2 text-white rounded-lg text-sm font-medium flex items-center space-x-1 transition-colors"
            style={{ backgroundColor: 'var(--accent-gold)' }}
            onMouseEnter={(e) => e.target.style.backgroundColor = '#e6830b'}
            onMouseLeave={(e) => e.target.style.backgroundColor = 'var(--accent-gold)'}
          >
            <svg className="w-4 h-4" 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>
            <span className="hidden sm:inline">Deck</span>
          </button>

          <button
            onClick={handleMarkAsOwned}
            className="px-2 sm:px-3 py-2 text-white rounded-lg text-sm font-medium flex items-center space-x-1 transition-colors"
            style={{ backgroundColor: 'var(--accent-wood)' }}
            onMouseEnter={(e) => e.target.style.backgroundColor = '#6d4c41'}
            onMouseLeave={(e) => e.target.style.backgroundColor = 'var(--accent-wood)'}
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
            </svg>
            <span className="hidden sm:inline">{VOCAB.MY_COLLECTION}</span>
          </button>
        </div>

        {/* More Actions Button */}
        <div className="relative">
          <button
            onClick={() => setShowActions(!showActions)}
            className="p-2 text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-lg transition-colors"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
            </svg>
          </button>

          {/* Dropdown Actions */}
          {showActions && (
            <div className="absolute bottom-full right-0 mb-2 bg-white rounded-lg shadow-xl border border-gray-200 py-2 min-w-48">
              <button
                onClick={() => {
                  handleBulkFavorite();
                  setShowActions(false);
                }}
                className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center space-x-2"
              >
                <svg className="w-4 h-4" fill="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>
                <span>Add to Favorites</span>
              </button>

              <button
                onClick={() => {
                  handleRemoveFromOwned();
                  setShowActions(false);
                }}
                className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center space-x-2"
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
                <span>{VOCAB.REMOVE_FROM_MY_COLLECTION}</span>
              </button>

              <div className="border-t border-gray-200 my-1"></div>

              <button
                onClick={() => {
                  handleBulkDelete();
                  setShowActions(false);
                }}
                className="w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-red-50 flex items-center space-x-2"
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                </svg>
                <span>Delete Selected</span>
              </button>
            </div>
          )}
        </div>

        {/* Clear Selection */}
        <button
          onClick={onClearSelection}
          className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
          title="Clear selection"
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  );
}