"use client";

/**
 * TASK-0103/0104 — the file browser (workspace route, Requirements §5).
 *
 * Two tabs:
 *   - Files: table of workspace files (name, kind icon, size, uploader, page,
 *     status, updated), sortable (name/size/date/updated), filterable by kind
 *     + status, cursor-paginated 50/page, row click → preview modal + "Open
 *     page" link. Each row/card also has a VERSIONS menu (list versions +
 *     Rollback + "Delete old versions" admin action, both confirmed).
 *   - Trash: `GET /files/trash` — trashed files with Restore / Purge (purge is
 *     a destructive confirm).
 * Mobile (≤ 640 px): a card list instead of the table (both tabs).
 *
 * Server-side permission filtering (Requirement §6) is done by the endpoints —
 * this component only renders what it is given. The frontend never authorizes.
 */
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
  AlertTriangle,
  File as FileIcon,
  FileAudio,
  FileImage,
  FileText,
  FileVideo,
  History,
  Loader2,
  RotateCcw,
  Trash2
} from "lucide-react";
import { filesApi, humanSize, kindForMime, type FileKind, type FileListItem, type FileStatus, type TrashedFile } from "@/lib/files/api";
import { PreviewModal } from "./PreviewModal";
import { cn } from "@/lib/utils";
import { toast } from "@/stores/ui-store";
import { ConfirmDialog } from "@/components/ui/confirm-dialog";

const KIND_ICONS: Record<FileKind, typeof FileIcon> = {
  image: FileImage,
  video: FileVideo,
  audio: FileAudio,
  pdf: FileText,
  doc: FileText,
  other: FileIcon
};

const KINDS: FileKind[] = ["image", "video", "audio", "pdf", "doc", "other"];
const STATUSES: FileStatus[] = ["UPLOADING", "SCANNING", "READY", "VIRUS_DETECTED", "FAILED"];
const SORTS = ["updated", "name", "size", "date"] as const;

type Tab = "files" | "trash";

interface FileBrowserProps {
  workspaceId: string;
}

