aurora-curator/src/components/RenamePanel.tsx

import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
import { invoke } from "@tauri-apps/api/core";
import {
  ClearIcon,
  DownIcon,
  FetchIcon,
  GearIcon,
  HistoryIcon,
  KeyIcon,
  LoadIcon,
  PresetsIcon,
  RemoveIcon,
  UpIcon,
} from "./Icons";

interface Item {
  id: string;
  originalName: string;
  ext: string;
  bindings: Record<string, string> | null; // null = no data to preview with (rendered muted)
  isSample: boolean;
}

interface FileEntry {
  path: string;
  name: string; // filename without extension
  ext: string;
}

// Result of the local, filename-only season/episode matcher (renamr-core's
// `matching` module, exposed via the `guess_episode` Tauri command). No network calls -
// this only recognizes patterns already present in the filename text itself.
interface EpisodeGuess {
  seriesName: string;
  season: number;
  episode: number;
}

function pad2(n: number): string {
  return n.toString().padStart(2, "0");
}

// One row of the on-disk rename plan shown in the confirmation modal before anything
// touches the filesystem. `id`/`source` are the file's current full path.
interface RenamePlanEntry {
  id: string;
  source: string;
  currentName: string;
  newName: string;
}

// Mirrors renamr-core's `RenameOutcome` (serde-tagged on "status"). Conflict policy is
// fixed at skip - a colliding target is never overwritten, just reported.
type RenameOutcome =
  | { status: "renamed"; newPath: string }
  | { status: "unchanged" }
  | { status: "skippedConflict"; existingPath: string }
  | { status: "failed"; error: string };

interface RenameResult {
  source: string;
  outcome: RenameOutcome;
}

// Sent to `fetch_metadata`: one file's local guess (from Match) to resolve against
// real TMDB data. Needs a series name + season/episode to search with - exactly what
// Match already produces offline, which is why Fetch Data requires Match to have run
// first rather than doing its own from-scratch identification.
interface FetchQuery {
  id: string;
  seriesQuery: string;
  season: number;
  episode: number;
}

// Mirrors renamr-core's `FetchOutcome` (serde-tagged on "status").
type FetchOutcome =
  | { status: "found"; seriesName: string; episodeTitle: string; airDate: string | null }
  | { status: "notFound" }
  | { status: "failed"; error: string };

interface FetchResult {
  id: string;
  outcome: FetchOutcome;
}

// Rename history / undo. Mirrors renamr-core's `history` module (serde-tagged on
// "status" for the outcome, same convention as RenameOutcome/FetchOutcome above).
interface HistoryEntry {
  source: string;
  newPath: string;
}

interface HistoryBatch {
  id: string;
  /// Unix epoch milliseconds - formatted client-side with `Date`.
  timestamp: number;
  entries: HistoryEntry[];
}

type RevertOutcome =
  | { status: "reverted"; restoredPath: string }
  | { status: "skippedConflict"; existingPath: string }
  | { status: "failed"; error: string };

interface RevertResult {
  source: string;
  outcome: RevertOutcome;
}

function fileNameFromPath(path: string): string {
  const parts = path.split(/[\\/]/);
  return parts[parts.length - 1] ?? path;
}

// Shown until the user loads real files, so the two-pane layout and live naming-scheme
// preview are visible immediately. Item 4 demonstrates the "no data" muted row style.
// This is what full metadata-matched renaming will look like once the matching engine
// (see the porting roadmap) is ported — real loaded files use their own filename fields
// instead (see realFileBindings below) since there's no online identification yet.
const SAMPLE_ITEMS: Item[] = [
  {
    id: "sample-1",
    originalName: "Breaking.Bad.S05E14.720p.HDTV.x264-KILLERS.mkv",
    ext: "mkv",
    bindings: {
      n: "Breaking Bad",
      s00e00: "S05E14",
      t: "Ozymandias",
      "show name": "Breaking Bad",
      "season number": "5",
      "episode number": "14",
      "episode name": "Ozymandias",
    },
    isSample: true,
  },
  {
    id: "sample-2",
    originalName: "Breaking.Bad.S05E15.720p.HDTV.x264-KILLERS.mkv",
    ext: "mkv",
    bindings: {
      n: "Breaking Bad",
      s00e00: "S05E15",
      t: "Granite State",
      "show name": "Breaking Bad",
      "season number": "5",
      "episode number": "15",
      "episode name": "Granite State",
    },
    isSample: true,
  },
  {
    id: "sample-3",
    originalName: "The.Office.US.S03E01.DVDRip.XviD-SAiNTS.avi",
    ext: "avi",
    bindings: {
      n: "The Office (US)",
      s00e00: "S03E01",
      t: "Gay Witch Hunt",
      "show name": "The Office (US)",
      "season number": "3",
      "episode number": "01",
      "episode name": "Gay Witch Hunt",
    },
    isSample: true,
  },
  {
    id: "sample-4",
    originalName: "random_video_file.mp4",
    ext: "mp4",
    bindings: null,
    isSample: true,
  },
];

