/// <reference lib="dom" />
import { expect } from "e2e";
import { mkdir, writeFile, rm } from "node:fs/promises";
import { test, WEB } from "./t3.ts";

test("Opening 40000 sibling directories keeps the Files panel responsive", WEB, async ({t3, app, browser, screen}) => {
  const project = await t3.project("Large folder", {"src/existing.txt":"Selection survives refresh\n"});
  for(let i=0;i<40000;i++) await mkdir(`${project}/src/generated-${String(i).padStart(5,"0")}`);
  const thread = await t3.thread({project,title:"Large folder responsiveness",messages:["first"]});
  await t3.open(thread);
  await screen.getByRole("button","Toggle right panel").tap();
  await screen.getByText("Files").tap();
  await browser.evaluate(() => {
    const state={tasks:[] as number[], start:performance.now(),last:performance.now(),gap:0};
    Object.assign(window,{folderProof:state});
    const panel=document.createElement("div"); panel.id="proof-clock";
    panel.style.cssText="position:fixed;top:8px;left:370px;z-index:99999;background:#102030;color:white;padding:12px;font:16px monospace;pointer-events:none";
    document.body.append(panel);
    new PerformanceObserver(list=>{for(const task of list.getEntries())state.tasks.push(task.duration)}).observe({type:"longtask"});
    setInterval(()=>{const now=performance.now();state.gap=Math.max(state.gap,now-state.last);state.last=now;panel.textContent=`40000 directories | Clock ${((now-state.start)/1000).toFixed(2)}s | Longest task ${Math.round(Math.max(0,...state.tasks))}ms | Heartbeat gap ${Math.round(state.gap)}ms`;},50);
  });
  await screen.getByRole("treeitem", "src").waitFor({state:"visible"});
  await app.screenshot("before-expansion");
  await screen.getByRole("treeitem", "src").tap();
  await browser.keyboard.press("ArrowRight");
  await screen.getByRole("textbox", "Message Large folder responsiveness").tap();
  await browser.keyboard.type("Typing while the large folder opens");
  await screen.getByRole("treeitem", "generated-00000", {exact:true}).waitFor();
  await app.screenshot("expanded-folder");
  const metrics=await browser.evaluate(()=> (window as any).folderProof);
  console.log("EXPANSION_METRICS",JSON.stringify(metrics));
  await app.screenshot("responsiveness-result");
  const search=screen.getByRole("searchbox", "Search Large folder files");
  await search.fill("existing");
  await screen.getByRole("treeitem", "existing.txt", {exact:true}).tap();
  await app.screenshot("selected-existing-file");
  await search.fill("generated-");
  for(let i=0;i<2000;i++) await writeFile(`${project}/src/generated-new-${String(i).padStart(4,"0")}.ts`, "");
  await screen.getByRole("button","Refresh workspace files").tap();
  await app.screenshot("search-kept-after-refresh");
  await search.fill("generated-new-");
  await screen.getByRole("treeitem", "generated-new-0000.ts", {exact:true}).waitFor();
  await app.screenshot("search-after-additions");
  for(let i=0;i<40000;i++) await rm(`${project}/src/generated-${String(i).padStart(5,"0")}`,{recursive:true});
  await screen.getByRole("button","Refresh workspace files").tap();
  await search.fill("");
  await screen.getByRole("treeitem", "generated-new-0000.ts", {exact:true}).waitFor();
  await app.screenshot("after-removals");
  await expect(Math.max(0,...metrics.tasks)).toBeLessThan(1500);
});