mnote/wolai-frontend/src/app/onlyoffice/OnlyOfficeClientPage.tsx

"use client";

import { useEffect, useMemo, useState } from "react";
import { useSearchParams } from "next/navigation";
import { OnlyOfficeAiAgentPanel } from "@/components/onlyoffice/OnlyOfficeAiAgentPanel";
import { rewriteToPublicOrigin } from "@/lib/url/rewritePublicOrigin";
import { getMnoteRuntimeConfig } from "@/lib/runtime-config";

type EditorMode = "view" | "edit";

const MNOTE_AGENT_PLUGIN_GUID = "asc.{F2B9A7B4-3A22-4E0E-8B32-3B0DE7AE8A60}";

declare global {
  interface Window {
    __MNOTE_ONLYOFFICE_ERRLOG__?: Array<Record<string, unknown>>;
    __MNOTE_ONLYOFFICE_ERR_HOOKED__?: boolean;
    __MNOTE_ONLYOFFICE_DOMPATCHED__?: boolean;
    __MNOTE_ONLYOFFICE_DEBUG__?: Record<string, unknown>;
  }
}

const setupOnlyOfficeGlobalErrorCapture = () => {
  if (typeof window === "undefined") return;
  if (window.__MNOTE_ONLYOFFICE_ERR_HOOKED__) return;
  window.__MNOTE_ONLYOFFICE_ERR_HOOKED__ = true;

  const push = (payload: Record<string, unknown>) => {
    try {
      window.__MNOTE_ONLYOFFICE_ERRLOG__ = window.__MNOTE_ONLYOFFICE_ERRLOG__ || [];
      window.__MNOTE_ONLYOFFICE_ERRLOG__.push(payload);
      // 说明：写入 localStorage，便于“发生崩溃导致整页 reload”时仍能回溯最近错误。
      window.localStorage.setItem("mnote_onlyoffice_last_error", JSON.stringify(payload));
    } catch {
      // ignore
    }
  };

  window.addEventListener(
    "error",
    (e) => {
      try {
        push({
          kind: "error",
          message: String((e as ErrorEvent).message || ""),
          filename: String((e as ErrorEvent).filename || ""),
          lineno: Number((e as ErrorEvent).lineno || 0),
          colno: Number((e as ErrorEvent).colno || 0),
          name: String(((e as any)?.error as any)?.name || ""),
        });
      } catch {
        // ignore
      }
    },
    true,
  );

  window.addEventListener(
    "unhandledrejection",
    (e) => {
      try {
        const r = (e as PromiseRejectionEvent).reason as any;
        push({
          kind: "rejection",
          message: String(r?.message ?? r ?? ""),
          name: String(r?.name ?? ""),
        });
      } catch {
        // ignore
      }
    },
    true,
  );

  // 说明：ONLYOFFICE 内部偶发触发 removeChild 的 NotFoundError（不同环境下 message 可能为空）。
  // 该异常会导致 Next.js 直接显示“客户端异常”白屏，因此这里在 ONLYOFFICE 页面内对 removeChild 做兜底补丁。
  // 仅在 /onlyoffice 页面生效，不影响其它页面。
  if (!window.__MNOTE_ONLYOFFICE_DOMPATCHED__) {
    window.__MNOTE_ONLYOFFICE_DOMPATCHED__ = true;
    try {
      const orig = Node.prototype.removeChild;
      // eslint-disable-next-line no-extend-native
      (Node.prototype as any).removeChild = function removeChildPatched<T extends Node>(child: T): T {
        try {
          return orig.call(this, child) as T;
        } catch (e) {
          const name = (e as any)?.name ? String((e as any).name) : "";
          if (name === "NotFoundError") {
            return child;
          }
          throw e;
        }
      };
    } catch {
      // ignore
    }
  }
};

setupOnlyOfficeGlobalErrorCapture();

const loadScript = (src: string) =>
  new Promise<void>((resolve, reject) => {
    const existing = document.querySelector(`script[src="${src}"]`);
    if (existing) {
      existing.addEventListener("load", () => resolve(), { once: true });
      resolve();
      return;
    }
    const script = document.createElement("script");
    script.src = src;
    script.async = true;
    script.onload = () => resolve();
    script.onerror = () => reject(new Error(`加载 ONLYOFFICE 脚本失败: ${src}`));
    document.body.appendChild(script);
  });

