import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import UploadImageModal from '../../components/UploadImageModal';
import ShareModal from '../../components/ShareModal';
import CollaboratorFacepile from '../../components/CollaboratorFacepile';
import CardItem from '../../components/CardItem';
import Layout from '../../components/Layout';
import LoginCTA from '../../components/LoginCTA';
import { ManaCost, ColorFilterSymbol } from '../../components/ManaSymbols';
import ManaSymbolSettings from '../../components/ManaSymbolSettings';
import { useAuth } from '../../lib/use-auth';
import { VOCAB, collectionDisplayName } from '../../lib/collection-vocabulary.js';

export default function CollectionView() {
  const router = useRouter();
  const { identifier } = router.query;
  const { user, loading: authLoading } = useAuth();

  const [collection, setCollection] = useState(null);
  const [cards, setCards] = useState([]);
  const [loading, setLoading] = useState(true);
  const [isFavorited, setIsFavorited] = useState(false);
  const [showShareModal, setShowShareModal] = useState(false);
  const [showEditModal, setShowEditModal] = useState(false);
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [copySuccess, setCopySuccess] = useState(false);
  const [selectedTCG, setSelectedTCG] = useState('MTG');

  // Edit form state
  const [editForm, setEditForm] = useState({
    name: '',
    description: '',
    isPublic: false,
    image: '',
    tags: []
  });

  // Filter states
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedRarity, setSelectedRarity] = useState('All Rarities');
  const [selectedType, setSelectedType] = useState('All Types');
  const [groupBy, setGroupBy] = useState('Group by Game');
  const [sortBy, setSortBy] = useState('Sort by Name');
  const [viewMode, setViewMode] = useState('grid');
  const [searchCards, setSearchCards] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  const [showSearchResults, setShowSearchResults] = useState(false);
  const [showUploadModal, setShowUploadModal] = useState(false);

  // Card interaction states
  const [selectedCards, setSelectedCards] = useState([]);
  const [favoritedCards, setFavoritedCards] = useState(new Set());

  useEffect(() => {
    if (identifier) {
      fetchCollectionData();
      if (user) {
        loadFavoritedCards();
      }
    }
  }, [identifier, user]);

  const fetchCollectionData = async () => {
    try {
      // First try to fetch without authentication (for public collections)
      let response = await fetch(`/api/collections/${identifier}`);
      
      // If that fails and we have a user, try with authentication
      if (!response.ok && user) {
        response = await fetch(`/api/collections/${identifier}`, {
          headers: {
            'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
          }
        });
      }
      
      if (response.ok) {
        const data = await response.json();
        
        // Check if we accessed via numeric ID and need to redirect to slug
        if (data.slug && identifier !== data.slug && !isNaN(parseInt(identifier))) {
          // Redirect to slug URL
          router.replace(`/collection/${data.slug}`, undefined, { shallow: false });
          return;
        }
        
        setCollection(data);
        setEditForm({
          name: data.name || '',
          description: data.description || '',
          isPublic: data.isPublic || false,
          image: data.image || '',
          tags: Array.isArray(data.tags) ? data.tags : (data.tags ? data.tags.split(',') : [])
        });
        
        // Fetch collection cards (try public first, then authenticated)
        let cardsResponse = await fetch(`/api/collections/${identifier}/cards`);
        
        if (!cardsResponse.ok && user) {
          cardsResponse = await fetch(`/api/collections/${identifier}/cards`, {
            headers: {
              'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
            }
          });
        }
        
        if (cardsResponse.ok) {
          const cardsData = await cardsResponse.json();
          setCards(cardsData.cards || []);
        }
        
        // Check if collection is favorited
        checkIfFavorited();
      } else if (response.status === 401 || response.status === 403) {
        // Collection is private and user is not authenticated/authorized
        if (!user) {
          router.push('/login');
        } else {
          // User is authenticated but doesn't have access
          router.push('/collections');
        }
      }
    } catch (error) {
      console.error('Error fetching collection:', error);
    } finally {
      setLoading(false);
    }
  };

  const checkIfFavorited = async () => {
    try {
      const response = await fetch(`/api/favorites?type=collection`, {
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
        }
      });
      if (response.ok) {
        const data = await response.json();
        const isFav = data.favorites.some(fav => fav.item_id === collection?.id);
        setIsFavorited(isFav);
      } else {
        console.error('Failed to check favorites:', response.status);
      }
    } catch (error) {
      console.error('Error checking favorites:', error);
    }
  };

  const handleEditCollection = async () => {
    try {
      const response = await fetch(`/api/collections/${identifier}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
        },
        body: JSON.stringify({
          name: editForm.name,
          description: editForm.description,
          isPublic: editForm.isPublic,
          image: editForm.image,
          tags: editForm.tags
        })
      });

      if (response.ok) {
        const updatedCollection = await response.json();
        
        // If the name changed and we got a new slug, redirect
        if (updatedCollection.slug && updatedCollection.slug !== identifier) {
          router.push(`/collection/${updatedCollection.slug}`);
        } else {
          // Just refresh the data
          fetchCollectionData();
        }
        
        setShowEditModal(false);
      } else {
        const error = await response.json();
        alert(error.error || 'Failed to update list');
      }
    } catch (error) {
      console.error('Error updating collection:', error);
      alert('Network error. Please try again.');
    }
  };

  const handleDeleteCollection = async () => {
    try {
      const response = await fetch(`/api/collections/${identifier}`, {
        method: 'DELETE',
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
        }
      });

      if (response.ok) {
        router.push('/collections');
      } else {
        const error = await response.json();
        alert(error.error || 'Failed to delete list');
      }
    } catch (error) {
      console.error('Error deleting collection:', error);
      alert('Network error. Please try again.');
    }
  };

  const handleSearchCards = async (query) => {
    if (query.length < 2) {
      setSearchResults([]);
      setShowSearchResults(false);
      return;
    }

    try {
      const response = await fetch(`/api/cards/search?q=${encodeURIComponent(query)}&limit=10`);
      if (response.ok) {
        const data = await response.json();
        setSearchResults(data.cards || []);
        setShowSearchResults(true);
      }
    } catch (error) {
      console.error('Error searching cards:', error);
    }
  };

  const handleAddCard = async (card) => {
    try {
      const response = await fetch(`/api/collections/${identifier}/cards`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
        },
        body: JSON.stringify({
          cardId: card.id,
          quantity: 1
        })
      });

      if (response.ok) {
        setSearchCards('');
        setShowSearchResults(false);
        fetchCollectionData(); // Refresh the collection data
      }
    } catch (error) {
      console.error('Error adding card:', error);
    }
  };

  const toggleFavorite = async () => {
    try {
      if (isFavorited) {
        // Remove from favorites
        const response = await fetch('/api/favorites', {
          method: 'DELETE',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
          },
          body: JSON.stringify({
            itemType: 'collection',
            itemId: collection.id
          })
        });

        if (response.ok) {
          setIsFavorited(false);
        } else {
          console.error('Failed to remove favorite:', response.status);
        }
      } else {
        // Add to favorites
        const response = await fetch('/api/favorites', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
          },
          body: JSON.stringify({
            itemType: 'collection',
            itemId: collection.id
          })
        });

        if (response.ok) {
          setIsFavorited(true);
        } else {
          console.error('Failed to add favorite:', response.status);
        }
      }
    } catch (error) {
      console.error('Error toggling favorite:', error);
    }
  };

  const togglePublic = async () => {
    try {
      const response = await fetch(`/api/collections/${identifier}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
        },
        body: JSON.stringify({
          isPublic: !collection.isPublic
        })
      });

      if (response.ok) {
        setCollection(prev => ({
          ...prev,
          isPublic: !prev.isPublic
        }));
      }
    } catch (error) {
      console.error('Error updating collection:', error);
    }
  };

  const handleImageUpload = async (imageUrl) => {
    try {
      const response = await fetch(`/api/collections/${identifier}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
        },
        body: JSON.stringify({
          image: imageUrl
        })
      });

      if (response.ok) {
        setCollection(prev => ({
          ...prev,
          image: imageUrl
        }));
      }
    } catch (error) {
      console.error('Error updating collection image:', error);
    }
  };

  // Card interaction handlers
  const handleToggleSelect = (card) => {
    setSelectedCards(prev => {
      const isSelected = prev.some(c => c.id === card.id);
      if (isSelected) {
        return prev.filter(c => c.id !== card.id);
      } else {
        return [...prev, card];
      }
    });
  };

  const handleToggleFavorite = async (card) => {
    try {
      const isFavorited = favoritedCards.has(card.id);
      const method = isFavorited ? 'DELETE' : 'POST';
      
      const response = await fetch('/api/favorites', {
        method,
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
        },
        body: JSON.stringify({
          itemType: 'card',
          itemId: card.id
        })
      });

      if (response.ok) {
        setFavoritedCards(prev => {
          const newSet = new Set(prev);
          if (isFavorited) {
            newSet.delete(card.id);
          } else {
            newSet.add(card.id);
          }
          return newSet;
        });
      }
    } catch (error) {
      console.error('Error toggling favorite:', error);
    }
  };

  const handleAddToCollection = (card) => {
    // This would open a collection selection modal
    console.log('Add to collection:', card);
  };

  const handleAddToDeck = (card) => {
    // This would open a deck selection modal
    console.log('Add to deck:', card);
  };

  // Load user's favorited cards
  const loadFavoritedCards = async () => {
    try {
      const token = localStorage.getItem('auth_token');
      if (!token) return;

      const response = await fetch('/api/favorites?type=card', {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      });

      if (response.ok) {
        const data = await response.json();
        const favoriteIds = new Set(data.favorites.map(fav => parseInt(fav.item_id)));
        setFavoritedCards(favoriteIds);
      }
    } catch (error) {
      console.error('Error loading favorited cards:', error);
    }
  };

  const handleDownloadCSV = () => {
    if (cards.length === 0) {
      alert('No cards to download');
      return;
    }

    // Create CSV headers
    const headers = [
      'Name',
      'Set Name',
      'Set Code',
      'Card Number',
      'Rarity',
      'Game',
      'Mana Cost',
      'CMC',
      'Type',
      'Colors',
      'Oracle Text',
      'Power',
      'Toughness',
      'Market Price',
      'Quantity',
      'Added Date'
    ];

    // Create CSV rows
    const csvRows = [
      headers.join(','), // Header row
      ...cards.map(card => [
        `"${(card.name || '').replace(/"/g, '""')}"`,
        `"${(card.set_name || '').replace(/"/g, '""')}"`,
        `"${card.set_code || ''}"`,
        `"${card.card_number || ''}"`,
        `"${card.rarity || ''}"`,
        `"${card.game || ''}"`,
        `"${card.mana_cost || ''}"`,
        `"${card.cmc || ''}"`,
        `"${card.card_type || ''}"`,
        `"${Array.isArray(card.colors) ? card.colors.join(', ') : (card.colors || '')}"`,
        `"${(card.oracle_text || '').replace(/"/g, '""')}"`,
        `"${card.power || ''}"`,
        `"${card.toughness || ''}"`,
        `"${card.market_price || ''}"`,
        `"${card.quantity || 1}"`,
        `"${card.created_at ? new Date(card.created_at).toLocaleDateString() : ''}"`
      ].join(','))
    ];

    // Create and download the CSV file
    const csvContent = csvRows.join('\n');
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    
    if (link.download !== undefined) {
      const url = URL.createObjectURL(blob);
      link.setAttribute('href', url);
      link.setAttribute('download', `${collection.name || 'collection'}_cards.csv`);
      link.style.visibility = 'hidden';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  };

  // Group cards by game
  const groupedCards = cards.reduce((acc, card) => {
    const game = card.game || 'Other';
    if (!acc[game]) acc[game] = [];
    acc[game].push(card);
    return acc;
  }, {});

  // Get game display names and counts
  const gameStats = {};
  Object.keys(groupedCards).forEach(game => {
    if (game && game !== 'Other') {
      gameStats[game] = groupedCards[game].length;
    }
  });

  // Show loading spinner while auth is loading or data is loading
  if (authLoading || loading) {
    return (
      <Layout user={user}>
        <div className="flex items-center justify-center min-h-screen">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2" style={{ borderColor: 'var(--accent-ember)' }}></div>
        </div>
      </Layout>
    );
  }

  if (!collection) {
    return (
      <Layout user={user}>
        <div className="flex items-center justify-center min-h-screen">
          <div className="text-center">
            <h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
              List not found
            </h2>
            <Link href="/collections">
              <button className="px-4 py-2 rounded-lg text-white" style={{ backgroundColor: 'var(--accent-ember)' }}>
                Back to Lists
              </button>
            </Link>
          </div>
        </div>
      </Layout>
    );
  }

  return (
    <Layout user={user}>
      <div className="min-h-screen" style={{ backgroundColor: 'var(--bg-primary)' }}>
        {/* Header */}
        <div className="p-6 border-b" style={{ backgroundColor: 'var(--bg-secondary)', borderColor: 'var(--border)' }}>
          <div className="flex items-center justify-between mb-6">
            {/* Back button */}
            <div className="flex items-center">
              <Link href="/collections">
                <button className="flex items-center text-sm font-medium hover:underline" style={{ color: 'var(--text-secondary)' }}>
                  <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                  </svg>
                  Back to collections
                </button>
              </Link>
            </div>

            {/* Action buttons */}
            <div className="flex items-center space-x-3">
              {/* Edit and Delete buttons - only show for owner and non-system collections */}
              {collection.userRole === 'owner' && !collection.isSystemCollection && (
                <>
                  <button 
                    onClick={() => setShowEditModal(true)}
                    className="px-4 py-2 text-sm font-medium border rounded-lg hover:bg-gray-50 flex items-center space-x-2" 
                    style={{ borderColor: 'var(--border)', color: 'var(--text-primary)' }}
                  >
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                    </svg>
                    <span>Edit</span>
                  </button>
                  <button 
                    onClick={() => setShowDeleteModal(true)}
                    className="px-4 py-2 text-sm font-medium border rounded-lg hover:bg-red-50 hover:border-red-200 hover:text-red-600 flex items-center space-x-2" 
                    style={{ borderColor: 'var(--border)', color: 'var(--text-primary)' }}
                  >
                    <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</span>
                  </button>
                </>
              )}
              
              <button 
                onClick={() => setShowUploadModal(true)}
                className="px-4 py-2 text-sm font-medium border rounded-lg hover:bg-gray-50" 
                style={{ borderColor: 'var(--border)', color: 'var(--text-primary)' }}
              >
                Upload Image
              </button>
              <button className="px-4 py-2 text-sm font-medium border rounded-lg hover:bg-gray-50" style={{ borderColor: 'var(--border)', color: 'var(--text-primary)' }}>
                🪄 Generate AI Image
              </button>
            </div>
          </div>

          {/* Collection Info */}
          <div className="mb-6">
            <div className="flex items-center space-x-3 mb-2">
              <h1 className="text-3xl font-bold" style={{ color: 'var(--text-primary)' }}>
                {collectionDisplayName(collection)}
              </h1>
              {/* System collection indicator */}
              {collection.isSystemCollection && (
                <div className="flex items-center space-x-1">
                  <span className="px-2.5 py-1 text-xs font-bold rounded-full bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-sm border-2 border-blue-200">
                    🔒 SYSTEM
                  </span>
                  <div className="group relative">
                    <svg className="h-4 w-4 text-blue-500 cursor-help" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs bg-gray-900 text-white rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-opacity z-10 whitespace-nowrap">
                      {VOCAB.SYSTEM_COLLECTION_SYNC_HINT}
                      <div className="absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div>
                    </div>
                  </div>
                </div>
              )}
            </div>
            <p className="text-lg mb-4" style={{ color: 'var(--text-secondary)' }}>
              {collection.description}
            </p>
            
            {/* TCG Tags */}
            <div className="flex items-center space-x-2 mb-4">
              {Object.entries(gameStats).map(([game, count]) => 
                count > 0 ? (
                  <span
                    key={game}
                    className="px-3 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800"
                  >
                    {game}
                  </span>
                ) : null
              )}
            </div>
            
            {/* Creator and Stats */}
            <div className="flex items-center space-x-6 text-sm" style={{ color: 'var(--text-secondary)' }}>
              {collection.creator ? (
                <CollaboratorFacepile 
                  collectionId={identifier} 
                  creatorEmail={collection.creator} 
                />
              ) : (
                <span className="text-sm" style={{ color: 'var(--text-secondary)' }}>
                  Crafted by Unknown User
                </span>
              )}
              <div>Cards: <span className="font-medium">{cards.length}</span></div>
              <div>Cost: <span className="font-medium">${collection.value || '0'}</span></div>
            </div>
            
            <div className="flex items-center space-x-4 mt-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
              <span>Created {new Date(collection.createdAt).toLocaleDateString()}</span>
              <span>Last updated {new Date(collection.lastViewed).toLocaleDateString()}</span>
            </div>
          </div>

          {/* Action Bar */}
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <button
                onClick={() => setShowShareModal(true)}
                className="flex items-center space-x-2 px-3 py-2 text-sm font-medium border rounded-lg hover:bg-gray-50"
                style={{ borderColor: 'var(--border)', color: 'var(--text-primary)' }}
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
                </svg>
                <span>Share</span>
              </button>
              
              <button
                onClick={toggleFavorite}
                className={`flex items-center space-x-2 px-3 py-2 text-sm font-medium border rounded-lg ${
                  isFavorited ? 'bg-red-50 border-red-200 text-red-600' : 'hover:bg-gray-50'
                }`}
                style={!isFavorited ? { borderColor: 'var(--border)', color: 'var(--text-primary)' } : {}}
              >
                <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>
                <span>Favorite</span>
              </button>
              
              <button 
                onClick={handleDownloadCSV}
                className="flex items-center space-x-2 px-3 py-2 text-sm font-medium border rounded-lg hover:bg-gray-50" 
                style={{ borderColor: 'var(--border)', color: 'var(--text-primary)' }}
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
                <span>Download List</span>
              </button>
            </div>

            <div className="flex items-center space-x-1 text-sm" style={{ color: 'var(--text-secondary)' }}>
              <span>Activity</span>
              <span className="px-2 py-1 bg-purple-100 text-purple-800 rounded-full text-xs font-medium">123</span>
            </div>
          </div>
        </div>

        {/* Content */}
        <div className="p-6">
          {/* Search and Filters */}
          <div className="flex items-center justify-between mb-6">
            <div className="flex items-center space-x-4">
              <div className="relative">
                <input
                  type="text"
                  placeholder="Search cards..."
                  value={searchCards}
                  onChange={(e) => {
                    setSearchCards(e.target.value);
                    handleSearchCards(e.target.value);
                  }}
                  className="w-64 px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                  style={{ borderColor: 'var(--border)', backgroundColor: 'var(--bg-secondary)' }}
                />
                <svg className="absolute right-3 top-2.5 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" style={{ color: 'var(--text-secondary)' }}>
                  <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>
              
              <select
                value={selectedRarity}
                onChange={(e) => setSelectedRarity(e.target.value)}
                className="px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500"
                style={{ borderColor: 'var(--border)', backgroundColor: 'var(--bg-secondary)' }}
              >
                <option>All Rarities</option>
                <option>Common</option>
                <option>Uncommon</option>
                <option>Rare</option>
                <option>Mythic</option>
                <option>Legendary</option>
              </select>
              
              <select
                value={selectedType}
                onChange={(e) => setSelectedType(e.target.value)}
                className="px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500"
                style={{ borderColor: 'var(--border)', backgroundColor: 'var(--bg-secondary)' }}
              >
                <option>All Types</option>
                <option>Creature</option>
                <option>Instant</option>
                <option>Sorcery</option>
                <option>Artifact</option>
                <option>Enchantment</option>
              </select>
              
              <select
                value={groupBy}
                onChange={(e) => setGroupBy(e.target.value)}
                className="px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500"
                style={{ borderColor: 'var(--border)', backgroundColor: 'var(--bg-secondary)' }}
              >
                <option>Group by Game</option>
                <option>Group by Rarity</option>
                <option>Group by Type</option>
              </select>
              
              <select
                value={sortBy}
                onChange={(e) => setSortBy(e.target.value)}
                className="px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500"
                style={{ borderColor: 'var(--border)', backgroundColor: 'var(--bg-secondary)' }}
              >
                <option>Sort by Name</option>
                <option>Sort by Price</option>
                <option>Sort by Rarity</option>
                <option>Sort by Date Added</option>
              </select>
            </div>

            <div className="flex items-center space-x-3">
              <div className="flex rounded-lg border" style={{ borderColor: 'var(--border)' }}>
                <button
                  onClick={() => setViewMode('grid')}
                  className={`p-2 rounded-l-lg ${viewMode === 'grid' ? 'bg-white text-gray-900 shadow-sm' : 'bg-transparent hover:bg-gray-50'}`}
                  style={viewMode !== 'grid' ? { color: 'var(--text-secondary)' } : {}}
                >
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
                  </svg>
                </button>
                <button
                  onClick={() => setViewMode('list')}
                  className={`p-2 rounded-r-lg ${viewMode === 'list' ? 'bg-white text-gray-900 shadow-sm' : 'bg-transparent hover:bg-gray-50'}`}
                  style={viewMode !== 'list' ? { color: 'var(--text-secondary)' } : {}}
                >
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
                  </svg>
                </button>
              </div>
              
              <button 
                onClick={() => router.push('/cards')}
                className="px-4 py-2 text-white rounded-lg flex items-center space-x-2"
                style={{ backgroundColor: 'var(--accent-ember)' }}
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                </svg>
                <span>Add Cards</span>
              </button>
              
              <button className="px-4 py-2 border rounded-lg hover:bg-gray-50 flex items-center space-x-2" style={{ borderColor: 'var(--border)', color: 'var(--text-primary)' }}>
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
                <span>Scan Cards</span>
              </button>
            </div>
          </div>

          {/* Game Sections */}
          {Object.entries(groupedCards).map(([game, gameCards]) => (
            <div key={game} className="mb-8">
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-xl font-bold flex items-center space-x-3" style={{ color: 'var(--text-primary)' }}>
                  <span>{game === 'MTG' ? 'Magic The Gathering' : game}</span>
                  <span className="px-2 py-1 bg-gray-100 text-gray-600 rounded text-sm font-medium">
                    {gameCards.length}
                  </span>
                </h2>
              </div>
              
              <div className="card-grid-container grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-3 sm:gap-4 lg:gap-6">
                {gameCards.map((card, index) => (
                  <CardItem
                    key={card.id || index}
                    card={card}
                    viewMode={viewMode}
                    isSelected={selectedCards.some(c => c.id === card.id)}
                    onToggleSelect={handleToggleSelect}
                    onAddToCollection={handleAddToCollection}
                    onAddToDeck={handleAddToDeck}
                    onToggleFavorite={handleToggleFavorite}
                    isFavorited={favoritedCards.has(card.id)}
                  />
                ))}
              </div>
            </div>
          ))}

          {cards.length === 0 && (
            <div className="text-center py-12">
              <div className="text-6xl mb-4">🃏</div>
              <h3 className="text-xl font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>
                Start Building Your List
              </h3>
              <p className="mb-6" style={{ color: 'var(--text-secondary)' }}>
                Add cards to get started with your collection
              </p>
              <button className="px-6 py-3 text-white rounded-lg" style={{ backgroundColor: 'var(--accent-ember)' }}>
                Browse Cards to Add
              </button>
            </div>
          )}
        </div>

        {/* Search Results Dropdown */}
        {showSearchResults && searchResults.length > 0 && (
          <div className="absolute top-full left-0 right-0 bg-white border border-gray-200 rounded-lg shadow-lg max-h-64 overflow-y-auto z-50">
            {searchResults.map(card => (
              <div
                key={card.id}
                onClick={() => handleAddCard(card)}
                className="flex items-center p-3 hover:bg-gray-50 cursor-pointer"
              >
                <img
                  src={card.image_url}
                  alt={card.name}
                  className="w-12 h-16 object-cover rounded mr-3"
                  onError={(e) => {
                    e.target.src = 'https://via.placeholder.com/48x64/6366f1/ffffff?text=No+Image';
                  }}
                />
                <div>
                  <div className="font-medium">{card.name}</div>
                  <div className="text-sm text-gray-500">{card.set_name} • ${card.market_price}</div>
                </div>
              </div>
            ))}
          </div>
        )}

        {/* Edit Collection Modal */}
        {showEditModal && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div className="card max-w-md w-full mx-4">
              <h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
                Edit List
              </h2>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                    List Name
                  </label>
                  <input
                    type="text"
                    className="input-field w-full"
                    value={editForm.name}
                    onChange={(e) => setEditForm({...editForm, name: e.target.value})}
                    placeholder="Enter list name"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                    Description
                  </label>
                  <textarea
                    className="input-field w-full"
                    rows="3"
                    value={editForm.description}
                    onChange={(e) => setEditForm({...editForm, description: e.target.value})}
                    placeholder="Describe your list"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                    Hero Image (Optional)
                  </label>
                  <input
                    type="url"
                    className="input-field w-full"
                    value={editForm.image}
                    onChange={(e) => setEditForm({...editForm, image: e.target.value})}
                    placeholder="Enter image URL"
                  />
                </div>
                <div className="flex items-center justify-between p-4 rounded-lg border" style={{ borderColor: 'var(--border)' }}>
                  <div>
                    <label className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
                      Public List
                    </label>
                    <p className="text-xs mt-1" style={{ color: 'var(--text-secondary)' }}>
                      Make this collection discoverable by other users
                    </p>
                  </div>
                  <button
                    type="button"
                    onClick={() => setEditForm({...editForm, isPublic: !editForm.isPublic})}
                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                      editForm.isPublic ? 'bg-green-600' : 'bg-gray-300 dark:bg-gray-600'
                    }`}
                  >
                    <span
                      className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                        editForm.isPublic ? 'translate-x-6' : 'translate-x-1'
                      }`}
                    />
                  </button>
                </div>
              </div>
              <div className="flex space-x-3 mt-6">
                <button
                  onClick={() => setShowEditModal(false)}
                  className="flex-1 py-2 px-4 rounded-xl border transition-colors"
                  style={{ 
                    borderColor: 'var(--border)', 
                    color: 'var(--text-secondary)' 
                  }}
                >
                  Cancel
                </button>
                <button
                  onClick={handleEditCollection}
                  disabled={!editForm.name.trim()}
                  className="flex-1 py-2 px-4 rounded-xl font-medium transition-all duration-200 hover:shadow-md disabled:opacity-50"
                  style={{ 
                    backgroundColor: 'var(--accent-ember)',
                    color: 'white'
                  }}
                >
                  Save Changes
                </button>
              </div>
            </div>
          </div>
        )}

        {/* Delete Confirmation Modal */}
        {showDeleteModal && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div className="card max-w-md w-full mx-4">
              <h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
                Delete List
              </h2>
              <p className="mb-6" style={{ color: 'var(--text-secondary)' }}>
                Are you sure you want to delete "{collectionDisplayName(collection)}"? This action cannot be undone and will permanently remove all cards and data associated with this list.
              </p>
              <div className="flex space-x-3">
                <button
                  onClick={() => setShowDeleteModal(false)}
                  className="flex-1 py-2 px-4 rounded-xl border transition-colors"
                  style={{ 
                    borderColor: 'var(--border)', 
                    color: 'var(--text-secondary)' 
                  }}
                >
                  Cancel
                </button>
                <button
                  onClick={handleDeleteCollection}
                  className="flex-1 py-2 px-4 rounded-xl font-medium transition-all duration-200 hover:shadow-md bg-red-600 text-white hover:bg-red-700"
                >
                  Delete List
                </button>
              </div>
            </div>
          </div>
        )}

        {/* Upload Image Modal */}
        <UploadImageModal
          isOpen={showUploadModal}
          onClose={() => setShowUploadModal(false)}
          onUpload={handleImageUpload}
          currentImage={collection.image}
        />

        {/* Share Modal */}
        <ShareModal
          isOpen={showShareModal}
          onClose={() => setShowShareModal(false)}
          collectionId={identifier}
          isPublic={collection.isPublic}
          onTogglePublic={togglePublic}
          onInviteUser={(email) => console.log('Invited:', email)}
        />
      </div>

      {/* Show login CTA for non-authenticated users */}
      {!user && collection?.isPublic && (
        <LoginCTA message="Sign up to create your own lists and collaborate with others!" />
      )}
    </Layout>
  );
}