export function FileBrowser({ workspaceId }: FileBrowserProps) {
  const params = useParams<{ workspace: string }>();
  const slug = params?.workspace ?? "default";

  const [tab, setTab] = useState<Tab>("files");
  const [kind, setKind] = useState<FileKind | "all">("all");
  const [status, setStatus] = useState<FileStatus | "all">("all");
  const [sort, setSort] = useState<(typeof SORTS)[number]>("updated");
  const [preview, setPreview] = useState<string | null>(null);
  const [versionsFor, setVersionsFor] = useState<string | null>(null);

  const fetchPage = useCallback(
    async (cursor: string | undefined) => {
      const res = await filesApi.list({
        workspaceId,
        scope: "workspace",
        kind: kind === "all" ? undefined : kind,
        status: status === "all" ? undefined : status,
        sort,
        limit: 50,
        cursor
      });
      return { data: res.data, nextCursor: res.nextCursor };
    },
    [workspaceId, kind, status, sort]
  );

  // `initialPageParam` is typed `string | undefined` so `getNextPageParam`
  // can return a real cursor (a bare `undefined` would lock PageParam to
  // `undefined`).
  const query = useInfiniteQuery({
    queryKey: ["files", "browser", workspaceId, kind, status, sort],
    queryFn: ({ pageParam }) => fetchPage(pageParam),
    initialPageParam: undefined as string | undefined,
    getNextPageParam: (last) => last.nextCursor ?? undefined,
    enabled: tab === "files"
  });

  const rows = useMemo(() => query.data?.pages.flatMap((p) => p.data) ?? [], [query.data]);
  const lastPage = query.data?.pages[query.data.pages.length - 1];
  const hasMore = Boolean(lastPage?.nextCursor);

  const openVersions = (fileId: string) => setVersionsFor(fileId);

  return (
    <div className="mx-auto w-full max-w-6xl px-4 py-6">
      <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
        <h1 className="text-xl font-semibold">Files</h1>
        <nav aria-label="Files view" className="flex rounded-md border border-border p-0.5 text-sm">
          <TabButton active={tab === "files"} onClick={() => setTab("files")}>
            All files
          </TabButton>
          <TabButton active={tab === "trash"} onClick={() => setTab("trash")}>
            Trash
          </TabButton>
        </nav>
      </div>

      {tab === "files" ? (
        <>
          <div className="mb-3 flex flex-wrap items-center gap-2">
            <select
              value={kind}
              onChange={(e) => setKind(e.target.value as FileKind | "all")}
              aria-label="Filter by kind"
              className="rounded-md border border-border bg-background px-2 py-1.5 text-sm"
            >
              <option value="all">All kinds</option>
              {KINDS.map((k) => (
                <option key={k} value={k}>
                  {k.charAt(0).toUpperCase() + k.slice(1)}
                </option>
              ))}
            </select>
            <select
              value={status}
              onChange={(e) => setStatus(e.target.value as FileStatus | "all")}
              aria-label="Filter by status"
              className="rounded-md border border-border bg-background px-2 py-1.5 text-sm"
            >
              <option value="all">All statuses</option>
              {STATUSES.map((s) => (
                <option key={s} value={s}>
                  {s}
                </option>
              ))}
            </select>
            <select
              value={sort}
              onChange={(e) => setSort(e.target.value as (typeof SORTS)[number])}
              aria-label="Sort by"
              className="rounded-md border border-border bg-background px-2 py-1.5 text-sm"
            >
              {SORTS.map((s) => (
                <option key={s} value={s}>
                  {s === "updated" ? "Recently updated" : s === "date" ? "Newest" : s === "size" ? "Largest" : "Name"}
                </option>
              ))}
            </select>
          </div>

          {query.isLoading ? (
            <div className="flex h-40 items-center justify-center">
              <Loader2 className="size-5 animate-spin text-muted-foreground" aria-hidden />
            </div>
          ) : query.isError ? (
            <div className="flex h-40 flex-col items-center justify-center gap-2 text-sm text-muted-foreground">
              <AlertTriangle className="size-5" aria-hidden />
              Could not load files. Try again.
            </div>
          ) : rows.length === 0 ? (
            <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
              No files here yet — drag one into a page to get started.
            </div>
          ) : (
            <>
              {/* desktop table (hidden ≤ 640 px) */}
              <div className="hidden overflow-x-auto rounded-md border border-border md:block">
                <table className="w-full text-sm">
                  <thead className="border-b border-border bg-muted/40 text-left text-xs uppercase tracking-wide text-muted-foreground">
                    <tr>
                      <th className="px-3 py-2 font-medium">Name</th>
                      <th className="px-3 py-2 font-medium">Size</th>
                      <th className="px-3 py-2 font-medium">Uploader</th>
                      <th className="px-3 py-2 font-medium">Page</th>
                      <th className="px-3 py-2 font-medium">Status</th>
                      <th className="px-3 py-2 font-medium">Updated</th>
                      <th className="px-3 py-2 text-right font-medium">
                        <span className="sr-only">Versions</span>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {rows.map((f) => (
                      <FileRow
                        key={f.id}
                        file={f}
                        slug={slug}
                        onOpen={() => setPreview(f.id)}
                        onVersions={() => openVersions(f.id)}
                      />
                    ))}
                  </tbody>
                </table>
              </div>

              {/* mobile card list (shown ≤ 640 px) */}
              <ul className="space-y-2 md:hidden">
                {rows.map((f) => (
                  <FileCard key={f.id} file={f} onOpen={() => setPreview(f.id)} onVersions={() => openVersions(f.id)} />
                ))}
              </ul>

              {hasMore ? (
                <div className="mt-4 flex justify-center">
                  <button
                    type="button"
                    onClick={() => void query.fetchNextPage()}
                    disabled={query.isFetchingNextPage}
                    className="inline-flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-sm hover:bg-accent disabled:opacity-50"
                  >
                    {query.isFetchingNextPage ? <Loader2 className="size-3.5 animate-spin" aria-hidden /> : null}
                    Load more
                  </button>
                </div>
              ) : null}
            </>
          )}
        </>
      ) : (
        <TrashTab workspaceId={workspaceId} />
      )}

      {preview ? (
        <PreviewModal fileId={preview} workspaceId={workspaceId} onClose={() => setPreview(null)} />
      ) : null}

      {versionsFor ? <VersionsMenu fileId={versionsFor} workspaceId={workspaceId} onClose={() => setVersionsFor(null)} /> : null}
    </div>
  );
}

