/* eslint-disable @next/next/no-img-element -- External card image URLs; next/image migration is out of scope. */
import { ManaCost, ColorFilterSymbol } from './ManaSymbols';
import ManaSymbolSettings from './ManaSymbolSettings';

export default function DeckBuilderCardBrowser({
  selectedCard,
  onSelectCard,
  onClearSelectedCard,
  viewMode,
  onViewModeChange,
  showSettings,
  onToggleSettings,
  onCollapseSidebar,
  searchQuery,
  onSearchQueryChange,
  showFilters,
  onToggleFilters,
  filters,
  onFiltersChange,
  onClearFilters,
  onToggleColorFilter,
  searchLoading,
  searchResults,
  manaSymbolSettings,
  onManaSymbolSettingsChange,
  onAddCardToDeck,
}) {
  return (
                <div className="bg-bg-tertiary rounded-lg h-full flex flex-col relative border border-border">

                  {!selectedCard ? (

                    <>

                      {/* Header */}

                      <div className="flex justify-between items-center p-4 border-b border-border bg-bg-secondary rounded-t-lg">

                        <h3 className="text-lg font-semibold text-text-primary">Card Browser</h3>

                        <div className="flex items-center space-x-2">

                          {/* View Mode Toggle */}

                          <div className="flex bg-bg-primary rounded-lg p-1">

                            <button

                              onClick={() => onViewModeChange('list')}

                              className={`px-2 py-1 rounded text-xs transition-colors ${

                                viewMode === 'list'

                                  ? 'bg-accent-ember text-white'

                                  : 'text-text-secondary hover:text-text-primary'

                              }`}

                              title="List View"

                            >

                              ☰

                            </button>

                            <button

                              onClick={() => onViewModeChange('thumbnail')}

                              className={`px-2 py-1 rounded text-xs transition-colors ${

                                viewMode === 'thumbnail'

                                  ? 'bg-accent-ember text-white'

                                  : 'text-text-secondary hover:text-text-primary'

                              }`}

                              title="Thumbnail View"

                            >

                              ⊞

                            </button>

                          </div>

                          <button

                            onClick={() => onToggleSettings()}

                            className={`text-text-secondary hover:text-text-primary transition-colors p-1 ${

                              showSettings ? 'text-accent-ember' : ''

                            }`}

                            title="Settings"

                          >

                            ⚙️

                          </button>

                          <button

                            onClick={() => onCollapseSidebar()}

                            className="text-text-secondary hover:text-text-primary transition-colors p-1"

                            title="Collapse"

                          >

                            →

                          </button>

                        </div>

                      </div>



                      {/* Search */}

                      <div className="p-4 border-b border-border">

                        <div className="flex space-x-2">

                          <input

                            type="text"

                            value={searchQuery}

                            onChange={(e) => onSearchQueryChange(e.target.value)}

                            placeholder="Search for cards..."

                            className="flex-1 px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-ember bg-bg-primary text-text-primary text-sm"

                          />

                          <button

                            onClick={() => onToggleFilters()}

                            className={`p-2 rounded-lg transition-colors ${

                              showFilters || filters.colors.length > 0 || filters.cmc || filters.rarity

                                ? 'bg-accent-ember text-white'

                                : 'bg-bg-primary text-text-secondary hover:bg-bg-tertiary'

                            }`}

                            title="Filters"

                          >

                            🔍

                          </button>

                        </div>

                      </div>



                      {/* Settings Panel */}

                      {showSettings && (

                        <div className="p-4 border-b border-border bg-bg-primary">

                          <ManaSymbolSettings onSettingsChange={onManaSymbolSettingsChange} />

                        </div>

                      )}



                      {/* Quick Filters */}

                      {showFilters && (

                        <div className="p-4 border-b border-border bg-bg-primary space-y-3">

                          {/* Color Filters */}

                          <div>

                            <div className="flex items-center justify-between mb-2">

                              <label className="text-text-secondary text-xs font-medium">Colors</label>

                              {(filters.colors.length > 0 || filters.cmc || filters.rarity) && (

                                <button

                                  onClick={onClearFilters}

                                  className="text-xs text-accent-ember hover:underline"

                                >

                                  Clear All

                                </button>

                              )}

                            </div>

                            <div className="flex space-x-1">

                              {['W', 'U', 'B', 'R', 'G'].map(color => (

                                <ColorFilterSymbol

                                  key={color}

                                  color={color}

                                  isActive={filters.colors.includes(color)}

                                  onClick={onToggleColorFilter}

                                  size="sm"

                                  useSVG={manaSymbolSettings.useSVG}

                                />

                              ))}

                            </div>

                          </div>



                          {/* CMC and Rarity */}

                          <div className="grid grid-cols-2 gap-2">

                            <div>

                              <label className="block text-text-secondary text-xs font-medium mb-1">CMC</label>

                              <select

                                value={filters.cmc}

                                onChange={(e) => onFiltersChange({ ...filters, cmc: e.target.value })}

                                className="w-full px-2 py-1 border border-border rounded text-xs focus:outline-none focus:ring-1 focus:ring-accent-ember bg-bg-secondary text-text-primary"

                              >

                                <option value="">Any</option>

                                <option value="0">0</option>

                                <option value="1">1</option>

                                <option value="2">2</option>

                                <option value="3">3</option>

                                <option value="4">4</option>

                                <option value="5">5</option>

                                <option value="6+">6+</option>

                              </select>

                            </div>

                            <div>

                              <label className="block text-text-secondary text-xs font-medium mb-1">Rarity</label>

                              <select

                                value={filters.rarity}

                                onChange={(e) => onFiltersChange({ ...filters, rarity: e.target.value })}

                                className="w-full px-2 py-1 border border-border rounded text-xs focus:outline-none focus:ring-1 focus:ring-accent-ember bg-bg-secondary text-text-primary"

                              >

                                <option value="">Any</option>

                                <option value="common">Common</option>

                                <option value="uncommon">Uncommon</option>

                                <option value="rare">Rare</option>

                                <option value="mythic">Mythic</option>

                              </select>

                            </div>

                          </div>

                        </div>

                      )}



                      {/* Card List */}

                      <div className="flex-1 overflow-y-auto p-4">

                        {viewMode === 'list' ? (

                          /* List View */

                          <div className="space-y-1">

                            {searchLoading ? (

                              <div className="text-center py-8">

                                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-accent-ember mx-auto"></div>

                                <p className="text-text-secondary mt-2 text-xs">Searching...</p>

                              </div>

                            ) : searchResults.length === 0 ? (

                              <div className="text-center py-8">

                                <div className="text-2xl mb-2">🔍</div>

                                <p className="text-text-secondary text-xs">

                                  {searchQuery ? 'No cards found' : 'No cards available'}

                                </p>

                              </div>

                            ) : (

                              searchResults.map((card) => (

                                <div 

                                  key={card.id} 

                                  className="flex items-center p-2 bg-bg-secondary rounded hover:bg-bg-primary transition-colors cursor-pointer"

                                  onClick={() => onSelectCard(card)}

                                >

                                  <div className="flex items-center space-x-2 flex-1 min-w-0">

                                    {card.image_url && (

                                      <img

                                        src={card.image_url}

                                        alt={card.name}

                                        className="w-8 h-11 object-cover rounded flex-shrink-0"

                                      />

                                    )}

                                    <div className="min-w-0 flex-1">

                                      <h4 className="font-medium text-text-primary text-xs truncate">{card.name}</h4>

                                      <p className="text-text-secondary text-xs truncate">{card.set_name}</p>

                                      <div className="flex items-center space-x-1">

                                        {card.mana_cost && (

                                          <ManaCost cost={card.mana_cost} size="xs" useSVG={manaSymbolSettings.useSVG} />

                                        )}

                                        {card.rarity && (

                                          <span className={`text-xs px-1 rounded capitalize ${

                                            card.rarity === 'mythic' ? 'bg-orange-100 text-orange-800' :

                                            card.rarity === 'rare' ? 'bg-yellow-100 text-yellow-800' :

                                            card.rarity === 'uncommon' ? 'bg-gray-100 text-gray-800' :

                                            'bg-green-100 text-green-800'

                                          }`}>

                                            {card.rarity[0].toUpperCase()}

                                          </span>

                                        )}

                                      </div>

                                    </div>

                                  </div>

                                </div>

                              ))

                            )}

                          </div>

                        ) : (

                          /* Thumbnail View */

                          <div>

                            {searchLoading ? (

                              <div className="text-center py-8">

                                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-accent-ember mx-auto"></div>

                                <p className="text-text-secondary mt-2 text-xs">Searching...</p>

                              </div>

                            ) : searchResults.length === 0 ? (

                              <div className="text-center py-8">

                                <div className="text-2xl mb-2">🔍</div>

                                <p className="text-text-secondary text-xs">

                                  {searchQuery ? 'No cards found' : 'No cards available'}

                                </p>

                              </div>

                            ) : (

                              <div className="grid grid-cols-3 gap-2">

                                {searchResults.map((card) => (

                                  <div 

                                    key={card.id} 

                                    className="relative group cursor-pointer"

                                    onClick={() => onSelectCard(card)}

                                  >

                                    {card.image_url ? (

                                      <div className="relative">

                                        <img

                                          src={card.image_url}

                                          alt={card.name}

                                          className="w-full aspect-[2.5/3.5] object-cover rounded-lg shadow-sm group-hover:shadow-md transition-shadow"

                                        />

                                        {/* Hover overlay with card name */}

                                        <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-200 rounded-lg flex items-end">

                                          <div className="p-2 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200">

                                            <p className="text-xs font-medium truncate">{card.name}</p>

                                            <p className="text-xs opacity-75 truncate">{card.set_name}</p>

                                          </div>

                                        </div>

                                        {/* Rarity indicator */}

                                        {card.rarity && (

                                          <div className={`absolute top-1 right-1 w-2 h-2 rounded-full ${

                                            card.rarity === 'mythic' ? 'bg-orange-500' :

                                            card.rarity === 'rare' ? 'bg-yellow-500' :

                                            card.rarity === 'uncommon' ? 'bg-gray-400' :

                                            'bg-green-500'

                                          }`}></div>

                                        )}

                                      </div>

                                    ) : (

                                      <div className="w-full aspect-[2.5/3.5] bg-bg-secondary rounded-lg flex items-center justify-center group-hover:bg-bg-primary transition-colors">

                                        <div className="text-center p-2">

                                          <p className="text-xs font-medium text-text-primary truncate">{card.name}</p>

                                          <p className="text-xs text-text-secondary truncate">{card.set_name}</p>

                                        </div>

                                      </div>

                                    )}

                                  </div>

                                ))}

                              </div>

                            )}

                          </div>

                        )}

                      </div>

                    </>

                  ) : (

                    /* Card Detail View */

                    <>

                      {/* Detail Header */}

                      <div className="flex items-center p-4 border-b border-border bg-bg-secondary rounded-t-lg">

                        <button

                          onClick={() => onClearSelectedCard()}

                          className="text-text-secondary hover:text-text-primary transition-colors mr-3"

                        >

                          ← Back

                        </button>

                        <h3 className="text-lg font-semibold text-text-primary truncate">{selectedCard.name}</h3>

                      </div>



                      {/* Card Detail Content */}

                      <div className="flex-1 overflow-y-auto p-4">

                        <div className="space-y-4">

                          {/* Card Image */}

                          {selectedCard.image_url && (

                            <div className="text-center">

                              <img

                                src={selectedCard.image_url}

                                alt={selectedCard.name}

                                className="w-full max-w-64 mx-auto rounded-lg shadow-lg"

                              />

                            </div>

                          )}



                          {/* Card Info */}

                          <div className="space-y-3">

                            <div>

                              <h4 className="font-semibold text-text-primary text-lg">{selectedCard.name}</h4>

                              <p className="text-text-secondary text-sm">{selectedCard.set_name}</p>

                            </div>



                            {selectedCard.mana_cost && (

                              <div>

                                <label className="block text-text-secondary text-xs font-medium mb-1">Mana Cost</label>

                                <div className="bg-bg-primary px-3 py-2 rounded">

                                  <ManaCost cost={selectedCard.mana_cost} size="md" useSVG={manaSymbolSettings.useSVG} />

                                </div>

                              </div>

                            )}



                            {selectedCard.card_type && (

                              <div>

                                <label className="block text-text-secondary text-xs font-medium mb-1">Type</label>

                                <div className="bg-bg-primary px-3 py-2 rounded text-sm">{selectedCard.card_type}</div>

                              </div>

                            )}



                            {selectedCard.oracle_text && (

                              <div>

                                <label className="block text-text-secondary text-xs font-medium mb-1">Oracle Text</label>

                                <div className="bg-bg-primary px-3 py-2 rounded text-sm whitespace-pre-wrap">{selectedCard.oracle_text}</div>

                              </div>

                            )}



                            <div className="grid grid-cols-2 gap-4">

                              {selectedCard.rarity && (

                                <div>

                                  <label className="block text-text-secondary text-xs font-medium mb-1">Rarity</label>

                                  <div className={`px-3 py-2 rounded text-sm capitalize ${

                                    selectedCard.rarity === 'mythic' ? 'bg-orange-100 text-orange-800' :

                                    selectedCard.rarity === 'rare' ? 'bg-yellow-100 text-yellow-800' :

                                    selectedCard.rarity === 'uncommon' ? 'bg-gray-100 text-gray-800' :

                                    'bg-green-100 text-green-800'

                                  }`}>

                                    {selectedCard.rarity}

                                  </div>

                                </div>

                              )}

                          

                              {selectedCard.cmc !== undefined && (

                                <div>

                                  <label className="block text-text-secondary text-xs font-medium mb-1">CMC</label>

                                  <div className="bg-bg-primary px-3 py-2 rounded text-sm">{selectedCard.cmc}</div>

                                </div>

                              )}

                            </div>

                          </div>

                        </div>

                      </div>

                    </>

                  )}



                  {/* Floating Action Button */}

                  {selectedCard && (

                    <div className="absolute bottom-4 left-4 right-4">

                      <button

                        onClick={() => onAddCardToDeck(selectedCard)}

                        className="w-full bg-accent-ember text-white py-3 rounded-lg hover:bg-accent-ember-dark transition-colors font-semibold shadow-lg"

                      >

                        Add to Deck

                      </button>

                    </div>

                  )}

                </div>
  );
}