mtgc/src/App.tsx

import { useEffect, useRef, useState, useCallback, ReactNode } from "react";
import { listen } from "@tauri-apps/api/event";
import { open, save } from "@tauri-apps/plugin-dialog";
import { api, IngestProgress, IngestStageInfo, Status } from "./api";
import { HoverPreviewProvider, usePersistedState } from "./components";
import { CardEntry } from "./views/CardEntry";
import { LibraryBrowser } from "./views/LibraryBrowser";
import { DeckView } from "./views/DeckView";

type Tab = "add" | "library" | "decks";

const svg = (children: ReactNode, size = 20) => (
  <svg
    viewBox="0 0 24 24"
    width={size}
    height={size}
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    {children}
  </svg>
);

const ICON_OPEN_LIBRARY = svg(
  <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />,
  16,
);
const ICON_NEW_LIBRARY = svg(
  <>
    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
    <line x1="12" y1="11" x2="12" y2="17" />
    <line x1="9" y1="14" x2="15" y2="14" />
  </>,
  16,
);
const ICON_DOWNLOAD = svg(
  <>
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
    <polyline points="7 10 12 15 17 10" />
    <line x1="12" y1="15" x2="12" y2="3" />
  </>,
  16,
);

const NAV: { id: Tab; label: string; icon: ReactNode }[] = [
  { id: "add", label: "Add Cards", icon: svg(<path d="M12 5v14M5 12h14" />) },
  {
    id: "library",
    label: "Library",
    icon: svg(
      <>
        <rect x="3" y="3" width="7" height="7" rx="1.5" />
        <rect x="14" y="3" width="7" height="7" rx="1.5" />
        <rect x="3" y="14" width="7" height="7" rx="1.5" />
        <rect x="14" y="14" width="7" height="7" rx="1.5" />
      </>,
    ),
  },
  {
    id: "decks",
    label: "Decks",
    icon: svg(
      <>
        <path d="M12 2.5l8.5 4.5-8.5 4.5L3.5 7z" />
        <path d="M3.5 12l8.5 4.5 8.5-4.5" />
        <path d="M3.5 16.5l8.5 4.5 8.5-4.5" />
      </>,
    ),
  },
];

/** Percent-fill (0..100) of one segment, given overall cumulative percent. */
function segmentFill(stages: IngestStageInfo[], index: number, overallPercent: number): number {
  let start = 0;
  for (let i = 0; i < index; i++) start += stages[i].weight;
  const end = start + stages[index].weight;
  const [startPct, endPct] = [start * 100, end * 100];
  if (overallPercent <= startPct) return 0;
  if (overallPercent >= endPct) return 100;
  if (endPct === startPct) return 100;
  return ((overallPercent - startPct) / (endPct - startPct)) * 100;
}

