/**
 * AI Software Factory — E2E: Files & Uploads (Phase 9, TASK-0103)
 *
 * Covers the real Phase-9 presigned contract (see docs/api/files.md §8):
 *
 *  1. image upload through the UI file-picker block (the hidden
 *     `[data-testid="file-input"]`) → the block re-renders in place with the
 *     image (the picker block uploads its first file onto itself,
 *     `updateBlockId`).
 *  2. PDF uploaded via the API + attached to a file block → renders the
 *     preview iframe.
 *  3. oversized file (declared size above the plan limit) → rejected at
 *     session creation with `FILE_TOO_LARGE` 413.
 *  4. MIME spoof (declared `image/png`, text bytes) → rejected at complete
 *     with `MIME_MISMATCH` 415.
 *  5. a non-member cannot read the file (403 on `GET /files/:id` and
 *     `GET /files/:id/download`; 403 on listing a foreign workspace).
 *  6. video mp4 → the file block renders a native `<video>` that decodes
 *     (videoWidth > 0 after loadedmetadata).
 *  7. audio wav → the file block renders a native `<audio>` with the name in
 *     its text alternative.
 *  8. document (text/plain) → the file block renders the download card
 *     (`file-name-{id}` + `file-download-{id}` button, mime · human size).
 *  9. EICAR (ClamAV test signature) → the block renders the red
 *     "Blocked by virus scan" card with NO download affordance (the
 *     TASK-0103 "virus block state rendered" DoD item; the 500 MB /
 *     path-traversal / audit parts of the security suite are TASK-0105).
 * 10. the file block's "Add file" button (upload path c) — the REAL browser
 *     upload flow: set a file on the picker's hidden input → the block
 *     uploads via the presigned XHR PUT and re-renders in place with the
 *     image (proves the browser→MinIO round trip, not just the API helper).
 *
 * Selector convention (tests/README.md §Selector):
 *   data-testid="editor-root"             editor canvas (also the drop target)
 *   data-testid="file-input"              hidden <input type="file"> (picker)
 *   data-testid="file-card-{fileId}"      rendered file block (per kind)
 *   data-testid="file-name-{fileId}"      filename on doc/other cards
 *   data-testid="file-download-{fileId}"  download button on doc/other cards
 *
 * The full security suite (500 MB upload, EICAR/malware, path traversal) is
 * TASK-0105's scope per the spec; this spec owns the upload → render →
 * download happy paths + the two rejection cases above.
 */
import * as fs from "node:fs";
import * as os from "node:os";
import * as path from "node:path";
import { test, expect } from "../fixtures";
import {
  uploadFile,
  createPage,
  createBlock,
  getFile,
  openUploadSession,
  putPresigned,
  workspaceHeader,
} from "../utils/api";

/** Read a binary fixture from `tests/e2e/fixtures/files/`. */
function fixture(name: string): Buffer {
  return fs.readFileSync(path.join(__dirname, "..", "fixtures", "files", name));
}

// A tiny valid PNG (1x1 red pixel).
const TINY_PNG = Buffer.from(
  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
  "base64",
);

// A minimal but valid PDF (one blank page).
const TINY_PDF = Buffer.from(
  "%PDF-1.4\n1 0 obj<</Type/Catalog/Pages 2 0 R>>endobj\n" +
    "2 0 obj<</Type/Pages/Kids[3 0 R]/Count 1>>endobj\n" +
    "3 0 obj<</Type/Page/Parent 2 0 R/MediaBox[0 0 612 792]>>endobj\n" +
    "xref\n0 4\n0000000000 65535 f \n" +
    "trailer<</Size 4/Root 1 0 R>>\nstartxref\n9\n%%EOF",
  "latin1",
);

// The standard 69-byte ClamAV test signature (identical to the integration
// fixture) — the worker flags it VIRUS_DETECTED via `zCONTSCAN`.
const EICAR = Buffer.from(
  "X5O!P%@AP[4\\PZX54(P^)7CC)7}$EICAR-STANDARD-ANTIVIRUS-TEST-FILE!$H+H*",
  "latin1",
);

