import {
  BookOpen,
  Check,
  ChevronRight,
  ExternalLink,
  FileCode,
  Info,
  Lock,
  Plus,
  RefreshCw,
  X,
} from "lucide-react";
import type {
  ActiveEditSession,
  LatestVersion,
  ScriptItem,
  ScriptType,
} from "~/services/api";
import { scriptIcon } from "./WorkspaceTree";
import type { MouseEvent as ReactMouseEvent } from "react";
import Editor from "@monaco-editor/react";
import { useRef, useLayoutEffect, useState, useEffect } from "react";

import {type PythonEditorBuffer, useScriptWorkspaceStore} from "./state/scriptWorkspaceStore";
import { useAuth } from "../../context/AuthContext";
import { getScriptContent } from "../../services/api";
import {PythonEditor} from "~/features/platform/PythonEditor";

function fileIconTone(type: ScriptType | "data") {
  if (type === "notebook") return "text-[#e15e50] bg-[#fff0ed]";
  if (type === "data") return "text-[#5a8f6a] bg-[#eef8f1]";
  return "text-[#2e73c6] bg-[#eaf3ff]";
}

const toolbarBtnClass =
  "h-[31px] cursor-pointer rounded-[5px] border border-[#d9e3ec] bg-white px-[11px] text-[11px] text-[#52708d] hover:border-[#9dbbd8] hover:bg-[#f7fbff] disabled:cursor-wait disabled:opacity-70";

const endEditBtnClass =
  "h-[31px] cursor-pointer rounded-[5px] border border-[#e1b8b8] bg-[#fff8f8] px-[11px] text-[11px] text-[#a34c4c] hover:border-[#9dbbd8] hover:bg-[#f7fbff] disabled:cursor-wait disabled:opacity-70";

const releaseBtnClass =
  "h-[31px] cursor-pointer rounded-[5px] border border-[#e7c689] bg-[#fffbf3] px-[11px] text-[11px] text-[#9b6a18] hover:border-[#9dbbd8] hover:bg-[#f7fbff]";

const openEditorBtnClass =
  "inline-flex h-[37px] cursor-pointer items-center justify-center gap-[7px] rounded-md border border-[#b9d4ef] bg-[#f4f9ff] px-3.5 text-[11px] font-[650] text-[#176cc0] hover:border-[#7eafe0] hover:bg-[#eaf4ff] disabled:cursor-wait disabled:opacity-70";

const openEditorEditingBtnClass =
  "inline-flex h-[37px] cursor-pointer items-center justify-center gap-[7px] rounded-md border border-[#69b79a] bg-[#effaf5] px-3.5 text-[11px] font-[650] text-[#137a55] hover:border-[#7eafe0] hover:bg-[#eaf4ff] disabled:cursor-wait disabled:opacity-70";

const saveBtnClass =
  "inline-flex h-[31px] cursor-pointer items-center justify-center gap-1.5 rounded-[5px] border border-[#b8dec1] bg-[#f1faf3] px-[11px] text-[11px] font-semibold text-[#1f6d3a] disabled:cursor-not-allowed disabled:opacity-50";

// 模块级变量存储刷新版本号，用于检测只读内容刷新
let _lastRefreshVersion = 0;

type Notice = {
  tone: "success" | "error" | "info";
  message: string;
};

// 缓存的会话类型（多 iframe 共存方案）
interface CachedSession {
  session: ActiveEditSession;
  jupyterUrl: string;
  lastActiveTime: number;
}

type ScriptWorkspaceProps = {
  script: ScriptItem;
  scripts: ScriptItem[];
  sessionCache: Map<string, CachedSession>;
  editSession: ActiveEditSession | null;
  jupyterUrl: string | null;
  editBusy: boolean;
  openError: string | null;
  latestVersion: LatestVersion | null;
  versionsLoading: boolean;
  openTabs: Array<{ scriptId: string; scriptName: string; scriptType: ScriptType }>;
  onOpenEditor: () => void;
  onEndEditing: () => void;
  onClose: (scriptId: string, event?: ReactMouseEvent) => void;
  onSwitchTab: (scriptId: string) => void;
  onNewTab: () => void;
  onPublish: () => void;
  onInfo: (toast: Notice) => void;

  pythonEditorBuffers: Record<string, PythonEditorBuffer>;
  onOpenPythonEditor: () => void;
  onSetPythonEditorContent: (scriptId: string, v: string) => void;
  onSavePythonEditor: (scriptId: string) => void;
  onExitPythonEditor: (scriptId: string) => void;
  onClosePythonTab: (scriptId: string) => void;
};

