// CardAlbum — collection viewer (modal).
// Grid of slots: owned cards show as HoloCard miniatures, missing ones show silhouette.
// Click a card → big detail view with download wallpaper.

function CardAlbum({ open, onClose, allCards }) {
  const userMap = window.CardSystem.useUserCards();
  const [filter, setFilter] = React.useState("all"); // all | owned
  const [rarityFilter, setRarityFilter] = React.useState("all");
  const [selected, setSelected] = React.useState(null);

  if (!open) return null;

  // Solo cuenta entradas que apuntan a cartas que existen.
  const ownedCount = (allCards || []).filter(c => userMap[c.id]).length;

  let cards = allCards || [];
  if (filter === "owned") cards = cards.filter(c => userMap[c.id]);
  if (rarityFilter !== "all") cards = cards.filter(c => (c.rarity || "comun") === rarityFilter);

  // Sort by rarity desc, then by name
  cards = [...cards].sort((a, b) => {
    const ra = window.CardSystem.getRarity(a.rarity).order;
    const rb = window.CardSystem.getRarity(b.rarity).order;
    if (ra !== rb) return rb - ra;
    return (a.name || "").localeCompare(b.name || "");
  });

  return (
    <div className="album-overlay" onClick={onClose}>
      <div className="album-shell" onClick={(e) => e.stopPropagation()}>
        <button className="album-close" onClick={onClose} aria-label="Cerrar">×</button>

        <div className="album-header">
          <div className="album-title-block">
            <div className="album-eyebrow">COLECCIÓN</div>
            <h2 className="album-title">TROOPER · CARDS</h2>
          </div>
          <div className="album-stats">
            <div className="album-stat-num">{ownedCount}<span className="album-stat-of">/{(allCards || []).length}</span></div>
            <div className="album-stat-label">COLECTADAS</div>
          </div>
        </div>

        <div className="album-toolbar">
          <div className="album-tabs">
            <button className={"album-tab" + (filter === "all" ? " active" : "")} onClick={() => setFilter("all")}>TODAS</button>
            <button className={"album-tab" + (filter === "owned" ? " active" : "")} onClick={() => setFilter("owned")}>OBTENIDAS</button>
          </div>
          <div className="album-rarity-filter">
            <button className={"album-rfilter" + (rarityFilter === "all" ? " active" : "")} onClick={() => setRarityFilter("all")}>·</button>
            {window.CardSystem.RARITY_LIST.map(r => (
              <button
                key={r.id}
                className={"album-rfilter" + (rarityFilter === r.id ? " active" : "")}
                style={{ '--rc': r.color }}
                onClick={() => setRarityFilter(r.id)}
                title={r.label}
              >
                <span className="album-rdot" style={{ background: r.color }} />
              </button>
            ))}
          </div>
        </div>

        <div className="album-grid">
          {cards.length === 0 && (
            <div className="album-empty">No hay tarjetas que mostrar.</div>
          )}
          {cards.map((card) => {
            const owned = userMap[card.id];
            return (
              <div
                key={card.id}
                className={"album-slot" + (owned ? " owned" : " locked")}
                onClick={() => owned && setSelected(card)}
              >
                {owned ? (
                  <window.HoloCard card={card} size="sm" enableTilt={false} showInfo={true} />
                ) : (
                  <div className="album-silhouette">
                    <div className="album-q">?</div>
                    <div className="album-locked-label">??? · {window.CardSystem.getRarity(card.rarity).label}</div>
                  </div>
                )}
                {owned && owned.count > 1 && (
                  <div className="album-count">×{owned.count}</div>
                )}
              </div>
            );
          })}
        </div>
      </div>

      {selected && (
        <div className="album-detail" onClick={() => setSelected(null)}>
          <div className="album-detail-card" onClick={(e) => e.stopPropagation()}>
            <window.HoloCard card={selected} size="lg" />
            <div className="album-detail-actions">
              <button className="carddrop-btn carddrop-btn-secondary" onClick={() => window.CardSystem.downloadWallpaper(selected)}>
                ↓ WALLPAPER
              </button>
              <button className="carddrop-btn carddrop-btn-primary" onClick={() => setSelected(null)}>
                CERRAR
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

window.CardAlbum = CardAlbum;