add cache for card list with TTL and refresh button

src/app/api/magikarp/route.ts

@@ -1,5 +1,15 @@
 import { NextRequest } from 'next/server';
 import { fetchMagikarpCards } from '@/lib/api';
+import { promises as fs } from 'fs';
+import path from 'path';
+
+const DATA_DIR = path.join(process.cwd(), 'data');
+const CARDS_FILE = path.join(DATA_DIR, 'cards.json');
+const TTL_MS = 24 * 60 * 60 * 1000; // 24 hours
+
+async function ensureDataDir() {
+  try { await fs.mkdir(DATA_DIR, { recursive: true }); } catch {}
+}
 
 export async function GET(req: NextRequest) {
   const { searchParams } = new URL(req.url);
@@ -7,10 +17,31 @@ export async function GET(req: NextRequest) {
   const page = Number(searchParams.get('page') ?? '1');
   const pageSize = Number(searchParams.get('pageSize') ?? '250');
   const orderBy = searchParams.get('orderBy') ?? 'set.releaseDate';
+  const refresh = searchParams.get('refresh') === '1';
 
   try {
+    await ensureDataDir();
+    if (!refresh) {
+      // Try to serve from cache if exists
+      try {
+        const raw = await fs.readFile(CARDS_FILE, 'utf-8');
+        if (raw) {
+          const json = JSON.parse(raw);
+          const ts = json?.updatedAt ? Date.parse(json.updatedAt) : NaN;
+          const fresh = Number.isFinite(ts) && (Date.now() - ts) < TTL_MS;
+          if (fresh) {
+            return Response.json({ ...json, cached: true }, { status: 200 });
+          }
+        }
+      } catch {}
+    }
+
+    // Fetch fresh from API
     const data = await fetchMagikarpCards({ q, page, pageSize });
-    return Response.json(data, { status: 200 });
+    const payload = { ...data, cached: false, updatedAt: new Date().toISOString() };
+    // Write cache best-effort
+    try { await fs.writeFile(CARDS_FILE, JSON.stringify(payload, null, 2), 'utf-8'); } catch {}
+    return Response.json(payload, { status: 200 });
   } catch (err: any) {
     const hasKey = !!(process.env.POKEMON_TCG_API_KEY || process.env.NEXT_PUBLIC_POKEMON_TCG_API_KEY);
     console.error('Error fetching cards', err);

src/app/page.tsx

@@ -16,6 +16,10 @@ export default function Page() {
   const [setId, setSetId] = useState('');
   const [note, setNote] = useState<string | null>(null);
   const [tab, setTab] = useState<'uncollected' | 'collected'>('uncollected');
+  const [refreshing, setRefreshing] = useState(false);
+  const [updatedAt, setUpdatedAt] = useState<string | null>(null);
+  const [cachedFlag, setCachedFlag] = useState<boolean | null>(null);
+  const [toast, setToast] = useState<string | null>(null);
 
   useEffect(() => {
     (async () => {
@@ -34,6 +38,8 @@ export default function Page() {
         const json = await res.json();
         setCards(json.data || []);
         if (json.note) setNote(String(json.note));
+        if (json.updatedAt) setUpdatedAt(String(json.updatedAt));
+        if (typeof json.cached === 'boolean') setCachedFlag(json.cached);
       } catch (e: any) {
         setError(e?.message || 'Error');
       } finally {
@@ -43,6 +49,28 @@ export default function Page() {
     load();
   }, []);
 
+  async function refreshCards() {
+    setRefreshing(true);
+    setError(null);
+    try {
+      const res = await fetch('/api/magikarp?pageSize=250&refresh=1', { cache: 'no-store' });
+      if (!res.ok) throw new Error('Failed to refresh');
+      const json = await res.json();
+      setCards(json.data || []);
+      if (json.note) setNote(String(json.note)); else setNote(null);
+      if (json.updatedAt) setUpdatedAt(String(json.updatedAt));
+      if (typeof json.cached === 'boolean') setCachedFlag(json.cached);
+    } catch (e: any) {
+      // Non-blocking toast on refresh failure
+      const msg = e?.message ? String(e.message) : 'Refresh failed';
+      setToast(msg);
+      // auto-hide
+      setTimeout(() => setToast(null), 3000);
+    } finally {
+      setRefreshing(false);
+    }
+  }
+
   function toggleCollected(id: string, key: VariantKey) {
     setChecklist((prev) => {
       const next: ChecklistV2 = { ...prev };
@@ -116,6 +144,25 @@ export default function Page() {
 
       <div className="mb-4 flex flex-wrap items-center gap-3">
         <SetFilter options={setOptions} value={setId} onChange={setSetId} />
+        <button
+          type="button"
+          onClick={refreshCards}
+          disabled={refreshing}
+          className={`px-3 py-1.5 text-sm rounded border transition ${refreshing ? 'bg-slate-200 text-slate-500 border-slate-300' : 'bg-white text-slate-700 border-slate-300 hover:bg-slate-50'}`}
+          aria-busy={refreshing}
+        >
+          {refreshing ? 'Refreshing…' : 'Refresh cards'}
+        </button>
+        {updatedAt ? (
+          <span className="text-xs text-slate-500 flex items-center gap-2">
+            Updated: {new Date(updatedAt).toLocaleString()}
+            {cachedFlag !== null && (
+              <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[0.7rem] border ${cachedFlag ? 'bg-yellow-50 text-yellow-800 border-yellow-200' : 'bg-green-50 text-green-800 border-green-200'}`}>
+                {cachedFlag ? 'Cached' : 'Live'}
+              </span>
+            )}
+          </span>
+        ) : null}
       </div>
 
       {loading ? (
@@ -163,6 +210,12 @@ export default function Page() {
             Showing {displayed.length} of {filtered.length} cards in this tab.
           </div>
           <CardGrid cards={displayed} checklist={checklist} onToggle={toggleCollected} />
+          {/* Toast */}
+          {toast ? (
+            <div className="fixed bottom-4 right-4 z-50 rounded-md bg-slate-900 text-white px-3 py-2 text-sm shadow-lg">
+              {toast}
+            </div>
+          ) : null}
         </>
       )}
     </main>