function formatTime(value: string) {
  return new Intl.DateTimeFormat("zh-CN", {
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    hour12: false,
  }).format(new Date(value));
}

function formatBytes(value: number) {
  if (value < 1024) return `${value} B`;
  return `${(value / 1024).toFixed(1)} KB`;
}

function shortHash(value: string) {
  return value ? `${value.slice(0, 8)}…${value.slice(-6)}` : "—";
}

// Notebook 单元格类型
type NotebookCell = {
  cell_type: "code" | "markdown" | "raw";
  source: string[] | string;
  execution_count?: number | null;
  outputs?: Array<{
    name?: "stdout" | "stderr" | string;
    output_type: "stream" | "execute_result" | "display_data" | "error";
    text?: string[] | string;
    data?: Record<string, unknown>;
  }>;
};

// Notebook Viewer 组件
function NotebookViewer({ content }: { content: object }) {
  const notebook = content as {
    cells?: NotebookCell[];
    metadata?: Record<string, unknown>;
    nbformat?: number;
    nbformat_minor?: number;
  };

  const cells = notebook.cells ?? [];

  return (
    <div className="flex h-full flex-col overflow-y-auto bg-white">
      {cells.map((cell, index) => {
        const sourceText = Array.isArray(cell.source)
          ? cell.source.join("")
          : (cell.source ?? "");

        if (cell.cell_type === "markdown") {
          return (
            <div key={index} className="flex w-full shrink-0 px-6 py-1">
              <div className="notebook-md flex min-w-0 flex-1 flex-col">
                {renderMarkdown(sourceText)}
              </div>
            </div>
          );
        }

        if (cell.cell_type === "code") {
          const hasSource = sourceText.trim().length > 0;
          return (
            <div key={index} className="flex w-full min-h-11 shrink-0 py-2">
              <div className="w-[90px] shrink-0 select-none px-4 text-right font-mono text-[11px] leading-[1.6] text-[#8b949e]">
                In [{cell.execution_count ?? " "}]:
              </div>
              <div className="flex min-w-0 flex-1 flex-col">
                <div
                  className={`mr-3.5 min-h-6 rounded-[1px] border border-[#ccc] bg-[#f6f8fa] ${
                    hasSource ? "p-1.5" : "flex items-center px-3.5"
                  }`}
                >
                  <pre className="m-0 bg-transparent font-mono text-[13px] leading-normal break-words whitespace-pre-wrap text-[#24292f]">
                    <code className="bg-transparent font-mono text-[13px]">{sourceText}</code>
                  </pre>
                </div>
                {cell.outputs && cell.outputs.length > 0 && (
                  <div className="mt-2">
                    {cell.outputs.map((output, outputIndex) => {
                      if (output.output_type === "stream" && output.text) {
                        const text = Array.isArray(output.text)
                          ? output.text.join("")
                          : output.text;
                        return (
                          <div
                            key={outputIndex}
                            className="px-1.5 text-[13px] leading-normal text-[#24292f]"
                          >
                            <pre className="m-0 font-mono text-[13px] break-words whitespace-pre-wrap">
                              {text}
                            </pre>
                          </div>
                        );
                      }
                      if (output.output_type === "execute_result" || output.output_type === "display_data") {
                        const text = output.data?.["text/plain"];
                        if (text) {
                          const textStr = Array.isArray(text) ? text.join("") : String(text);
                          return (
                            <div
                              key={outputIndex}
                              className="px-1.5 text-[13px] leading-normal text-[#24292f]"
                            >
                              <pre className="m-0 font-mono text-[13px] break-words whitespace-pre-wrap">
                                {textStr}
                              </pre>
                            </div>
                          );
                        }
                      }
                      return null;
                    })}
                  </div>
                )}
              </div>
            </div>
          );
        }

        return null;
      })}
    </div>
  );
}