const hashKey = (input: string) => {
  let hash = 0;
  for (let i = 0; i < input.length; i += 1) {
    hash = (hash << 5) - hash + input.charCodeAt(i);
    hash |= 0;
  }
  return Math.abs(hash).toString();
};

const base64UrlEncodeUtf8 = (input: string) => {
  // 说明：浏览器端 base64url（UTF-8）编码，用于把带 `?token=...` 的 URL 藏到 `u=...` 里。
  const bytes = new TextEncoder().encode(input);
  let binary = "";
  for (let i = 0; i < bytes.length; i += 1) {
    binary += String.fromCharCode(bytes[i] as number);
  }
  return btoa(binary).replace(/=/g, "").replace(/\+/g, "-").replace(/\//g, "_");
};

const setupOnlyOfficeInternalRequestRewrite = (baseUrl: string, onlyofficeBaseUrlDesktop?: string | null) => {
  // 说明：当我们用 `/onlyoffice-server` 反代 ONLYOFFICE 时，编辑器运行期仍可能发起指向
  // `http://127.0.0.1:8081/cache/...` 的绝对请求（来自 ONLYOFFICE 内部），导致浏览器跨域被 CORS 拦截。
  // 这里在 ONLYOFFICE 页面内对 XHR 做一次 URL 重写：把 “内部 8081” 的请求改写回同源 `/onlyoffice-server/*`。
  // 注意：ONLYOFFICE 会创建多个 iframe（同源但不同 realm），因此这里也会周期性给新出现的 iframe 打补丁。
  if (typeof window === "undefined") return;
  if (!baseUrl) return;

  const normalizedBase = String(baseUrl || "").trim().replace(/\/+$/, "");
  const isProxyMode = normalizedBase === "/onlyoffice-server" || normalizedBase.endsWith("/onlyoffice-server");
  if (!isProxyMode) return;

  const proxyPrefix = (() => {
    if (/^https?:\/\//i.test(normalizedBase)) return normalizedBase;
    return `${window.location.origin.replace(/\/+$/, "")}${normalizedBase}`;
  })();

  const internalOrigins = new Set<string>([
    "http://127.0.0.1:8081",
    "http://localhost:8081",
    // 说明：部分环境下 ONLYOFFICE 会错误拼出 https://127.0.0.1:8081 这类 URL，
    // 浏览器会报 ERR_SSL_PROTOCOL_ERROR（因为 8081 实际是 http）。这里也一起兜底重写。
    "https://127.0.0.1:8081",
    "https://localhost:8081",
  ]);
  try {
    if (onlyofficeBaseUrlDesktop) {
      const u = new URL(onlyofficeBaseUrlDesktop);
      internalOrigins.add(`${u.protocol}//${u.host}`);
    }
  } catch {
    // ignore
  }

  const patchWindow = (win: Window) => {
    try {
      if ((win as any).__MNOTE_ONLYOFFICE_XHR_REWRITE__) return;
      const rewriteUrl = (input: string) => {
        try {
          const u = new (win as any).URL(input, (win as any).location?.origin || window.location.origin);
          // 说明：外网 https 访问时，若 ONLYOFFICE 错误生成 http://<host>/onlyoffice-server/... 会被 Mixed Content 阻止；
          // 这里提前升级为 https，避免浏览器直接拦截请求。
          try {
            const loc = (win as any).location;
            if (loc?.protocol === "https:" && u.protocol === "http:" && u.host === loc.host) {
              if (u.pathname === "/onlyoffice-server" || u.pathname.startsWith("/onlyoffice-server/")) {
                u.protocol = "https:";
                return u.toString();
              }
            }
          } catch {
            // ignore
          }
          const origin = `${u.protocol}//${u.host}`;
          if (!internalOrigins.has(origin)) return input;
          return `${proxyPrefix}${u.pathname}${u.search}${u.hash}`;
        } catch {
          return input;
        }
      };
      const origOpen = (win as any).XMLHttpRequest?.prototype?.open;
      if (typeof origOpen !== "function") return;
      // eslint-disable-next-line no-extend-native
      (win as any).XMLHttpRequest.prototype.open = function openPatched(
        method: string,
        url: string,
        async?: boolean,
        user?: string | null,
        password?: string | null,
      ) {
        const nextUrl = typeof url === "string" ? rewriteUrl(url) : url;
        // eslint-disable-next-line prefer-rest-params
        return origOpen.call(this, method, nextUrl, async, user as any, password as any);
      };
      (win as any).__MNOTE_ONLYOFFICE_XHR_REWRITE__ = true;
    } catch {
      // ignore
    }
  };

  patchWindow(window);

  try {
    const start = Date.now();
    const timer = window.setInterval(() => {
      try {
        const frames = Array.from(document.querySelectorAll("iframe"));
        for (const f of frames) {
          try {
            const w = (f as HTMLIFrameElement).contentWindow;
            if (!w) continue;
            // 说明：同源时才能访问 location；跨域会抛异常，直接跳过。
            // eslint-disable-next-line no-unused-expressions
            w.location?.origin;
            patchWindow(w);
          } catch {
            // ignore
          }
        }
      } catch {
        // ignore
      }
      if (Date.now() - start > 120_000) {
        window.clearInterval(timer);
      }
    }, 1000);
  } catch {
    // ignore
  }
};

const docTypeFromExt = (ext: string) => {
  const word = ["doc", "docx", "odt", "rtf"];
  const slide = ["ppt", "pptx", "odp"];
  const sheet = ["xls", "xlsx", "ods", "csv"];
  const pdf = ["pdf"];
  // 说明：ONLYOFFICE 文档类型使用 word/cell/slide/pdf（旧的 text/spreadsheet/presentation 已逐步弃用）
  if (word.includes(ext)) return "word";
  if (slide.includes(ext)) return "slide";
  if (sheet.includes(ext)) return "cell";
  if (pdf.includes(ext)) return "pdf";
  return "word";
}; 

const waitForDocEditorReady = async (timeoutMs = 120_000) => {
  const start = Date.now();
  // eslint-disable-next-line no-constant-condition
  while (true) {
    // @ts-expect-error ONLYOFFICE 全局对象
    const ok = Boolean(window.DocsAPI && window.DocsAPI.DocEditor);
    if (ok) return;
    if (Date.now() - start > timeoutMs) {
      throw new Error("等待 ONLYOFFICE DocEditor 初始化超时");
    }
    // eslint-disable-next-line no-await-in-loop
    await new Promise((r) => setTimeout(r, 250));
  }
};

export default function OnlyOfficePage() {
  const params = useSearchParams();
  const fileUrl = params.get("fileUrl") ?? "";
  const fileName = params.get("fileName") ?? "未命名文档";
  const fileType = (params.get("fileType") ?? "docx").toLowerCase();
  const mode = (params.get("mode") ?? "edit") as EditorMode;
  const assetId = params.get("assetId") ?? "";
  const initialUserId = params.get("userId") ?? "";
  const channel = (params.get("channel") ?? "").trim().toLowerCase();
  const [error, setError] = useState<string | null>(null);
  const [authedUserId, setAuthedUserId] = useState<string>(initialUserId);
  const runtimeConfig = useMemo(() => getMnoteRuntimeConfig(), []);
  const baseUrlCandidates = useMemo(() => {
    const uniq: string[] = [];
    const push = (v?: string | null) => {
      const s = String(v || "").trim().replace(/\/+$/, "");
      if (!s) return;
      if (!uniq.includes(s)) uniq.push(s);
    };

    // 说明：网页端优先走同源 /onlyoffice-server（Next 代理到 ONLYOFFICE_INTERNAL_URL），
    // 避免配置里误写成 https 自签证书域名导致浏览器报 ERR_CERT_AUTHORITY_INVALID。
    // 同时同源路径也更利于缓存与跨环境迁移（无需改域名/端口）。
    try {
      push("/onlyoffice-server");
      push(`${window.location.origin.replace(/\/+$/, "")}/onlyoffice-server`);
    } catch {
      // ignore
    }

    // 说明：默认优先使用运行期根据 isDesktop 归一化后的 onlyofficeBaseUrl；
    // 如遇到端口转发/本机服务不可达，可自动回退到另一套配置。
    if (channel === "web") {
      push(runtimeConfig.onlyofficeBaseUrlWeb);
      push(runtimeConfig.onlyofficeBaseUrl);
      push(runtimeConfig.onlyofficeBaseUrlDesktop);
      return uniq;
    }
    if (channel === "desktop") {
      push(runtimeConfig.onlyofficeBaseUrlDesktop);
      push(runtimeConfig.onlyofficeBaseUrl);
      push(runtimeConfig.onlyofficeBaseUrlWeb);
      return uniq;
    }

    push(runtimeConfig.onlyofficeBaseUrl);
    if (runtimeConfig.isDesktop) {
      push(runtimeConfig.onlyofficeBaseUrlWeb);
    } else {
      push(runtimeConfig.onlyofficeBaseUrlDesktop);
    }
    return uniq;
  }, [channel, runtimeConfig]);

  const [baseUrlIndex, setBaseUrlIndex] = useState(0);
  const baseUrl = baseUrlCandidates[baseUrlIndex] || "";
  const storageHostOverride = runtimeConfig.onlyofficeStorageHostOverride;
  const proxyOrigin = runtimeConfig.onlyofficeProxyOrigin;
  const callbackOrigin = runtimeConfig.onlyofficeCallbackOrigin;

  useEffect(() => {
    // 说明：ONLYOFFICE 回调由文档服务器触发，不携带用户 Cookie。
    // 为了让 /api/onlyoffice/callback 能以真实用户身份写回存储，
    // 这里尽量从当前会话获取 userId，并透传到 callbackUrl。
    if (authedUserId) return undefined;
    let canceled = false;
    fetch("/api/auth/whoami", { method: "GET" })
      .then(async (r) => {
        if (!r.ok) return null;
        return (await r.json().catch(() => null)) as { userId?: string } | null;
      })
      .then((payload) => {
        const uid = String(payload?.userId || "").trim();
        if (!uid) return;
        if (canceled) return;
        setAuthedUserId(uid);
      })
      .catch(() => {
        // ignore
      });
    return () => {
      canceled = true;
    };
  }, [authedUserId]);

  useEffect(() => {
    // 说明：在部分 ONLYOFFICE 版本/环境下，编辑器内部会触发 DOMException(NotFoundError: removeChild)，
    // 该异常会被 Next.js 捕获并显示“客户端异常”大红屏，但实际文档仍可继续使用。
    // 这里仅对该特定错误做兜底拦截，避免误伤其它真实错误。
    const onError = (event: ErrorEvent) => {
      const err = event.error as unknown;
      const msgFromError = (() => {
        try {
          return typeof err === "string" ? err : String((err as any)?.message ?? err);
        } catch {
          return "";
        }
      })();
      const msg = msgFromError || event.message || "";
      const name = (err as any)?.name ? String((err as any).name) : "";

      try {
        window.__MNOTE_ONLYOFFICE_ERRLOG__ = window.__MNOTE_ONLYOFFICE_ERRLOG__ || [];
        window.__MNOTE_ONLYOFFICE_ERRLOG__.push({
          kind: "error",
          name,
          message: msg,
          filename: event.filename || "",
          lineno: event.lineno || 0,
          colno: event.colno || 0,
        });
      } catch {
        // ignore
      }

      // 说明：ONLYOFFICE 内部偶发抛出 DOMException(NotFoundError)，在部分版本下 message 可能为空，
      // 但会被 Next.js 捕获后直接显示“客户端异常”白屏；该错误通常不影响文档继续使用。
      if (name === "NotFoundError") {
        event.preventDefault();
        try {
          event.stopImmediatePropagation();
          event.stopPropagation();
        } catch {
          // ignore
        }
        return;
      }

      // 说明：部分隧道/证书环境下，ONLYOFFICE 会尝试注册 ServiceWorker（用于缓存静态资源）。
      // 但浏览器会以 SecurityError 失败，并触发全局错误，导致 Next.js 显示“客户端异常”白屏。
      // 该错误不影响文档实际编辑能力，因此这里对其进行兜底拦截。
      if (
        name === "SecurityError" ||
        msg.includes("Failed to register a ServiceWorker") ||
        msg.includes("An SSL certificate error occurred when fetching the script")
      ) {
        event.preventDefault();
        try {
          event.stopImmediatePropagation();
          event.stopPropagation();
        } catch {
          // ignore
        }
      }
    };
    const onRejection = (event: PromiseRejectionEvent) => {
      const reason = event.reason as unknown;
      const msg = (() => {
        try {
          return typeof reason === "string" ? reason : String((reason as any)?.message ?? reason);
        } catch {
          return "";
        }
      })();
      const name = (reason as any)?.name ? String((reason as any).name) : "";
      try {
        window.__MNOTE_ONLYOFFICE_ERRLOG__ = window.__MNOTE_ONLYOFFICE_ERRLOG__ || [];
        window.__MNOTE_ONLYOFFICE_ERRLOG__.push({
          kind: "rejection",
          name,
          message: msg,
        });
      } catch {
        // ignore
      }
      if (name === "NotFoundError") {
        event.preventDefault();
        try {
          event.stopImmediatePropagation();
          event.stopPropagation();
        } catch {
          // ignore
        }
        return;
      }
      if (
        name === "SecurityError" ||
        msg.includes("Failed to register a ServiceWorker") ||
        msg.includes("An SSL certificate error occurred when fetching the script")
      ) {
        event.preventDefault();
        try {
          event.stopImmediatePropagation();
          event.stopPropagation();
        } catch {
          // ignore
        }
      }
    };
    window.addEventListener("error", onError);
    window.addEventListener("unhandledrejection", onRejection);
    return () => {
      window.removeEventListener("error", onError);
      window.removeEventListener("unhandledrejection", onRejection);
    };
  }, []);

  const targetDocType = useMemo(() => docTypeFromExt(fileType), [fileType]);
  const resolvedFileUrl = useMemo(() => {
    if (!fileUrl) return "";
    // 说明：OnlyOffice 的 document.url 由“文档服务器”拉取（不是浏览器）。
    // 如果我们已经配置了专用回源（storageHostOverride），就不要再把 URL 改写成公网，
    // 否则会把 http://host.docker.internal:18000 错误改成 https://host.docker.internal:18000，
    // 导致 ONLYOFFICE 报 “下载失败（EPROTO wrong version number）”。
    const isConvexStorageUrl = (() => {
      // 说明：Convex Files 的直链通常形如：
      // - http://127.0.0.1:3210/api/storage/<id>
      // - https://<convex-host>/api/storage/<id>
      // 这类 URL 不应套用 Supabase 的 rewriteToPublicOrigin，否则会被误改写到 supabaseInternalUrl（例如 18000），
      // 进而导致 ONLYOFFICE 报 “下载失败（-4）”。
      try {
        const u = new URL(fileUrl);
        return u.pathname.startsWith("/api/storage/");
      } catch {
        return false;
      }
    })();

    let base =
      storageHostOverride || runtimeConfig.useConvex || isConvexStorageUrl
        ? fileUrl
        : rewriteToPublicOrigin(fileUrl, runtimeConfig.supabaseUrl);
    try {
      // 关键兜底：即使外部传进来的 fileUrl 是 Supabase signedUrl（含 token=...），也要避免 token 参数
      // 出现在 document.url 上，否则 ONLYOFFICE 会把它当作 JWT 去解析并报
      // “文档安全令牌格式不正确 / invalid compact jws / invalid signature”。
      const raw = new URL(base);
      let alreadyProxy = raw.pathname.includes("/api/onlyoffice/proxy");

      const isLocalHost =
        raw.hostname === "127.0.0.1" || raw.hostname === "localhost" || raw.hostname === "host.docker.internal";

      // 关键修复：当 fileUrl 已经是 /api/onlyoffice/proxy，但来源是外网 https（例如 frp/隧道域名）时，
      // ONLYOFFICE 容器会去请求该 https 地址并因证书/自签失败，从而报“下载失败（-4）”。
      // 因此这里强制把 proxy 的 origin 改写成我们显式配置的回源（通常是容器可达的 http://172.31.224.1:3000）。
      if (alreadyProxy && proxyOrigin) {
        const po = new URL(proxyOrigin);
        raw.protocol = po.protocol;
        raw.host = po.host;
        base = raw.toString();
      }

      // 关键兜底：OnlyOffice 的 document.url 由“文档服务器容器”去拉取。
      // 如果这里是 localhost/127.0.0.1（对容器而言指向它自己），会导致“下载失败（-4）”。
      // 因此在配置了 proxyOrigin 时，强制走 /api/onlyoffice/proxy 把回源留给 Next 服务端完成。
      if (!alreadyProxy && proxyOrigin && isLocalHost) {
        const proxyBase = proxyOrigin || window.location.origin;
        const proxy = new URL("/api/onlyoffice/proxy", proxyBase);
        proxy.searchParams.set("u", base64UrlEncodeUtf8(base));
        base = proxy.toString();
        alreadyProxy = true;
      }
      if (!alreadyProxy && raw.searchParams.has("token")) {
        const proxyBase = proxyOrigin || window.location.origin;
        const proxy = new URL("/api/onlyoffice/proxy", proxyBase);
        proxy.searchParams.set("u", base64UrlEncodeUtf8(base));
        base = proxy.toString();
        alreadyProxy = true;
      }

      const u = new URL(base);
      if (!storageHostOverride || alreadyProxy) return u.toString();

      // 兼容两种写法：hostname 或完整 origin（https://xxx）
      if (/^https?:\/\//i.test(storageHostOverride)) {
        const ov = new URL(storageHostOverride);
        u.protocol = ov.protocol;
        u.host = ov.host;
        return u.toString();
      }

      u.hostname = storageHostOverride;
      return u.toString();
    } catch {
      return base;
    }
  }, [fileUrl, proxyOrigin, storageHostOverride, runtimeConfig.supabaseUrl]);

  useEffect(() => {
    try {
      window.__MNOTE_ONLYOFFICE_DEBUG__ = {
        pageOrigin: window.location.origin,
        baseUrl,
        proxyOrigin,
        callbackOrigin,
        fileUrlInput: fileUrl,
        resolvedFileUrl,
        fileName,
        fileType,
        mode,
        assetId,
      };
    } catch {
      // ignore
    }
  }, [assetId, authedUserId, baseUrl, callbackOrigin, fileName, fileType, fileUrl, mode, proxyOrigin, resolvedFileUrl]);

  useEffect(() => {
    if (!baseUrl) {
      setError("缺少 NEXT_PUBLIC_ONLYOFFICE_BASE_URL 配置，无法加载编辑器。");
      return;
    }
    if (!fileUrl) {
      setError("缺少 fileUrl 参数。");
      return;
    }

    setupOnlyOfficeInternalRequestRewrite(baseUrl, runtimeConfig.onlyofficeBaseUrlDesktop);

    // 说明：外网访问（例如 frp/隧道）时，OnlyOffice 文档服务器运行在本机 Docker 容器内，无法直接访问
    // document.url 里的 127.0.0.1/localhost。此时必须把 document.url 指向一个“容器可访问”的 Next Origin
    //（onlyofficeProxyOrigin / onlyofficeProxyOriginWeb），让 Next 服务端代为回源下载。
    try {
      const pageHost = window.location.hostname;
      const isPageLocal = pageHost === "127.0.0.1" || pageHost === "localhost";
      const isPageRemote = !isPageLocal;
      const u = new URL(fileUrl);
      const isFileLocal = u.hostname === "127.0.0.1" || u.hostname === "localhost" || u.hostname === "host.docker.internal";
      if (isPageRemote && isFileLocal && !proxyOrigin) {
        setError(
          "外网访问时检测到 fileUrl 为本机地址（127.0.0.1/localhost），但未配置 onlyofficeProxyOriginWeb。请在 public/mnote-env.json 配置 onlyofficeProxyOriginWeb/onlyofficeCallbackOriginWeb（例如 http://host.docker.internal:3000 或当前 Docker 可达的主机 IP）。",
        );
        return;
      }
    } catch {
      // ignore
    }

    const scriptUrl = `${baseUrl.replace(/\/$/, "")}/web-apps/apps/api/documents/api.js`;
    loadScript(scriptUrl)
      .then(async () => {
        // 说明：api.js 的 onload 并不代表 DocsAPI/DocEditor 已完全就绪（在慢网/高负载时会出现空白页）。
        // 因此这里额外等待 DocEditor 挂载，避免偶发“白屏但无错误”的体验。
        await waitForDocEditorReady(120_000);
        // eslint-disable-next-line new-cap,@typescript-eslint/no-explicit-any  
        const pluginConfigUrl = `${window.location.origin}/onlyoffice/plugins/agent-tools/config.json`;

        const config: any = {
          width: "100%",
          height: "100%",
          document: {
            fileType,
            title: fileName,
            url: resolvedFileUrl,
            // 说明：key 用于 ONLYOFFICE 内部区分文档实例；应随 URL/文件名变化，避免缓存/冲突。
            key: hashKey(`${resolvedFileUrl}-${fileName}`),
          },
          documentType: targetDocType,
          events: {
            // 说明：用于 E2E 判定“文档已真正打开”，避免仅靠 iframe/canvas 误判。
            // 注意：部分版本回调名是 onDocumentReady，也有文档提到 onAppReady；两者都注册。
            onDocumentReady: () => {
              (window as any).__MNOTE_ONLYOFFICE_READY__ = true;
            },
            onAppReady: () => {
              (window as any).__MNOTE_ONLYOFFICE_READY__ = true;
            },
            onError: (e: unknown) => {
              const msg = (() => {
                try {
                  if (typeof e === "string") return e;
                  return JSON.stringify(e);
                } catch {
                  return String(e);
                }
              })();
              setError(msg);
            },
          },
          editorConfig: {
            mode: mode === "view" ? "view" : "edit",
            lang: "zh-CN",
            // 说明：ONLYOFFICE 文档服务器会通过 callbackUrl 回传保存事件，
            // 我们在 /api/onlyoffice/callback 中接收并回写到 Supabase Storage。
            callbackUrl: (() => {
              const base = callbackOrigin || proxyOrigin || window.location.origin;
              const cb = new URL("/api/onlyoffice/callback", base);
              if (assetId) cb.searchParams.set("assetId", assetId);
              if (authedUserId) cb.searchParams.set("userId", authedUserId);
              return cb.toString();
            })(),
            customization: {
              feedback: { visible: false },
            },
            plugins: {
              autostart: [MNOTE_AGENT_PLUGIN_GUID],
              pluginsData: [pluginConfigUrl],
            },
          },
        };

        // 兜底：有些版本不会触发 onDocumentReady/onAppReady，这里用轮询判断“编辑器 DOM 已出现”
        // 来设置 ready flag，保证远程 E2E 判定稳定。
        (window as any).__MNOTE_ONLYOFFICE_READY__ = false;
        const readyDeadline = Date.now() + 120_000;
        const timer = window.setInterval(() => {
          const root = document.querySelector("#onlyoffice-frame") as HTMLElement | null;
          const body = document.body as HTMLElement | null;
          const count =
            (root ? root.querySelectorAll("iframe,canvas").length : 0) +
            (body ? body.querySelectorAll("iframe,canvas").length : 0);
          if (count > 0) {
            (window as any).__MNOTE_ONLYOFFICE_READY__ = true;
            window.clearInterval(timer);
          } else if (Date.now() > readyDeadline) {
            window.clearInterval(timer);
          }
        }, 500);

        fetch("/api/onlyoffice/sign", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ config }),
        })
          .then(async (r) => {
            if (!r.ok) {
              const payload = await r.json().catch(() => null);
              throw new Error(payload?.error ?? "OnlyOffice 签名失败");
            }
            const { token, documentToken, editorConfigToken } = (await r.json()) as {
              token: string | null;
              documentToken: string | null;
              editorConfigToken: string | null;
            };

            // 兼容不同 ONLYOFFICE 配置：有些版本/配置会校验 document.token/editorConfig.token。
            if (token) config.token = token;
            if (documentToken) {
              config.document = config.document || {};
              config.document.token = documentToken;
            }
            if (editorConfigToken) {
              config.editorConfig = config.editorConfig || {};
              config.editorConfig.token = editorConfigToken;
            }

            // eslint-disable-next-line new-cap,@typescript-eslint/no-explicit-any
            new (window as any).DocsAPI.DocEditor("onlyoffice-frame", config);
          })
          .catch((err: Error) => {
            // 说明：如果服务端强制 JWT 且你未配置 ONLYOFFICE_JWT_SECRET，会在这里失败或在编辑器内报错。
            setError(err.message);
          });
      })
      .catch((err: Error) => {
        // 说明：优先“无感回退”到备选 baseUrl（常见于本机 8081 未启动/外网转发不可达）。
        const hasNext = baseUrlIndex + 1 < baseUrlCandidates.length;
        if (hasNext) {
          setBaseUrlIndex((i) => i + 1);
          return;
        }
        setError(err.message);
      });
  }, [baseUrl, baseUrlCandidates.length, baseUrlIndex, fileName, fileType, fileUrl, mode, resolvedFileUrl, targetDocType]);

  if (error) {
    return (
      <div className="flex h-screen flex-col items-center justify-center gap-3 bg-slate-50">
        <p className="text-base font-semibold text-red-600">ONLYOFFICE 加载失败</p>
        <p className="text-sm text-gray-600">{error}</p>
      </div>
    );
  }

  return (
    <div className="relative h-screen w-screen bg-slate-50">
      <div id="onlyoffice-frame" className="h-full w-full" />
      <OnlyOfficeAiAgentPanel
        openFile={{
          id: assetId || `onlyoffice_${hashKey(`${resolvedFileUrl}-${fileName}`)}`,
          title: fileName,
          fileUrl: resolvedFileUrl,
          mimeType: null,
        }}
      />
    </div>
  );
}