deckhearth/components/CollectionSelectionModal.js

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

export default function CollectionSelectionModal({ 
  isOpen, 
  onClose, 
  cards, // Array of cards to add
  onAddToCollections 
}) {
  const [collections, setCollections] = useState([]);
  const [selectedCollections, setSelectedCollections] = useState([]);
  const [loading, setLoading] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');

  useEffect(() => {
    if (isOpen) {
      fetchCollections();
      setSelectedCollections([]);
      setSearchQuery('');
    }
  }, [isOpen]);

  const fetchCollections = async () => {
    setLoading(true);
    try {
      const response = await fetch('/api/collections?excludeSystem=true');

      if (response.ok) {
        const data = await response.json();
        // The API returns an array directly, not wrapped in collections property
        setCollections(Array.isArray(data) ? data : data.collections || []);
      } else {
        console.error('Failed to fetch collections:', response.status, response.statusText);
        setCollections([]);
      }
    } catch (error) {
      console.error('Error fetching collections:', error);
      setCollections([]);
    } finally {
      setLoading(false);
    }
  };

  const handleCollectionToggle = (collectionId) => {
    setSelectedCollections(prev => {
      if (prev.includes(collectionId)) {
        return prev.filter(id => id !== collectionId);
      } else {
        return [...prev, collectionId];
      }
    });
  };

  const handleSelectAll = () => {
    const filteredCollections = getFilteredCollections();
    const allSelected = filteredCollections.every(collection => 
      selectedCollections.includes(collection.id)
    );

    if (allSelected) {
      // Deselect all filtered collections
      setSelectedCollections(prev => 
        prev.filter(id => !filteredCollections.some(c => c.id === id))
      );
    } else {
      // Select all filtered collections
      const newSelections = filteredCollections
        .filter(collection => !selectedCollections.includes(collection.id))
        .map(collection => collection.id);
      setSelectedCollections(prev => [...prev, ...newSelections]);
    }
  };

  const getFilteredCollections = () => {
    if (!searchQuery.trim()) return collections;
    
    return collections.filter(collection =>
      collection.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      collection.description?.toLowerCase().includes(searchQuery.toLowerCase())
    );
  };

  const handleSubmit = async () => {
    if (selectedCollections.length === 0) return;

    setSubmitting(true);
    try {
      const results = [];
      
      // Add cards to each selected collection
      for (const collectionId of selectedCollections) {
        for (const card of cards) {
          const response = await fetch(`/api/collections/${collectionId}/cards`, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              cardId: card.id,
              quantity: 1
            })
          });

          if (response.ok) {
            results.push({ collectionId, cardId: card.id, success: true });
          } else {
            results.push({ collectionId, cardId: card.id, success: false });
          }
        }
      }

      // Call callback with results
      onAddToCollections(results, selectedCollections, cards);
      onClose();
    } catch (error) {
      console.error('Error adding cards to collections:', error);
    } finally {
      setSubmitting(false);
    }
  };

  const filteredCollections = getFilteredCollections();
  const allFilteredSelected = filteredCollections.length > 0 && 
    filteredCollections.every(collection => selectedCollections.includes(collection.id));

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden">
        {/* Header */}
        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
              {VOCAB.ADD_TO_LISTS}
            </h2>
            <button
              onClick={onClose}
              className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
            >
              <svg className="w-6 h-6" 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>

          {/* Card Summary */}
          <div className="flex items-center space-x-3 mb-4">
            <div className="flex -space-x-2">
              {cards.slice(0, 3).map((card, index) => (
                <div key={card.id} className="w-12 h-16 bg-gray-200 dark:bg-gray-700 rounded border-2 border-white dark:border-gray-800 overflow-hidden">
                  {card.image_url ? (
                    <img 
                      src={card.image_url} 
                      alt={card.name}
                      className="w-full h-full object-cover"
                    />
                  ) : (
                    <div className="w-full h-full flex items-center justify-center text-gray-400 text-xs">
                      No Image
                    </div>
                  )}
                </div>
              ))}
              {cards.length > 3 && (
                <div className="w-12 h-16 bg-gray-300 dark:bg-gray-600 rounded border-2 border-white dark:border-gray-800 flex items-center justify-center">
                  <span className="text-sm font-bold text-gray-600 dark:text-gray-300">
                    +{cards.length - 3}
                  </span>
                </div>
              )}
            </div>
            <div>
              <p className="text-lg font-semibold text-gray-900 dark:text-white">
                {cards.length} card{cards.length !== 1 ? 's' : ''} selected
              </p>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                Choose lists to add {cards.length === 1 ? 'this card' : 'these cards'} to
              </p>
            </div>
          </div>

          {/* Search */}
          <div className="relative">
            <input
              type="text"
              placeholder="Search lists..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full px-4 py-2 pl-10 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
            />
            <svg className="w-5 h-5 text-gray-400 absolute left-3 top-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>
        </div>

        {/* Collections List */}
        <div className="flex-1 overflow-y-auto max-h-96">
          {loading ? (
            <div className="p-8 text-center">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-2"></div>
              <p className="text-gray-600 dark:text-gray-400">Loading lists...</p>
            </div>
          ) : filteredCollections.length === 0 ? (
            <div className="p-8 text-center">
              <svg className="w-12 h-12 text-gray-400 mx-auto mb-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>
              <p className="text-gray-600 dark:text-gray-400 mb-2">
                {searchQuery ? 'No lists match your search' : 'No lists found'}
              </p>
              <p className="text-sm text-gray-500 dark:text-gray-500">
                {searchQuery ? 'Try a different search term' : 'Create your first list to get started'}
              </p>
            </div>
          ) : (
            <div className="p-4">
              {/* Select All */}
              {filteredCollections.length > 1 && (
                <div className="flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-700 mb-2">
                  <label className="flex items-center space-x-3 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={allFilteredSelected}
                      onChange={handleSelectAll}
                      className="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:ring-2"
                    />
                    <span className="font-medium text-gray-900 dark:text-white">
                      Select All ({filteredCollections.length})
                    </span>
                  </label>
                </div>
              )}

              {/* Collection Items */}
              <div className="space-y-2">
                {filteredCollections.map((collection) => (
                  <div
                    key={collection.id}
                    className={`p-4 rounded-lg border-2 transition-all duration-200 cursor-pointer ${
                      selectedCollections.includes(collection.id)
                        ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
                        : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
                    }`}
                    onClick={() => handleCollectionToggle(collection.id)}
                  >
                    <div className="flex items-center space-x-3">
                      <input
                        type="checkbox"
                        checked={selectedCollections.includes(collection.id)}
                        onChange={() => handleCollectionToggle(collection.id)}
                        className="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:ring-2"
                      />
                      
                      {/* Collection Image */}
                      <div className="w-12 h-12 bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden flex-shrink-0">
                        {collection.image ? (
                          <img 
                            src={collection.image} 
                            alt={collection.name}
                            className="w-full h-full object-cover"
                          />
                        ) : (
                          <div className="w-full h-full flex items-center justify-center text-gray-400">
                            <svg className="w-6 h-6" 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>
                          </div>
                        )}
                      </div>

                      {/* Collection Info */}
                      <div className="flex-1 min-w-0">
                        <h3 className="font-semibold text-gray-900 dark:text-white truncate">
                          {collection.name}
                        </h3>
                        {collection.description && (
                          <p className="text-sm text-gray-600 dark:text-gray-400 truncate">
                            {collection.description}
                          </p>
                        )}
                        <div className="flex items-center space-x-4 mt-1">
                          <span className="text-xs text-gray-500 dark:text-gray-500">
                            {collection.card_count || 0} cards
                          </span>
                          {collection.is_public && (
                            <span className="text-xs px-2 py-1 bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 rounded-full">
                              Public
                            </span>
                          )}
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="p-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
          <div className="flex items-center justify-between">
            <div className="text-sm text-gray-600 dark:text-gray-400">
              {selectedCollections.length > 0 && (
                <span>
                  {selectedCollections.length} list{selectedCollections.length !== 1 ? 's' : ''} selected
                </span>
              )}
            </div>
            
            <div className="flex space-x-3">
              <button
                onClick={onClose}
                className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
              >
                Cancel
              </button>
              <button
                onClick={handleSubmit}
                disabled={selectedCollections.length === 0 || submitting}
                className={`px-6 py-2 rounded-lg font-medium transition-colors ${
                  selectedCollections.length === 0 || submitting
                    ? 'bg-gray-300 dark:bg-gray-700 text-gray-500 dark:text-gray-500 cursor-not-allowed'
                    : 'bg-blue-600 hover:bg-blue-700 text-white'
                }`}
              >
                {submitting ? (
                  <div className="flex items-center space-x-2">
                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                    <span>Adding...</span>
                  </div>
                ) : (
                  `Add to ${selectedCollections.length} List${selectedCollections.length !== 1 ? 's' : ''}`
                )}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}