export default function App() {
  const [status, setStatus] = useState<Status | null>(null);
  const [tab, setTab] = usePersistedState<Tab>("active-tab", "add");
  const [progress, setProgress] = useState<IngestProgress | null>(null);
  const [busy, setBusy] = useState(false);
  const lastProgress = useRef<IngestProgress | null>(null);

  const refreshStatus = useCallback(async () => {
    setStatus(await api.getStatus());
  }, []);

  useEffect(() => {
    refreshStatus();
    const un = listen<IngestProgress>("ingest-progress", (e) => {
      lastProgress.current = e.payload;
      setProgress(e.payload);
    });
    return () => {
      un.then((f) => f());
    };
  }, [refreshStatus]);

  async function updateCardData() {
    setBusy(true);
    try {
      const s = await api.updateCardData();
      setStatus(s);
      setProgress({
        stage: "done",
        message: `Loaded ${s.card_count.toLocaleString()} cards.`,
        overall_percent: 100,
        stages: lastProgress.current?.stages ?? [],
      });
      setTimeout(() => setProgress((p) => (p?.stage === "done" ? null : p)), 4000);
    } catch (err) {
      const msg = String(err);
      if (msg === "cancelled") {
        setProgress({
          stage: "cancelled",
          message: "Cancelled.",
          overall_percent: lastProgress.current?.overall_percent ?? 0,
          stages: lastProgress.current?.stages ?? [],
        });
        setTimeout(() => setProgress((p) => (p?.stage === "cancelled" ? null : p)), 3000);
      } else {
        setProgress({
          stage: "error",
          message: `Failed: ${msg}`,
          overall_percent: lastProgress.current?.overall_percent ?? 0,
          stages: lastProgress.current?.stages ?? [],
        });
      }
    } finally {
      setBusy(false);
    }
  }

  async function cancelUpdate() {
    await api.cancelUpdateCardData();
  }

  async function switchLibrary(path: string) {
    try {
      setStatus(await api.setLibraryPath(path));
    } catch (err) {
      setProgress({
        stage: "error",
        message: `Couldn't open that library: ${String(err)}`,
        overall_percent: 0,
        stages: lastProgress.current?.stages ?? [],
      });
    }
  }

  async function openLibrary() {
    const path = await open({
      title: "Open an existing library.db",
      filters: [{ name: "SQLite", extensions: ["db", "sqlite"] }],
    });
    if (typeof path === "string") await switchLibrary(path);
  }

  async function newLibrary() {
    const path = await save({
      title: "Create a new library.db (put it in a synced folder)",
      defaultPath: "library.db",
      filters: [{ name: "SQLite", extensions: ["db", "sqlite"] }],
    });
    if (typeof path === "string") await switchLibrary(path);
  }

  const ready = status?.reference_ready ?? false;

  return (
    <HoverPreviewProvider>
      <div className="app">
        <nav className="nav-rail">
          <div className="brand">
            <span className="brand-mark">M</span>
            <span className="brand-text">MTG Library</span>
          </div>

          <div className="nav-items">
            {NAV.map((n) => (
              <button
                key={n.id}
                className={`nav-item ${tab === n.id ? "active" : ""}`}
                onClick={() => setTab(n.id)}
              >
                <span className="nav-icon">{n.icon}</span>
                {n.label}
              </button>
            ))}
          </div>

          <div className="nav-foot">
            <span className={`status-dot ${ready ? "on" : "off"}`} />
            {ready ? `${status?.card_count.toLocaleString()} cards` : "No card data"}
          </div>
        </nav>

        <div className="main">
          <header className="topbar">
            <span className="path" title={status?.library_path ?? ""}>
              {status?.library_path ?? ""}
            </span>
            <button onClick={openLibrary} disabled={busy}>
              {ICON_OPEN_LIBRARY}
              Open Library
            </button>
            <button onClick={newLibrary} disabled={busy}>
              {ICON_NEW_LIBRARY}
              New Library
            </button>
            <button onClick={updateCardData} disabled={busy} className="primary">
              {ICON_DOWNLOAD}
              {ready ? "Update card data" : "Download card data"}
            </button>
          </header>

          {progress && (
            <div className={`ingest-bar ingest-bar-${progress.stage}`}>
              <div className="ingest-bar-head">
                <span className="ingest-bar-message">{progress.message}</span>
                <span className="spacer" />
                {busy && (
                  <button className="ingest-bar-cancel" onClick={cancelUpdate}>
                    Cancel
                  </button>
                )}
                {!busy &&
                  (progress.stage === "done" ||
                    progress.stage === "error" ||
                    progress.stage === "cancelled") && (
                    <button
                      className="ingest-bar-dismiss"
                      onClick={() => setProgress(null)}
                      title="Dismiss"
                    >
                      ✕
                    </button>
                  )}
              </div>
              <div className="ingest-segments">
                {progress.stages.map((s, i) => (
                  <div
                    key={s.id}
                    className={`ingest-segment ${s.id === progress.stage ? "active" : ""}`}
                    style={{ flexGrow: s.weight, flexBasis: 0 }}
                  >
                    <div className="ingest-segment-track">
                      <div
                        className="ingest-segment-fill"
                        style={{ width: `${segmentFill(progress.stages, i, progress.overall_percent)}%` }}
                      />
                    </div>
                    <span className="ingest-segment-label">{s.label}</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          <div className="content">
            {!ready ? (
              <div className="empty-state">
                <div className="empty-mark">✦</div>
                <h2>Welcome to your MTG library</h2>
                <p className="hint">
                  No card database yet. Click <strong>Download card data</strong> to fetch
                  the latest cards from Scryfall (a few hundred MB, about a minute). The
                  reference data stays on this device — only your library file is meant to
                  be synced.
                </p>
                <button className="primary big" onClick={updateCardData} disabled={busy}>
                  {ICON_DOWNLOAD}
                  {busy ? "Downloading…" : "Download card data"}
                </button>
              </div>
            ) : tab === "add" ? (
              <CardEntry />
            ) : tab === "library" ? (
              <LibraryBrowser />
            ) : (
              <DeckView />
            )}
          </div>
        </div>
      </div>
    </HoverPreviewProvider>
  );
}