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

export default function DeckBuilderDeckList({
  deckCards,
  sidebarOpen,
  onOpenSidebar,
  manaSymbolSettings,
  onAddCard,
  onRemoveCard,
}) {
  return (
              <div className="flex-1 overflow-y-auto space-y-2">
                {deckCards.length === 0 ? (
                  <div className="text-center py-12">
                    <div className="text-6xl mb-4">🃏</div>
                    <h3 className="text-xl font-semibold text-text-primary mb-2">Empty Deck</h3>
                    <p className="text-text-secondary mb-4">Start building your deck by searching for cards</p>
                    {!sidebarOpen && (
                      <button
                        onClick={onOpenSidebar}
                        className="bg-accent-ember text-white px-4 py-2 rounded-lg hover:bg-accent-ember-dark transition-colors"
                      >
                        Open Card Browser
                      </button>
                    )}
                  </div>
                ) : (
                  deckCards
                    .sort((a, b) => a.name.localeCompare(b.name))
                    .map((card) => (
                      <div key={`${card.card_id}-${card.id}`} className="flex items-center justify-between p-4 bg-bg-primary rounded-lg hover:bg-bg-tertiary transition-colors">
                        <div className="flex items-center space-x-4">
                          {card.image_url && (
                            <img
                              src={card.image_url}
                              alt={card.name}
                              className="w-14 h-20 object-cover rounded shadow-md"
                            />
                          )}
                          <div>
                            <h4 className="font-semibold text-text-primary text-lg">{card.name}</h4>
                            <p className="text-text-secondary text-sm">{card.set_name}</p>
                            <div className="flex items-center space-x-3 mt-1">
                              {card.mana_cost && (
                                <div className="bg-bg-secondary px-2 py-1 rounded">
                                  <ManaCost cost={card.mana_cost} size="sm" useSVG={manaSymbolSettings.useSVG} />
                                </div>
                              )}
                              {card.rarity && (
                                <span className={`text-xs px-2 py-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}
                                </span>
                              )}
                            </div>
                          </div>
                        </div>
                        <div className="flex items-center space-x-3">
                          <span className="text-text-primary font-bold text-lg">{card.quantity}x</span>
                          <div className="flex items-center space-x-1">
                            <button
                              onClick={() => onRemoveCard(card.card_id, 1)}
                              className="w-8 h-8 bg-red-500 text-white rounded-full hover:bg-red-600 transition-colors flex items-center justify-center font-bold"
                            >
                              −
                            </button>
                            <button
                              onClick={() => onAddCard(card, 1)}
                              className="w-8 h-8 bg-accent-ember text-white rounded-full hover:bg-accent-ember-dark transition-colors flex items-center justify-center font-bold"
                            >
                              +
                            </button>
                          </div>
                        </div>
                      </div>
                    ))
                )}
              </div>
  );
}