/**
 * @file FileExplorer.tsx
 * @description The workspace file manager, laid out like the Linux desktop's
 * (GNOME Files): a sidebar of places (every workspace the user can see, and
 * the Trash), a header bar (Back / Forward / Up, a clickable path bar,
 * search, grid ↔ list view, labelled **New** and **Upload** menus), and an
 * icon grid (image thumbnails) or a detail list. Hidden (dot) files are
 * hidden until Ctrl+H, as there. Selecting items brings up a labelled action
 * bar (Download, Copy, Cut, Rename, Move to Trash); everything is also on the
 * right-click menu and the usual keys (Enter, Backspace / Alt+↑, Alt+← / →,
 * F2, Delete, Ctrl+A / C / X / V / H / F).
 *
 * `FileBrowser` is the manager itself — the `/files` page (`FilesPage`)
 * renders it full size, `FileExplorer` in a large dialog opened from a
 * workspace's Files tab. Behaviour: delete → the account's Trash (no confirm:
 * restorable 7 days); Copy / Cut then Paste in the same or ANOTHER workspace
 * (the clipboard outlives the dialog); upload files or whole folders (picker
 * or dropped from the desktop), streamed with progress, ≤ 500 MB a batch;
 * drag items onto a folder to move them (Ctrl: copy); download a file as
 * itself, anything else as one zip; a taken name asks Replace / Keep both /
 * Skip. Server side: `/api/lanes/:id/fs/*` (server/lib/file-explorer.js).
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
import type {
  DragEvent as ReactDragEvent,
  KeyboardEvent as ReactKeyboardEvent,
  MouseEvent as ReactMouseEvent,
  ReactNode,
} from "react";
import { createPortal } from "react-dom";
import { useTranslation } from "react-i18next";
import {
  ArrowLeft,
  ArrowRight,
  ArrowUp,
  ChevronDown,
  ChevronRight,
  ClipboardPaste,
  Copy,
  Download,
  EllipsisVertical,
  Eye,
  File as FileIcon,
  FileArchive,
  FileAudio,
  FileCode,
  FileImage,
  FileJson,
  FileSpreadsheet,
  FileText,
  FileVideo,
  Folder,
  FolderGit2,
  FolderSymlink,
  House,
  LayoutGrid,
  Link2,
  List,
  Pencil,
  Plus,
  RotateCcw,
  Scissors,
  Search,
  Trash2,
  Upload,
  UserRound,
  X,
} from "lucide-react";
import {
  api,
  gitTarget,
  type FsConflict,
  type FsEntry,
  type FsListing,
  type FsTrashItem,
  type FsHome,
  type FsPlace,
  isHomePlace,
} from "../../lib/api";
import type { Lane } from "../../lib/types";
import { useDialog } from "../../hooks/useDialog";
import { toast } from "../../lib/toast";
import { formatBytes } from "../../lib/format";
import { copyText } from "../../lib/clipboard";
import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";

/** One upload batch at most (the server caps one file the same). */
export const FX_BATCH_MAX_BYTES = 500 * 1024 * 1024;
const MIME = "application/x-agenthub-fx";
const VIEW_KEY = "agenthub.files.view";
const HIDDEN_KEY = "agenthub.files.hidden";

type Clip = { place: FsPlace; paths: string[]; cut: boolean };
// The clipboard outlives the dialog and a workspace switch, like a desktop's.
let clipboard: Clip | null = null;

/** The workspace id of a place, or null for a home. */
const laneOf = (t: FsPlace) => (isHomePlace(t) ? null : typeof t === "number" ? t : t.lane);
/** A workspace's own folder (not a session worktree or an extra folder), or a home. */
const wholePlace = (t: FsPlace) => isHomePlace(t) || typeof t === "number";
const samePlace = (a: FsPlace, b: FsPlace) => JSON.stringify(a) === JSON.stringify(b);
const join = (dir: string, name: string) => (dir ? `${dir}/${name}` : name);
const errText = (e: unknown) => (e instanceof Error ? e.message : String(e));
const errCode = (e: unknown) => (e as { code?: string })?.code;
const isFolder = (e: FsEntry) => e.type === "dir" || e.type === "linkdir";
const ext = (name: string) => name.slice(name.lastIndexOf(".") + 1).toLowerCase();
const IMAGE = new Set(["png", "jpg", "jpeg", "gif", "webp", "bmp", "ico"]);
const CODE = new Set([
  "js",
  "jsx",
  "ts",
  "tsx",
  "mjs",
  "cjs",
  "py",
  "go",
  "rs",
  "java",
  "kt",
  "c",
  "h",
  "cpp",
  "cs",
  "rb",
  "php",
  "sh",
  "css",
  "scss",
  "html",
  "vue",
  "svelte",
  "sql",
  "yml",
  "yaml",
  "toml",
  "xml",
]);

function readPref(key: string, fallback: string) {
  try {
    return localStorage.getItem(key) ?? fallback;
  } catch {
    return fallback;
  }
}
function writePref(key: string, value: string) {
  try {
    localStorage.setItem(key, value);
  } catch {
    /* a per-browser convenience only */
  }
}

/** Every file under a dropped folder entry, with its path inside the drop. */
async function walkEntry(
  entry: FileSystemEntry,
  prefix: string,
  out: { file: File; rel: string }[]
) {
  if (entry.isFile) {
    const file = await new Promise<File>((ok, no) => (entry as FileSystemFileEntry).file(ok, no));
    out.push({ file, rel: `${prefix}${entry.name}` });
    return;
  }
  const reader = (entry as FileSystemDirectoryEntry).createReader();
  // readEntries answers in pages until it answers [].
  for (;;) {
    const page = await new Promise<FileSystemEntry[]>((ok, no) => reader.readEntries(ok, no));
    if (!page.length) break;
    for (const child of page) await walkEntry(child, `${prefix}${entry.name}/`, out);
  }
}

/** The icon a desktop would show for this entry. */
function EntryIcon({ entry, size }: { entry: FsEntry; size: "lg" | "sm" }) {
  const cls = size === "lg" ? "h-12 w-12" : "h-4 w-4";
  if (entry.type === "dir")
    return <Folder className={`${cls} shrink-0 fill-accent/25 text-accent`} />;
  if (entry.type === "linkdir") return <FolderSymlink className={`${cls} shrink-0 text-accent`} />;
  if (entry.type === "link") return <Link2 className={`${cls} shrink-0 text-fg-muted`} />;
  const e = ext(entry.name);
  const Icon = IMAGE.has(e)
    ? FileImage
    : ["zip", "gz", "tgz", "tar", "rar", "7z", "bz2", "xz"].includes(e)
      ? FileArchive
      : ["json", "jsonc"].includes(e)
        ? FileJson
        : ["csv", "xls", "xlsx", "ods", "tsv"].includes(e)
          ? FileSpreadsheet
          : ["mp4", "mov", "webm", "mkv", "avi"].includes(e)
            ? FileVideo
            : ["mp3", "wav", "ogg", "flac", "m4a"].includes(e)
              ? FileAudio
              : ["md", "txt", "rst", "log", "pdf", "doc", "docx"].includes(e)
                ? FileText
                : CODE.has(e)
                  ? FileCode
                  : FileIcon;
  return <Icon className={`${cls} shrink-0 text-fg-muted`} />;
}