// 简单的 markdown 渲染函数
function renderMarkdown(text: string) {
  const lines = text.split("\n");
  return lines.map((line, i) => {
    if (line.startsWith("# ")) {
      return <h1 key={i}>{line.slice(2)}</h1>;
    }
    if (line.startsWith("## ")) {
      return <h2 key={i}>{line.slice(3)}</h2>;
    }
    if (line.startsWith("### ")) {
      return <h3 key={i}>{line.slice(4)}</h3>;
    }
    if (line.startsWith("- ") || line.startsWith("* ")) {
      return <li key={i}>{line.slice(2)}</li>;
    }
    if (line.match(/^\d+\. /)) {
      return <li key={i}>{line.replace(/^\d+\. /, "")}</li>;
    }
    if (line.trim() === "") {
      return <br key={i} />;
    }
    return <p key={i}>{line}</p>;
  });
}

function confineJupyterFrame(frame: HTMLIFrameElement, readOnly: boolean = false): void {
  try {
    const document = frame.contentDocument;
    if (!document?.documentElement) return;
    const keepInside = (): void => {
      // 隐藏 "Open in..." 按钮
      document.querySelectorAll<HTMLElement>("button,[role='button']").forEach(
        (element) => {
          const label = `${element.getAttribute("aria-label") ?? ""} ${
            element.getAttribute("title") ?? ""
          } ${element.textContent ?? ""}`.trim();
          if (/^open in\b/i.test(label) || /\bopen in\.\.\./i.test(label)) {
            element.style.setProperty("display", "none", "important");
          }
          // 只读模式下隐藏保存/编辑相关的按钮
          if (readOnly) {
            if (/\bsave\b|\bedit\b|\brun\b/i.test(label)) {
              element.style.setProperty("display", "none", "important");
            }
          }
        },
      );
      // 阻止新窗口打开链接
      document.querySelectorAll<HTMLAnchorElement>("a[target]").forEach((link) => {
        if (["_blank", "_top", "_parent"].includes(link.target)) {
          link.target = "_self";
        }
      });
    };
    keepInside();
    new MutationObserver(keepInside).observe(document.documentElement, {
      childList: true,
      subtree: true,
    });
    document.addEventListener("click", (event) => {
      const target = event.target as HTMLElement | null;
      const link = target?.closest?.("a") as HTMLAnchorElement | null;
      if (link && ["_blank", "_top", "_parent"].includes(link.target)) {
        link.target = "_self";
      }
    }, true);
  } catch {
    // The iframe remains sandboxed even if its document is not yet accessible.
  }
}