// The user's own preferred naming scheme (their words: "I personally like {show name} -
// {season number}x{episode number} - {episode name}") - this is Renamr's default now,
// not just an example. `{show name}`/`{season number}`/etc. are multi-word plain-field
// binding names, which work via renamr-core's ExpressionFormat plain-field-name
// fallback (ExpressionError-free even though they aren't valid Rhai identifiers).
const SAMPLE_EXPRESSION = "{show name} - {season number}x{episode number} - {episode name}";
// The matching engine isn't ported yet, so real loaded files only have their own
// filename-derived fields to preview with (mirrors the original's plain FileNameFormatter,
// used whenever a file has no online match).
const REAL_FILE_EXPRESSION = "{name}";
// What Match alone can fill in (no episode title yet - that needs Fetch Data).
const MATCHED_EXPRESSION = "{show name} - {season number}x{episode number}";
// What Match + Fetch Data together can fill in.
const FETCHED_EXPRESSION = "{show name} - {season number}x{episode number} - {episode name}";

function realFileToItem(entry: FileEntry): Item {
  return {
    id: entry.path,
    originalName: entry.ext ? `${entry.name}.${entry.ext}` : entry.name,
    ext: entry.ext,
    bindings: { name: entry.name, ext: entry.ext },
    isSample: false,
  };
}

function ListButton({
  icon,
  label,
  onClick,
  disabled,
}: {
  icon: JSX.Element;
  label: string;
  onClick: () => void;
  disabled?: boolean;
}) {
  return (
    <button className="list-icon-button" title={label} onClick={onClick} disabled={disabled}>
      {icon}
    </button>
  );
}

function LoadMenuButton({ onFiles, onFolder }: { onFiles: () => void; onFolder: () => void }) {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!open) return;
    const onOutside = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener("mousedown", onOutside);
    return () => document.removeEventListener("mousedown", onOutside);
  }, [open]);

  return (
    <div className="load-menu" ref={ref}>
      <ListButton icon={<LoadIcon />} label="Load Files" onClick={() => setOpen((v) => !v)} />
      {open && (
        <div className="load-menu-popup">
          <button
            onClick={() => {
              setOpen(false);
              onFiles();
            }}
          >
            Select Files…
          </button>
          <button
            onClick={() => {
              setOpen(false);
              onFolder();
            }}
          >
            Select Folder…
          </button>
        </div>
      )}
    </div>
  );
}

