import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import CollaborationManager from '../../components/CollaborationManager';
import Layout from '../../components/Layout';

export default function CollectionView() {
  const router = useRouter();
  const { id } = router.query;
  
  // Get user from auth context - for now using admin user
  const user = {
    email: 'admin@tcgvault.com',
    role: 'admin'
  };

  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 [copySuccess, setCopySuccess] = useState(false);
  const [selectedTCG, setSelectedTCG] = useState('MTG');

  // 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);

  useEffect(() => {
    if (id) {
      fetchCollectionData();
    }
  }, [id]);

  const fetchCollectionData = async () => {
    try {
      const response = await fetch(`/api/collections/${id}`);
      if (response.ok) {
        const data = await response.json();
        setCollection(data.collection);
        setCards(data.cards || []);
      } else {
        console.error('Failed to fetch collection');
        setCollection(null);
        setCards([]);
      }
    } catch (error) {
      console.error('Error fetching collection:', error);
      setCollection(null);
      setCards([]);
    } finally {
      setLoading(false);
    }
  };

  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/${id}/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 handleShare = () => {
    const url = window.location.href;
    navigator.clipboard.writeText(url).then(() => {
      setCopySuccess(true);
      setTimeout(() => setCopySuccess(false), 2000);
    });
  };

  const toggleFavorite = () => {
    setIsFavorited(!isFavorited);
  };

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

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

  // 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 = {
    'MTG': groupedCards['MTG']?.length || 0,
    'Lorcana': groupedCards['Lorcana']?.length || 0,
    'Pokemon': groupedCards['Pokemon']?.length || 0
  };

  if (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 border-purple-600"></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)' }}>
              Collection not found
            </h2>
            <Link href="/collections">
              <button className="px-4 py-2 rounded-lg gradient-bg-purple text-white">
                Back to Collections
              </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 and TCG tabs */}
            <div className="flex items-center space-x-6">
              <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>
              
              {/* TCG Tabs */}
              <div className="flex space-x-1">
                {['MTG', 'Lorcana', 'Pokemon'].map((tcg) => (
                  <button
                    key={tcg}
                    onClick={() => setSelectedTCG(tcg)}
                    className={`px-3 py-1 text-xs font-medium rounded ${
                      selectedTCG === tcg 
                        ? 'bg-blue-100 text-blue-800' 
                        : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                    }`}
                  >
                    {tcg}
                  </button>
                ))}
              </div>
            </div>

            {/* Action buttons */}
            <div className="flex items-center space-x-3">
              <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)' }}>
                Upload Image
              </button>
              <button className="px-4 py-2 text-sm font-medium bg-purple-600 text-white rounded-lg hover:bg-purple-700">
                🪄 Generate AI Image
              </button>
            </div>
          </div>

          {/* Collection Info */}
          <div className="mb-6">
            <h1 className="text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
              {collection.name}
            </h1>
            <p className="text-lg mb-4" style={{ color: 'var(--text-secondary)' }}>
              {collection.description}
            </p>
            
            {/* Creator and Stats */}
            <div className="flex items-center space-x-6 text-sm" style={{ color: 'var(--text-secondary)' }}>
              <div className="flex items-center space-x-2">
                <span>Crafted by</span>
                <div className="flex items-center space-x-1">
                  <div className="w-6 h-6 bg-purple-600 rounded-full flex items-center justify-center">
                    <span className="text-white text-xs font-bold">
                      {collection.creator_email?.charAt(0).toUpperCase()}
                    </span>
                  </div>
                  <span className="font-medium">{collection.creator_email}</span>
                </div>
              </div>
              <div>Cards: <span className="font-medium">{cards.length}</span></div>
              <div>Cost: <span className="font-medium">${collection.totalValue || '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.created_at).toLocaleDateString()}</span>
              <span>Last updated {new Date(collection.updated_at).toLocaleDateString()}</span>
            </div>
          </div>

          {/* Action Bar */}
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <button
                onClick={handleShare}
                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 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-4">
              <button className="px-4 py-2 text-sm font-medium bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                📧 Invite Collaborator
              </button>
              
              <div className="flex items-center space-x-2">
                <span className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>Public</span>
                <button
                  onClick={togglePublic}
                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                    collection.is_public ? 'bg-blue-600' : 'bg-gray-200'
                  }`}
                >
                  <span
                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                      collection.is_public ? 'translate-x-6' : 'translate-x-1'
                    }`}
                  />
                </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>
        </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-purple-600 text-white' : 'bg-transparent'}`}
                  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-purple-600 text-white' : 'bg-transparent'}`}
                  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 className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 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="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="grid grid-cols-7 gap-4">
                {gameCards.map((card, index) => (
                  <div key={card.id || index} className="aspect-[2.5/3.5] bg-gray-200 rounded-lg flex items-center justify-center text-gray-500 text-sm font-medium hover:bg-gray-300 transition-colors cursor-pointer">
                    {card.image_url ? (
                      <img
                        src={card.image_url}
                        alt={card.name}
                        className="w-full h-full object-cover rounded-lg"
                      />
                    ) : (
                      'Card'
                    )}
                  </div>
                ))}
                
                {/* Add empty card slots to fill the row */}
                {Array.from({ length: Math.max(0, 7 - (gameCards.length % 7)) }, (_, index) => (
                  <div key={`empty-${index}`} className="aspect-[2.5/3.5] bg-gray-200 rounded-lg flex items-center justify-center text-gray-500 text-sm font-medium hover:bg-gray-300 transition-colors cursor-pointer">
                    Card
                  </div>
                ))}
              </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 Collection
              </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 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
                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>
        )}

        {/* Collaboration Manager */}
        <div className="p-6 border-t" style={{ borderColor: 'var(--border)' }}>
          <CollaborationManager
            collectionId={id}
            userRole={collection.userRole}
            isPublic={collection.is_public}
          />
        </div>
      </div>
    </Layout>
  );
}