#!/usr/bin/env node
"use strict";

const assert = require("node:assert/strict");
const fs = require("node:fs");
const http = require("node:http");
const net = require("node:net");
const os = require("node:os");
const path = require("node:path");
const { spawn } = require("node:child_process");
const { chromium } = require("playwright");
const { buildControlPlaneTestEnv } = require("./lib/control-plane-test-env");

const TASK = "task497-local-page-tree-filetree-open-performance-smoke";
const UI_TIMEOUT_MS = Number(process.env.MNOTE_SMOKE_UI_TIMEOUT_MS || 45_000);
const TEST_PASSWORD = process.env.MNOTE_E2E_PASSWORD || ["Mnote", "E2E", "123!"].join("");
const TARGET_RELATIVE_PATH = "design/05-editor-mainline/process/5-32-filetree-lazy-loading-sidex-alignment-v1.md";
const RESULT_DIR = path.join(__dirname, "..", "tmp", TASK);

function resolveChromiumExecutablePath() {
  const explicit = process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH || "";
  if (explicit && fs.existsSync(explicit)) return explicit;
  return [
    "/usr/bin/google-chrome-stable",
    "/usr/bin/google-chrome",
    "/snap/bin/chromium",
    "/usr/bin/chromium",
    "/usr/bin/chromium-browser",
  ].find((candidate) => fs.existsSync(candidate)) || "";
}

function pickPort() {
  return new Promise((resolve, reject) => {
    const server = net.createServer();
    server.listen(0, "127.0.0.1", () => {
      const address = server.address();
      const port = address && typeof address === "object" ? address.port : 0;
      server.close(() => resolve(port));
    });
    server.on("error", reject);
  });
}

function waitForHttpOk(url, timeoutMs) {
  const deadline = Date.now() + timeoutMs;
  return new Promise((resolve, reject) => {
    const tick = () => {
      const request = http.get(url, (response) => {
        response.resume();
        if (response.statusCode >= 200 && response.statusCode < 500) {
          resolve();
          return;
        }
        retry();
      });
      request.on("error", retry);
      request.setTimeout(1000, () => {
        request.destroy();
        retry();
      });
    };
    const retry = () => {
      if (Date.now() > deadline) {
        reject(new Error(`server_not_ready: ${url}`));
        return;
      }
      setTimeout(tick, 250);
    };
    tick();
  });
}

function fileUrlToPath(value) {
  const url = new URL(value);
  return decodeURIComponent(url.pathname);
}