test.describe("Files — Phase 9 (TASK-0103)", () => {
  test("image renders in a file block (picker input present for upload path c)", async ({
    authPage,
    api,
    freshWorkspace,
  }) => {
    const ws = await freshWorkspace("Image Space");
    const page = await createPage(api, ws.id, { title: "Image Page" });
    const file = await uploadFile(api, "pixel.png", "image/png", TINY_PNG, ws.id);
    expect(file.status).toBe("READY");
    // A `file` block with a fileId renders the image; an empty `file` block
    // renders the picker ("Add file") — upload path c. Block type is the
    // UPPERCASE wire enum (API zod `BLOCK_TYPES`; the realtime layer maps it
    // to the editor codec's lowercase on read). Both created before the single
    // navigation.
    await createBlock(api, page.id, { type: "FILE", properties: { fileId: file.id } });
    await createBlock(api, page.id, { type: "FILE", properties: {} });

    await authPage.goto(`/w/${ws.id}/page/${page.id}`);
    const card = authPage.getByTestId(`file-card-${file.id}`);
    await expect(card).toBeVisible({ timeout: 45_000 });
    const img = card.locator("img").first();
    await expect(img).toBeVisible();
    await expect(img).toHaveAttribute("src", /.+/);

    // The empty file block exposes the picker's hidden input.
    await expect(authPage.getByTestId("file-input")).toBeAttached({ timeout: 10_000 });
  });

  test("upload PDF via API → file block renders the preview iframe", async ({
    authPage,
    api,
    freshWorkspace,
  }) => {
    const ws = await freshWorkspace("Pdf Space");
    const page = await createPage(api, ws.id, { title: "Pdf Page" });
    const file = await uploadFile(api, "spec.pdf", "application/pdf", TINY_PDF, ws.id);
    expect(file.status).toBe("READY");
    await createBlock(api, page.id, {
      type: "file",
      properties: { fileId: file.id },
    });

    await authPage.goto(`/w/${ws.id}/page/${page.id}`);
    const card = authPage.getByTestId(`file-card-${file.id}`);
    await expect(card).toBeVisible({ timeout: 45_000 });
    const frame = card.locator("iframe").first();
    await expect(frame).toBeVisible();
    await expect(frame).toHaveAttribute("src", /.+/);
  });

  test("oversized file (declared size above plan limit) → 413 FILE_TOO_LARGE", async ({
    api,
    freshWorkspace,
  }) => {
    const ws = await freshWorkspace("Oversize Space");
    // The free plan caps at 50 MB; declare well over it (no bytes are sent —
    // the rejection happens at session creation).
    const res = await openUploadSession(
      api,
      ws.id,
      "huge.bin",
      "application/octet-stream",
      120 * 1024 * 1024,
    );
    expect(res.status).toBe(413);
    expect(res.code).toBe("FILE_TOO_LARGE");
  });

  test("MIME spoof (declared png, text bytes) → 415 MIME_MISMATCH at complete", async ({
    api,
    freshWorkspace,
  }) => {
    const ws = await freshWorkspace("Spoof Space");
    // Declare image/png but upload plain-text bytes; the worker's magic-byte
    // check rejects at complete() and deletes the object.
    const spoof = Buffer.from("this is not a png, just plain text bytes for the spoof test");
    const res = await openUploadSession(api, ws.id, "spoof.png", "image/png", spoof.length);
    expect(res.status).toBeLessThan(300);
    const fileId = (res.body as { upload: { file: { id: string } } }).upload.file.id;
    const putUrl = (res.body as { upload: { uploadUrl: string } }).upload.uploadUrl;
    const ct =
      (res.body as { upload: { headers: Record<string, string> } }).upload.headers[
        "Content-Type"
      ] ?? "image/png";
    const putStatus = await putPresigned(putUrl, spoof, ct);
    expect(putStatus, `presigned PUT returned ${putStatus}`).toBeLessThan(300);
    const complete = await api.put(`/api/v1/files/uploads/${fileId}/complete`, {
      data: {},
    });
    expect(complete.status()).toBe(415);
    const err = (await complete.json()) as { error: { code: string } };
    expect(err.error.code).toBe("MIME_MISMATCH");
  });

  test("non-member cannot read or download the file (403)", async ({
    api,
    secondUser,
    freshWorkspace,
  }) => {
    const ws = await freshWorkspace("Private Files Space");
    const file = await uploadFile(api, "secret.png", "image/png", TINY_PNG, ws.id);
    expect(file.status).toBe("READY");

    // An outsider (no membership in `ws`) is rejected on the file and its
    // download, and on listing a foreign workspace.
    const { api: outsiderApi } = await secondUser();
    expect((await outsiderApi.get(`/api/v1/files/${file.id}`)).status()).toBe(403);
    const dl = await outsiderApi.get(`/api/v1/files/${file.id}/download`);
    expect(dl.status()).toBe(403);
    const listForeign = await outsiderApi.get("/api/v1/files", {
      headers: { "x-factory-workspace": ws.id },
    });
    expect(listForeign.status()).toBe(403);

    // The owner still has the signed URLs.
    const detail = await getFile(api, file.id, ws.id);
    expect(detail.downloadUrl).toBeTruthy();
    expect(detail.previewUrl).toBeTruthy();
  });

  test("video (webm/VP9) → file block renders a native <video> that decodes", async ({
    authPage,
    api,
    freshWorkspace,
  }) => {
    const ws = await freshWorkspace("Video Space");
    const page = await createPage(api, ws.id, { title: "Video Page" });
    // VP9/webm (a spec-supported video kind — mp4/webm/mov): Playwright's
    // open-source Chromium ships WITHOUT the H.264 decoder, so an mp4's
    // metadata never loads there (`canPlayType("…avc1…")` === ""). webm is
    // the decode-able kind in this environment (see the recorded conflict in
    // the Phase 9 Notes).
    const file = await uploadFile(api, "clip.webm", "video/webm", fixture("clip.webm"), ws.id);
    expect(file.status).toBe("READY");
    await createBlock(api, page.id, { type: "file", properties: { fileId: file.id } });

    await authPage.goto(`/w/${ws.id}/page/${page.id}`);
    const card = authPage.getByTestId(`file-card-${file.id}`);
    await expect(card).toBeVisible({ timeout: 45_000 });
    const video = card.locator("video").first();
    await expect(video).toBeVisible();
    await expect(video).toHaveAttribute("src", /.+/);
    // The native <video> decodes: once metadata is loaded, videoWidth > 0
    // (the AC's "videoWidth > 0" — read at loadedmetadata, the correct
    // signal for dimensions, rather than awaiting play()).
    await video.evaluate(async (v: HTMLVideoElement) => {
      if (v.readyState < 1) {
        await new Promise<void>((resolve, reject) => {
          const t = setTimeout(() => reject(new Error("video metadata timeout")), 20_000);
          v.addEventListener(
            "loadedmetadata",
            () => {
              clearTimeout(t);
              resolve();
            },
            { once: true },
          );
        });
      }
    });
    expect(await video.evaluate((v: HTMLVideoElement) => v.videoWidth)).toBeGreaterThan(0);
  });

  test("audio wav → file block renders a native <audio> with the name", async ({
    authPage,
    api,
    freshWorkspace,
  }) => {
    const ws = await freshWorkspace("Audio Space");
    const page = await createPage(api, ws.id, { title: "Audio Page" });
    const file = await uploadFile(api, "clip.wav", "audio/wav", fixture("clip.wav"), ws.id);
    expect(file.status).toBe("READY");
    await createBlock(api, page.id, { type: "file", properties: { fileId: file.id } });

    await authPage.goto(`/w/${ws.id}/page/${page.id}`);
    const card = authPage.getByTestId(`file-card-${file.id}`);
    await expect(card).toBeVisible({ timeout: 45_000 });
    const audio = card.locator("audio").first();
    await expect(audio).toBeVisible();
    await expect(audio).toHaveAttribute("src", /.+/);
    // A11y (Requirements §7): the player carries a text alternative (name).
    await expect(audio).toHaveAttribute("aria-label", /clip\.wav/);
  });

  test("document (text/plain) → download card with name + download button", async ({
    authPage,
    api,
    freshWorkspace,
  }) => {
    const ws = await freshWorkspace("Docs Space");
    const page = await createPage(api, ws.id, { title: "Docs Page" });
    const file = await uploadFile(api, "note.txt", "text/plain", fixture("note.txt"), ws.id);
    expect(file.status).toBe("READY");
    await createBlock(api, page.id, { type: "file", properties: { fileId: file.id } });

    await authPage.goto(`/w/${ws.id}/page/${page.id}`);
    const card = authPage.getByTestId(`file-card-${file.id}`);
    await expect(card).toBeVisible({ timeout: 45_000 });
    await expect(card.getByTestId(`file-name-${file.id}`)).toHaveText("note.txt");
    // mime · human size line.
    await expect(card).toContainText("text/plain");
    // The download affordance is a real <button> (not a styled div).
    const dl = card.getByTestId(`file-download-${file.id}`);
    await expect(dl).toBeVisible();
    await expect(dl).toBeAttached();
    expect(await dl.evaluate((el) => el instanceof HTMLButtonElement)).toBe(true);
  });

  test("EICAR → red \"Blocked by virus scan\" card, no download affordance", async ({
    authPage,
    api,
    freshWorkspace,
  }) => {
    const ws = await freshWorkspace("Virus Space");
    const page = await createPage(api, ws.id, { title: "Virus Page" });
    const file = await uploadFile(api, "eicar.txt", "text/plain", EICAR, ws.id);
    expect(file.status).toBe("VIRUS_DETECTED");
    await createBlock(api, page.id, { type: "file", properties: { fileId: file.id } });

    await authPage.goto(`/w/${ws.id}/page/${page.id}`);
    // The virus card renders a red alert (no download/download-card).
    const blocked = authPage.getByText("Blocked by virus scan");
    await expect(blocked).toBeVisible({ timeout: 45_000 });
    // No download affordance for a virus file.
    await expect(authPage.getByTestId(`file-card-${file.id}`)).toHaveCount(0);
    await expect(authPage.getByTestId(`file-download-${file.id}`)).toHaveCount(0);
  });

  test("file block \"Add file\" button (upload path c) — browser upload → renders", async ({
    authPage,
    api,
    freshWorkspace,
  }) => {
    // This is the longest test: page load + browser session→PUT→complete +
    // ClamAV scan + poll + reload + re-render. Give it its own budget.
    test.setTimeout(120_000);
    const ws = await freshWorkspace("Button Upload Space");
    const page = await createPage(api, ws.id, { title: "Button Upload Page" });
    // An empty `file` block → the picker ("Add file").
    const picker = await createBlock(api, page.id, { type: "FILE", properties: {} });
    await authPage.goto(`/w/${ws.id}/page/${page.id}`);

    const input = authPage.getByTestId("file-input");
    await expect(input).toBeAttached({ timeout: 15_000 });

    // Drive the REAL browser upload: set a file on the picker's input. The
    // block's `onFilesMulti` → `useFileUploads.start(file, { updateBlockId })`
    // opens a presigned session, PUTs the bytes from the BROWSER to MinIO,
    // calls complete, and updates THIS block's properties to { fileId, name }
    // (a PATCH /blocks/:id carrying the lowercase codec type — the case
    // reconciliation under test).
    await input.setInputFiles({ name: "pixel.png", mimeType: "image/png", buffer: TINY_PNG });

    // Wait for the browser upload to fully settle server-side: the block
    // gains properties.fileId (at session open) and the file reaches READY.
    const deadline = Date.now() + 60_000;
    let fileId: string | undefined;
    for (;;) {
      const body = (await (
        await api.get(`/api/v1/pages/${page.id}/blocks`)
      ).json()) as { data: { id: string; properties: { fileId?: string } }[] };
      const props = body.data.find((b) => b.id === picker.id)?.properties ?? {};
      if (props.fileId) {
        fileId = props.fileId as string;
        const detail = await getFile(api, fileId, ws.id);
        if (detail.status === "READY") break;
        if (detail.status === "FAILED" || detail.status === "VIRUS_DETECTED") {
          throw new Error(`path c: upload ended ${detail.status}`);
        }
      }
      if (Date.now() > deadline) throw new Error("path c: upload did not settle in 60s");
      await new Promise((r) => setTimeout(r, 1000));
    }
    expect(fileId).toBeTruthy();

    // The transfer is complete; reload to refetch the block (its properties
    // now carry the fileId) so it switches from the picker to the render.
    await authPage.reload();
    const card = authPage.getByTestId(`file-card-${fileId}`);
    await expect(card).toBeVisible({ timeout: 45_000 });
    await expect(card.locator("img").first()).toBeVisible();
  });

  // ── TASK-0105 E2E scenarios (Requirements §1: paste, DOCX, free-60MB,
  //    unauthorized block state, picker thumbnail) ─────────────────────────

  test("paste an image from the clipboard → uploads + renders a new file block", async ({
    authPage,
    api,
    freshWorkspace,
  }) => {
    test.setTimeout(90_000);
    const ws = await freshWorkspace("Paste Space");
    const page = await createPage(api, ws.id, { title: "Paste Page" });
    await authPage.goto(`/w/${ws.id}/page/${page.id}`);
    // The editor must be active before the window paste listener will accept
    // an image (it gates on `activePageId === pageId`).
    await expect(authPage.getByTestId("editor-root")).toBeVisible({ timeout: 30_000 });
    // No file blocks yet.
    expect(await authPage.getByTestId(/^file-card-/).count()).toBe(0);

    // Simulate Ctrl+V carrying an image file: build a real `File` in the page,
    // put it on a `DataTransfer`, and dispatch a `paste` event on `window`
    // (the handler the editor registers). This drives the real
    // `startUpload(file)` → presigned session → XHR PUT → complete path.
    //
    // `ClipboardEventInit` has no `clipboardData` member and the event's
    // `clipboardData` is a read-only getter, so the constructor cannot carry
    // our `DataTransfer` — shadow the instance property explicitly.
    await authPage.evaluate((b64: string) => {
      const bin = atob(b64);
      const bytes = new Uint8Array(bin.length);
      for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
      const file = new File([bytes], "pasted.png", { type: "image/png" });
      const dt = new DataTransfer();
      dt.items.add(file);
      const ev = new ClipboardEvent("paste", { bubbles: true, cancelable: true });
      Object.defineProperty(ev, "clipboardData", { value: dt, configurable: true });
      window.dispatchEvent(ev);
    }, TINY_PNG.toString("base64"));

    // A NEW file block appears and renders the pasted image (the paste path
    // creates a block — it has no `updateBlockId`).
    const card = authPage.getByTestId(/^file-card-/);
    await expect(card.first()).toBeVisible({ timeout: 60_000 });
    await expect(card.first().locator("img").first()).toBeVisible();
    await expect(card.first().locator("img").first()).toHaveAttribute("src", /.+/);
  });

  test("DOCX → download card (name + button) and Download delivers the exact bytes", async ({
    authPage,
    api,
    freshWorkspace,
  }) => {
    test.setTimeout(90_000);
    const ws = await freshWorkspace("Docx Space");
    const page = await createPage(api, ws.id, { title: "Docx Page" });
    const docx = fixture("note.docx");
    const file = await uploadFile(
      api,
      "note.docx",
      "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      docx,
      ws.id,
    );
    expect(file.status).toBe("READY");
    await createBlock(api, page.id, { type: "file", properties: { fileId: file.id } });

    await authPage.goto(`/w/${ws.id}/page/${page.id}`);
    const card = authPage.getByTestId(`file-card-${file.id}`);
    await expect(card).toBeVisible({ timeout: 45_000 });
    // doc kind → the download card (name + mime + Download button).
    await expect(card.getByTestId(`file-name-${file.id}`)).toHaveText("note.docx");
    await expect(card).toContainText("application/vnd.openxmlformats-officedocument");
    const dl = card.getByTestId(`file-download-${file.id}`);
    await expect(dl).toBeVisible();

    // The Download button navigates to the signed attachment URL — capture
    // the download and assert the BYTES round-trip exactly (the AC "Download
    // delivers the file"). The signed GET is `attachment;`, so Playwright
    // emits a `download` event rather than a navigation.
    const [download] = await Promise.all([authPage.waitForEvent("download"), dl.click()]);
    expect(download.suggestedFilename()).toBe("note.docx");
    const path = await download.path();
    const delivered = await fs.promises.readFile(path!);
    expect(delivered.equals(docx)).toBe(true);
  });

  test("60 MB file on the free plan → client-side \"File too large\" toast, no session opened", async ({
    authPage,
    api,
    freshWorkspace,
  }) => {
    test.setTimeout(90_000);
    const ws = await freshWorkspace("Free 60MB Space");
    const page = await createPage(api, ws.id, { title: "60MB Page" });
    // An empty `file` block → the picker's hidden input (upload path c).
    await createBlock(api, page.id, { type: "FILE", properties: {} });
    await authPage.goto(`/w/${ws.id}/page/${page.id}`);
    const input = authPage.getByTestId("file-input");
    await expect(input).toBeAttached({ timeout: 30_000 });

    // The free plan caps per-file uploads at 50 MB. The web pre-check rejects
    // a 60 MB File BEFORE opening a presigned session (no bytes are sent) and
    // shows the "File too large" toast (Requirement §1 / TASK-0105 §3).
    // Playwright refuses an in-memory buffer > 50 MB, so write a 60 MB file to
    // disk (sparse — one write + truncate, ~0 disk cost) and pass its path.
    const dir = await fs.promises.mkdtemp(path.join(os.tmpdir(), "e2e-big-"));
    const bigPath = path.join(dir, "big.bin");
    const fd = await fs.promises.open(bigPath, "w");
    try {
      await fd.truncate(60 * 1024 * 1024); // 62,914,560 bytes = 60 MiB > 50 MiB limit
    } finally {
      await fd.close();
    }
    try {
      // Plain path string: Playwright infers the mime from the extension and
      // uses the basename as the name. The pre-check keys off `file.size`
      // only (no mime/session), so this is sufficient.
      await input.setInputFiles(bigPath);

      const toast = authPage.getByRole("status").filter({ hasText: /File too large/ });
      await expect(toast).toBeVisible({ timeout: 25_000 });
      await expect(toast).toContainText(/60|50 MB per-file limit/);

      // No file block was created and no upload session was opened server-side
      // (the pre-check short-circuits before any request). Only the empty
      // picker block exists, which does NOT carry a `file-card-{id}` testid.
      expect(await authPage.getByTestId(/^file-card-/).count()).toBe(0);
      const list = (await (await api.get("/api/v1/files", { headers: workspaceHeader(ws.id) })).json()) as {
        data: unknown[];
      };
      expect(list.data ?? []).toHaveLength(0);
    } finally {
      await fs.promises.rm(dir, { recursive: true, force: true });
    }
  });

  test("unauthorized: a non-member cannot see the file block (block state)", async ({
    secondUser,
    api,
    freshWorkspace,
  }) => {
    const ws = await freshWorkspace("Unauthorized UI Space");
    const page = await createPage(api, ws.id, { title: "Private Page" });
    const file = await uploadFile(api, "locked.png", "image/png", TINY_PNG, ws.id);
    expect(file.status).toBe("READY");
    await createBlock(api, page.id, { type: "file", properties: { fileId: file.id } });

    // The outsider is not a member of `ws`. Their browser's workspace query
    // 403s → the workspace layout redirects them off the private page, so the
    // file block is never rendered for them (Requirement §1 unauthorized block
    // state). The API 403 is covered by the integration matrix + the TASK-0103
    // non-member test; here we assert the BLOCK never appears in the UI.
    const { page: outsider } = await secondUser();
    await outsider.goto(`/w/${ws.id}/page/${page.id}`);
    // The workspace layout bounces non-members (useWorkspace 403 →
    // router.replace("/w/default")); wait for that redirect to settle.
    await expect.poll(() => outsider.url(), {
      timeout: 20_000,
      message: "non-member is bounced off the private page",
    }).not.toContain(`/page/${page.id}`);
    // And the file block is never present in their DOM.
    await expect(outsider.getByTestId(`file-card-${file.id}`)).toHaveCount(0);
  });

  test("file picker shows the uploaded image as a thumbnail", async ({
    authPage,
    api,
    freshWorkspace,
  }) => {
    const ws = await freshWorkspace("Picker Thumb Space");
    const page = await createPage(api, ws.id, { title: "Picker Page" });
    // A real multi-size image (the hero PNG) — a 1×1 png may not yield a
    // thumbnail artifact, but the worker thumbnails a 1400×900 image at
    // 160/480/1280, so it has a `thumbnailUrl`.
    const file = await uploadFile(api, "hero.png", "image/png", fixture("hero-1400.png"), ws.id);
    expect(file.status).toBe("READY");
    expect(file.thumbnailUrl, "an image gets a thumbnail").toBeTruthy();
    await createBlock(api, page.id, { type: "file", properties: { fileId: file.id } });

    await authPage.goto(`/w/${ws.id}/page/${page.id}`);
    await expect(authPage.getByTestId("files-picker-toggle")).toBeVisible({ timeout: 30_000 });

    // Open the page file picker (role="dialog" aria-label="Files").
    await authPage.getByTestId("files-picker-toggle").click();
    const panel = authPage.getByRole("dialog", { name: "Files" });
    await expect(panel).toBeVisible({ timeout: 15_000 });

    // The picker defaults to the "In this page" scope, but `hero.png` was
    // uploaded workspace-scoped (pageId: null) via the API helper — switch to
    // "In workspace" so the tile is in the list (the scope filter is the
    // product behavior we are exercising).
    await panel.getByRole("button", { name: "In workspace" }).click();

    // The uploaded image renders as a real <img> thumbnail in its tile
    // (FileTile: `file.thumbnailUrl && kind === "image"` → <img>), not the
    // generic FileImage icon.
    const tile = panel.getByRole("option", { name: /hero\.png/ });
    await expect(tile).toBeVisible({ timeout: 15_000 });
    const thumb = tile.locator("img").first();
    await expect(thumb).toBeVisible();
    await expect(thumb).toHaveAttribute("src", /.+/);
  });
});