export default function RenamePanel() {
  const [expression, setExpression] = useState(SAMPLE_EXPRESSION);
  const [editingFormat, setEditingFormat] = useState(false);
  const [items, setItems] = useState<Item[]>(SAMPLE_ITEMS);
  const [selected, setSelected] = useState<string | null>(SAMPLE_ITEMS[0].id);
  const [computedNames, setComputedNames] = useState<Record<string, string>>({});
  const [computeError, setComputeError] = useState<string | null>(null);
  const [status, setStatus] = useState<string | null>(null);
  // Non-null while the "confirm before touching disk" modal is open.
  const [renamePlan, setRenamePlan] = useState<RenamePlanEntry[] | null>(null);
  const [renamePlanSkipped, setRenamePlanSkipped] = useState(0);
  const [renaming, setRenaming] = useState(false);
  // TMDB token state for "Fetch Data". `null` = not checked yet, `false` = checked and
  // nothing saved, `true` = a token is on file (the value itself never comes back to
  // the frontend after saving - see Settings modal below).
  const [hasTmdbToken, setHasTmdbToken] = useState<boolean | null>(null);
  const [settingsOpen, setSettingsOpen] = useState(false);
  const [tmdbTokenInput, setTmdbTokenInput] = useState("");
  const [savingSettings, setSavingSettings] = useState(false);
  const [fetching, setFetching] = useState(false);
  // Rename history / undo. `null` batches = not loaded yet (also used to show a
  // loading state the first time the History panel is opened).
  const [historyOpen, setHistoryOpen] = useState(false);
  const [historyBatches, setHistoryBatches] = useState<HistoryBatch[] | null>(null);
  const [undoingBatchId, setUndoingBatchId] = useState<string | null>(null);

  useEffect(() => {
    invoke<string | null>("get_tmdb_token")
      .then((token) => setHasTmdbToken(!!token))
      .catch(() => setHasTmdbToken(false));
  }, []);

  // Refs so the drag-and-drop listener (registered once on mount) always sees the
  // latest expression/items instead of the stale values from its first render.
  const expressionRef = useRef(expression);
  useEffect(() => {
    expressionRef.current = expression;
  }, [expression]);

  useEffect(() => {
    let cancelled = false;

    Promise.all(
      items.map(async (item) => {
        if (!item.bindings) return [item.id, null] as const;
        const rendered = await invoke<string>("render_expression", {
          expression,
          bindings: item.bindings,
        });
        return [item.id, `${rendered}${item.ext ? `.${item.ext}` : ""}`] as const;
      })
    )
      .then((entries) => {
        if (cancelled) return;
        const next: Record<string, string> = {};
        for (const [id, name] of entries) {
          if (name) next[id] = name;
        }
        setComputedNames(next);
        setComputeError(null);
      })
      .catch((err) => {
        if (cancelled) return;
        setComputeError(String(err));
      });

    return () => {
      cancelled = true;
    };
  }, [expression, items]);

  const notImplemented = (feature: string) => {
    setStatus(`${feature} isn't implemented yet — see the porting roadmap in the README.`);
    window.clearTimeout((notImplemented as any)._t);
    (notImplemented as any)._t = window.setTimeout(() => setStatus(null), 3200);
  };

  const addRealFiles = (entries: FileEntry[]) => {
    if (entries.length === 0) return;

    // Only auto-switch the naming scheme the first time real files replace the demo,
    // and only if the user hasn't already customized it.
    if (expressionRef.current === SAMPLE_EXPRESSION) {
      setExpression(REAL_FILE_EXPRESSION);
    }

    setItems((prev) => {
      const real = prev.filter((i) => !i.isSample);
      const existing = new Set(real.map((i) => i.id));
      const added = entries.map(realFileToItem).filter((i) => !existing.has(i.id));
      const next = [...real, ...added];
      if (added.length > 0) setSelected(added[0].id);
      return next;
    });
  };

  const loadFiles = () => {
    invoke<FileEntry[]>("pick_files")
      .then(addRealFiles)
      .catch((err) => setStatus(`Couldn't open the file picker: ${err}`));
  };

  const loadFolder = () => {
    invoke<FileEntry[]>("pick_folder")
      .then(addRealFiles)
      .catch((err) => setStatus(`Couldn't open the folder picker: ${err}`));
  };

  // OS drag-and-drop of files/folders onto the window.
  useEffect(() => {
    let unlisten: (() => void) | undefined;
    let cancelled = false;

    import("@tauri-apps/api/webview")
      .then(({ getCurrentWebview }) =>
        getCurrentWebview().onDragDropEvent((event) => {
          if (event.payload.type === "drop") {
            invoke<FileEntry[]>("expand_dropped_paths", { paths: event.payload.paths })
              .then(addRealFiles)
              .catch((err) => setStatus(`Couldn't read dropped files: ${err}`));
          }
        })
      )
      .then((fn) => {
        if (cancelled) fn();
        else unlisten = fn;
      })
      .catch(() => {
        // Not running inside Tauri (e.g. a plain browser preview) - drag-and-drop
        // just won't be available there; the Load button still works via invoke.
      });

    return () => {
      cancelled = true;
      unlisten?.();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Local, filename-based season/episode detection (renamr-core's `matching` module).
  // Populates `{n}`/`{s00e00}`/`{season}`/`{episode}` bindings from patterns already
  // present in the filename text - no network calls, no metadata lookup, so it's
  // distinct from (and much cheaper than) "Fetch Data" online matching, which still
  // isn't built.
  const runMatching = async () => {
    const targets = items.filter((i) => !i.isSample);
    if (targets.length === 0) {
      setStatus("Load some files first, then Match will scan their names for season/episode info.");
      window.clearTimeout((runMatching as any)._t);
      (runMatching as any)._t = window.setTimeout(() => setStatus(null), 3200);
      return;
    }

    const results = await Promise.all(
      targets.map(async (item) => {
        try {
          const guess = await invoke<EpisodeGuess | null>("guess_episode", {
            filename: item.originalName,
          });
          return [item.id, guess] as const;
        } catch {
          return [item.id, null] as const;
        }
      })
    );
    const guesses = new Map(results);
    // Count matches from the results directly, not inside the setItems updater below:
    // React doesn't run a functional updater synchronously, so a counter mutated in
    // there wouldn't be ready yet for the status message/auto-upgrade check right after.
    const matched = results.filter(([, guess]) => guess !== null).length;

    setItems((prev) =>
      prev.map((item) => {
        const guess = guesses.get(item.id);
        if (!guess) return item;
        const seriesName = guess.seriesName || item.bindings?.name || item.originalName;
        return {
          ...item,
          bindings: {
            ...item.bindings,
            // FileBot-style short names, for compatibility with expressions that use them.
            n: seriesName,
            s00e00: `S${pad2(guess.season)}E${pad2(guess.episode)}`,
            season: String(guess.season),
            episode: String(guess.episode),
            // Human-readable aliases (this is what the default naming scheme uses).
            "show name": seriesName,
            "season number": String(guess.season),
            "episode number": pad2(guess.episode),
          },
        };
      })
    );

    // Showcase the newly-populated fields, but only the first time and only if the
    // user hasn't already customized the naming scheme away from the plain-filename
    // default.
    if (expressionRef.current === REAL_FILE_EXPRESSION && matched > 0) {
      setExpression(MATCHED_EXPRESSION);
    }

    setStatus(
      matched > 0
        ? `Matched season/episode on ${matched} of ${targets.length} file${targets.length === 1 ? "" : "s"} (filename-based, local only).`
        : "No season/episode pattern recognized in the loaded filenames."
    );
    window.clearTimeout((runMatching as any)._t);
    (runMatching as any)._t = window.setTimeout(() => setStatus(null), 4000);
  };

  // Step 1 of Rename: build the plan (old path -> new filename) from the live preview
  // that's already on screen, and open the confirmation modal. Nothing on disk is
  // touched here - only `confirmRename` below actually calls the Rust rename command,
  // and only after the user explicitly approves the plan they can see.
  const prepareRename = () => {
    const targets = items.filter((i) => !i.isSample);
    if (targets.length === 0) {
      setStatus("Load some real files first — Rename needs files on disk to work with.");
      window.clearTimeout((prepareRename as any)._t);
      (prepareRename as any)._t = window.setTimeout(() => setStatus(null), 3200);
      return;
    }

    const plan: RenamePlanEntry[] = [];
    let skippedNoPreview = 0;
    for (const item of targets) {
      const newName = computedNames[item.id];
      if (!newName) {
        skippedNoPreview += 1;
        continue;
      }
      if (newName === item.originalName) continue; // already correct, nothing to do
      plan.push({ id: item.id, source: item.id, currentName: item.originalName, newName });
    }

    if (plan.length === 0) {
      setStatus(
        skippedNoPreview > 0
          ? "Nothing to rename yet — the naming scheme couldn't be computed for those files (check the naming scheme for errors)."
          : "Nothing to rename — the computed names already match the current filenames."
      );
      window.clearTimeout((prepareRename as any)._t);
      (prepareRename as any)._t = window.setTimeout(() => setStatus(null), 4000);
      return;
    }

    setRenamePlanSkipped(skippedNoPreview);
    setRenamePlan(plan);
  };

  // Step 2: the user approved the plan shown in the modal - actually rename the files
  // on disk via the Rust `execute_rename` command, then reconcile local state (a
  // renamed file's id, which is its path, changes) and report the outcome.
  const confirmRename = async () => {
    if (!renamePlan) return;
    setRenaming(true);

    try {
      const results = await invoke<RenameResult[]>("execute_rename", {
        items: renamePlan.map((p) => ({ source: p.source, newName: p.newName })),
      });
      const bySource = new Map(results.map((r) => [r.source, r] as const));
      // Compute counts from `results` directly, not inside the setItems updater below:
      // React doesn't run a functional updater synchronously, so counters mutated in
      // there aren't ready yet when building the status message right after (this bit
      // runMatching earlier - same fix applies here).
      const renamed = results.filter((r) => r.outcome.status === "renamed").length;
      const skipped = results.filter((r) => r.outcome.status === "skippedConflict").length;
      const failed = results.filter((r) => r.outcome.status === "failed").length;

      setItems((prev) =>
        prev.map((item) => {
          const result = bySource.get(item.id);
          if (!result) return item;

          if (result.outcome.status === "renamed") {
            const newFileName = fileNameFromPath(result.outcome.newPath);
            const [base, ext] = splitExt(newFileName);
            return {
              ...item,
              id: result.outcome.newPath,
              originalName: newFileName,
              ext,
              bindings: item.bindings ? { ...item.bindings, name: base, ext } : item.bindings,
            };
          }
          return item;
        })
      );

      // Keep the current selection pointing at the same logical file if its id (path)
      // changed underneath it.
      setSelected((prevSelected) => {
        if (!prevSelected) return prevSelected;
        const result = bySource.get(prevSelected);
        return result?.outcome.status === "renamed" ? result.outcome.newPath : prevSelected;
      });

      const parts = [`Renamed ${renamed} file${renamed === 1 ? "" : "s"}`];
      if (skipped > 0) parts.push(`${skipped} skipped (name already exists)`);
      if (failed > 0) parts.push(`${failed} failed`);
      setStatus(parts.join(", ") + ".");
    } catch (err) {
      setStatus(`Rename failed: ${err}`);
    } finally {
      setRenaming(false);
      setRenamePlan(null);
      window.clearTimeout((confirmRename as any)._t);
      (confirmRename as any)._t = window.setTimeout(() => setStatus(null), 5000);
    }
  };

  const cancelRename = () => {
    if (renaming) return;
    setRenamePlan(null);
  };

  // Rename history / undo - Renamr's only safety net beyond the confirm-before-execute
  // step, since a filesystem rename has no OS-level undo. `execute_rename` records a
  // batch of every successfully-renamed file after each Rename; this panel lists those
  // batches and can revert one back to its original paths.
  const openHistory = () => {
    setHistoryOpen(true);
    invoke<HistoryBatch[]>("list_rename_history")
      .then(setHistoryBatches)
      .catch((err) => {
        setHistoryBatches([]);
        setStatus(`Couldn't load rename history: ${err}`);
      });
  };

  const closeHistory = () => {
    if (undoingBatchId) return;
    setHistoryOpen(false);
  };

  const undoBatch = async (batch: HistoryBatch) => {
    setUndoingBatchId(batch.id);
    try {
      const results = await invoke<RevertResult[]>("undo_rename_batch", { batchId: batch.id });
      // Compute counts from `results` directly, not inside the setItems updater below -
      // same rule as runMatching/confirmRename/runFetch above (React doesn't run a
      // functional updater synchronously, so a counter mutated in there wouldn't be
      // ready yet when building the status message right after).
      const bySource = new Map(results.map((r) => [r.source, r] as const));
      const reverted = results.filter((r) => r.outcome.status === "reverted").length;
      const skipped = results.filter((r) => r.outcome.status === "skippedConflict").length;
      const failed = results.filter((r) => r.outcome.status === "failed").length;

      // Reconcile any currently-loaded item that was part of this batch back to its
      // pre-rename path/filename - mirrors confirmRename's post-rename reconciliation.
      setItems((prev) =>
        prev.map((item) => {
          const result = bySource.get(item.id);
          if (!result || result.outcome.status !== "reverted") return item;
          const restoredFileName = fileNameFromPath(result.outcome.restoredPath);
          const [base, ext] = splitExt(restoredFileName);
          return {
            ...item,
            id: result.outcome.restoredPath,
            originalName: restoredFileName,
            ext,
            bindings: item.bindings ? { ...item.bindings, name: base, ext } : item.bindings,
          };
        })
      );
      setSelected((prevSelected) => {
        if (!prevSelected) return prevSelected;
        const result = bySource.get(prevSelected);
        return result?.outcome.status === "reverted" ? result.outcome.restoredPath : prevSelected;
      });

      setHistoryBatches((prev) => (prev ? prev.filter((b) => b.id !== batch.id) : prev));

      const parts = [`Reverted ${reverted} file${reverted === 1 ? "" : "s"}`];
      if (skipped > 0) parts.push(`${skipped} skipped (something else is there now)`);
      if (failed > 0) parts.push(`${failed} failed`);
      setStatus(parts.join(", ") + ".");
    } catch (err) {
      setStatus(`Undo failed: ${err}`);
    } finally {
      setUndoingBatchId(null);
      window.clearTimeout((undoBatch as any)._t);
      (undoBatch as any)._t = window.setTimeout(() => setStatus(null), 5000);
    }
  };

  const openSettings = () => {
    setTmdbTokenInput("");
    setSettingsOpen(true);
  };

  const saveTmdbToken = async () => {
    const trimmed = tmdbTokenInput.trim();
    if (!trimmed) {
      // Nothing typed - just close, leaving whatever was already saved untouched.
      setSettingsOpen(false);
      return;
    }
    setSavingSettings(true);
    try {
      await invoke("save_tmdb_token", { token: trimmed });
      setHasTmdbToken(true);
      setTmdbTokenInput("");
      setSettingsOpen(false);
      setStatus("TMDB token saved.");
      window.clearTimeout((saveTmdbToken as any)._t);
      (saveTmdbToken as any)._t = window.setTimeout(() => setStatus(null), 3000);
    } catch (err) {
      setStatus(`Couldn't save the token: ${err}`);
    } finally {
      setSavingSettings(false);
    }
  };

  const clearTmdbToken = async () => {
    setSavingSettings(true);
    try {
      await invoke("save_tmdb_token", { token: "" });
      setHasTmdbToken(false);
      setTmdbTokenInput("");
      setStatus("TMDB token removed.");
      window.clearTimeout((clearTmdbToken as any)._t);
      (clearTmdbToken as any)._t = window.setTimeout(() => setStatus(null), 3000);
    } catch (err) {
      setStatus(`Couldn't remove the token: ${err}`);
    } finally {
      setSavingSettings(false);
    }
  };

  // "Fetch Data": resolve each already-Matched file's local guess against real TMDB
  // metadata. Requires Match to have already populated a series name + season/episode
  // (that's the search query) - this is deliberately layered on top of local matching,
  // not a replacement for it.
  const runFetch = async () => {
    if (hasTmdbToken === false) {
      setStatus("Add a free TMDB API token in Settings first, then Fetch Data will work.");
      setSettingsOpen(true);
      window.clearTimeout((runFetch as any)._t);
      (runFetch as any)._t = window.setTimeout(() => setStatus(null), 4000);
      return;
    }

    const targets = items.filter((i) => !i.isSample && i.bindings?.n && i.bindings?.season && i.bindings?.episode);
    if (targets.length === 0) {
      setStatus("Run Match first — Fetch Data needs a guessed series name and season/episode to look up.");
      window.clearTimeout((runFetch as any)._t);
      (runFetch as any)._t = window.setTimeout(() => setStatus(null), 4000);
      return;
    }

    setFetching(true);
    try {
      const query: FetchQuery[] = targets.map((item) => ({
        id: item.id,
        seriesQuery: item.bindings!.n,
        season: Number(item.bindings!.season),
        episode: Number(item.bindings!.episode),
      }));
      const results = await invoke<FetchResult[]>("fetch_metadata", { items: query });
      const byId = new Map(results.map((r) => [r.id, r] as const));

      // Compute counts from `results` directly, not inside the setItems updater below -
      // same rule as runMatching/confirmRename above (React doesn't run a functional
      // updater synchronously, so a counter mutated in there wouldn't be ready yet).
      const found = results.filter((r) => r.outcome.status === "found").length;
      const notFound = results.filter((r) => r.outcome.status === "notFound").length;
      const failed = results.filter((r) => r.outcome.status === "failed").length;

      setItems((prev) =>
        prev.map((item) => {
          const result = byId.get(item.id);
          if (!result || result.outcome.status !== "found") return item;
          const { seriesName, episodeTitle, airDate } = result.outcome;
          return {
            ...item,
            bindings: {
              ...item.bindings,
              // FileBot-style short names, for compatibility.
              n: seriesName,
              t: episodeTitle,
              ...(airDate ? { airdate: airDate } : {}),
              // Human-readable aliases.
              "show name": seriesName,
              "episode name": episodeTitle,
            },
          };
        })
      );

      // Showcase the episode title field, but only the first time and only if the user
      // hasn't already customized the naming scheme away from the Match-set default.
      if (expressionRef.current === MATCHED_EXPRESSION && found > 0) {
        setExpression(FETCHED_EXPRESSION);
      }

      const parts = [`Fetched real metadata for ${found} of ${targets.length} file${targets.length === 1 ? "" : "s"}`];
      if (notFound > 0) parts.push(`${notFound} not found on TMDB`);
      if (failed > 0) parts.push(`${failed} failed`);
      setStatus(parts.join(", ") + ".");
    } catch (err) {
      setStatus(`Fetch failed: ${err}`);
    } finally {
      setFetching(false);
      window.clearTimeout((runFetch as any)._t);
      (runFetch as any)._t = window.setTimeout(() => setStatus(null), 5000);
    }
  };

  const removeSelected = () => {
    if (!selected) return notImplemented("Excluding items");
    setItems((prev) => {
      const idx = prev.findIndex((i) => i.id === selected);
      const next = prev.filter((i) => i.id !== selected);
      const fallback = next[Math.min(idx, next.length - 1)];
      setSelected(fallback ? fallback.id : null);
      return next;
    });
  };

  const clearAll = () => {
    setItems([]);
    setSelected(null);
  };

  const matchedCount = useMemo(() => items.filter((i) => i.bindings).length, [items]);

  const renderOriginalRow = (item: Item) => (
    <Row
      key={item.id}
      selected={selected === item.id}
      muted={!item.bindings}
      onClick={() => setSelected(item.id)}
      text={item.originalName}
      badge={item.ext}
    />
  );

  const renderNameRow = (item: Item) => {
    const name = computedNames[item.id];
    const [base, ext] = name ? splitExt(name) : [null, item.ext];
    return (
      <Row
        key={item.id}
        selected={selected === item.id}
        muted={!item.bindings}
        onClick={() => setSelected(item.id)}
        text={item.bindings ? base ?? "…" : "No data"}
        badge={ext}
      />
    );
  };

  return (
    <div className="rename-panel">
      <div className="rename-lists">
        <ListCard
          title="Original Files"
          items={items}
          renderRow={renderOriginalRow}
          emptyHint="Drop files or folders here, or click Load"
          buttonRow={
            <>
              <ListButton icon={<DownIcon />} label="Align Down" onClick={() => notImplemented("Reordering")} />
              <ListButton icon={<UpIcon />} label="Align Up" onClick={() => notImplemented("Reordering")} />
              <LoadMenuButton onFiles={loadFiles} onFolder={loadFolder} />
              <span className="list-button-gap" />
              <ListButton icon={<RemoveIcon />} label="Exclude Selected" onClick={removeSelected} />
              <ListButton icon={<ClearIcon />} label="Clear" onClick={clearAll} />
              <ListButton icon={<HistoryIcon />} label="History" onClick={openHistory} />
              <ListButton icon={<PresetsIcon />} label="Presets" onClick={() => notImplemented("Presets")} />
            </>
          }
        />

        <div className="rename-actions">
          <button className="action-button" onClick={runMatching}>
            Match
          </button>
          <button className="action-button primary" onClick={prepareRename}>
            Rename
          </button>
        </div>

        <ListCard
          title="New Names"
          items={items}
          renderRow={renderNameRow}
          emptyHint="Naming-scheme preview appears here"
          buttonRow={
            <>
              <ListButton icon={<DownIcon />} label="Align Down" onClick={() => notImplemented("Reordering")} />
              <ListButton icon={<UpIcon />} label="Align Up" onClick={() => notImplemented("Reordering")} />
              <LoadMenuButton onFiles={loadFiles} onFolder={loadFolder} />
              <span className="list-button-gap" />
              <ListButton icon={<FetchIcon />} label="Fetch Data" onClick={runFetch} disabled={fetching} />
              <ListButton icon={<KeyIcon />} label="TMDB Settings" onClick={openSettings} />
              <ListButton icon={<GearIcon />} label="Naming Scheme" onClick={() => setEditingFormat((v) => !v)} />
            </>
          }
        />
      </div>

      {editingFormat && (
        <div className="format-editor">
          <label htmlFor="expression">Naming scheme</label>
          <input
            id="expression"
            value={expression}
            spellCheck={false}
            onChange={(e) => setExpression(e.target.value)}
          />
          {computeError && <p className="format-error">{computeError}</p>}
          <p className="format-hint">
            This field is fully yours to edit — type any combination of literal text and{" "}
            <code>{"{field}"}</code> placeholders and the preview updates live against {matchedCount} of{" "}
            {items.length} file{items.length === 1 ? "" : "s"} (the real Rust naming-expression engine, through
            Tauri). Every field below works as a plain <code>{"{field name}"}</code>, spaces and all — no coding
            required — plus the whole thing also accepts real{" "}
            <a href="https://rhai.rs/" target="_blank" rel="noreferrer">
              Rhai
            </a>{" "}
            script for anyone who wants it (e.g. <code>{"{show name.to_upper()}"}</code>).
          </p>
          <div className="format-fields">
            <div className="format-fields-group">
              <span className="format-fields-group-title">Always available</span>
              <code>{"{name}"}</code>
              <code>{"{ext}"}</code>
            </div>
            <div className="format-fields-group">
              <span className="format-fields-group-title">
                After <strong>Match</strong> (local, offline)
              </span>
              <code>{"{show name}"}</code>
              <code>{"{season number}"}</code>
              <code>{"{episode number}"}</code>
            </div>
            <div className="format-fields-group">
              <span className="format-fields-group-title">
                After <strong>Fetch Data</strong> (real TMDB metadata)
              </span>
              <code>{"{episode name}"}</code>
              <code>{"{airdate}"}</code>
            </div>
          </div>
          <p className="format-hint">
            Match scans filenames locally for season/episode patterns (no network calls); Fetch Data resolves that
            guess against real TMDB metadata for the real episode title and air date — needs a free TMDB API token
            set in <strong>TMDB Settings</strong> first. FileBot's own short field names (<code>{"{n}"}</code>,{" "}
            <code>{"{s00e00}"}</code>, <code>{"{t}"}</code>, etc.) still work too, side by side with the names above.
          </p>
          <p className="format-hint">
            Use <code>{"/"}</code> in the scheme to organize files into subfolders as part of renaming, e.g.{" "}
            <code>{"{show name}/{episode name}"}</code> puts each show in its own folder. Missing folders are created
            automatically; nothing outside the file's own folder tree is ever touched.
          </p>
        </div>
      )}

      {status && <div className="status-bar">{status}</div>}

      {renamePlan && (
        <div className="modal-overlay" onClick={cancelRename}>
          <div className="modal-card" onClick={(e) => e.stopPropagation()}>
            <h2 className="modal-title">Confirm Rename</h2>
            <p className="modal-subtitle">
              This will rename {renamePlan.length} file{renamePlan.length === 1 ? "" : "s"} on disk right now.
              There's no undo yet — review the list below before continuing.
              {renamePlanSkipped > 0 &&
                ` (${renamePlanSkipped} other file${renamePlanSkipped === 1 ? "" : "s"} excluded: no valid preview.)`}
              {renamePlan.some((p) => p.newName.includes("/")) &&
                " Some of these also move the file into a new subfolder — any missing folders are created automatically."}
            </p>
            <div className="modal-plan-list">
              {renamePlan.map((p) => (
                <div className="modal-plan-row" key={p.id}>
                  <span className="modal-plan-old" title={p.currentName}>
                    {p.currentName}
                  </span>
                  <span className="modal-plan-arrow">→</span>
                  <span className="modal-plan-new" title={p.newName}>
                    {p.newName}
                  </span>
                </div>
              ))}
            </div>
            <p className="modal-note">
              If a computed name already exists on disk, that file is skipped rather than overwritten.
            </p>
            <div className="modal-actions">
              <button className="action-button" onClick={cancelRename} disabled={renaming}>
                Cancel
              </button>
              <button className="action-button primary" onClick={confirmRename} disabled={renaming}>
                {renaming ? "Renaming…" : `Rename ${renamePlan.length} File${renamePlan.length === 1 ? "" : "s"}`}
              </button>
            </div>
          </div>
        </div>
      )}

      {settingsOpen && (
        <div className="modal-overlay" onClick={() => !savingSettings && setSettingsOpen(false)}>
          <div className="modal-card modal-card-compact" onClick={(e) => e.stopPropagation()}>
            <h2 className="modal-title">TMDB Settings</h2>
            <p className="modal-subtitle">
              Fetch Data uses{" "}
              <a href="https://www.themoviedb.org/" target="_blank" rel="noreferrer">
                TheMovieDB
              </a>{" "}
              to resolve local guesses into real episode titles and air dates. Get a free{" "}
              <strong>API Read Access Token</strong> from your TMDB account under Settings → API, then paste it below.
              The token is stored locally on this machine and never leaves it except to call TMDB directly.
            </p>
            <label htmlFor="tmdb-token" className="modal-field-label">
              API Read Access Token
            </label>
            <input
              id="tmdb-token"
              className="modal-text-input"
              type="password"
              autoComplete="off"
              spellCheck={false}
              value={tmdbTokenInput}
              onChange={(e) => setTmdbTokenInput(e.target.value)}
              placeholder={hasTmdbToken ? "•••••••••• (already saved — enter a new token to replace it)" : "Paste your TMDB token here"}
            />
            <div className="modal-actions modal-actions-split">
              {hasTmdbToken ? (
                <button className="action-button" onClick={clearTmdbToken} disabled={savingSettings}>
                  Remove Token
                </button>
              ) : (
                <span />
              )}
              <div className="modal-actions">
                <button className="action-button" onClick={() => setSettingsOpen(false)} disabled={savingSettings}>
                  Cancel
                </button>
                <button className="action-button primary" onClick={saveTmdbToken} disabled={savingSettings}>
                  {savingSettings ? "Saving…" : "Save"}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {historyOpen && (
        <div className="modal-overlay" onClick={closeHistory}>
          <div className="modal-card" onClick={(e) => e.stopPropagation()}>
            <h2 className="modal-title">Rename History</h2>
            <p className="modal-subtitle">
              Every completed rename is logged here so it can be undone. Undoing moves each file back to its
              original path — if something else now exists there, that one file is skipped rather than overwritten.
              The log keeps the most recent 50 rename operations.
            </p>
            {historyBatches === null ? (
              <p className="modal-note">Loading…</p>
            ) : historyBatches.length === 0 ? (
              <p className="modal-note">No renames yet — this fills in after you use Rename.</p>
            ) : (
              <div className="modal-plan-list history-batch-list">
                {historyBatches.map((batch) => (
                  <div className="history-batch" key={batch.id}>
                    <div className="history-batch-header">
                      <span className="history-batch-when">{new Date(batch.timestamp).toLocaleString()}</span>
                      <span className="history-batch-count">
                        {batch.entries.length} file{batch.entries.length === 1 ? "" : "s"}
                      </span>
                      <button
                        className="action-button history-undo-button"
                        onClick={() => undoBatch(batch)}
                        disabled={undoingBatchId !== null}
                      >
                        {undoingBatchId === batch.id ? "Undoing…" : "Undo"}
                      </button>
                    </div>
                    <div className="history-batch-entries">
                      {batch.entries.map((entry, i) => (
                        <div className="modal-plan-row" key={i}>
                          <span className="modal-plan-old" title={entry.newPath}>
                            {fileNameFromPath(entry.newPath)}
                          </span>
                          <span className="modal-plan-arrow">→</span>
                          <span className="modal-plan-new" title={entry.source}>
                            {fileNameFromPath(entry.source)}
                          </span>
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            )}
            <div className="modal-actions">
              <button className="action-button" onClick={closeHistory} disabled={undoingBatchId !== null}>
                Close
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function ListCard({
  title,
  items,
  renderRow,
  emptyHint,
  buttonRow,
}: {
  title: string;
  items: Item[];
  renderRow: (item: Item) => ReactNode;
  emptyHint: string;
  buttonRow: ReactNode;
}) {
  return (
    <div className="list-card">
      <span className="list-card-title">{title}</span>
      <div className="list-card-body">
        {items.length === 0 ? <div className="list-empty-hint">{emptyHint}</div> : items.map(renderRow)}
      </div>
      <div className="list-button-row">{buttonRow}</div>
    </div>
  );
}

function Row({
  text,
  badge,
  selected,
  muted,
  onClick,
}: {
  text: string;
  badge: string | null;
  selected: boolean;
  muted: boolean;
  onClick: () => void;
}) {
  return (
    <div className={`list-row${selected ? " selected" : ""}${muted ? " muted" : ""}`} onClick={onClick}>
      <span className="list-row-text">{text}</span>
      {badge && <span className="list-row-badge">{badge}</span>}
    </div>
  );
}

function splitExt(name: string): [string, string] {
  const i = name.lastIndexOf(".");
  if (i <= 0) return [name, ""];
  return [name.slice(0, i), name.slice(i + 1)];
}