Add filters, stats bar, and fix bugs

- FilterBar: type chips (Monster/Spell/Trap), owned-only toggle, sort by name/most-owned
- Stats bar: cards in DB, unique owned, total copies
- Card detail panel: type, race, attribute, level/link stars from existing data
- useMemo for filtered+sorted card list (was re-sorting every render)
- Footer: refresh card list after successful full import
- PrintingRow: remove broken custom memo comparator (was comparing static DB field)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/pages/HomePage.jsx

@@ -1,21 +1,18 @@
-//HomePage.jsx
-import React, { useEffect, useState, useContext } from 'react';
+import React, { useEffect, useState, useContext, useMemo, useCallback } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 import CardRow from '../components/CardRow/CardRow';
 import SearchBar from '../components/SearchBar/SearchBar';
+import FilterBar from '../components/FilterBar/FilterBar';
 import { CardContext } from '../store/CardContext';
 import { fetchCards, fetchCardImage } from '../services/api';
 import Footer from '../components/Footer/Footer';
 
-// Debounce hook
 function useDebouncedValue(value, delay = 250) {
   const [debounced, setDebounced] = useState(value);
-
   useEffect(() => {
     const handler = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(handler);
   }, [value, delay]);
-
   return debounced;
 }
 
@@ -24,81 +21,149 @@ function HomePage() {
   const [searchTerm, setSearchTerm] = useState('');
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
-  const { expandedCardId, cardImages, setCardImage } = useContext(CardContext);
+  const [typeFilter, setTypeFilter] = useState('All');
+  const [ownedOnly, setOwnedOnly] = useState(false);
+  const [sortBy, setSortBy] = useState('name');
 
+  const { expandedCardId, cardImages, setCardImage, ownedAmounts } = useContext(CardContext);
   const debouncedSearchTerm = useDebouncedValue(searchTerm, 250);
 
-  useEffect(() => {
-    fetchCards()
-      .then(data => setCards(data))
-      .catch(err => setError(err.message))
-      .finally(() => setLoading(false));
+  const loadCards = useCallback(() => {
+    return fetchCards().then(data => setCards(data));
   }, []);
 
-  // Load image for the currently expanded card
+  useEffect(() => {
+    loadCards()
+      .catch(err => setError(err.message))
+      .finally(() => setLoading(false));
+  }, [loadCards]);
 
   useEffect(() => {
     if (!expandedCardId || cardImages[expandedCardId]) return;
-
     fetchCardImage(expandedCardId)
       .then(image => setCardImage(expandedCardId, image))
       .catch(err => console.error('Failed to load card image', err));
   }, [expandedCardId, cardImages, setCardImage]);
 
-  if (loading) return <p>Loading cards...</p>;
-  if (error) return <p>Error: {error}</p>;
+  const getCardTotal = useCallback((card) =>
+    card.printings?.reduce((sum, p) => {
+      const key = `${p.set_id}-${p.rarity_id}`;
+      return sum + (ownedAmounts[card.id]?.[key] ?? p.amount_owned ?? 0);
+    }, 0) ?? 0
+  , [ownedAmounts]);
+
+  const stats = useMemo(() => ({
+    totalCards: cards.length,
+    ownedUnique: cards.filter(c => getCardTotal(c) > 0).length,
+    totalCopies: cards.reduce((sum, c) => sum + getCardTotal(c), 0),
+  }), [cards, getCardTotal]);
+
+  const filteredCards = useMemo(() => {
+    let result = cards;
+
+    if (debouncedSearchTerm) {
+      const lower = debouncedSearchTerm.toLowerCase();
+      result = result.filter(c => c.name.toLowerCase().includes(lower));
+    }
+
+    if (typeFilter !== 'All') {
+      const lower = typeFilter.toLowerCase();
+      result = result.filter(c => c.type.toLowerCase().includes(lower));
+    }
+
+    if (ownedOnly) {
+      result = result.filter(c => getCardTotal(c) > 0);
+    }
+
+    const sorted = [...result];
+    if (sortBy === 'owned') {
+      sorted.sort((a, b) => getCardTotal(b) - getCardTotal(a));
+    } else {
+      sorted.sort((a, b) => a.name.localeCompare(b.name));
+    }
+
+    return sorted;
+  }, [cards, debouncedSearchTerm, typeFilter, ownedOnly, sortBy, getCardTotal]);
+
+  if (loading) return <p style={{ padding: '1rem' }}>Loading cards...</p>;
+  if (error) return <p style={{ padding: '1rem', color: 'red' }}>Error: {error}</p>;
 
   const expandedCard = cards.find(c => c.id === expandedCardId);
 
-  // Filter + sort using debounced search
-  const filteredCards = cards
-    .filter(card =>
-      card.name.toLowerCase().includes(debouncedSearchTerm.toLowerCase())
-    )
-    .sort((a, b) => a.name.localeCompare(b.name));
-
   return (
     <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
-      {/* Main content row */}
-      <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
-        {/* Left panel: card list */}
-        <div style={{ flex: 2, borderRight: '1px solid #ccc', padding: '1rem', overflow: 'hidden' }}>
-          <h2>Card List</h2>
-          <SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
+      {/* Stats bar */}
+      <div style={{
+        display: 'flex', gap: '2rem', padding: '0.4rem 1rem',
+        background: '#f5f5f5', borderBottom: '1px solid #ddd',
+        fontSize: '0.85rem', color: '#555', flexShrink: 0,
+      }}>
+        <span><strong>{stats.totalCards.toLocaleString()}</strong> cards in DB</span>
+        <span><strong>{stats.ownedUnique.toLocaleString()}</strong> unique owned</span>
+        <span><strong>{stats.totalCopies.toLocaleString()}</strong> total copies</span>
+      </div>
 
-          {/* ✅ Virtualized list */}
+      {/* Main content */}
+      <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
+        {/* Left panel */}
+        <div style={{ flex: 2, borderRight: '1px solid #ccc', padding: '1rem', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+          <SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
+          <FilterBar
+            typeFilter={typeFilter} setTypeFilter={setTypeFilter}
+            ownedOnly={ownedOnly} setOwnedOnly={setOwnedOnly}
+            sortBy={sortBy} setSortBy={setSortBy}
+          />
+          <div style={{ fontSize: '0.8rem', color: '#999', marginBottom: '0.25rem' }}>
+            {filteredCards.length.toLocaleString()} cards
+          </div>
           <Virtuoso
-            style={{ height: 'calc(100vh - 100px)' }}
+            style={{ flex: 1 }}
             data={filteredCards}
             itemContent={(index, card) => <CardRow key={card.id} card={card} />}
           />
         </div>
 
-        {/* Right panel: card image */}
+        {/* Right panel */}
         <div style={{ flex: 1, padding: '1rem', overflowY: 'auto' }}>
-          <h2>Card Image / Details</h2>
           {expandedCardId && expandedCard ? (
-            cardImages[expandedCardId] ? (
-              <img
-                src={cardImages[expandedCardId]}
-                alt={expandedCard.name}
-                style={{ maxWidth: '100%', maxHeight: '80vh' }}
-              />
-            ) : (
-              <p>Loading image...</p>
-            )
+            <>
+              {cardImages[expandedCardId] ? (
+                <img
+                  src={cardImages[expandedCardId]}
+                  alt={expandedCard.name}
+                  style={{ maxWidth: '100%' }}
+                />
+              ) : (
+                <p>Loading image...</p>
+              )}
+              <h3 style={{ margin: '0.75rem 0 0.2rem' }}>{expandedCard.name}</h3>
+              <p style={{ margin: '0.2rem 0', color: '#888', fontSize: '0.85rem' }}>
+                {expandedCard.type}
+                {expandedCard.race && ` · ${expandedCard.race}`}
+                {expandedCard.attribute && ` · ${expandedCard.attribute}`}
+              </p>
+              {expandedCard.level != null && (
+                <p style={{ margin: '0.2rem 0', fontSize: '0.85rem' }}>
+                  {'★'.repeat(Math.min(expandedCard.level, 13))} Lv.{expandedCard.level}
+                </p>
+              )}
+              {expandedCard.link_val != null && (
+                <p style={{ margin: '0.2rem 0', fontSize: '0.85rem' }}>
+                  Link {expandedCard.link_val}
+                </p>
+              )}
+            </>
           ) : (
-            <p>Click a card to see its image</p>
+            <p style={{ color: '#aaa' }}>Click a card to see details</p>
           )}
         </div>
       </div>
 
-      {/* Footer: bottom right */}
       <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-        <Footer />
+        <Footer onImportComplete={loadCards} />
       </div>
     </div>
   );
 }
 
-export default HomePage;
+export default HomePage;