mtgc/src/views/LibraryBrowser.tsx

import { useEffect, useRef, useState } from "react";
import { api, Deck, LibraryCard, LibraryFilter } from "../api";
import {
  CardThumb,
  CardTile,
  ColorPips,
  ColorToggles,
  GroupBySelect,
  GroupMode,
  LocationField,
  QtyStepper,
  ViewToggle,
  groupCards,
  usePersistedState,
  useViewMode,
} from "../components";

// How long a card that's been decremented to 0 lingers (dimmed, still
// adjustable) before actually dropping out of the library view — gives the
// user a window to undo an accidental removal by clicking + again.
const REMOVAL_GRACE_MS = 5000;

/** Browse & filter the owned library by name and card criteria. */
export function LibraryBrowser() {
  const [text, setText] = useState("");
  const [commander, setCommander] = useState(0);
  const [colorsInclude, setColorsInclude] = useState(0);
  const [cmcMin, setCmcMin] = useState("");
  const [cmcMax, setCmcMax] = useState("");
  const [type, setType] = useState("");
  const [subtype, setSubtype] = useState("");
  const [keyword, setKeyword] = useState("");
  const [inDeck, setInDeck] = useState<number | "">("");
  const [location, setLocation] = useState("");

  const [decks, setDecks] = useState<Deck[]>([]);
  const [rows, setRows] = useState<LibraryCard[]>([]);
  const [view, setView] = useViewMode("library-view");
  const [groupBy, setGroupBy] = usePersistedState<GroupMode>("library-group", "none");
  const [refreshKey, setRefreshKey] = useState(0);
  const [pendingRemoval, setPendingRemoval] = useState<Set<string>>(new Set());
  const removalTimers = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());

  useEffect(() => {
    api.listDecks().then(setDecks);
  }, []);

  // Cancel any in-flight removal timers on unmount so they don't fire against
  // an unmounted component.
  useEffect(() => () => removalTimers.current.forEach(clearTimeout), []);

  useEffect(() => {
    const filter: LibraryFilter = {
      text: text.trim() || null,
      commander_identity: commander || null,
      colors_include: colorsInclude || null,
      cmc_min: cmcMin === "" ? null : Number(cmcMin),
      cmc_max: cmcMax === "" ? null : Number(cmcMax),
      types: splitCsv(type),
      subtypes: splitCsv(subtype),
      keywords: splitCsv(keyword),
      in_deck: inDeck === "" ? null : Number(inDeck),
      location: location.trim() || null,
    };
    const t = setTimeout(() => {
      api.searchLibrary(filter).then(setRows).catch(() => setRows([]));
    }, 120);
    return () => clearTimeout(t);
  }, [
    text,
    commander,
    colorsInclude,
    cmcMin,
    cmcMax,
    type,
    subtype,
    keyword,
    inDeck,
    location,
    refreshKey,
  ]);

  async function adjust(oracleId: string, delta: number) {
    const qty = await api.addOwned(oracleId, delta);
    setRows((rs) => rs.map((c) => (c.oracle_id === oracleId ? { ...c, quantity_owned: qty } : c)));

    // Re-adding during the grace period below cancels the pending removal.
    const timer = removalTimers.current.get(oracleId);
    if (timer) {
      clearTimeout(timer);
      removalTimers.current.delete(oracleId);
      setPendingRemoval((p) => {
        const next = new Set(p);
        next.delete(oracleId);
        return next;
      });
    }

    if (qty <= 0) {
      // search_library only returns owned (>0) cards — rather than dropping
      // the row immediately, dim it and give the user a window to undo a
      // mistaken decrement (via +) before it actually disappears.
      setPendingRemoval((p) => new Set(p).add(oracleId));
      removalTimers.current.set(
        oracleId,
        setTimeout(() => {
          setRows((rs) => rs.filter((c) => c.oracle_id !== oracleId));
          setPendingRemoval((p) => {
            const next = new Set(p);
            next.delete(oracleId);
            return next;
          });
          removalTimers.current.delete(oracleId);
        }, REMOVAL_GRACE_MS),
      );
    }
  }

  const deckOrLocation = (c: LibraryCard) =>
    c.decks.length === 0 ? (
      <LocationField
        oracleId={c.oracle_id}
        location={c.location}
        onSaved={() => setRefreshKey((k) => k + 1)}
      />
    ) : (
      c.decks.map((d) => (
        <span key={d} className="deck-chip">
          {d}
        </span>
      ))
    );

  function libTable(cards: LibraryCard[]) {
    return (
      <table>
        <thead>
          <tr>
            <th></th>
            <th>Colors</th>
            <th>Name</th>
            <th>Type</th>
            <th>MV</th>
            <th>Owned</th>
            <th>Decks / Location</th>
          </tr>
        </thead>
        <tbody>
          {cards.map((c) => (
            <tr key={c.oracle_id}>
              <td>
                <CardThumb card={c} />
              </td>
              <td>
                <ColorPips mask={c.color_identity} />
              </td>
              <td className="card-name">{c.name}</td>
              <td className="card-type">{c.type_line}</td>
              <td>{c.mana_value}</td>
              <td className={c.quantity_assigned > c.quantity_owned ? "over-assigned" : ""}>
                <span className="row" style={{ gap: 8 }}>
                  <QtyStepper
                    value={c.quantity_owned}
                    onDecrement={() => adjust(c.oracle_id, -1)}
                    onIncrement={() => adjust(c.oracle_id, 1)}
                    warn={c.quantity_assigned > c.quantity_owned}
                    pending={pendingRemoval.has(c.oracle_id)}
                  />
                  {c.quantity_assigned > c.quantity_owned && (
                    <span title="Assigned to more decks than you own">
                      ⚠ {c.quantity_assigned} assigned
                    </span>
                  )}
                </span>
              </td>
              <td>{deckOrLocation(c)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }

  function libTiles(cards: LibraryCard[]) {
    return (
      <div className="tile-grid">
        {cards.map((c) => (
          <CardTile
            key={c.oracle_id}
            card={c}
            corner={
              <QtyStepper
                overlay
                value={c.quantity_owned}
                onDecrement={() => adjust(c.oracle_id, -1)}
                onIncrement={() => adjust(c.oracle_id, 1)}
                warn={c.quantity_assigned > c.quantity_owned}
                pending={pendingRemoval.has(c.oracle_id)}
              />
            }
            footer={deckOrLocation(c)}
          />
        ))}
      </div>
    );
  }

  const groups = groupCards(rows, groupBy);

  return (
    <div>
      <div className="row" style={{ justifyContent: "space-between", marginBottom: 12 }}>
        <h2 style={{ margin: 0 }}>
          Library <span className="badge">{rows.length}</span>
        </h2>
        <div className="row" style={{ gap: 16 }}>
          <GroupBySelect value={groupBy} onChange={setGroupBy} />
          <ViewToggle mode={view} onChange={setView} />
        </div>
      </div>

      <div className="filters">
        <div className="field">
          <label>Name contains</label>
          <input value={text} onChange={(e) => setText(e.target.value)} placeholder="e.g. bolt" />
        </div>
        <div className="field">
          <label>Playable in commander (color identity ⊆)</label>
          <ColorToggles value={commander} onChange={setCommander} />
        </div>
        <div className="field">
          <label>Includes colors</label>
          <ColorToggles value={colorsInclude} onChange={setColorsInclude} />
        </div>
        <div className="field">
          <label>Mana value</label>
          <div className="row">
            <input
              type="number"
              style={{ width: 70 }}
              placeholder="min"
              value={cmcMin}
              onChange={(e) => setCmcMin(e.target.value)}
            />
            <span className="muted">–</span>
            <input
              type="number"
              style={{ width: 70 }}
              placeholder="max"
              value={cmcMax}
              onChange={(e) => setCmcMax(e.target.value)}
            />
          </div>
        </div>
        <div className="field">
          <label>Type(s)</label>
          <input value={type} onChange={(e) => setType(e.target.value)} placeholder="Creature, Legendary" />
        </div>
        <div className="field">
          <label>Subtype(s)</label>
          <input value={subtype} onChange={(e) => setSubtype(e.target.value)} placeholder="Elf" />
        </div>
        <div className="field">
          <label>Keyword(s)</label>
          <input value={keyword} onChange={(e) => setKeyword(e.target.value)} placeholder="Flying" />
        </div>
        <div className="field">
          <label>In deck</label>
          <select value={inDeck} onChange={(e) => setInDeck(e.target.value === "" ? "" : Number(e.target.value))}>
            <option value="">Any</option>
            {decks.map((d) => (
              <option key={d.id} value={d.id}>
                {d.name}
              </option>
            ))}
          </select>
        </div>
        <div className="field">
          <label>Location</label>
          <input
            value={location}
            onChange={(e) => setLocation(e.target.value)}
            placeholder="e.g. Box 1"
          />
        </div>
      </div>

      {rows.length === 0 ? (
        <p className="hint">
          No matching cards owned. Add some in the Add Cards tab, or loosen the filters.
        </p>
      ) : (
        groups.map((g) => (
          <div key={g.label || "all"} style={{ marginBottom: g.label ? 20 : 0 }}>
            {g.label && (
              <h3>
                {g.label} <span className="badge">{g.cards.length}</span>
              </h3>
            )}
            {view === "list" ? libTable(g.cards) : libTiles(g.cards)}
          </div>
        ))
      )}
    </div>
  );
}

function splitCsv(s: string): string[] {
  return s
    .split(",")
    .map((x) => x.trim())
    .filter(Boolean);
}