function cssEscape(value) {
  return String(value).replace(/["\\]/g, "\\$&");
}

async function signUp(context, baseUrl, actorId) {
  const authResponse = await context.request.fetch(`${baseUrl}/api/auth`, {
    method: "POST",
    data: {
      action: "auth:signIn",
      args: {
        provider: "password",
        params: {
          email: `${actorId}@example.com`,
          username: actorId,
          name: actorId,
          password: TEST_PASSWORD,
          flow: "signUp",
        },
      },
    },
  });
  assert(authResponse.ok(), `测试账号注册失败: ${authResponse.status()} ${await authResponse.text()}`);
}

async function openDefaultLocalWorkspace(page, baseUrl) {
  await page.goto(baseUrl, { waitUntil: "domcontentloaded", timeout: UI_TIMEOUT_MS });
  const createButton = page.locator('[data-testid="mnote-create-default-local-workspace"]').first();
  if (await createButton.isVisible({ timeout: 3000 }).catch(() => false)) {
    await createButton.click({ timeout: UI_TIMEOUT_MS });
    await page.waitForURL((url) => url.searchParams.get("sourceKind") === "local_folder", {
      timeout: UI_TIMEOUT_MS,
    });
  }
  const url = new URL(page.url());
  const rootUri = url.searchParams.get("rootUri")
    || await page.evaluate(() => document.body.getAttribute("data-mnote-root-uri") || "");
  assert(rootUri, "应进入 local_folder workspace");
  return {
    rootUri,
    workspaceId: url.searchParams.get("workspaceId") || "",
  };
}

async function expandFolder(page, relativePath) {
  const rowSelector = `#sidebar-file-tree-root .tree-row[data-shell-mode="filetree"][data-local-relative-path="${relativePath}"]`;
  await page.locator(rowSelector).waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
  const expanded = await page.locator(rowSelector).getAttribute("aria-expanded");
  if (expanded !== "true") {
    await page.locator(`${rowSelector} [data-rust-action="toggle"]`).click({ timeout: UI_TIMEOUT_MS });
    await page.waitForFunction((selector) => {
      const row = document.querySelector(selector);
      return row && row.getAttribute("aria-expanded") === "true" && row.getAttribute("data-filetree-children-loaded") === "true";
    }, rowSelector, { timeout: UI_TIMEOUT_MS });
  }
}

async function setPageRowExpanded(page, nodeId, expanded) {
  const selector = `#sidebar-tree-root .tree-row[data-shell-mode="page"][data-node-id="${cssEscape(nodeId)}"]`;
  await page.locator(selector).waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
  const current = await page.locator(selector).first().getAttribute("aria-expanded");
  if ((current === "true") !== expanded) {
    await page.locator(`${selector} [data-rust-action="toggle"]`).first().click({ timeout: UI_TIMEOUT_MS });
  }
  await page.waitForFunction(
    ({ targetNodeId, expected }) => {
      const row = document.querySelector(`#sidebar-tree-root .tree-row[data-shell-mode="page"][data-node-id="${CSS.escape(targetNodeId)}"]`);
      return row && row.getAttribute("aria-expanded") === String(expected);
    },
    { targetNodeId: nodeId, expected: expanded },
    { timeout: UI_TIMEOUT_MS },
  );
}

async function main() {
  fs.mkdirSync(RESULT_DIR, { recursive: true });
  const port = await pickPort();
  const baseUrl = `http://127.0.0.1:${port}`;
  const dataRoot = fs.mkdtempSync(path.join(os.tmpdir(), `${TASK}-`));
  const controlPlaneEnv = buildControlPlaneTestEnv(dataRoot, process.env);
  const actorId = `${TASK}-${process.pid}-${Date.now()}`;
  const server = spawn("cargo", ["run", "-p", "mnote-web", "--bin", "mnote-web"], {
    cwd: path.join(__dirname, "..", "rust"),
    env: {
      ...process.env,
      MNOTE_WEB_BIND: `127.0.0.1:${port}`,
      MNOTE_WEB_PUBLIC_BIND: `127.0.0.1:${port}`,
      ...controlPlaneEnv,
      MNOTE_LOCAL_WORKSPACE_BASE_DIR: dataRoot,
    },
    stdio: ["ignore", "pipe", "pipe"],
  });
  let stderr = "";
  server.stderr.on("data", (chunk) => {
    stderr += chunk.toString();
  });

  const executablePath = resolveChromiumExecutablePath();
  const browser = await chromium.launch({
    headless: true,
    ...(executablePath ? { executablePath } : {}),
  });
  const context = await browser.newContext({ viewport: { width: 1440, height: 1000 } });
  const page = await context.newPage();
  const browserDiagnostics = [];
  const requestTimings = [];
  const requestStarts = new Map();
  let holdStarredSidebarProjection = false;
  let releaseStarredSidebarProjection = null;
  let starredSidebarProjectionCompletedAt = 0;
  let scopedFileProjectionCompletedAt = 0;
  const timeline = {};

  await page.addInitScript(() => {
    window.__mnoteTask497Marks = {};
    window.__mnoteTask497LongTasks = [];
    try {
      const observer = new PerformanceObserver((list) => {
        for (const entry of list.getEntries()) {
          window.__mnoteTask497LongTasks.push({
            name: entry.name,
            startTime: entry.startTime,
            duration: entry.duration,
          });
        }
      });
      observer.observe({ type: "longtask", buffered: true });
    } catch (_) {}
  });

  await page.route("**/api/tree/projections/sidebar**", async (route) => {
    const url = new URL(route.request().url());
    if (holdStarredSidebarProjection && url.searchParams.get("sourceKind") === "local_folder") {
      await new Promise((resolve) => {
        releaseStarredSidebarProjection = resolve;
      });
      starredSidebarProjectionCompletedAt = Date.now();
    }
    await route.continue();
  });
  await page.route("**/api/tree/projections/file**", async (route) => {
    const url = new URL(route.request().url());
    if (
      holdStarredSidebarProjection
      && url.pathname.endsWith("/api/tree/projections/file")
      && url.searchParams.get("parentRelativePath") === "design"
    ) {
      await route.continue();
      scopedFileProjectionCompletedAt = Date.now();
      return;
    }
    await route.continue();
  });

  page.on("console", (message) => {
    browserDiagnostics.push(`console:${message.type()}:${message.text()}`);
  });
  page.on("pageerror", (error) => {
    browserDiagnostics.push(`pageerror:${error.message}`);
  });
  page.on("request", (request) => {
    const url = request.url();
    if (
      url.includes("/api/tree/projections/")
      || url.includes("/api/tree/view-state")
      || url.includes("/api/page-aggregate/")
      || url.includes("/api/leptos-tiptap-runtime/")
      || url.includes("/documents/")
    ) {
      requestStarts.set(request, Date.now());
    }
  });
  page.on("response", (response) => {
    const request = response.request();
    const startedAt = requestStarts.get(request);
    if (!startedAt) return;
    const endedAt = Date.now();
    requestTimings.push({
      url: response.url(),
      method: request.method(),
      status: response.status(),
      startedAt,
      endedAt,
      durationMs: endedAt - startedAt,
    });
    if (response.url().includes("/api/page-aggregate/")) {
      void page.evaluate(() => {
        window.__mnoteTask497Marks.pageAggregateDone = performance.now();
      }).catch(() => {});
    }
    try {
      if (new URL(response.url()).pathname.startsWith("/documents/")) {
        timeline.pageAggregateResponseAt = endedAt;
      }
    } catch (_) {}
  });

  try {
    await waitForHttpOk(`${baseUrl}/health`, 60_000);
    await signUp(context, baseUrl, actorId);
    const { rootUri, workspaceId } = await openDefaultLocalWorkspace(page, baseUrl);
    const rootPath = fileUrlToPath(rootUri);
    fs.mkdirSync(path.join(rootPath, "design", "05-editor-mainline", "process"), { recursive: true });
    fs.mkdirSync(path.join(rootPath, "design", "05-editor-mainline", "reference"), { recursive: true });
    fs.mkdirSync(path.join(rootPath, "design", "04-tree-domain", "process"), { recursive: true });
    fs.writeFileSync(path.join(rootPath, "Home.md"), "# Home\n", "utf8");
    fs.writeFileSync(path.join(rootPath, TARGET_RELATIVE_PATH), "# 5-32 target\n\nTask497 target.\n", "utf8");
    fs.writeFileSync(path.join(rootPath, "design", "05-editor-mainline", "reference", "note.md"), "# Reference\n", "utf8");
    fs.writeFileSync(path.join(rootPath, "design", "04-tree-domain", "process", "other.md"), "# Other\n", "utf8");

    const fileTreeUrl = new URL(baseUrl);
    if (workspaceId) fileTreeUrl.searchParams.set("workspaceId", workspaceId);
    fileTreeUrl.searchParams.set("sourceKind", "local_folder");
    fileTreeUrl.searchParams.set("rootUri", rootUri);
    fileTreeUrl.searchParams.set("treeView", "filetree");
    await page.goto(fileTreeUrl.toString(), { waitUntil: "domcontentloaded", timeout: UI_TIMEOUT_MS });
    await page.locator('[data-mnote-sidebar-tree-tab="filetree"]').click({ timeout: UI_TIMEOUT_MS });
    await page.locator('#sidebar-file-tree-root .tree-row[data-shell-mode="filetree"][data-local-relative-path="design"]').waitFor({
      state: "visible",
      timeout: UI_TIMEOUT_MS,
    });
    await page.locator('#sidebar-file-tree-root .tree-row[data-shell-mode="filetree"][data-local-relative-path="design"]').click({
      button: "right",
      timeout: UI_TIMEOUT_MS,
    });
    await page.getByText("加入/取消星标置顶").click({ timeout: UI_TIMEOUT_MS });
    await page.locator('.wolai-starred-section [data-mnote-shortcut-kind="folder"][data-mnote-shortcut-relative-path="design"]').first().waitFor({
      state: "visible",
      timeout: UI_TIMEOUT_MS,
    });

    const cloudSpaceUrl = new URL(baseUrl);
    cloudSpaceUrl.searchParams.set("workspaceId", "default");
    await page.goto(cloudSpaceUrl.toString(), { waitUntil: "domcontentloaded", timeout: UI_TIMEOUT_MS });
    const designShortcut = page.locator('.wolai-starred-section [data-mnote-shortcut-kind="folder"][data-mnote-shortcut-relative-path="design"]').first();
    await designShortcut.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
    await page.evaluate(() => {
      const panel = document.querySelector("#wolai-sidebar-page-tree-panel, [data-mnote-sidebar-tree-panel='page']");
      let root = document.querySelector("#sidebar-tree-root");
      if (!(root instanceof HTMLElement) && panel instanceof HTMLElement) {
        root = document.createElement("div");
        root.id = "sidebar-tree-root";
        root.className = "sidebar-tree";
        root.setAttribute("data-tree-shell-mode", "page");
        panel.appendChild(root);
      }
      if (root instanceof HTMLElement) {
        root.innerHTML = '<ul class="tree-root" role="tree"><li class="tree-node" data-node-id="stale-my-space-page"><div class="tree-row" role="treeitem" data-shell-mode="page" data-node-id="stale-my-space-page"><button type="button" class="tree-link"><span class="tree-link-title">我的空间旧页面</span></button></div></li></ul>';
      }
    });

    await page.screenshot({ path: path.join(RESULT_DIR, "before-starred-design.png"), fullPage: true });
    holdStarredSidebarProjection = true;
    const starredClickStartedAt = Date.now();
    await designShortcut.click({ timeout: UI_TIMEOUT_MS });
    await page.locator('#sidebar-file-tree-root[data-mnote-filetree-scope="design"] .tree-row[data-shell-mode="filetree"][data-local-relative-path="design/05-editor-mainline"]').waitFor({
      state: "visible",
      timeout: 1_500,
    }).catch((error) => {
      if (releaseStarredSidebarProjection) releaseStarredSidebarProjection();
      throw new Error(`真实点击星标 design 后 scoped FileTree 应先于页面树 projection 可交互: elapsed=${Date.now() - starredClickStartedAt}ms scopedFileDone=${scopedFileProjectionCompletedAt} sidebarDone=${starredSidebarProjectionCompletedAt}; ${error.message}`);
    });
    assert.equal(starredSidebarProjectionCompletedAt, 0, "scoped FileTree 可交互时，延迟中的页面树 projection 不应已经完成");
    if (releaseStarredSidebarProjection) releaseStarredSidebarProjection();
    holdStarredSidebarProjection = false;
    await page.waitForFunction(() => {
      const root = document.querySelector("#sidebar-tree-root");
      if (!(root instanceof HTMLElement)) return false;
      const stale = root.querySelectorAll('.tree-row[data-shell-mode="page"][data-node-id="stale-my-space-page"]').length;
      const localRows = root.querySelectorAll('.tree-row[data-shell-mode="page"]').length;
      return stale === 0 && localRows > 0 && /05-editor-mainline|04-tree-domain|5-32 target|Reference|Other/.test(root.innerText || "");
    }, { timeout: UI_TIMEOUT_MS });
    const staleRowsAfterStarredOpen = await page.locator('#sidebar-tree-root .tree-row[data-shell-mode="page"][data-node-id="stale-my-space-page"]').count();
    assert.equal(staleRowsAfterStarredOpen, 0, "星标 design 打开后旧我的空间页面树不应长期残留");

    await page.locator('[data-mnote-sidebar-tree-tab="page"]').click({ timeout: UI_TIMEOUT_MS });
    const pageStatePut = page.waitForResponse((response) => {
      const postData = response.request().postData() || "";
      return response.url().includes("/api/tree/view-state")
        && response.request().method() === "PUT"
        && /"treeKind":"pagetree"/.test(postData)
        && /"scope":"design"/.test(postData);
    }, { timeout: UI_TIMEOUT_MS });
    const collapsedPageNodeId = "local-dir:design~2F05-editor-mainline~2Fprocess";
    const expandedPageNodeId = "local-dir:design~2F05-editor-mainline~2Freference";
    await setPageRowExpanded(page, expandedPageNodeId, false);
    await setPageRowExpanded(page, collapsedPageNodeId, false);
    await setPageRowExpanded(page, expandedPageNodeId, true);
    const pageStateResponse = await pageStatePut;
    assert(pageStateResponse.ok(), `PageTree scoped view-state 保存失败: ${pageStateResponse.status()}`);
    await page.reload({ waitUntil: "domcontentloaded", timeout: UI_TIMEOUT_MS });
    await page.locator('[data-mnote-sidebar-tree-tab="page"]').click({ timeout: UI_TIMEOUT_MS });
    await page.waitForFunction(
      ({ collapsedPageNodeId, expandedPageNodeId }) => {
        const collapsed = document.querySelector(`#sidebar-tree-root .tree-row[data-shell-mode="page"][data-node-id="${CSS.escape(collapsedPageNodeId)}"]`);
        const expanded = document.querySelector(`#sidebar-tree-root .tree-row[data-shell-mode="page"][data-node-id="${CSS.escape(expandedPageNodeId)}"]`);
        return collapsed && expanded
          && collapsed.getAttribute("aria-expanded") === "false"
          && expanded.getAttribute("aria-expanded") === "true";
      },
      { collapsedPageNodeId, expandedPageNodeId },
      { timeout: UI_TIMEOUT_MS },
    ).catch(async (error) => {
      const state = await page.evaluate(() => ({
        href: location.href,
        pageApplied: document.documentElement.getAttribute("data-mnote-page-tree-view-state-applied") || "",
        viewStateSaved: document.documentElement.getAttribute("data-mnote-sidebar-tree-view-state-saved") || "",
        pageTree: Array.from(document.querySelectorAll("#sidebar-tree-root .tree-row[data-shell-mode='page']")).map((row) => ({
          nodeId: row.getAttribute("data-node-id") || "",
          expanded: row.getAttribute("aria-expanded") || "",
          text: row.textContent || "",
        })),
      }));
      throw new Error(`${error.message}; page_tree_state=${JSON.stringify(state)}; requestTimings=${JSON.stringify(requestTimings.filter((entry) => entry.url.includes("/api/tree/view-state")))}`);
    });
    timeline.pageTreeUserStateRestoredAt = Date.now();
    await page.locator('[data-mnote-sidebar-tree-tab="filetree"]').click({ timeout: UI_TIMEOUT_MS });

    await page.screenshot({ path: path.join(RESULT_DIR, "after-starred-design.png"), fullPage: true });
    timeline.filetreeInteractiveAt = Date.now();
    await expandFolder(page, "design/05-editor-mainline");
    await expandFolder(page, "design/05-editor-mainline/process");
    await page.screenshot({ path: path.join(RESULT_DIR, "before-target-open.png"), fullPage: true });
    timeline.targetClickAt = Date.now();
    await page.locator(`#sidebar-file-tree-root .tree-row[data-shell-mode="filetree"][data-local-relative-path="${TARGET_RELATIVE_PATH}"] .tree-link`).click({
      timeout: UI_TIMEOUT_MS,
    });
    await page.waitForURL((nextUrl) => nextUrl.pathname.startsWith("/documents/"), { timeout: UI_TIMEOUT_MS });
    await page.locator('.document-pane[data-pane-role="primary"] .editor-surface').first().waitFor({
      state: "visible",
      timeout: UI_TIMEOUT_MS,
    });
    timeline.editorVisibleAt = Date.now();
    await page.screenshot({ path: path.join(RESULT_DIR, "after-target-open.png"), fullPage: true });

    const browserMarks = await page.evaluate(() => window.__mnoteTask497Marks || {});
    const longTasks = await page.evaluate(() => window.__mnoteTask497LongTasks || []);
    const currentUrl = page.url();
    const directDocumentStartedAt = Date.now();
    const directDocumentResponse = await context.request.fetch(currentUrl);
    const directDocumentMs = Date.now() - directDocumentStartedAt;

    assert(timeline.filetreeInteractiveAt > 0, "应记录 scoped FileTree 可交互时间");
    assert(timeline.targetClickAt > 0, "应记录目标 md 点击时间");
    assert(timeline.editorVisibleAt > timeline.targetClickAt, `editor surface 应在目标点击后可见: ${JSON.stringify(timeline)}`);
    assert(
      timeline.editorVisibleAt - timeline.targetClickAt < 6_000,
      `真实点击打开目标 md 不应被 page tree projection 长时间阻塞: ${JSON.stringify(timeline)}`,
    );
    assert(directDocumentResponse.ok(), `direct document 对照请求失败: ${directDocumentResponse.status()}`);

    const result = {
      ok: true,
      task: TASK,
      baseUrl,
      targetRelativePath: TARGET_RELATIVE_PATH,
      finalUrl: currentUrl,
      timeline,
      browserMarks,
      longTasks,
      requestTimings,
      directDocumentMs,
      screenshots: [
        path.join(RESULT_DIR, "before-starred-design.png"),
        path.join(RESULT_DIR, "after-starred-design.png"),
        path.join(RESULT_DIR, "before-target-open.png"),
        path.join(RESULT_DIR, "after-target-open.png"),
      ],
    };
    fs.writeFileSync(path.join(RESULT_DIR, "result.json"), JSON.stringify(result, null, 2), "utf8");
    console.log(JSON.stringify(result, null, 2));
  } finally {
    await browser.close();
    server.kill("SIGINT");
    fs.rmSync(dataRoot, { recursive: true, force: true });
    if (server.exitCode == null) {
      setTimeout(() => server.kill("SIGKILL"), 2000).unref();
    }
    if (server.exitCode && server.exitCode !== 130 && server.exitCode !== null) {
      process.stderr.write(stderr);
    }
  }
}

main().catch((error) => {
  console.error(error);
  process.exit(1);
});