type Ask = {
  names: string[];
  many: boolean;
  resolve: (r: { choice: FsConflict | null; all: boolean }) => void;
};

/** The file manager; fills its parent. `onClose` adds a close button (the dialog). */
export function FileBrowser({
  laneId,
  initialHome,
  session,
  source,
  initialPath = "",
  onChanged,
  onClose,
  onNavigate,
}: {
  /** A workspace to open on; else `initialHome`. */
  laneId?: number | null;
  /** A home to open on (`me`, or another user's for an admin). */
  initialHome?: string | null;
  session?: string | null;
  source?: number | null;
  initialPath?: string;
  /** Called after anything changed files, so a tree elsewhere can re-read. */
  onChanged?: () => void;
  onClose?: () => void;
  /** The page keeps `?lane=` / `?home=` and `&path=` in the URL. */
  onNavigate?: (place: FsPlace, path: string) => void;
}) {
  const { t } = useTranslation(["lanes"]);
  const placeOf = (): FsPlace =>
    laneId != null ? gitTarget(laneId, session, source) : { home: initialHome || "me" };
  const [target, setTarget] = useState<FsPlace>(placeOf);
  const [homes, setHomes] = useState<FsHome[]>([]);
  const [path, setPathState] = useState(initialPath);
  const [history, setHistory] = useState<{ back: string[]; fwd: string[] }>({ back: [], fwd: [] });
  const [listing, setListing] = useState<FsListing | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [selected, setSelected] = useState<Set<string>>(new Set());
  const anchor = useRef<string | null>(null);
  const [view, setView] = useState<"files" | "trash">("files");
  const [layout, setLayout] = useState<"grid" | "list">(() =>
    readPref(VIEW_KEY, "grid") === "list" ? "list" : "grid"
  );
  const [showHidden, setShowHidden] = useState(() => readPref(HIDDEN_KEY, "0") === "1");
  const [query, setQuery] = useState<string | null>(null);
  const [trash, setTrash] = useState<FsTrashItem[]>([]);
  const [busy, setBusy] = useState(false);
  const [renaming, setRenaming] = useState<{ path: string; value: string } | null>(null);
  const [creating, setCreating] = useState<{ kind: "dir" | "file"; value: string } | null>(null);
  const [ask, setAsk] = useState<Ask | null>(null);
  const [askAll, setAskAll] = useState(false);
  const [progress, setProgress] = useState<{
    name: string;
    done: number;
    total: number;
    sent: number;
    bytes: number;
  } | null>(null);
  const [lanes, setLanes] = useState<Lane[]>([]);
  const [clip, setClip] = useState<Clip | null>(clipboard);
  const [dropping, setDropping] = useState(false);
  const [menu, setMenu] = useState<"new" | "upload" | "more" | null>(null);
  const fileInput = useRef<HTMLInputElement>(null);
  const folderInput = useRef<HTMLInputElement>(null);
  const ctx = useContextMenu<FsEntry | null>();

  // A new caller target (another workspace's Files tab, the page's URL) —
  // not the echo of our own `go()` through the page's URL, which would wipe
  // Back's history on every folder opened.
  useEffect(() => {
    const next = placeOf();
    if (samePlace(next, target) && initialPath === path) return;
    setTarget(next);
    setPathState(initialPath);
    setHistory({ back: [], fwd: [] });
    setSelected(new Set());
    setView("files");
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [laneId, initialHome, session, source, initialPath]);

  useEffect(() => {
    api.lanes
      .list()
      .then((r) => setLanes(r.lanes))
      .catch(() => setLanes([]));
    api.files
      .homes()
      .then((r) => setHomes(r.homes))
      .catch(() => setHomes([]));
  }, []);
  // Another user's home (an admin's view) is read-only.
  const ro = isHomePlace(target) && !!homes.find((h) => h.id === target.home)?.readOnly;

  /** Go to `p` in workspace `tgt`, remembering where we were for Back. */
  const go = (p: string, tgt: FsPlace = target) => {
    const sameLane = samePlace(tgt, target);
    if (sameLane && p === path && view === "files") return;
    setHistory((h) => ({ back: sameLane ? [...h.back, path] : [], fwd: [] }));
    if (!sameLane) setTarget(tgt);
    setPathState(p);
    setView("files");
    setSelected(new Set());
    setQuery(null);
    onNavigate?.(tgt, p);
  };
  const back = () => {
    const prev = history.back[history.back.length - 1];
    if (prev === undefined) return;
    setHistory((h) => ({ back: h.back.slice(0, -1), fwd: [path, ...h.fwd] }));
    setPathState(prev);
    setSelected(new Set());
    onNavigate?.(target, prev);
  };
  const forward = () => {
    const next = history.fwd[0];
    if (next === undefined) return;
    setHistory((h) => ({ back: [...h.back, path], fwd: h.fwd.slice(1) }));
    setPathState(next);
    setSelected(new Set());
    onNavigate?.(target, next);
  };

  const load = useCallback(async () => {
    setError(null);
    setLoading(true);
    try {
      if (view === "trash") setTrash((await api.files.trash(target)).items);
      else setListing(await api.files.list(target, path));
    } catch (e) {
      // A dashboard that does not know /fs yet (not restarted) answers 404.
      setError(
        (e as { status?: number }).status === 404 && !errCode(e) ? t("fx.unavailable") : errText(e)
      );
      if (view === "files" && errCode(e) === "ENOFILE" && path) setPathState("");
    } finally {
      setLoading(false);
    }
  }, [target, path, view, t]);
  useEffect(() => {
    void load();
  }, [load]);

  const changed = () => {
    void load();
    onChanged?.();
  };

  const entries = useMemo(() => {
    const all = listing?.entries ?? [];
    const q = query?.trim().toLowerCase();
    return all.filter(
      (e) => (showHidden || !e.name.startsWith(".")) && (!q || e.name.toLowerCase().includes(q))
    );
  }, [listing, showHidden, query]);
  const selectedEntries = entries.filter((e) => selected.has(e.path));

  /** A choice for taken names: Replace / Keep both / Skip (null = cancel). */
  const askConflict = (names: string[], many: boolean) =>
    new Promise<{ choice: FsConflict | null; all: boolean }>((resolve) => {
      setAskAll(false);
      setAsk({ names, many, resolve });
    });
  const answer = (choice: FsConflict | null) => {
    ask?.resolve({ choice, all: askAll });
    setAsk(null);
  };

  /** Run `op` once; on EEXISTS ask, then run it again with the choice. */
  const withConflict = async <T,>(op: (c: FsConflict) => Promise<T>): Promise<T | null> => {
    try {
      return await op("fail");
    } catch (e) {
      if (errCode(e) !== "EEXISTS") throw e;
      const { choice } = await askConflict((e as { names?: string[] }).names ?? [], false);
      if (!choice) return null;
      return op(choice);
    }
  };

  const run = async (fn: () => Promise<unknown>, done?: string) => {
    setBusy(true);
    try {
      await fn();
      if (done) toast.success(done);
    } catch (e) {
      toast.error(errCode(e) === "EUPGRADE" ? t("fx.needsUpgrade") : errText(e));
    } finally {
      setBusy(false);
      changed();
    }
  };

  // ── Actions ─────────────────────────────────────────────────────────────
  const openEntry = (e: FsEntry) => {
    if (isFolder(e)) go(e.path);
    else download([e]);
  };
  const goUp = () => {
    if (listing?.parent != null) go(listing.parent);
  };
  const download = (items: FsEntry[]) => {
    if (!items.length) return;
    const one = items.length === 1 && !isFolder(items[0]!) ? items[0]! : null;
    const a = document.createElement("a");
    a.href = one
      ? api.files.downloadUrl(target, one.path)
      : api.files.zipUrl(
          target,
          items.map((i) => i.path)
        );
    a.download = one ? one.name : "";
    a.click();
  };
  const removeItems = async (items: FsEntry[]) => {
    if (!items.length) return;
    await run(
      () =>
        api.files.remove(
          target,
          items.map((i) => i.path)
        ),
      t("fx.trashed", { count: items.length })
    );
    setSelected(new Set());
  };
  const startRename = (e: FsEntry) => setRenaming({ path: e.path, value: e.name });
  const commitRename = async () => {
    if (!renaming) return;
    const entry = entries.find((e) => e.path === renaming.path);
    const name = renaming.value.trim();
    setRenaming(null);
    if (!entry || !name || name === entry.name) return;
    await run(() => api.files.rename(target, entry.path, name));
  };
  const startCreate = (kind: "dir" | "file") => {
    setMenu(null);
    setCreating({ kind, value: kind === "dir" ? t("fx.untitledFolder") : t("fx.untitledFile") });
  };
  const commitCreate = async () => {
    if (!creating) return;
    const name = creating.value.trim();
    const kind = creating.kind;
    setCreating(null);
    if (!name) return;
    await run(() =>
      kind === "dir"
        ? api.files.mkdir(target, join(path, name))
        : api.files.newFile(target, join(path, name))
    );
  };
  const putClip = (items: FsEntry[], cut: boolean) => {
    if (!items.length) return;
    // From another user's home (read-only) a cut is a copy.
    clipboard = { place: target, paths: items.map((i) => i.path), cut: cut && !ro };
    setClip(clipboard);
    toast.info(t(cut ? "fx.cutDone" : "fx.copiedDone", { count: items.length }));
  };
  const paste = async (into = path) => {
    setMenu(null);
    const c = clipboard;
    if (!c || ro) return;
    const sameLane = samePlace(c.place, target);
    if (!sameLane && (!wholePlace(c.place) || (isHomePlace(c.place) && isHomePlace(target)))) {
      toast.error(t("fx.crossOnlyWorkspace"));
      return;
    }
    await run(async () => {
      if (sameLane && c.cut) {
        await withConflict<unknown>((conflict) => api.files.move(target, c.paths, into, conflict));
      } else {
        const done = await withConflict<unknown>((conflict) =>
          api.files.copy(target, c.paths, into, {
            ...(sameLane
              ? {}
              : isHomePlace(c.place)
                ? { fromHome: c.place.home }
                : { fromLane: laneOf(c.place)! }),
            conflict,
          })
        );
        // A cut into another workspace: copied, then the originals trashed.
        if (done && c.cut) await api.files.remove(c.place, c.paths);
      }
      if (c.cut) {
        clipboard = null;
        setClip(null);
      }
    }, t("fx.pasted"));
  };
  const moveInto = async (paths: string[], dest: string, copy: boolean) => {
    const ok = paths.filter((p) => p !== dest && !dest.startsWith(`${p}/`));
    if (!ok.length) return;
    await run(() =>
      withConflict<unknown>((conflict) =>
        copy
          ? api.files.copy(target, ok, dest, { conflict })
          : api.files.move(target, ok, dest, conflict)
      )
    );
  };

  /** Upload `files` (each with its path inside the pick/drop) under `dir`. */
  const uploadAll = async (files: { file: File; rel: string }[], dir = path) => {
    setMenu(null);
    if (!files.length) return;
    const bytes = files.reduce((n, f) => n + f.file.size, 0);
    if (bytes > FX_BATCH_MAX_BYTES) {
      toast.error(
        t("fx.tooBig", { size: formatBytes(bytes), max: formatBytes(FX_BATCH_MAX_BYTES) })
      );
      return;
    }
    setBusy(true);
    let sent = 0;
    let saved = 0;
    let forAll: FsConflict | null = null;
    try {
      for (let i = 0; i < files.length; i++) {
        const { file, rel } = files[i]!;
        const dest = join(dir, rel);
        setProgress({ name: rel, done: i, total: files.length, sent, bytes });
        const send = (c: FsConflict) =>
          api.files.upload(target, dest, file, c, (n) =>
            setProgress({ name: rel, done: i, total: files.length, sent: sent + n, bytes })
          );
        try {
          const r = await send(forAll ?? "fail").catch(async (e) => {
            if (errCode(e) !== "EEXISTS") throw e;
            const a = await askConflict([rel], files.length > 1);
            if (!a.choice) throw Object.assign(new Error("cancelled"), { code: "ECANCEL" });
            if (a.all) forAll = a.choice;
            return send(a.choice);
          });
          if (!r.skipped) saved++;
        } catch (e) {
          if (errCode(e) === "ECANCEL") break;
          toast.error(t("fx.uploadFailed", { name: rel, message: errText(e) }));
        }
        sent += file.size;
      }
    } finally {
      setProgress(null);
      setBusy(false);
      if (saved) toast.success(t("fx.uploaded", { count: saved }));
      changed();
    }
  };

  const onDrop = async (e: ReactDragEvent, dir = path) => {
    e.preventDefault();
    e.stopPropagation();
    setDropping(false);
    if (ro) {
      toast.error(t("fx.readOnlyHint"));
      return;
    }
    const inner = e.dataTransfer.getData(MIME);
    if (inner) {
      await moveInto(JSON.parse(inner) as string[], dir, e.ctrlKey || e.metaKey);
      return;
    }
    const out: { file: File; rel: string }[] = [];
    const dropped = [...e.dataTransfer.items]
      .map((i) => i.webkitGetAsEntry?.())
      .filter(Boolean) as FileSystemEntry[];
    if (dropped.length) {
      for (const en of dropped) await walkEntry(en, "", out);
    } else {
      for (const f of e.dataTransfer.files) out.push({ file: f, rel: f.name });
    }
    await uploadAll(out, dir);
  };

  // ── Selection & keys ────────────────────────────────────────────────────
  const click = (e: ReactMouseEvent, entry: FsEntry) => {
    e.stopPropagation();
    const next = new Set(selected);
    if (e.shiftKey && anchor.current) {
      const a = entries.findIndex((x) => x.path === anchor.current);
      const b = entries.findIndex((x) => x.path === entry.path);
      const [lo, hi] = a < b ? [a, b] : [b, a];
      for (const x of entries.slice(lo, hi + 1)) next.add(x.path);
    } else if (e.ctrlKey || e.metaKey) {
      if (next.has(entry.path)) next.delete(entry.path);
      else next.add(entry.path);
      anchor.current = entry.path;
    } else {
      next.clear();
      next.add(entry.path);
      anchor.current = entry.path;
    }
    setSelected(next);
  };
  const toggleHidden = () => {
    setShowHidden((v) => {
      writePref(HIDDEN_KEY, v ? "0" : "1");
      return !v;
    });
    setMenu(null);
  };
  const setLayoutPref = (l: "grid" | "list") => {
    setLayout(l);
    writePref(VIEW_KEY, l);
  };
  const onKey = (e: ReactKeyboardEvent) => {
    if (renaming || creating || ask) return;
    const mod = e.ctrlKey || e.metaKey;
    const k = e.key.toLowerCase();
    // Another user's home is read-only: no key that writes.
    if (ro && (e.key === "Delete" || e.key === "F2" || (mod && (k === "x" || k === "v")))) return;
    if (e.altKey && e.key === "ArrowLeft") back();
    else if (e.altKey && e.key === "ArrowRight") forward();
    else if (e.altKey && e.key === "ArrowUp") goUp();
    else if (mod && k === "h") toggleHidden();
    else if (view !== "files") return;
    else if (e.key === "Delete") void removeItems(selectedEntries);
    else if (e.key === "F2" && selectedEntries.length === 1) startRename(selectedEntries[0]!);
    else if (e.key === "Enter" && selectedEntries.length === 1) openEntry(selectedEntries[0]!);
    else if (e.key === "Backspace") goUp();
    else if (mod && k === "a") setSelected(new Set(entries.map((x) => x.path)));
    else if (mod && k === "c") putClip(selectedEntries, false);
    else if (mod && k === "x") putClip(selectedEntries, true);
    else if (mod && k === "v") void paste();
    else if (mod && k === "f") setQuery((q) => q ?? "");
    else return;
    e.preventDefault();
    e.stopPropagation();
  };

  const homeName = (who: string) =>
    who === "me" ? t("fx.myHome") : (homes.find((h) => h.id === who)?.label ?? who);
  const placeName = (p: FsPlace) => (isHomePlace(p) ? homeName(p.home) : laneName(laneOf(p)!));
  const laneName = (id: number) => {
    const l = lanes.find((x) => x.id === id);
    return l ? l.title || l.cwd.split("/").pop() || `#${id}` : `#${id}`;
  };
  const crumbs = path ? path.split("/") : [];
  const menuItem = ctx.menu?.item ?? null;
  const menuTargets = menuItem ? (selected.has(menuItem.path) ? selectedEntries : [menuItem]) : [];
  const close = (fn: () => void) => () => {
    ctx.close();
    fn();
  };
  const itemProps = (e: FsEntry) => ({
    draggable: !renaming,
    onDragStart: (ev: ReactDragEvent) => {
      const paths = selected.has(e.path) ? [...selected] : [e.path];
      ev.dataTransfer.setData(MIME, JSON.stringify(paths));
      // Into a terminal or the prompt: the path as text.
      ev.dataTransfer.setData("text/plain", e.path);
      ev.dataTransfer.effectAllowed = "copyMove";
    },
    onDragOver: isFolder(e) ? (ev: ReactDragEvent) => ev.preventDefault() : undefined,
    onDrop: isFolder(e) ? (ev: ReactDragEvent) => void onDrop(ev, e.path) : undefined,
    onClick: (ev: ReactMouseEvent) => click(ev, e),
    onDoubleClick: () => openEntry(e),
    onContextMenu: (ev: ReactMouseEvent) => {
      ev.preventDefault();
      ev.stopPropagation();
      if (!selected.has(e.path)) setSelected(new Set([e.path]));
      ctx.open(ev, e);
    },
  });
  const nameBox = (e: FsEntry, center: boolean) =>
    renaming?.path === e.path ? (
      <InlineName
        center={center}
        value={renaming.value}
        onChange={(v) => setRenaming({ ...renaming, value: v })}
        onDone={() => void commitRename()}
        onCancel={() => setRenaming(null)}
      />
    ) : null;
  const placeClass = (active: boolean) =>
    `flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] ${
      active ? "bg-accent/15 font-medium text-accent" : "text-fg-secondary hover:bg-surface-2"
    }`;

  return (
    <div
      className="relative flex h-full min-h-0 w-full overflow-hidden bg-surface-1 text-fg-primary"
      onKeyDown={onKey}
      onClick={() => setMenu(null)}
      data-testid="file-explorer"
    >
      {/* ── Places ── */}
      <aside className="hidden w-52 shrink-0 flex-col border-r border-border bg-surface-0 sm:flex">
        <nav className="min-h-0 flex-1 overflow-y-auto px-2 pb-2" aria-label={t("fx.places")}>
          {homes.some((h) => h.id === "me") && (
            <div className="pt-3">
              <button
                type="button"
                onClick={() => go("", { home: "me" })}
                className={placeClass(
                  view === "files" && isHomePlace(target) && target.home === "me"
                )}
              >
                <House className="h-4 w-4 shrink-0" />
                <span className="truncate">{t("fx.myHome")}</span>
              </button>
            </div>
          )}
          {homes.some((h) => h.id !== "me") && (
            <>
              <p className="px-2 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-wider text-fg-muted">
                {t("fx.userHomes")}
              </p>
              {homes
                .filter((h) => h.id !== "me")
                .map((h) => (
                  <button
                    key={h.id}
                    type="button"
                    title={t("fx.readOnlyHome")}
                    onClick={() => go("", { home: h.id })}
                    className={placeClass(
                      view === "files" && isHomePlace(target) && target.home === h.id
                    )}
                  >
                    <UserRound className="h-4 w-4 shrink-0" />
                    <span className="truncate">{h.label}</span>
                    <Eye className="ml-auto h-3 w-3 shrink-0 opacity-60" />
                  </button>
                ))}
            </>
          )}
          <p className="px-2 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-wider text-fg-muted">
            {t("fx.places")}
          </p>
          {lanes.map((l) => (
            <button
              key={l.id}
              type="button"
              title={l.cwd}
              onClick={() => go("", l.id)}
              className={placeClass(
                view === "files" && !isHomePlace(target) && laneOf(target) === l.id
              )}
            >
              <FolderGit2 className="h-4 w-4 shrink-0" />
              <span className="truncate">{l.title || l.cwd.split("/").pop()}</span>
            </button>
          ))}
        </nav>
        <div className="border-t border-border p-2">
          <button
            type="button"
            onClick={() => {
              setView("trash");
              setSelected(new Set());
            }}
            className={placeClass(view === "trash")}
          >
            <Trash2 className="h-4 w-4" />
            {t("fx.trash")}
          </button>
        </div>
      </aside>

      <div className="flex min-w-0 flex-1 flex-col">
        {/* ── Header bar ── */}
        <header className="flex items-center gap-1.5 border-b border-border px-2 py-2">
          <HeadButton label={t("fx.back")} disabled={!history.back.length} onClick={back}>
            <ArrowLeft className="h-4 w-4" />
          </HeadButton>
          <HeadButton label={t("fx.forward")} disabled={!history.fwd.length} onClick={forward}>
            <ArrowRight className="h-4 w-4" />
          </HeadButton>
          <HeadButton
            label={t("fx.up")}
            disabled={view !== "files" || listing?.parent == null}
            onClick={goUp}
          >
            <ArrowUp className="h-4 w-4" />
          </HeadButton>

          {/* Path bar — or the search field in its place, like GNOME Files. */}
          {query !== null ? (
            <div className="flex min-w-0 flex-1 items-center gap-1.5 rounded-md border border-accent bg-surface-0 px-2 py-1">
              <Search className="h-3.5 w-3.5 text-fg-muted" />
              <input
                autoFocus
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                onKeyDown={(e) => {
                  e.stopPropagation();
                  if (e.key === "Escape") setQuery(null);
                }}
                placeholder={t("fx.searchHere")}
                aria-label={t("fx.searchHere")}
                className="min-w-0 flex-1 bg-transparent text-sm outline-none"
              />
              <button type="button" aria-label={t("fx.close")} onClick={() => setQuery(null)}>
                <X className="h-3.5 w-3.5 text-fg-muted" />
              </button>
            </div>
          ) : (
            <nav
              aria-label={t("fx.location")}
              className="flex min-w-0 flex-1 items-center overflow-x-auto rounded-md bg-surface-2 px-1 py-0.5"
            >
              {view === "trash" ? (
                <span className="flex items-center gap-1.5 px-2 py-1 text-sm font-medium">
                  <Trash2 className="h-4 w-4" /> {t("fx.trash")}
                </span>
              ) : (
                <>
                  <button
                    type="button"
                    onClick={() => go("")}
                    onDragOver={(e) => e.preventDefault()}
                    onDrop={(e) => void onDrop(e, "")}
                    className={`flex shrink-0 items-center gap-1.5 rounded px-2 py-1 text-sm hover:bg-surface-3 ${
                      crumbs.length ? "text-fg-secondary" : "font-semibold"
                    }`}
                  >
                    {isHomePlace(target) ? (
                      <House className="h-4 w-4" />
                    ) : (
                      <FolderGit2 className="h-4 w-4" />
                    )}
                    {placeName(target)}
                  </button>
                  {crumbs.map((c, i) => (
                    <span key={i} className="flex shrink-0 items-center">
                      <ChevronRight className="h-3.5 w-3.5 text-fg-muted" />
                      <button
                        type="button"
                        onClick={() => go(crumbs.slice(0, i + 1).join("/"))}
                        onDragOver={(e) => e.preventDefault()}
                        onDrop={(e) => void onDrop(e, crumbs.slice(0, i + 1).join("/"))}
                        className={`rounded px-2 py-1 text-sm hover:bg-surface-3 ${
                          i === crumbs.length - 1 ? "font-semibold" : "text-fg-secondary"
                        }`}
                      >
                        {c}
                      </button>
                    </span>
                  ))}
                </>
              )}
            </nav>
          )}

          {view === "files" && (
            <>
              <HeadButton
                label={t("fx.search")}
                onClick={() => setQuery((q) => (q === null ? "" : null))}
              >
                <Search className="h-4 w-4" />
              </HeadButton>
              <div
                className="flex rounded-md border border-border"
                role="group"
                aria-label={t("fx.viewAs")}
              >
                <HeadButton
                  label={t("fx.gridView")}
                  pressed={layout === "grid"}
                  onClick={() => setLayoutPref("grid")}
                >
                  <LayoutGrid className="h-4 w-4" />
                </HeadButton>
                <HeadButton
                  label={t("fx.listView")}
                  pressed={layout === "list"}
                  onClick={() => setLayoutPref("list")}
                >
                  <List className="h-4 w-4" />
                </HeadButton>
              </div>
              {ro ? (
                <span
                  data-testid="fx-readonly"
                  className="flex items-center gap-1 rounded-md border border-border px-2 py-1 text-xs text-fg-secondary"
                >
                  <Eye className="h-3.5 w-3.5" />
                  {t("fx.readOnly")}
                </span>
              ) : (
                <>
                  <DropButton
                    label={t("fx.new")}
                    icon={<Plus className="h-4 w-4" />}
                    open={menu === "new"}
                    onToggle={() => setMenu(menu === "new" ? null : "new")}
                    disabled={busy}
                  >
                    <DropItem
                      icon={<Folder className="h-4 w-4" />}
                      onClick={() => startCreate("dir")}
                    >
                      {t("fx.newFolder")}
                    </DropItem>
                    <DropItem
                      icon={<FileIcon className="h-4 w-4" />}
                      onClick={() => startCreate("file")}
                    >
                      {t("fx.newFile")}
                    </DropItem>
                  </DropButton>
                  <DropButton
                    label={t("fx.upload")}
                    icon={<Upload className="h-4 w-4" />}
                    primary
                    open={menu === "upload"}
                    onToggle={() => setMenu(menu === "upload" ? null : "upload")}
                    disabled={busy}
                  >
                    <DropItem
                      icon={<FileIcon className="h-4 w-4" />}
                      onClick={() => fileInput.current?.click()}
                    >
                      {t("fx.uploadFiles")}
                    </DropItem>
                    <DropItem
                      icon={<Folder className="h-4 w-4" />}
                      onClick={() => folderInput.current?.click()}
                    >
                      {t("fx.uploadFolder")}
                    </DropItem>
                  </DropButton>
                </>
              )}
              <DropButton
                label={t("fx.more")}
                iconOnly
                icon={<EllipsisVertical className="h-4 w-4" />}
                open={menu === "more"}
                onToggle={() => setMenu(menu === "more" ? null : "more")}
              >
                <DropItem onClick={() => void paste()} disabled={!clip || ro}>
                  {clip
                    ? t("fx.pasteFrom", {
                        count: clip.paths.length,
                        workspace: placeName(clip.place),
                      })
                    : t("fx.paste")}
                </DropItem>
                <DropItem
                  onClick={() => {
                    setMenu(null);
                    setSelected(new Set(entries.map((x) => x.path)));
                  }}
                >
                  {t("fx.selectAll")}
                </DropItem>
                <DropItem onClick={toggleHidden}>
                  {showHidden ? "✓ " : ""}
                  {t("fx.showHidden")}
                </DropItem>
                <DropItem
                  onClick={() => {
                    setMenu(null);
                    void load();
                  }}
                >
                  {t("fx.refresh")}
                </DropItem>
              </DropButton>
            </>
          )}
          {onClose && (
            <HeadButton label={t("fx.close")} onClick={onClose}>
              <X className="h-4 w-4" />
            </HeadButton>
          )}
          <input
            ref={fileInput}
            type="file"
            multiple
            hidden
            data-testid="fx-upload-files"
            onChange={(e) => {
              const files = [...(e.target.files ?? [])].map((f) => ({ file: f, rel: f.name }));
              e.target.value = "";
              void uploadAll(files);
            }}
          />
          <input
            ref={folderInput}
            type="file"
            multiple
            hidden
            data-testid="fx-upload-folder"
            // A folder picker: each file comes with its path inside it.
            {...({ webkitdirectory: "", directory: "" } as Record<string, string>)}
            onChange={(e) => {
              const files = [...(e.target.files ?? [])].map((f) => ({
                file: f,
                rel: f.webkitRelativePath || f.name,
              }));
              e.target.value = "";
              void uploadAll(files);
            }}
          />
        </header>

        {view === "files" ? (
          <div
            tabIndex={0}
            role="grid"
            aria-label={t("fx.title")}
            data-testid="fx-list"
            onContextMenu={(e) => {
              e.preventDefault();
              setSelected(new Set());
              ctx.open(e, null);
            }}
            onDragOver={(e) => {
              e.preventDefault();
              if (!e.dataTransfer.types.includes(MIME)) setDropping(true);
            }}
            onDragLeave={(e) => {
              if (e.currentTarget === e.target) setDropping(false);
            }}
            onDrop={(e) => void onDrop(e)}
            onClick={() => setSelected(new Set())}
            className="relative min-h-0 flex-1 overflow-y-auto outline-none"
          >
            {error && (
              <div className="m-4 rounded-md border border-status-danger/40 bg-status-danger/10 px-3 py-2 text-sm text-status-danger">
                {error}
              </div>
            )}
            {layout === "grid" ? (
              <div className="grid grid-cols-[repeat(auto-fill,minmax(112px,1fr))] gap-1 p-3">
                {creating && (
                  <div className="flex flex-col items-center gap-1 rounded-lg bg-accent/10 p-2">
                    {creating.kind === "dir" ? (
                      <Folder className="h-12 w-12 fill-accent/25 text-accent" />
                    ) : (
                      <FileIcon className="h-12 w-12 text-fg-muted" />
                    )}
                    <InlineName
                      center
                      value={creating.value}
                      onChange={(v) => setCreating({ ...creating, value: v })}
                      onDone={() => void commitCreate()}
                      onCancel={() => setCreating(null)}
                    />
                  </div>
                )}
                {entries.map((e) => (
                  <div
                    key={e.path}
                    role="gridcell"
                    aria-selected={selected.has(e.path)}
                    data-testid="fx-row"
                    title={e.path}
                    {...itemProps(e)}
                    className={`flex cursor-default select-none flex-col items-center gap-1 rounded-lg p-2 ${
                      selected.has(e.path)
                        ? "bg-accent/20 ring-1 ring-accent/60"
                        : "hover:bg-surface-2"
                    }`}
                  >
                    {e.type === "file" &&
                    !isHomePlace(target) &&
                    IMAGE.has(ext(e.name)) &&
                    (e.size ?? 0) < 5 * 1024 * 1024 ? (
                      <img
                        src={api.lanes.gitRawUrl(
                          target as Exclude<FsPlace, { home: string }>,
                          e.path
                        )}
                        alt=""
                        loading="lazy"
                        draggable={false}
                        className="h-12 w-12 rounded object-cover"
                      />
                    ) : (
                      <EntryIcon entry={e} size="lg" />
                    )}
                    {nameBox(e, true) ?? (
                      <span
                        className={`line-clamp-2 w-full break-all text-center text-xs leading-snug ${
                          e.name.startsWith(".") ? "text-fg-muted" : ""
                        }`}
                      >
                        {e.name}
                      </span>
                    )}
                  </div>
                ))}
              </div>
            ) : (
              <table className="w-full table-fixed text-left text-[13px]">
                <thead className="sticky top-0 z-10 bg-surface-1 text-[11px] text-fg-muted">
                  <tr className="border-b border-border">
                    <th className="px-4 py-1.5 font-medium">{t("fx.name")}</th>
                    <th className="w-28 px-2 py-1.5 text-right font-medium">{t("fx.size")}</th>
                    <th className="w-48 px-4 py-1.5 font-medium">{t("fx.modified")}</th>
                  </tr>
                </thead>
                <tbody>
                  {creating && (
                    <tr>
                      <td colSpan={3} className="px-4 py-1">
                        <InlineName
                          value={creating.value}
                          onChange={(v) => setCreating({ ...creating, value: v })}
                          onDone={() => void commitCreate()}
                          onCancel={() => setCreating(null)}
                        />
                      </td>
                    </tr>
                  )}
                  {entries.map((e) => (
                    <tr
                      key={e.path}
                      aria-selected={selected.has(e.path)}
                      data-testid="fx-row"
                      {...itemProps(e)}
                      className={`cursor-default select-none ${
                        selected.has(e.path) ? "bg-accent/20" : "hover:bg-surface-2"
                      }`}
                    >
                      <td className="truncate px-4 py-1.5">
                        <span className="flex items-center gap-2">
                          <EntryIcon entry={e} size="sm" />
                          {nameBox(e, false) ?? (
                            <span
                              className={`truncate ${e.name.startsWith(".") ? "text-fg-muted" : ""}`}
                            >
                              {e.name}
                            </span>
                          )}
                        </span>
                      </td>
                      <td className="px-2 py-1.5 text-right text-fg-secondary">
                        {e.size != null ? formatBytes(e.size) : isFolder(e) ? "—" : ""}
                      </td>
                      <td className="px-4 py-1.5 text-fg-secondary">
                        {new Date(e.mtime).toLocaleString()}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
            {listing && !entries.length && !creating && !error && (
              <div className="flex flex-col items-center justify-center gap-2 py-16 text-fg-muted">
                <Folder className="h-16 w-16 opacity-40" />
                <p className="max-w-md text-center text-sm">
                  {query
                    ? t("fx.noMatch")
                    : isHomePlace(target) && !path
                      ? t("fx.homeEmpty")
                      : t("fx.empty")}
                </p>
              </div>
            )}
            {loading && !listing && <p className="p-6 text-sm text-fg-muted">{t("fx.loading")}</p>}
            {dropping && (
              <div className="pointer-events-none absolute inset-2 flex items-center justify-center rounded-xl border-2 border-dashed border-accent bg-accent/10">
                <p className="rounded-lg bg-surface-1 px-4 py-2 text-sm font-medium text-accent shadow">
                  {t("fx.dropHere", {
                    folder: crumbs[crumbs.length - 1] ?? placeName(target),
                  })}
                </p>
              </div>
            )}
          </div>
        ) : (
          <TrashView
            items={trash}
            laneName={laneName}
            onRestore={(id) => void run(() => api.files.restore(target, id), t("fx.restored"))}
            onPurge={(id) => void run(() => api.files.purge(target, id))}
          />
        )}

        {/* ── Selection action bar / status bar ── */}
        {view === "files" && selected.size > 0 ? (
          <div
            data-testid="fx-actionbar"
            className="flex flex-wrap items-center gap-1.5 border-t border-border bg-surface-2 px-3 py-1.5"
          >
            <span className="mr-2 text-xs font-medium">
              {t("fx.selectedCount", { count: selected.size })}
            </span>
            <ActionButton
              icon={<Download className="h-3.5 w-3.5" />}
              onClick={() => download(selectedEntries)}
            >
              {t("fx.download")}
            </ActionButton>
            <ActionButton
              icon={<Copy className="h-3.5 w-3.5" />}
              onClick={() => putClip(selectedEntries, false)}
            >
              {t("fx.copy")}
            </ActionButton>
            {!ro && (
              <ActionButton
                icon={<Scissors className="h-3.5 w-3.5" />}
                onClick={() => putClip(selectedEntries, true)}
              >
                {t("fx.cut")}
              </ActionButton>
            )}
            {!ro && selectedEntries.length === 1 && (
              <ActionButton
                icon={<Pencil className="h-3.5 w-3.5" />}
                onClick={() => startRename(selectedEntries[0]!)}
              >
                {t("fx.rename")}
              </ActionButton>
            )}
            {!ro && (
              <ActionButton
                danger
                icon={<Trash2 className="h-3.5 w-3.5" />}
                disabled={busy}
                onClick={() => void removeItems(selectedEntries)}
              >
                {t("fx.delete")}
              </ActionButton>
            )}
            <button
              type="button"
              className="ml-auto text-xs text-fg-muted hover:text-fg-primary"
              onClick={() => setSelected(new Set())}
            >
              {t("fx.clearSelection")}
            </button>
          </div>
        ) : (
          <div className="flex items-center gap-3 border-t border-border px-4 py-1 text-[11px] text-fg-muted">
            <span>
              {view === "files" ? t("fx.itemsCount", { count: entries.length }) : t("fx.trashHint")}
            </span>
            {clip && view === "files" && (
              <button
                type="button"
                className="flex items-center gap-1 text-accent hover:underline"
                onClick={() => void paste()}
              >
                <ClipboardPaste className="h-3 w-3" />
                {t("fx.pasteFrom", { count: clip.paths.length, workspace: placeName(clip.place) })}
              </button>
            )}
            <span className="ml-auto hidden md:inline">{t("fx.dropHint")}</span>
          </div>
        )}

        {progress && (
          <div
            data-testid="fx-progress"
            className="absolute bottom-12 right-4 w-72 rounded-lg border border-border bg-surface-1 p-3 shadow-xl"
          >
            <p className="truncate text-xs font-medium">
              {t("fx.uploading", { done: progress.done + 1, total: progress.total })}
            </p>
            <p className="truncate text-[11px] text-fg-muted">{progress.name}</p>
            <div className="mt-2 h-1.5 overflow-hidden rounded bg-surface-3">
              <div
                className="h-full bg-accent-solid transition-[width]"
                style={{
                  width: `${Math.min(100, (progress.sent / Math.max(1, progress.bytes)) * 100)}%`,
                }}
              />
            </div>
          </div>
        )}
      </div>

      {ctx.menu && (
        <ContextMenu x={ctx.menu.x} y={ctx.menu.y} onClose={ctx.close} testId="fx-menu">
          {menuItem ? (
            <>
              <MenuItem onSelect={close(() => openEntry(menuItem))}>
                {isFolder(menuItem) ? t("fx.open") : t("fx.download")}
              </MenuItem>
              {(isFolder(menuItem) || menuTargets.length > 1) && (
                <MenuItem onSelect={close(() => download(menuTargets))}>
                  {t("fx.downloadZip")}
                </MenuItem>
              )}
              <MenuSeparator />
              {!ro && (
                <MenuItem onSelect={close(() => putClip(menuTargets, true))}>
                  {t("fx.cut")}
                </MenuItem>
              )}
              <MenuItem onSelect={close(() => putClip(menuTargets, false))}>
                {t("fx.copy")}
              </MenuItem>
              {!ro && isFolder(menuItem) && clip && (
                <MenuItem onSelect={close(() => void paste(menuItem.path))}>
                  {t("fx.pasteInto")}
                </MenuItem>
              )}
              {!ro && menuTargets.length === 1 && (
                <MenuItem onSelect={close(() => startRename(menuItem))}>{t("fx.rename")}</MenuItem>
              )}
              <MenuItem onSelect={close(() => void copyText(menuItem.path))}>
                {t("fx.copyPath")}
              </MenuItem>
              {!ro && (
                <>
                  <MenuSeparator />
                  <MenuItem danger onSelect={close(() => void removeItems(menuTargets))}>
                    {t("fx.delete")}
                  </MenuItem>
                </>
              )}
            </>
          ) : (
            <>
              {!ro && (
                <>
                  <MenuItem onSelect={close(() => startCreate("dir"))}>
                    {t("fx.newFolder")}
                  </MenuItem>
                  <MenuItem onSelect={close(() => startCreate("file"))}>{t("fx.newFile")}</MenuItem>
                  <MenuSeparator />
                  <MenuItem onSelect={close(() => fileInput.current?.click())}>
                    {t("fx.uploadFiles")}
                  </MenuItem>
                  <MenuItem onSelect={close(() => folderInput.current?.click())}>
                    {t("fx.uploadFolder")}
                  </MenuItem>
                </>
              )}
              {!ro && clip && (
                <>
                  <MenuSeparator />
                  <MenuItem onSelect={close(() => void paste())}>{t("fx.paste")}</MenuItem>
                </>
              )}
              <MenuSeparator />
              <MenuItem onSelect={close(() => setSelected(new Set(entries.map((x) => x.path))))}>
                {t("fx.selectAll")}
              </MenuItem>
              <MenuItem onSelect={close(toggleHidden)}>
                {showHidden ? "✓ " : ""}
                {t("fx.showHidden")}
              </MenuItem>
            </>
          )}
        </ContextMenu>
      )}

      {ask && (
        <div
          className="absolute inset-0 z-20 flex items-center justify-center bg-black/50"
          role="presentation"
        >
          <div
            role="alertdialog"
            aria-label={t("fx.conflictTitle")}
            data-testid="fx-conflict"
            className="w-full max-w-md space-y-3 rounded-xl border border-border bg-surface-1 p-5 shadow-xl"
          >
            <p className="text-base font-semibold">{t("fx.conflictTitle")}</p>
            <p className="break-all text-sm text-fg-secondary">
              {t("fx.conflictBody", { names: ask.names.slice(0, 5).join(", ") })}
            </p>
            {ask.many && (
              <label className="flex items-center gap-2 text-sm text-fg-secondary">
                <input
                  type="checkbox"
                  checked={askAll}
                  onChange={(e) => setAskAll(e.target.checked)}
                />
                {t("fx.conflictAll")}
              </label>
            )}
            <div className="flex flex-wrap justify-end gap-2 pt-1">
              <button
                type="button"
                className="btn-ghost border border-border text-sm"
                onClick={() => answer(null)}
              >
                {t("fx.cancel")}
              </button>
              <button
                type="button"
                className="btn-ghost border border-border text-sm"
                onClick={() => answer("skip")}
              >
                {t("fx.skip")}
              </button>
              <button
                type="button"
                className="btn-ghost border border-border text-sm"
                onClick={() => answer("keep")}
              >
                {t("fx.keepBoth")}
              </button>
              <button
                type="button"
                className="btn-primary text-sm"
                onClick={() => answer("replace")}
              >
                {t("fx.replace")}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

/**
 * The file manager in a large dialog (a workspace's Files tab opens it).
 * Portalled to `document.body`: opened from inside the narrow Changes panel,
 * whose ancestors make their own stacking context (and may be a containing
 * block for `position: fixed`), it was boxed into that panel and drawn
 * clipped over the file tree.
 */
export function FileExplorer({
  open,
  onClose,
  ...rest
}: {
  open: boolean;
  onClose: () => void;
  laneId: number;
  session?: string | null;
  source?: number | null;
  initialPath?: string;
  onChanged?: () => void;
}) {
  const { t } = useTranslation(["lanes"]);
  const panelRef = useRef<HTMLDivElement>(null);
  const titleId = useId();
  useDialog(open, panelRef, onClose);
  if (!open) return null;
  return createPortal(
    <div
      className="fixed inset-0 z-[60] flex items-center justify-center bg-black/60 p-3"
      onClick={onClose}
      role="presentation"
    >
      <div
        ref={panelRef}
        role="dialog"
        aria-modal="true"
        aria-labelledby={titleId}
        className="flex h-[92vh] w-[96vw] max-w-7xl overflow-hidden rounded-xl border border-border shadow-2xl shadow-black/50"
        onClick={(e) => e.stopPropagation()}
      >
        <h2 id={titleId} className="sr-only">
          {t("fx.title")}
        </h2>
        <FileBrowser {...rest} onClose={onClose} />
      </div>
    </div>,
    document.body
  );
}

function HeadButton({
  label,
  onClick,
  disabled,
  pressed,
  children,
}: {
  label: string;
  onClick: () => void;
  disabled?: boolean;
  pressed?: boolean;
  children: ReactNode;
}) {
  return (
    <button
      type="button"
      aria-label={label}
      title={label}
      aria-pressed={pressed}
      disabled={disabled}
      onClick={(e) => {
        e.stopPropagation();
        onClick();
      }}
      className={`rounded-md p-1.5 transition-colors disabled:cursor-not-allowed disabled:opacity-35 ${
        pressed
          ? "bg-surface-3 text-fg-primary"
          : "text-fg-secondary hover:bg-surface-2 hover:text-fg-primary"
      }`}
    >
      {children}
    </button>
  );
}

function DropButton({
  label,
  icon,
  open,
  onToggle,
  disabled,
  primary,
  iconOnly,
  children,
}: {
  label: string;
  icon: ReactNode;
  open: boolean;
  onToggle: () => void;
  disabled?: boolean;
  primary?: boolean;
  iconOnly?: boolean;
  children: ReactNode;
}) {
  return (
    <div className="relative" onClick={(e) => e.stopPropagation()}>
      <button
        type="button"
        aria-haspopup="menu"
        aria-expanded={open}
        aria-label={label}
        title={label}
        disabled={disabled}
        onClick={onToggle}
        className={`flex items-center gap-1 rounded-md px-2 py-1.5 text-sm disabled:opacity-40 ${
          primary
            ? "bg-accent-solid text-white hover:opacity-90"
            : "text-fg-secondary hover:bg-surface-2 hover:text-fg-primary"
        }`}
      >
        {icon}
        {!iconOnly && (
          <>
            <span className="hidden md:inline">{label}</span>
            <ChevronDown className="h-3.5 w-3.5 opacity-70" />
          </>
        )}
      </button>
      {open && (
        <div
          role="menu"
          className="absolute right-0 top-full z-30 mt-1 min-w-48 rounded-lg border border-border bg-surface-1 py-1 shadow-xl"
        >
          {children}
        </div>
      )}
    </div>
  );
}

function DropItem({
  icon,
  onClick,
  disabled,
  children,
}: {
  icon?: ReactNode;
  onClick: () => void;
  disabled?: boolean;
  children: ReactNode;
}) {
  return (
    <button
      type="button"
      role="menuitem"
      disabled={disabled}
      onClick={onClick}
      className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm text-fg-primary hover:bg-surface-2 disabled:opacity-40"
    >
      {icon}
      {children}
    </button>
  );
}

function ActionButton({
  icon,
  onClick,
  disabled,
  danger,
  children,
}: {
  icon: ReactNode;
  onClick: () => void;
  disabled?: boolean;
  danger?: boolean;
  children: ReactNode;
}) {
  return (
    <button
      type="button"
      disabled={disabled}
      onClick={onClick}
      className={`flex items-center gap-1.5 rounded-md border border-border bg-surface-1 px-2.5 py-1 text-xs disabled:opacity-40 ${
        danger
          ? "text-status-danger hover:bg-status-danger/10"
          : "text-fg-primary hover:bg-surface-3"
      }`}
    >
      {icon}
      {children}
    </button>
  );
}

function InlineName({
  value,
  center,
  onChange,
  onDone,
  onCancel,
}: {
  value: string;
  center?: boolean;
  onChange: (v: string) => void;
  onDone: () => void;
  onCancel: () => void;
}) {
  const { t } = useTranslation(["lanes"]);
  const ref = useRef<HTMLInputElement>(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    el.focus();
    // Select the stem, like a desktop rename: "name" of "name.ext".
    const dot = value.lastIndexOf(".");
    el.setSelectionRange(0, dot > 0 ? dot : value.length);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <input
      ref={ref}
      value={value}
      aria-label={t("fx.nameField")}
      onChange={(e) => onChange(e.target.value)}
      onClick={(e) => e.stopPropagation()}
      onDoubleClick={(e) => e.stopPropagation()}
      onKeyDown={(e) => {
        e.stopPropagation();
        if (e.key === "Enter") onDone();
        if (e.key === "Escape") onCancel();
      }}
      onBlur={onDone}
      className={`w-full rounded border border-accent bg-surface-0 px-1.5 py-0.5 text-xs outline-none ${
        center ? "text-center" : ""
      }`}
    />
  );
}

function TrashView({
  items,
  laneName,
  onRestore,
  onPurge,
}: {
  items: FsTrashItem[];
  laneName: (id: number) => string;
  onRestore: (id: string) => void;
  onPurge: (id: string) => void;
}) {
  const { t } = useTranslation(["lanes"]);
  return (
    <div className="flex min-h-0 flex-1 flex-col" data-testid="fx-trash">
      <div className="flex items-center gap-2 border-b border-border px-4 py-2 text-sm text-fg-secondary">
        <span className="flex-1">{t("fx.trashHint")}</span>
        <button
          type="button"
          disabled={!items.length}
          onClick={() => onPurge("all")}
          className="btn-ghost border border-border text-xs hover:text-status-danger disabled:opacity-40"
        >
          {t("fx.emptyTrash")}
        </button>
      </div>
      <div className="min-h-0 flex-1 overflow-y-auto">
        <table className="w-full table-fixed text-left text-[13px]">
          <thead className="text-[11px] text-fg-muted">
            <tr className="border-b border-border">
              <th className="px-4 py-1.5 font-medium">{t("fx.name")}</th>
              <th className="w-40 px-2 py-1.5 font-medium">{t("fx.from")}</th>
              <th className="w-44 px-2 py-1.5 font-medium">{t("fx.deletedAt")}</th>
              <th className="w-56 px-4 py-1.5" />
            </tr>
          </thead>
          <tbody>
            {items.map((i) => (
              <tr
                key={i.id}
                className="border-b border-border/40 hover:bg-surface-2"
                data-testid="fx-trash-row"
              >
                <td className="truncate px-4 py-1.5">
                  <span className="flex items-center gap-2" title={i.path}>
                    {i.isDir ? (
                      <Folder className="h-4 w-4 fill-accent/25 text-accent" />
                    ) : (
                      <FileIcon className="h-4 w-4 text-fg-muted" />
                    )}
                    <span className="truncate">{i.path}</span>
                  </span>
                </td>
                <td className="truncate px-2 py-1.5 text-fg-secondary">
                  {i.laneId != null ? laneName(i.laneId) : ""}
                </td>
                <td className="px-2 py-1.5 text-fg-secondary">
                  {new Date(i.deletedAt).toLocaleString()}
                </td>
                <td className="px-4 py-1.5 text-right">
                  <span className="inline-flex gap-1">
                    <button
                      type="button"
                      className="btn-ghost border border-border text-xs"
                      onClick={() => onRestore(i.id)}
                    >
                      <RotateCcw className="h-3 w-3" />
                      {t("fx.restore")}
                    </button>
                    <button
                      type="button"
                      className="btn-ghost border border-border text-xs hover:text-status-danger"
                      onClick={() => onPurge(i.id)}
                    >
                      {t("fx.purge")}
                    </button>
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {!items.length && (
          <div className="flex flex-col items-center gap-2 py-16 text-fg-muted">
            <Trash2 className="h-14 w-14 opacity-40" />
            <p className="text-sm">{t("fx.trashEmpty")}</p>
          </div>
        )}
      </div>
    </div>
  );
}