export function ScriptWorkspace({
  script,
  scripts,
  sessionCache,
  editSession,
  jupyterUrl,
  editBusy,
  openError,
  latestVersion,
  versionsLoading,
  openTabs,
  onOpenEditor,
  onEndEditing,
  onClose,
  onSwitchTab,
  onNewTab,
  onPublish,
  onInfo,

  pythonEditorBuffers,
  onOpenPythonEditor,
  onSetPythonEditorContent,
  onSavePythonEditor,
  onExitPythonEditor,
  onClosePythonTab,
}: ScriptWorkspaceProps) {
  const { user } = useAuth();
  const tabbarRef = useRef<HTMLDivElement | null>(null);
  const isNotebook = script.script_type === "notebook";
  const isPython = script.script_type === "python";
  // 订阅 store 的刷新版本号，用于触发只读内容刷新
  const readOnlyRefreshVersion = useScriptWorkspaceStore((s) => s.readOnlyRefreshVersion);
  // 判断当前选中的文件是否正在编辑（需要同时检查 session_status 和 script_id）
  const isEditing = editSession?.session_status === "active"
                 && editSession?.script_id === script.script_id;
  const activePythonBuf = isPython ? pythonEditorBuffers[script.script_id] : null;
  const isPythonEditing = isPython && !!activePythonBuf;
  const showSaveButton = isPythonEditing && activePythonBuf &&
    (activePythonBuf.dirty || activePythonBuf.saving || activePythonBuf.initial);
  const saveDisabled = !activePythonBuf?.dirty || activePythonBuf?.saving;
  const pythonTabBuffers = openTabs.filter(
    (t) => t.scriptType === "python" && pythonEditorBuffers[t.scriptId],
  );
  const hasEmbeddedContent = sessionCache.size > 0 || pythonTabBuffers.length > 0;

  // 只读模式状态（用于 Python 文件和 notebook 的 JSON 内容）
  const [readOnlyContent, setReadOnlyContent] = useState<string | object | null>(null);
  const [readOnlyLoading, setReadOnlyLoading] = useState(false);
  const [readOnlyError, setReadOnlyError] = useState<string | null>(null);

  // 判断是否启用只读模式：文件已锁定 + 非所有者 + 非管理员
  const isReadOnlyMode = script.is_locked
    && user?.user_id !== script.owner_user_id
    && user?.role_code !== "admin";

  const scroll = (direction: "left" | "right") => {
    const tabbar = tabbarRef.current;
    if (!tabbar) return;
    const scrollAmount = 200;
    tabbar.scrollBy({
      left: direction === "left" ? -scrollAmount : scrollAmount,
      behavior: "smooth",
    });
 };

  useLayoutEffect(() => {
    const tabbar = tabbarRef.current;
    if (!tabbar) return;
    const activeTab = tabbar.querySelector('[data-active="true"]') as HTMLElement | null;
    if (activeTab) {
      const tabbarRect = tabbar.getBoundingClientRect();
      const tabRect = activeTab.getBoundingClientRect();
      if (tabRect.right > tabbarRect.right || tabRect.left < tabbarRect.left) {
        activeTab.scrollIntoView({ behavior: "smooth", inline: "center" });
      }
    }
  }, [script.script_id]);

  // 加载只读内容（当处于只读模式时）
  useEffect(() => {
    if (!isReadOnlyMode) {
      setReadOnlyContent(null);
      setReadOnlyLoading(false);
      setReadOnlyError(null);
      return;
    }

    setReadOnlyLoading(true);
    setReadOnlyError(null);

    getScriptContent(script.workspace_id, script.script_id)
      .then((data) => {
        setReadOnlyContent(data.content);
      })
      .catch((err) => {
        setReadOnlyError(err instanceof Error ? err.message : '加载失败');
      })
      .finally(() => {
        setReadOnlyLoading(false);
      });
  }, [isReadOnlyMode, script.script_id, script.workspace_id]);

  // 监听只读内容刷新
  useEffect(() => {
    if (readOnlyRefreshVersion > _lastRefreshVersion && isReadOnlyMode) {
      _lastRefreshVersion = readOnlyRefreshVersion;
      // 重新加载只读内容
      setReadOnlyLoading(true);
      setReadOnlyError(null);
      getScriptContent(script.workspace_id, script.script_id)
        .then((data) => {
          setReadOnlyContent(data.content);
        })
        .catch((err) => {
          setReadOnlyError(err instanceof Error ? err.message : '加载失败');
        })
        .finally(() => {
          setReadOnlyLoading(false);
        });
    }
  }, [script.script_id, script.workspace_id, isReadOnlyMode, readOnlyRefreshVersion]);

  const ScriptTypeIcon = scriptIcon(script);

  return (
    <>
      <div className="relative flex h-[43px] min-h-[43px] items-stretch overflow-hidden border-b border-[#e5ebf1] bg-[#f7f9fb]">
        <button
          className="z-[1] grid w-7 shrink-0 rotate-180 cursor-pointer place-items-center border-0 border-r border-[#e4eaf0] bg-[#f7f9fb] text-[#6b7c8f] transition-colors duration-150 hover:bg-[#edf1f5] hover:text-[#3d4c5c]"
          type="button"
          aria-label="向左滚动"
          onClick={() => scroll("left")}
        >
          <ChevronRight size={16} />
        </button>
        <div
          className="tabbar-scroll flex flex-1 overflow-x-auto overflow-y-hidden scroll-smooth"
          ref={tabbarRef}
        >
          {openTabs.map((tab) => {
            const isActive = tab.scriptId === script.script_id;
            return (
              <div
                key={tab.scriptId}
                data-active={isActive ? "true" : undefined}
                className={`relative flex max-w-[290px] min-w-[100px] shrink-0 cursor-pointer items-center gap-1.5 border-r border-[#e4eaf0] px-1.5 text-xs text-[#4b5c70] ${
                  isActive
                    ? "bg-white before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-[#2381e5] before:content-['']"
                    : "bg-white hover:bg-[#f0f4f8]"
                }`}
                onClick={() => onSwitchTab(tab.scriptId)}
              >
                <span
                  className={`grid size-[25px] shrink-0 place-items-center rounded-[5px] ${fileIconTone(tab.scriptType)}`}
                >
                  {tab.scriptType === "notebook"
                    ? <BookOpen size={16} />
                    : <FileCode size={16} />}
                </span>
                <span className="min-w-0 flex-1 truncate">{tab.scriptName}</span>
                <button
                  type="button"
                  className="grid size-[25px] place-items-center border-0 bg-transparent text-[#8e9baa] hover:bg-[#edf1f5] hover:text-[#43566c]"
                  aria-label="关闭标签"
                  onClick={(event) => onClose(tab.scriptId, event)}
                >
                  <X size={14} />
                </button>
              </div>
            );
          })}
          <button
            className="ml-[5px] grid size-[25px] shrink-0 cursor-pointer place-items-center self-center rounded border-0 bg-transparent text-[#8e9baa] hover:bg-[#edf1f5] hover:text-[#43566c]"
            type="button"
            onClick={onNewTab}
          >
            <Plus size={17} />
          </button>
        </div>
        <button
          className="z-[1] grid w-7 shrink-0 cursor-pointer place-items-center border-0 border-l border-[#e4eaf0] bg-[#f7f9fb] text-[#6b7c8f] transition-colors duration-150 hover:bg-[#edf1f5] hover:text-[#3d4c5c]"
          type="button"
          aria-label="向右滚动"
          onClick={() => scroll("right")}
        >
          <ChevronRight size={16} />
        </button>
      </div>

      <div className="flex min-h-[53px] items-center justify-between border-b border-[#e6ebf0] bg-white px-3.5">
        <div className="flex min-w-0 items-center gap-[7px] text-[11px] text-[#8794a3]">
          <span
            className={`grid size-[25px] shrink-0 place-items-center rounded-[5px] ${fileIconTone(script.script_type)}`}
          >
            <ScriptTypeIcon size={17} />
          </span>
          <span>工作副本</span>
          <ChevronRight size={13} />
          <strong className="max-w-[300px] truncate text-[#45576b]">
            {script.script_name}
          </strong>
        </div>
        {!isReadOnlyMode && (
          <div className="flex items-center gap-[7px]">
            {isPythonEditing ? (
              <>
                {showSaveButton && (
                  <button
                    type="button"
                    className={`${saveBtnClass}${activePythonBuf?.saving ? " opacity-85" : ""}`}
                    disabled={saveDisabled}
                    onClick={() => onSavePythonEditor(script.script_id)}
                  >
                    {activePythonBuf?.saving
                      ? <><span className="button-spinner button-spinner--blue size-3" /> 保存中</>
                      : "保存"}
                  </button>
                )}
                <button
                  type="button"
                  className={endEditBtnClass}
                  onClick={() => onExitPythonEditor(script.script_id)}
                >
                  结束编辑
                </button>
              </>
            ) : isEditing ? (
              <button
                className={endEditBtnClass}
                type="button"
                disabled={editBusy}
                onClick={onEndEditing}
              >
                {editBusy ? "正在释放…" : "结束编辑"}
              </button>
            ) : (
              <button
                type="button"
                className={toolbarBtnClass}
                onClick={() => onInfo({
                  tone: "info",
                  message: "Jupyter 中保存后会直接写入 Workspace 工作副本",
                })}
              >
                保存说明
              </button>
            )}
            <button
              className={releaseBtnClass}
              type="button"
              onClick={onPublish}
            >
              发布稳定版
            </button>
            <span
              className={`inline-flex h-[29px] items-center gap-1.5 rounded-[15px] px-2.5 text-[10px] ${
                isEditing
                  ? "bg-[#e9f5fd] text-[#126b9d]"
                  : "bg-[#eaf9f3] text-[#16845c]"
              }`}
            >
              <span
                className={`size-1.5 rounded-full ${
                  isEditing
                    ? "stage-dot-editing bg-[#2495d3]"
                    : "bg-[#20bc7f]"
                }`}
              />
              {
                latestVersion
                  ? `最新 ${latestVersion.version_label}`
                  : "工作副本已就绪"
              }
            </span>
          </div>
        )}
      </div>

      {/* 本地编辑锁提示——只在非 Python 编辑时显示，
          因为 Python 编辑走 pythonEditorBuffers，不走文件锁。
          这个锁只在本浏览器当前 tab 内有效，不能阻止隐身模式 / 其它浏览器同时编辑。 */}
      {isEditing && (
        <div className="flex shrink-0 items-center justify-center gap-2 border-b border-[#c9def9] bg-[#e7f1ff] px-4 py-1.5 text-xs font-medium text-[#1f4e8a]">
          <Info size={14} />
          <span>
            本地编辑锁——关闭标签页、刷新页面或换浏览器后失效，不会阻止他人同时编辑。
          </span>
        </div>
      )}

      {/* 编辑器画布区域 - 始终渲染，保证 iframe 不重新加载 */}
      <div className="relative h-full w-full overflow-hidden">
        {/* 只读模式内容 - 用 CSS 控制显示/隐藏 */}
        <div style={{ display: isReadOnlyMode ? 'block' : 'none', height: '100%' }}>
          <div className="flex h-full flex-col overflow-hidden bg-[#f8f9fa]">
            <div className="mb-1.5 flex shrink-0 items-center justify-center gap-2 border-b border-[#e0e0e0] bg-[#fff3cd] px-4 py-2 text-[13px] font-medium text-[#856404]">
              <Lock size={16} />
              <span>此文件已被锁定，您当前处于只读模式</span>
            </div>
            <div className="min-h-0 flex-1 overflow-y-auto">
              {readOnlyLoading ? (
                <div className="flex min-h-[200px] flex-col items-center justify-center gap-4 text-sm text-[#666]">
                  <span className="button-spinner button-spinner--blue" />
                  <span>加载内容中...</span>
                </div>
              ) : readOnlyError ? (
                <div className="flex min-h-[200px] flex-col items-center justify-center gap-3 p-5 text-center text-sm text-[#dc3545]">
                  <Info size={28} />
                  <strong className="text-base">加载失败</strong>
                  <p className="m-0 text-[#666]">{readOnlyError}</p>
                </div>
              ) : script.script_type === 'notebook' && readOnlyContent && typeof readOnlyContent === 'object' ? (
                <NotebookViewer content={readOnlyContent} />
              ) : (
                <Editor
                  height="100%"
                  language="python"
                  value={typeof readOnlyContent === 'string' ? readOnlyContent : ''}
                  theme="vs"
                  options={{
                    readOnly: true,
                    domReadOnly: true,
                    minimap: { enabled: true },
                    lineNumbers: "on",
                    folding: true,
                    wordWrap: "on",
                    contextmenu: false,
                    automaticLayout: true,
                  }}
                />
              )}
            </div>
          </div>
        </div>

        {/* 正常编辑模式 - 始终渲染，用 CSS 控制显示/隐藏 */}
        <div
          className={`relative min-h-0 flex-1 ${
            sessionCache.size > 0
              ? "overflow-hidden bg-white"
              : "editor-canvas-shell overflow-auto"
          }`}
          style={{ display: isReadOnlyMode ? 'none' : 'block', height: '100%' }}
        >
          {/* 多 PythonEditor 实例：每个有 buffer 的 python tab 都挂载，仅 active 可见 */}
          {pythonTabBuffers.map((tab) => {
          const tabScript = scripts.find((s) => s.script_id === tab.scriptId);
          if (!tabScript) return null;
          const buf = pythonEditorBuffers[tab.scriptId];
          const isActive = tab.scriptId === script.script_id;
          return (
            <section
              key={tab.scriptId}
              className="flex h-full min-h-0 w-full flex-col bg-white"
              style={{
                position: isActive ? "relative" : "absolute",
                visibility: isActive ? "visible" : "hidden",
                pointerEvents: isActive ? "auto" : "none",
                width: "100%",
                height: "100%",
              }}
            >
              <PythonEditor
                scriptId={tab.scriptId}
                script={tabScript}
                initialContent={buf.initialContent ?? ""}
                loading={buf.initialContent === null && !buf.loadError}
                loadError={buf.loadError}
                saving={buf.saving}
                dirty={buf.dirty}
                onChange={onSetPythonEditorContent}
                onSave={onSavePythonEditor}
                onEndEditing={onExitPythonEditor}
                onCloseTab={onClosePythonTab}
              />
            </section>
          );
        })}
          {/* 渲染所有缓存的 iframe */}
          {Array.from(sessionCache.entries()).map(([scriptId, cached]) => {
            const isActive = scriptId === script.script_id;
            return (
              <section
                key={scriptId}
                className="flex h-full min-h-0 w-full flex-col overflow-hidden bg-white"
                style={{
                  position: isActive ? 'relative' : 'absolute',
                  visibility: isActive ? 'visible' : 'hidden',
                  pointerEvents: isActive ? 'auto' : 'none',
                }}
              >
                <div className="flex min-h-[34px] items-center gap-[18px] border-b border-[#dfe6ec] bg-[#f8fafc] px-3.5 text-[9px] text-[#718195]">
                  <span className="inline-flex items-center gap-1.5 font-[650] text-[#197b59]">
                    <i className="size-[7px] rounded-full bg-[#20b77d] shadow-[0_0_0_3px_rgb(32_183_125/12%)]" />
                    Workspace Jupyter Server
                  </span>
                  <span className="inline-flex items-center gap-1.5">
                    {cached.session.session_status === "active" ? "Notebook Session · Python 3 Kernel" : "Jupyter 文本编辑器"}
                  </span>
                  <code className="ml-auto text-[9px] text-[#72859a]" title={cached.session.runtime_id}>
                    Runtime {cached.session.runtime_id.slice(-8)}
                  </code>
                </div>
                <iframe
                  className="min-h-0 w-full flex-1 border-0 bg-white"
                  src={cached.jupyterUrl}
                  title={`${scriptId} Jupyter 编辑器`}
                  allow="clipboard-read; clipboard-write"
                  sandbox="allow-same-origin allow-scripts allow-forms allow-downloads allow-modals"
                  onLoad={(event) => confineJupyterFrame(event.currentTarget)}
                />
              </section>
            );
          })}

        {/* 当前脚本没有缓存时的状态显示 */}
        {!sessionCache.has(script.script_id) ? (
          isNotebook ? (
            <section
              className={`mx-auto my-16 flex w-[min(520px,calc(100%-48px))] min-h-[260px] flex-col items-center justify-center rounded-[10px] border p-9 text-center text-[#66788d] shadow-[0_12px_34px_rgb(31_64_98/7%)] ${
                openError
                  ? "border-[#f0cfcc] bg-white/95"
                  : "border-[#dce5ed] bg-white/95"
              }`}
              aria-live="polite"
            >
              <div
                className={`mb-4 grid size-[54px] place-items-center rounded-full ${
                  openError
                    ? "bg-[#fff1f0] text-[#c84f49]"
                    : "bg-[#edf6ff] text-[#247bc5]"
                }`}
              >
                {openError
                  ? <Info size={28} />
                  : <span className="button-spinner button-spinner--blue size-6 border-[3px]" />}
              </div>
              <strong className="text-base text-[#1d344d]">
                {openError ? "Notebook 打开失败" : "正在打开 Notebook"}
              </strong>
              <p className="mt-[9px] max-w-[430px] text-xs leading-[1.7] text-[#7a8a9b] [overflow-wrap:anywhere]">
                {openError
                  ? openError
                  : "正在获取编辑锁并连接 Workspace Jupyter Server…"}
              </p>
              {openError && (
                <button
                  className={`${openEditorBtnClass} mt-[18px]`}
                  type="button"
                  disabled={editBusy}
                  onClick={onOpenEditor}
                >
                  {editBusy
                    ? <span className="button-spinner button-spinner--blue" />
                    : <RefreshCw size={16} />}
                  {editBusy ? "正在重试…" : "重试打开"}
                </button>
              )}
            </section>
          ) : isPython && !activePythonBuf ? (
            <section className="mx-auto mb-[38px] mt-6 w-[min(1020px,calc(100%-48px))] max-xl:w-[calc(100%-30px)]">
            <div className="flex items-start justify-between gap-5 rounded-t-[9px] border border-[#dce5ed] bg-white px-[26px] py-[23px]">
              <div>
                <span className="text-[9px] font-extrabold tracking-[0.13em] text-[#2b7fca]">
                  PYTHON SCRIPT
                </span>
                <h2 className="mb-1 mt-1.5 text-[22px] text-[#1b2d43]">
                  {script.script_name}
                </h2>
                <p className="m-0 font-mono text-[10px] text-[#8997a6]">
                  {script.relative_path}
                </p>
              </div>
              <button
                className={
                  isEditing
                    ? openEditorEditingBtnClass
                    : openEditorBtnClass
                }
                type="button"
                disabled={editBusy}
                onClick={onOpenEditor}
              >
                {editBusy
                  ? <span className="button-spinner button-spinner--blue" />
                  : <ExternalLink size={17} />}
                {editBusy
                  ? "正在准备编辑器…"
                  : isEditing
                    ? "继续编辑"
                    : "打开编辑器"}
              </button>
            </div>

            <div className="grid grid-cols-4 border-x border-b border-[#dce5ed] bg-[#f9fbfd]">
              {[
                ["脚本类型", "Python"],
                [
                  "可见范围",
                  script.visibility === "workspace"
                    ? "Workspace"
                    : script.visibility === "public"
                      ? "公开"
                      : "私有",
                ],
                ["文件大小", formatBytes(script.size_bytes)],
                ["最近更新", formatTime(script.updated_at)],
              ].map(([label, value], index) => (
                <div
                  key={label}
                  className={`flex min-h-16 flex-col justify-center px-[21px] ${
                    index < 3 ? "border-r border-[#e4eaf0]" : ""
                  }`}
                >
                  <span className="text-[10px] text-[#8a9aaa]">{label}</span>
                  <strong className="text-[13px] text-[#2a3f55]">{value}</strong>
                </div>
              ))}
            </div>
            <div className="overflow-hidden rounded-b-[9px] border border-t-0 border-[#dce5ed] bg-white">
                  <div className="flex items-center justify-between border-b border-[#e8edf3] bg-[#f7f9fb] px-3.5 py-2 text-[11px] text-[#6b7c8f]">
                    <div className="flex items-center gap-1.5">
                      <span className="size-2.5 rounded-full bg-[#ef6b62]" />
                      <span className="size-2.5 rounded-full bg-[#e9b949]" />
                      <span className="size-2.5 rounded-full bg-[#49b97b]" />
                    </div>
                    <span>Python 预览</span>
                    <em className="text-[10px] not-italic text-[#97a4b3]">
                      {isEditing ? "Jupyter 中可编辑" : "平台只读预览"}
                    </em>
                  </div>
                  <PythonPreview
                    workspaceId={script.workspace_id}
                    filePath={script.jupyter_path}
                  />
                </div>

            <div className="mt-3 flex flex-wrap items-center gap-x-5 gap-y-2 px-1 text-[11px] text-[#7a8b9c]">
              <span className="inline-flex items-center gap-[5px] text-[#25875e]">
                <Check size={15} />
              </span>
              <span>SHA-256&nbsp; {shortHash(script.content_hash)}</span>
              <span>
                稳定版本&nbsp;
                {versionsLoading
                  ? "加载中"
                  : latestVersion
                    ? `${latestVersion.version_label} · ${latestVersion.versions_id}`
                    : "尚未发布"}
              </span>
            </div>
          </section>
          ) : null
        ) : null}
        </div>
      </div>
    </>
  );
}


