import { lazy, Suspense, useEffect, useEffectEvent, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { Download, LayoutGrid, Link, List, Scissors, Share2, UploadCloud } from "lucide-react";
import { api, type FileFolder, type FileListParams, type LibraryFile } from "../lib/api";
import { type SortState, sortRows } from "../lib/columnSort";
import { libraryRowActions, sharedRowActions } from "../lib/downloadActions";
import { formatBytes, formatDateTime, relativeTime } from "../lib/format";
import { focusNavItem } from "../lib/listNav";
import { notify } from "../lib/notifications";
import { qk } from "../lib/queryKeys";
import { LS, accountKey } from "../lib/storage";
import { useCardPager } from "../lib/useCardPager";
import { useLiveQuery } from "../lib/useLiveQuery";
import { usePref } from "../lib/usePref";
import { JobThumb } from "./downloadRow";
import { MetaEditModal } from "./downloadModals";
import { jobTitle } from "./downloadTitle";
import { FileCard } from "./FileCard";
import { PhoneBadge, RetentionBadge, SourceBadge } from "./fileBadges";
import { folderLabel } from "./fileFolders";
import { ALL_FILES, useFiles, useFilesActions, viewParam, type FilesView } from "./filesContext";
import { useFileActions } from "./useFileActions";
import { useFolderActions } from "./useFolderActions";
import { RenameField } from "./RenameField";
import ViewSwitcher, { type ViewOption } from "./ViewSwitcher";
import { Badge } from "./ui/Badge";
import { Button } from "./ui/Button";
import ColumnSortControl from "./ui/ColumnSortControl";
import { ContextMenu } from "./ui/ContextMenu";
import DataTable, { type Column } from "./ui/DataTable";
import { IconButton } from "./ui/IconButton";
import { IconLink } from "./ui/LinkButton";
import { MoreButton } from "./ui/MoreButton";
import NavGrid from "./ui/NavGrid";
import Overlay from "./ui/Overlay";
import { PageToolbar } from "./ui/PageShell";
import { LinkBox } from "./LinkBox";
import Pager from "./ui/Pager";
import { Pressable } from "./ui/Pressable";
import { LoadingState, StateMessage } from "./ui/QueryState";
import { useContextMenu } from "./ui/useContextMenu";
// Lazy: these open on demand, so they stay out of the Files chunk until used (the video editor in
// particular is heavy — filmstrip + scrubber).
const UploadDialog = lazy(() => import("./UploadDialog"));
const ShareDialog = lazy(() => import("./ShareDialog"));
const LibraryPlayer = lazy(() => import("./LibraryPlayer"));
const FilePreview = lazy(() => import("./FilePreview"));
const VideoEditor = lazy(() => import("./VideoEditor"));

// The Files library: every done file of mine, the ones shared with me, or one folder's (the rail
// picks — FilesProvider holds it), searched by the header's box. One aligned table: every kind of
// value in its own column, an action that does not apply leaving its slot empty, the same menu on a
// right click and on the "…" (DESIGN.md "Files page", "Library list columns"). The grid is the same
// rows' other paint — a toggle remembered per folder, sharing the table's sort.
//
// A link or a notice can open the page on ONE file (`openFile`, `?item=`): the page turns to it, puts
// the keyboard on it and rings it until the view changes. A file dropped anywhere on the page goes
// into the Upload dialog, bound for the folder on screen.

const fileKey = (f: LibraryFile) => f.id;
const folderKey = (f: FileFolder) => f.id;

type FilesLayout = "list" | "grid";
const LAYOUTS: readonly FilesLayout[] = ["list", "grid"];
const LAYOUT_ICON = { list: List, grid: LayoutGrid } as const;

/** A stored per-view layout map: the pref round-trips the server, so it is checked, not trusted. */
function parseLayouts(raw: unknown): Record<string, FilesLayout> {
  if (!raw || typeof raw !== "object") return {};
  return Object.fromEntries(
    Object.entries(raw).filter((e): e is [string, FilesLayout] => LAYOUTS.includes(e[1])),
  );
}

/** Put the keyboard on a file's row or card (lib/listNav), whichever paint is on screen. */
function focusFile(within: HTMLElement | null, id: number): void {
  const item = within && shownFileElement(within, id)?.closest<HTMLElement>("[data-nav-index]");
  if (within && item) focusNavItem(within, Number(item.getAttribute("data-nav-index")));
}

/** The element a file is painted as on screen — its table row, the row's narrow card twin, or its
 *  grid card, whichever is shown (DataTable keeps both row shapes mounted). */
function shownFileElement(within: HTMLElement, id: number): HTMLElement | null {
  const all = [...within.querySelectorAll<HTMLElement>(`[data-file-id="${id}"]`)];
  // Nothing laid out at all (no layout engine, as under test): the first is the only one there is.
  return all.find((el) => el.getClientRects().length > 0) ?? all[0] ?? null;
}

/** The list a view reads. The search is applied here, on the rows (the list is the whole library,
 *  capped server-side): a request per keystroke would buy nothing the rows do not already hold. */
function listParams(view: FilesView): FileListParams {
  if (view.kind === "shared") return { shared: true };
  if (view.kind === "folder") return { folderId: view.id };
  return {};
}

function matches(file: LibraryFile, q: string, lang: string): boolean {
  if (!q) return true;
  const hay = `${jobTitle(file)} ${file.display_uploader ?? file.asset?.uploader ?? ""}`;
  return hay.toLocaleLowerCase(lang).includes(q.toLocaleLowerCase(lang));
}

/** Where an upload from this view lands: the folder itself when it may take one (an own folder, the
 *  Uploads folder — `folders.upload_target`), else the Uploads folder. */
function uploadFolder(view: FilesView, folders: readonly FileFolder[]): number | null {
  if (view.kind !== "folder") return null;
  const f = folders.find((x) => x.id === view.id);
  return f && (f.kind === "own" || f.source_key === "upload") ? f.id : null;
}

function NameCell({
  file,
  renaming,
  onOpen,
  onRenamed,
}: {
  file: LibraryFile;
  renaming: boolean;
  onOpen: (() => void) | null;
  onRenamed: (name: string | null, byKey: boolean) => void;
}) {
  const { t } = useTranslation();
  const channel = file.display_uploader || file.asset?.uploader || null;
  const clip = file.job_kind === "edit" || file.job_kind === "clip";
  if (renaming)
    return (
      <RenameField initial={jobTitle(file)} label={t("files.actions.rename")} onDone={onRenamed} />
    );
  const title = <span className="block truncate text-sm font-medium">{jobTitle(file)}</span>;
  return (
    <div className="flex min-w-0 flex-col">
      {onOpen ? (
        <Pressable
          selectable
          data-nav-open=""
          onClick={onOpen}
          title={jobTitle(file)}
          className="min-w-0 rounded-sm hover:text-accent"
        >
          {title}
        </Pressable>
      ) : (
        <span title={jobTitle(file)}>{title}</span>
      )}
      <span className="flex min-w-0 items-center gap-1.5 text-xs text-muted">
        <span className="truncate">{channel ?? "—"}</span>
        {clip && (
          <Badge>
            <Scissors />
            {t("downloads.clipBadge")}
          </Badge>
        )}
      </span>
    </div>
  );
}

export default function Files() {
  const { t, i18n } = useTranslation();
  const lang = i18n.language;
  const { search, view, focus, arrived } = useFiles();
  const { setView, consumeFocus } = useFilesActions();

  const foldersQ = useLiveQuery(qk.fileFolders(), api.fileFolders, { intervalMs: 15000 });
  const folders = foldersQ.data ?? [];
  // A remembered or bookmarked folder that is gone (deleted, or another account's id) opens the whole
  // library instead of an empty page that names nothing; the provider is told, so the rail agrees.
  const gone = view.kind === "folder" && !!foldersQ.data && !folders.some((f) => f.id === view.id);
  const shown = gone ? ALL_FILES : view;
  useEffect(() => {
    if (gone) setView(ALL_FILES);
  }, [gone, setView]);

  const params = listParams(shown);
  // Live at rest: a download finishing elsewhere (the queue, a clip, another tab) lands here on its own.
  const filesQ = useLiveQuery(qk.files(params), () => api.files(params), { intervalMs: 15000 });
  const all = filesQ.data ?? [];
  const q = search.trim();
  const rows = all.filter((f) => matches(f, q, lang));

  const listRef = useRef<HTMLDivElement>(null);
  const [renamingId, setRenamingId] = useState<number | null>(null);
  // A rename left by Enter or Escape hands the keyboard back to its row (RenameField).
  const refocusFile = useRef<number | null>(null);
  useEffect(() => {
    const id = refocusFile.current;
    if (renamingId !== null || id === null) return;
    refocusFile.current = null;
    focusFile(listRef.current, id);
  }, [renamingId]);
  // The Upload dialog while open, with the file a drop on the page brought (null: pick one in it).
  const [upload, setUpload] = useState<{ file: File | null } | null>(null);
  const [metaFile, setMetaFile] = useState<LibraryFile | null>(null);
  const [shareFile, setShareFile] = useState<LibraryFile | null>(null);
  const [editFile, setEditFile] = useState<LibraryFile | null>(null);
  const [playing, setPlaying] = useState<{ file: LibraryFile; fromStart: boolean } | null>(null);
  const play = (file: LibraryFile, fromStart = false) => setPlaying({ file, fromStart });
  // The file open in the viewer (one that is not media), by id: the list under it keeps re-reading.
  const [viewing, setViewing] = useState<number | null>(null);

  const actions = useFileActions({
    folders,
    onPlay: play,
    onView: (f) => setViewing(f.id),
    onEdit: setEditFile,
    onRename: (f) => setRenamingId(f.id),
    onEditDetails: setMetaFile,
    onManageShares: setShareFile,
  });
  // Keyed by id: the list re-reads every 15 s, replacing the file under an open menu, and its "…"
  // must still close it.
  const rowMenu = useContextMenu<LibraryFile>({ keyOf: fileKey });
  const menuItems = rowMenu.target ? actions.items(rowMenu.target) : [];

  const open = shown.kind === "folder" ? folders.find((f) => f.id === shown.id) : undefined;
  // The open folder's menu, on the "…" beside its name — the one its rail entry's right click opens.
  const [renamingFolder, setRenamingFolder] = useState(false);
  const folderActions = useFolderActions({ onRename: () => setRenamingFolder(true) });
  const folderMenu = useContextMenu<FileFolder>({ keyOf: folderKey });
  // Its rename left by a key hands the keyboard back to the "…" it was opened from.
  const folderMore = useRef<HTMLButtonElement>(null);
  const refocusFolderMore = useRef(false);
  useEffect(() => {
    if (renamingFolder || !refocusFolderMore.current) return;
    refocusFolderMore.current = false;
    folderMore.current?.focus();
  }, [renamingFolder]);

  // A folder view names its folder once the folder list is in (blank until then, never a guess).
  const title =
    shown.kind === "shared"
      ? t("files.rail.shared")
      : shown.kind === "folder"
        ? open
          ? folderLabel(open, t)
          : ""
        : t("files.rail.all");
  const canUpload = shown.kind !== "shared";
  const uploadTarget = uploadFolder(shown, folders);
  const uploadTargetName =
    uploadTarget !== null && open ? folderLabel(open, t) : t("files.source.upload");

  // List or grid, per view (DESIGN.md "Files page": the grid a toggle remembered per folder).
  const [layouts, setLayouts] = usePref<Record<string, FilesLayout>>(
    "filesLayouts",
    {},
    {
      localKey: LS.filesLayouts,
      parse: parseLayouts,
    },
  );
  const viewKey = viewParam(shown);
  const layout: FilesLayout = layouts[viewKey] ?? "list";
  const isGrid = layout === "grid";
  // One sort for both paints: the table's headers and the grid's dropdown move the same state.
  const [sort, setSort] = usePref<SortState>("filesSort", null, { localKey: LS.filesSort });

  // ── Arrival at one file ─────────────────────────────────────────────────────────────────────────
  // A pending arrival (`focus`) is looked for once the list is in: found here, it becomes `arrived`
  // (FilesProvider), which turns the table's or the grid's page to the file (`reveal`), puts the
  // keyboard on it and rings it while this view is open. Not in this view, it is looked for among
  // every file; nowhere (gone since the link was made), it leaves nothing to arrive at, and is spent.
  const here = !!focus && !!filesQ.data?.some((f) => f.id === focus.id);
  // "Not here" only once the list is fresh: a just-finished upload is not in the cached rows yet.
  const missing = !!focus && !!filesQ.data && !here && !filesQ.isFetching;
  const lookEverywhere = missing && shown.kind !== "all";
  useEffect(() => {
    if (lookEverywhere) setView(ALL_FILES);
    else if (here) consumeFocus(viewKey);
    else if (missing) consumeFocus(null);
  }, [here, missing, lookEverywhere, viewKey, setView, consumeFocus]);
  const arrival = arrived && arrived.view === viewKey ? arrived : null;
  const ringed = arrival?.id ?? null;
  const reveal = arrival && { key: String(arrival.id), seq: arrival.token };
  // The keyboard half, once the page that holds the file has painted.
  const focusArrived = useEffectEvent(() => {
    if (ringed !== null) focusFile(listRef.current, ringed);
  });
  // Once per arrival (its token), not on every list re-read or layout switch.
  const arrivalToken = arrival?.token;
  useEffect(() => {
    if (arrivalToken !== undefined) focusArrived();
  }, [arrivalToken]);

  // ── A file dropped anywhere on the page ─────────────────────────────────────────────────────────
  // The page is the target, not a box on it: a short folder leaves most of the screen empty. Window
  // listeners, since the drag starts outside the app. While the dialog is open its own zone takes the
  // drop; a drag that carries no files (a link, selected text) is not ours.
  const [dragging, setDragging] = useState(false);
  const dragDepth = useRef(0);
  const dropReady = canUpload && upload === null;
  const onDrag = useEffectEvent((e: DragEvent) => {
    if (!dropReady || !e.dataTransfer?.types.includes("Files")) return;
    e.preventDefault();
    if (e.type === "dragenter") dragDepth.current += 1;
    if (e.type === "dragleave") dragDepth.current = Math.max(0, dragDepth.current - 1);
    if (e.type === "drop") {
      dragDepth.current = 0;
      const dropped = e.dataTransfer.files;
      const first = dropped.item(0);
      if (first) setUpload({ file: first });
      if (dropped.length > 1) notify({ level: "info", message: t("files.drop.oneAtATime") });
    }
    setDragging(dragDepth.current > 0);
  });
  useEffect(() => {
    const on = (e: DragEvent) => onDrag(e);
    const kinds = ["dragenter", "dragover", "dragleave", "drop"] as const;
    for (const k of kinds) window.addEventListener(k, on);
    return () => {
      for (const k of kinds) window.removeEventListener(k, on);
    };
  }, []);

  const iconSlot = <span className="size-9 shrink-0" aria-hidden />;
  // What a row's name or a card's picture does: plays it, or opens it in the viewer.
  const openOf = (f: LibraryFile) => {
    const a = f.shared ? sharedRowActions(f) : libraryRowActions(f);
    return a.play ? () => play(f) : a.view ? () => setViewing(f.id) : null;
  };
  const columns: Column<LibraryFile>[] = [
    {
      key: "thumb",
      header: "",
      width: "5.5rem",
      hideInCard: true,
      // A narrow table (a pinned rail beside it) gives its fixed columns' room to the name: with the
      // picture and the date in, the name had none left.
      narrowHidden: true,
      render: (f) => (
        <JobThumb
          job={f}
          box="w-20 aspect-video shrink-0 rounded-md overflow-hidden bg-surface border border-border"
        />
      ),
    },
    {
      key: "name",
      header: t("files.columns.name"),
      cardPrimary: true,
      sortable: true,
      sortValue: (f) => jobTitle(f),
      render: (f) => (
        <NameCell
          key={renamingId === f.id ? "renaming" : "shown"}
          file={f}
          renaming={renamingId === f.id}
          onOpen={openOf(f)}
          onRenamed={(name, byKey) => {
            if (byKey) refocusFile.current = f.id;
            setRenamingId(null);
            if (name !== null) actions.rename(f, name);
          }}
        />
      ),
    },
    {
      key: "source",
      header: t("files.columns.source"),
      width: "8rem",
      tabletHidden: true,
      render: (f) => <SourceBadge file={f} />,
    },
    {
      key: "phone",
      header: t("files.columns.phone"),
      width: "5.5rem",
      narrowHidden: true,
      render: (f) =>
        f.asset?.media_kind === "file" ? (
          <span className="text-xs text-muted">—</span>
        ) : (
          <PhoneBadge file={f} />
        ),
    },
    {
      key: "retention",
      header: t("files.columns.retention"),
      width: "6.75rem",
      narrowHidden: true,
      render: (f) => <RetentionBadge file={f} />,
    },
    {
      key: "size",
      header: t("files.columns.size"),
      width: "5.5rem",
      align: "right",
      nowrap: true,
      sortable: true,
      sortValue: (f) => f.asset?.size_bytes ?? 0,
      render: (f) => (
        <span className="text-xs tabular-nums text-muted">
          {formatBytes(f.asset?.size_bytes, lang)}
        </span>
      ),
    },
    {
      key: "added",
      header: t("files.columns.added"),
      width: "6.5rem",
      narrowHidden: true,
      align: "right",
      nowrap: true,
      sortable: true,
      sortValue: (f) => f.shared_at ?? f.ready_at ?? f.created_at ?? "",
      render: (f) => {
        const at = f.shared_at ?? f.ready_at ?? f.created_at;
        return (
          <span className="text-xs text-muted" title={formatDateTime(at, lang)}>
            {relativeTime(at, lang, t)}
          </span>
        );
      },
    },
    {
      key: "actions",
      header: "",
      // Only the "…" holds a place: the quick icons come up over the date while the pointer or the
      // keyboard is on the row (the mail-list pattern), so the name gets their room. A card keeps
      // them in its own line — a phone has no hover — and the menu holds them all anyway.
      width: "3rem",
      align: "right",
      cardLabel: false,
      cardRow: true,
      render: (f) => {
        const a = f.shared ? sharedRowActions(f) : libraryRowActions(f);
        const mine = rowMenu.open && rowMenu.target?.id === f.id;
        return (
          <span className="relative flex items-center justify-end gap-0.5">
            <span
              data-quick-actions
              className="flex items-center gap-0.5 md:absolute md:right-full md:top-1/2 md:-translate-y-1/2 md:rounded-md md:bg-bg md:pointer-events-none md:opacity-0 md:transition-opacity md:group-hover:pointer-events-auto md:group-hover:opacity-100 md:group-focus-within:pointer-events-auto md:group-focus-within:opacity-100"
            >
              {!f.shared && a.play ? (
                <IconButton
                  variant="ghost"
                  size="md"
                  label={t("files.actions.copyLink")}
                  disabled={actions.sharing !== null}
                  onClick={() => actions.share(f)}
                >
                  <Link />
                </IconButton>
              ) : (
                iconSlot
              )}
              {!f.shared ? (
                <IconButton
                  variant="ghost"
                  size="md"
                  label={t("files.actions.share")}
                  onClick={() => setShareFile(f)}
                >
                  <Share2 />
                </IconButton>
              ) : (
                iconSlot
              )}
              {f.can_download ? (
                <IconLink
                  href={api.fileUrl(f.id)}
                  label={t("downloads.actions.download")}
                  size="md"
                >
                  <Download />
                </IconLink>
              ) : (
                iconSlot
              )}
            </span>
            <MoreButton
              label={t("files.rowMenu")}
              size="md"
              expanded={mine}
              menuProps={rowMenu.buttonProps(f)}
            />
          </span>
        );
      },
    },
  ];

  // The grid sorts and pages here; the table does both itself (from the same sort).
  const cards = isGrid ? sortRows(rows, columns, sort, lang) : rows;
  const { paged, pagerProps } = useCardPager(
    cards,
    LS.filesCardSize,
    isGrid,
    reveal && { seq: reveal.seq, match: (f) => String(f.id) === reveal.key },
    t("files.perPage"),
  );

  const emptyText = q
    ? t("files.empty.search", { q })
    : t(
        shown.kind === "shared"
          ? "files.empty.shared"
          : shown.kind === "folder"
            ? "files.empty.folder"
            : "files.empty.all",
      );

  const grid =
    cards.length === 0 ? (
      <StateMessage>{emptyText}</StateMessage>
    ) : (
      <>
        <NavGrid className="grid grid-cols-[repeat(auto-fill,minmax(11rem,1fr))] gap-3">
          {paged.map((f, i) => (
            <FileCard
              key={f.id}
              file={f}
              index={i}
              onOpen={openOf(f)}
              menuProps={rowMenu.triggerProps(f)}
              moreProps={rowMenu.buttonProps(f)}
              menuOpen={rowMenu.open && rowMenu.target?.id === f.id}
              arrived={ringed === f.id}
            />
          ))}
        </NavGrid>
        <div className="flex justify-end pt-3">
          <Pager {...pagerProps} />
        </div>
      </>
    );

  const body =
    filesQ.isError && !filesQ.data ? (
      <StateMessage tone="error" onRetry={() => filesQ.refetch()}>
        {t("common.loadError")}
      </StateMessage>
    ) : filesQ.isLoading ? (
      <LoadingState shape={isGrid ? "grid" : "list"} />
    ) : isGrid ? (
      grid
    ) : (
      <DataTable
        rows={rows}
        columns={columns}
        rowKey={(f) => String(f.id)}
        persistKey={accountKey(LS.filesTable) ?? undefined}
        pageSize={50}
        keyboardNav
        fixedLayout
        sort={sort}
        onSortChange={setSort}
        reveal={reveal}
        narrowedBy={q}
        rowProps={(f) => ({ ...rowMenu.triggerProps(f), "data-file-id": f.id })}
        // `group`: the row's quick icons show while it is hovered or holds the focus.
        rowClassName={(f) =>
          ringed === f.id ? "group bg-accent/8 ring-2 ring-inset ring-accent/60" : "group"
        }
        emptyText={emptyText}
      />
    );

  const layoutOptions: ViewOption<FilesLayout>[] = LAYOUTS.map((id) => ({
    id,
    label: t(`files.layout.${id}`),
    icon: LAYOUT_ICON[id],
  }));

  return (
    <>
      <PageToolbar>
        <div className="mx-auto flex w-full max-w-7xl flex-wrap items-center gap-x-3 gap-y-2 px-4 pt-2 pb-2">
          {renamingFolder && open?.kind === "own" ? (
            <RenameField
              initial={open.name ?? ""}
              label={t("files.folder.rename")}
              className="w-64 max-w-full"
              onDone={(name, byKey) => {
                refocusFolderMore.current = byKey;
                setRenamingFolder(false);
                if (name !== null) folderActions.rename(open, name);
              }}
            />
          ) : (
            <h2 className="min-w-0 truncate text-lg font-bold">{title}</h2>
          )}
          {open && !renamingFolder && (
            <MoreButton
              ref={folderMore}
              label={t("files.folder.menu")}
              size="sm"
              expanded={folderMenu.open}
              menuProps={folderMenu.buttonProps(open)}
            />
          )}
          {filesQ.data && (
            <span className="text-xs tabular-nums text-muted">
              {t("files.count", { count: rows.length })}
            </span>
          )}
          {isGrid && (
            <span className="ml-auto">
              <ColumnSortControl
                columns={columns}
                sort={sort}
                onChange={setSort}
                label={t("files.sort.label")}
                defaultLabel={t("files.sort.default")}
                ascLabel={t("files.sort.asc")}
                descLabel={t("files.sort.desc")}
              />
            </span>
          )}
          {/* The intake row (DESIGN.md "Files page"): paste a link, or upload; then the paint. On a
              phone the link box takes the line and the rest wraps under it. A link is downloaded
              into its site's folder whatever is open, so the box stays even in Shared with me. */}
          <span className="flex w-full flex-wrap items-center gap-2">
            <LinkBox className="flex-[1_1_18rem]" />
            <span className="ml-auto flex items-center gap-2">
              {canUpload && (
                <Button
                  variant="outline"
                  size="sm"
                  icon={<UploadCloud className="w-4 h-4" />}
                  onClick={() => setUpload({ file: null })}
                >
                  {t("files.actions.upload")}
                </Button>
              )}
              <ViewSwitcher
                value={layout}
                options={layoutOptions}
                onChange={(next) => setLayouts({ ...layouts, [viewKey]: next })}
                label={t("files.layout.label")}
              />
            </span>
          </span>
        </div>
      </PageToolbar>

      {/* The table starts at the scroller's top: a padding above it let its sticky header ride up that
          far on the first scroll, then stop. The cards have no header, so they keep the gap. */}
      <div ref={listRef} className={`mx-auto w-full max-w-7xl px-4 pb-4${isGrid ? " pt-3" : ""}`}>
        {body}
        <ContextMenu menu={rowMenu} ariaLabel={t("files.rowMenu")} items={menuItems} />
        <ContextMenu
          menu={folderMenu}
          ariaLabel={t("files.folder.menu")}
          items={folderMenu.target ? folderActions.items(folderMenu.target) : []}
        />
        <Suspense fallback={null}>
          {upload && (
            <UploadDialog
              folderId={uploadTarget}
              initialFile={upload.file}
              onClose={() => setUpload(null)}
            />
          )}
          {metaFile && <MetaEditModal job={metaFile} onClose={() => setMetaFile(null)} />}
          {shareFile && <ShareDialog job={shareFile} onClose={() => setShareFile(null)} />}
          {playing && (
            <LibraryPlayer
              job={playing.file}
              fromStart={playing.fromStart}
              onClose={() => setPlaying(null)}
            />
          )}
          {editFile && <VideoEditor job={editFile} onClose={() => setEditFile(null)} />}
          {viewing !== null && (
            <FilePreview
              // The viewer pages the list as it reads (its sort), through the files it can open.
              files={sortRows(rows, columns, sort, lang).filter(
                (f) => (f.shared ? sharedRowActions(f) : libraryRowActions(f)).view,
              )}
              fileId={viewing}
              onFileChange={setViewing}
              onClose={() => setViewing(null)}
              menuItems={(f) => actions.items(f, true)}
            />
          )}
        </Suspense>
      </div>
      {dragging && (
        // Through <Overlay>: declared in the page, a `fixed` layer is trapped in its stacking
        // context and the rail paints over it.
        <Overlay>
          <div
            aria-hidden
            className="pointer-events-none fixed inset-3 z-overlay grid place-items-center rounded-2xl border-2 border-dashed border-accent bg-accent/10 backdrop-blur-sm"
          >
            <span className="flex items-center gap-2 rounded-xl bg-card px-4 py-3 text-base font-semibold shadow-float">
              <UploadCloud className="size-5 text-accent" />
              {t("files.drop.here", { folder: uploadTargetName })}
            </span>
          </div>
        </Overlay>
      )}
    </>
  );
}