function TabButton({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
  return (
    <button
      type="button"
      onClick={onClick}
      aria-current={active ? "page" : undefined}
      className={cn(
        "rounded px-3 py-1 font-medium",
        active ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-accent/50"
      )}
    >
      {children}
    </button>
  );
}

/* =============================================================== trash */

function TrashTab({ workspaceId }: { workspaceId: string }) {
  const qc = useQueryClient();
  const [purgeFor, setPurgeFor] = useState<TrashedFile | null>(null);

  const trashQuery = useQuery({
    queryKey: ["files", "trash", workspaceId],
    queryFn: () => filesApi.listTrash({ workspaceId }),
    enabled: workspaceId.length > 0,
    retry: false
  });

  const restore = useMutation({
    mutationFn: (id: string) => filesApi.restore(id, { workspaceId }),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["files", "trash", workspaceId] });
      qc.invalidateQueries({ queryKey: ["files", "browser", workspaceId] });
      toast("success", "File restored");
    },
    onError: (e) => toast("error", "Restore failed", e instanceof Error ? e.message : undefined)
  });

  const purge = useMutation({
    mutationFn: (id: string) => filesApi.purge(id, { workspaceId }),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["files", "trash", workspaceId] });
      toast("success", "File permanently deleted");
    },
    onError: (e) => toast("error", "Purge failed", e instanceof Error ? e.message : undefined)
  });

  const items = trashQuery.data ?? [];

  return (
    <div>
      <p className="mb-3 text-sm text-muted-foreground">
        Trashed files are kept and can be restored. Purging deletes the file and all of its versions for good.
      </p>
      {trashQuery.isLoading ? (
        <div className="flex h-40 items-center justify-center">
          <Loader2 className="size-5 animate-spin text-muted-foreground" aria-hidden />
        </div>
      ) : trashQuery.isError ? (
        <div className="flex h-40 flex-col items-center justify-center gap-2 text-sm text-muted-foreground">
          <AlertTriangle className="size-5" aria-hidden />
          Could not load the trash. Try again.
        </div>
      ) : items.length === 0 ? (
        <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
          The trash is empty.
        </div>
      ) : (
        <>
          {/* desktop table (hidden ≤ 640 px) */}
          <div className="hidden overflow-x-auto rounded-md border border-border md:block">
            <table className="w-full text-sm">
              <thead className="border-b border-border bg-muted/40 text-left text-xs uppercase tracking-wide text-muted-foreground">
                <tr>
                  <th className="px-3 py-2 font-medium">Name</th>
                  <th className="px-3 py-2 font-medium">Size</th>
                  <th className="px-3 py-2 font-medium">Deleted by</th>
                  <th className="px-3 py-2 font-medium">Deleted</th>
                  <th className="px-3 py-2 text-right font-medium">
                    <span className="sr-only">Actions</span>
                  </th>
                </tr>
              </thead>
              <tbody>
                {items.map((f) => (
                  <tr key={f.id} className="border-b border-border last:border-0">
                    <td className="max-w-[280px] px-3 py-2">
                      <span className="flex items-center gap-2">
                        <Trash2 className="size-4 shrink-0 text-muted-foreground" aria-hidden />
                        <span className="truncate font-medium">{f.name}</span>
                      </span>
                    </td>
                    <td className="whitespace-nowrap px-3 py-2 text-muted-foreground">{humanSize(f.size)}</td>
                    <td className="max-w-[140px] truncate px-3 py-2 text-muted-foreground">{f.uploadedByName ?? "—"}</td>
                    <td className="whitespace-nowrap px-3 py-2 text-muted-foreground">
                      {f.deletedAt ? new Date(f.deletedAt).toLocaleDateString() : "—"}
                    </td>
                    <td className="whitespace-nowrap px-3 py-2 text-right">
                      <button
                        type="button"
                        onClick={() => restore.mutate(f.id)}
                        disabled={restore.isPending}
                        className="mr-1 inline-flex items-center gap-1 rounded-md border border-border px-2 py-1 text-xs font-medium hover:bg-accent disabled:opacity-50"
                      >
                        <RotateCcw className="size-3.5" aria-hidden />
                        Restore
                      </button>
                      <button
                        type="button"
                        onClick={() => setPurgeFor(f)}
                        disabled={purge.isPending}
                        className="inline-flex items-center gap-1 rounded-md border border-red-300 px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-50 disabled:opacity-50 dark:border-red-900 dark:text-red-400 dark:hover:bg-red-950"
                      >
                        <Trash2 className="size-3.5" aria-hidden />
                        Purge
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* mobile card list (shown ≤ 640 px) */}
          <ul className="space-y-2 md:hidden">
            {items.map((f) => (
              <li key={f.id} className="flex items-center gap-3 rounded-md border border-border p-3">
                <Trash2 className="size-4 shrink-0 text-muted-foreground" aria-hidden />
                <span className="min-w-0 flex-1">
                  <span className="block truncate text-sm font-medium">{f.name}</span>
                  <span className="block truncate text-xs text-muted-foreground">
                    {humanSize(f.size)}
                    {f.deletedAt ? ` · deleted ${new Date(f.deletedAt).toLocaleDateString()}` : ""}
                  </span>
                </span>
                <button
                  type="button"
                  onClick={() => restore.mutate(f.id)}
                  disabled={restore.isPending}
                  className="rounded-md border border-border px-2 py-1 text-xs font-medium hover:bg-accent disabled:opacity-50"
                >
                  Restore
                </button>
                <button
                  type="button"
                  onClick={() => setPurgeFor(f)}
                  disabled={purge.isPending}
                  className="rounded-md border border-red-300 px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-50 disabled:opacity-50 dark:border-red-900 dark:text-red-400"
                >
                  Purge
                </button>
              </li>
            ))}
          </ul>
        </>
      )}

      <ConfirmDialog
        open={purgeFor !== null}
        title="Permanently delete this file?"
        description={
          <>
            <span className="font-medium text-foreground">{purgeFor?.name}</span> and all of its versions will be
            deleted. This cannot be undone.
          </>
        }
        confirmLabel="Purge"
        destructive
        busy={purge.isPending}
        onConfirm={() => {
          if (purgeFor) purge.mutate(purgeFor.id, { onSettled: () => setPurgeFor(null) });
        }}
        onClose={() => {
          if (!purge.isPending) setPurgeFor(null);
        }}
      />
    </div>
  );
}

/* =========================================================== versions */

function VersionsMenu({
  fileId,
  workspaceId,
  onClose
}: {
  fileId: string;
  workspaceId: string;
  onClose: () => void;
}) {
  const ref = useRef<HTMLDivElement>(null);
  const qc = useQueryClient();
  const [confirm, setConfirm] = useState<{ kind: "rollback" | "prune"; version?: number } | null>(null);

  const versionsQuery = useQuery({
    queryKey: ["files", fileId, "versions"],
    queryFn: () => filesApi.listVersions(fileId, { workspaceId }),
    enabled: !!fileId,
    retry: false
  });

  const rollback = useMutation({
    mutationFn: (v: number) => filesApi.rollback(fileId, v, { workspaceId }),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["files", fileId] });
      qc.invalidateQueries({ queryKey: ["files", fileId, "versions"] });
      toast("success", "Rolled back");
      onClose();
    },
    onError: (e) => toast("error", "Rollback failed", e instanceof Error ? e.message : undefined)
  });

  const prune = useMutation({
    mutationFn: () => filesApi.pruneVersions(fileId, { workspaceId }),
    onSuccess: (r) => {
      qc.invalidateQueries({ queryKey: ["files", fileId, "versions"] });
      qc.invalidateQueries({ queryKey: ["files", fileId] });
      toast("success", `Deleted ${r.pruned} old version${r.pruned === 1 ? "" : "s"}`);
      onClose();
    },
    onError: (e) => toast("error", "Delete failed", e instanceof Error ? e.message : undefined)
  });

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    const onClick = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
    };
    document.addEventListener("keydown", onKey);
    document.addEventListener("mousedown", onClick);
    return () => {
      document.removeEventListener("keydown", onKey);
      document.removeEventListener("mousedown", onClick);
    };
  }, [onClose]);

  const busy = rollback.isPending || prune.isPending;
  const versions = versionsQuery.data;

  const runConfirm = () => {
    if (!confirm) return;
    if (confirm.kind === "rollback" && confirm.version !== undefined) rollback.mutate(confirm.version);
    if (confirm.kind === "prune") prune.mutate();
    setConfirm(null);
  };

  const confirmTitle =
    confirm?.kind === "rollback"
      ? "Roll back to this version?"
      : "Delete all old versions?";
  const confirmDesc =
    confirm?.kind === "rollback" ? (
      <>
        The current version becomes the history and version{" "}
        <span className="font-medium text-foreground">v{confirm.version}</span> becomes current. The bytes are not
        re-uploaded.
      </>
    ) : (
      <>
        Every version except the current one is deleted. The current version is kept. This cannot be undone.
      </>
    );

  return (
    <>
      <div
        ref={ref}
        role="dialog"
        aria-modal="true"
        aria-label="File versions"
        className="fixed right-4 top-4 z-[95] w-80 max-w-[calc(100vw-2rem)] rounded-md border border-border bg-background p-3 shadow-xl"
      >
        <div className="mb-2 flex items-center justify-between">
          <p className="flex items-center gap-1.5 text-sm font-semibold">
            <History className="size-4 text-muted-foreground" aria-hidden />
            Versions
          </p>
          <button
            type="button"
            onClick={onClose}
            aria-label="Close versions"
            className="rounded p-1 text-muted-foreground hover:bg-accent"
          >
            ✕
          </button>
        </div>

        {versionsQuery.isLoading ? (
          <p className="flex items-center gap-2 py-2 text-sm text-muted-foreground">
            <Loader2 className="size-4 animate-spin" aria-hidden /> Loading…
          </p>
        ) : versionsQuery.isError ? (
          <p className="py-2 text-sm text-red-600 dark:text-red-400">
            Could not load versions ({versionsQuery.error instanceof Error ? versionsQuery.error.message : "unknown"}).
          </p>
        ) : versions && versions.length === 0 ? (
          <p className="py-2 text-sm text-muted-foreground">No versions recorded.</p>
        ) : versions ? (
          <ul className="max-h-64 space-y-1 overflow-y-auto">
            {versions.map((v) => (
              <li key={v.id} className="flex items-center gap-2 rounded px-1 py-1">
                <span className={cn("shrink-0 rounded px-1.5 py-0.5 text-[11px] font-medium", v.current ? "bg-primary/15 text-primary" : "bg-muted text-muted-foreground")}>
                  v{v.version}
                </span>
                <span className="min-w-0 flex-1">
                  <span className="block text-xs text-muted-foreground">
                    {humanSize(v.size)}
                    {v.createdByName ? ` · ${v.createdByName}` : ""} · {new Date(v.createdAt).toLocaleDateString()}
                  </span>
                </span>
                {v.current ? (
                  <span className="shrink-0 text-[11px] font-medium text-primary">Current</span>
                ) : (
                  <button
                    type="button"
                    onClick={() => setConfirm({ kind: "rollback", version: v.version })}
                    disabled={busy}
                    className="shrink-0 rounded border border-border px-1.5 py-0.5 text-[11px] font-medium hover:bg-accent disabled:opacity-50"
                  >
                    Rollback
                  </button>
                )}
              </li>
            ))}
          </ul>
        ) : null}

        <div className="mt-2 flex items-center justify-between border-t border-border pt-2">
          <p className="text-[11px] text-muted-foreground">
            {versions && versions.length > 1 ? `${versions.length} versions` : "1 version"}
          </p>
          <button
            type="button"
            onClick={() => setConfirm({ kind: "prune" })}
            disabled={busy || !versions || versions.length <= 1}
            className="rounded border border-red-300 px-2 py-1 text-[11px] font-medium text-red-600 hover:bg-red-50 disabled:opacity-50 dark:border-red-900 dark:text-red-400 dark:hover:bg-red-950"
          >
            Delete old versions
          </button>
        </div>
      </div>

      <ConfirmDialog
        open={confirm !== null}
        title={confirmTitle}
        description={confirmDesc}
        confirmLabel={confirm?.kind === "rollback" ? "Roll back" : "Delete"}
        destructive={confirm?.kind === "prune"}
        busy={busy}
        onConfirm={runConfirm}
        onClose={() => {
          if (!busy) setConfirm(null);
        }}
      />
    </>
  );
}

