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;
}

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" },
    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" },
    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" },
    isSample: true,
  },
  {
    id: "sample-4",
    originalName: "random_video_file.mp4",
    ext: "mp4",
    bindings: null,
    isSample: true,
  },
];

const SAMPLE_EXPRESSION = "{n} - {s00e00} - {t}";
// 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}";

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);

  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;
        return {
          ...item,
          bindings: {
            ...item.bindings,
            n: guess.seriesName || item.bindings?.name || item.originalName,
            s00e00: `S${pad2(guess.season)}E${pad2(guess.episode)}`,
            season: String(guess.season),
            episode: String(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("{n} - {s00e00}");
    }

    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);
  };

  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,
              n: seriesName,
              t: episodeTitle,
              ...(airDate ? { airdate: airDate } : {}),
            },
          };
        })
      );

      // 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 === "{n} - {s00e00}" && found > 0) {
        setExpression("{n} - {s00e00} - {t}");
      }

      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={() => notImplemented("Rename history")} />
              <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">
            Live preview against {matchedCount} of {items.length} file{items.length === 1 ? "" : "s"}. Runs the real
            Rust naming-expression engine (Rhai-backed) through Tauri. Loaded files start with only{" "}
            <code>{"{name}"}</code>/<code>{"{ext}"}</code> (their own filename) — click <strong>Match</strong> to scan
            filenames locally for season/episode patterns and populate <code>{"{n}"}</code>/<code>{"{s00e00}"}</code>/
            <code>{"{season}"}</code>/<code>{"{episode}"}</code> (no network calls), then <strong>Fetch Data</strong> to
            resolve those guesses against real TMDB metadata and populate <code>{"{t}"}</code> (episode title) and{" "}
            <code>{"{airdate}"}</code> too — needs a free TMDB API token set in <strong>TMDB Settings</strong> first.
          </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.)`}
            </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>
      )}
    </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)];
}