interface PythonPreviewProps {
  workspaceId: string;
  filePath: string;
}
export function PythonPreview({
  workspaceId,
  filePath,
}: PythonPreviewProps) {
  const previewKey = `${workspaceId}::${filePath}`;
  const storeKey = useScriptWorkspaceStore((s) => s.previewKey);
  const previewCode = useScriptWorkspaceStore((s) => s.previewCode);
  const previewCodeSize = useScriptWorkspaceStore((s) => s.previewCodeSize);
  const previewLoading = useScriptWorkspaceStore((s) => s.previewLoading);
  const previewError = useScriptWorkspaceStore((s) => s.previewError);
 const loadPreview = useScriptWorkspaceStore((s) => s.loadPreview);

  useLayoutEffect(() => {
    void loadPreview(workspaceId, filePath);
  }, [previewKey]);

  if (storeKey !== previewKey) {
    return <div>Loading...</div>;
  }

  if (previewLoading) {
    return <div>Loading...</div>;
  }

  if (previewError) {
    return <div>Failed to load: {previewError}</div>;
  }

  return (
    <Editor
      height="550px"
      language="python"
      value={previewCode ?? ""}
      theme="vs"
      options={{
        readOnly: true,
        domReadOnly: true,
        minimap: {
          enabled: previewCodeSize !== null && previewCodeSize > 1000,
        },
        lineNumbers: "off",
        folding: true,
        wordWrap: "on",
        contextmenu: false,
        dragAndDrop: false,
        automaticLayout: true,
        renderLineHighlight: "none",
      }}
    />
  );
}