/* ===================================================== rows + cards */

function StatusPill({ status }: { status: FileStatus }) {
  const tone =
    status === "READY"
      ? "bg-emerald-100 text-emerald-800"
      : status === "VIRUS_DETECTED"
        ? "bg-red-100 text-red-800"
        : status === "FAILED"
          ? "bg-red-50 text-red-700"
          : "bg-amber-50 text-amber-700";
  return <span className={cn("inline-block rounded-full px-2 py-0.5 text-[11px] font-medium", tone)}>{status}</span>;
}

function FileRow({
  file,
  slug,
  onOpen,
  onVersions
}: {
  file: FileListItem;
  slug: string;
  onOpen: () => void;
  onVersions: () => void;
}) {
  const Icon = KIND_ICONS[kindForMime(file.mimeType)];
  return (
    <tr className="cursor-pointer border-b border-border last:border-0 hover:bg-accent/40" onClick={onOpen}>
      <td className="max-w-[280px] px-3 py-2">
        <span className="flex items-center gap-2">
          <Icon className="size-4 shrink-0 text-muted-foreground" aria-hidden />
          <span className="truncate font-medium">{file.name}</span>
        </span>
      </td>
      <td className="whitespace-nowrap px-3 py-2 text-muted-foreground">{humanSize(file.size)}</td>
      <td className="max-w-[140px] truncate px-3 py-2 text-muted-foreground">{file.uploadedByName ?? "—"}</td>
      <td className="max-w-[160px] px-3 py-2">
        {file.pageId ? (
          <Link
            href={`/w/${slug}/page/${file.pageId}`}
            onClick={(e) => e.stopPropagation()}
            className="block truncate text-primary hover:underline"
          >
            {file.pageName ?? "Page"}
          </Link>
        ) : (
          <span className="text-muted-foreground">—</span>
        )}
      </td>
      <td className="px-3 py-2">
        <StatusPill status={file.status} />
      </td>
      <td className="whitespace-nowrap px-3 py-2 text-muted-foreground">{new Date(file.updatedAt).toLocaleDateString()}</td>
      <td className="px-3 py-2 text-right">
        <button
          type="button"
          onClick={(e) => {
            e.stopPropagation();
            onVersions();
          }}
          aria-label={`Versions for ${file.name}`}
          className="inline-flex items-center gap-1 rounded-md border border-border px-2 py-1 text-xs font-medium hover:bg-accent"
        >
          <History className="size-3.5" aria-hidden />
          {file.versionCount > 0 ? file.versionCount : ""}
        </button>
      </td>
    </tr>
  );
}

function FileCard({
  file,
  onOpen,
  onVersions
}: {
  file: FileListItem;
  onOpen: () => void;
  onVersions: () => void;
}) {
  const Icon = KIND_ICONS[kindForMime(file.mimeType)];
  return (
    <li className="flex items-center gap-3 rounded-md border border-border p-3">
      <button type="button" onClick={onOpen} className="flex min-w-0 flex-1 items-center gap-3 text-left">
        <span className="flex size-9 shrink-0 items-center justify-center rounded bg-muted">
          <Icon className="size-4 text-muted-foreground" aria-hidden />
        </span>
        <span className="min-w-0 flex-1">
          <span className="block truncate text-sm font-medium">{file.name}</span>
          <span className="block truncate text-xs text-muted-foreground">
            {humanSize(file.size)}
            {file.uploadedByName ? ` · ${file.uploadedByName}` : ""}
          </span>
        </span>
        <StatusPill status={file.status} />
      </button>
      <button
        type="button"
        onClick={onVersions}
        aria-label={`Versions for ${file.name}`}
        className="shrink-0 rounded-md border border-border p-1.5 text-muted-foreground hover:bg-accent"
      >
        <History className="size-4" aria-hidden />
      </button>
    </li>
  );
}