import {
  type ChangeEvent,
  type FormEvent,
  type MouseEvent as ReactMouseEvent,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { useLocation, useNavigate } from "react-router";

import {
  type ActiveEditSession,
  type ScriptItem,
  type ScriptType,
  type StableVersion,
  type Visibility,
  type WorkspaceDirectory,
} from "../../services/api";
import { useApi, useAuth } from "~/context/AuthContext";
import Icon from "../../components/Icon";
import SchedulePage from "../schedules/SchedulePage";
import { DashboardPage, SystemAdminPage } from "../admin/AdminPages";
import "../../styles/platform.css";
import { WorkspaceTreeGroup, scriptIcon } from "./WorkspaceTree";
import { ScriptWorkspace } from "./ScriptWorkspace";


type NewScriptForm = {
  name: string;
  scriptType: ScriptType;
  visibility: Visibility;
  parentPath: string;
};

type ContextMenuState = {
  x: number;
  y: number;
  kind: "root" | "directory" | "file";
  path: string;
  script?: ScriptItem;
};

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

const navigation = [
  { label: "工作台", icon: "home" as const, page: "home" as const },
  { label: "构建脚本", icon: "script" as const, page: "scripts" as const },
  { label: "调度配置", icon: "schedule" as const, page: "schedules" as const },
  { label: "系统管理", icon: "settings" as const, page: "system" as const },
];

type ActivePage = "home" | "scripts" | "schedules" | "system";

function pageFromPath(pathname: string): ActivePage {
  const page = pathname.replace(/^\/+|\/+$/g, "");
  return ["scripts", "schedules", "system"].includes(page)
    ? page as ActivePage
    : "home";
}

function pathForPage(page: ActivePage): string {
  return page === "home" ? "/workbench" : `/${page}`;
}

const initialForm: NewScriptForm = {
  name: "",
  scriptType: "notebook",
  visibility: "workspace",
  parentPath: "",
};

function ownedScriptPath(item: ScriptItem) {
  return item.relative_path.replaceAll("\\", "/").split("/").slice(2).join("/");
}

function parentOf(path: string) {
  const parts = path.split("/");
  parts.pop();
  return parts.join("/");
}

function inferredDirectories(items: ScriptItem[]): WorkspaceDirectory[] {
  const result = new Map<string, WorkspaceDirectory>();
  for (const item of items) {
    const parts = parentOf(ownedScriptPath(item)).split("/").filter(Boolean);
    let parentPath = "";
    for (const name of parts) {
      const path = parentPath ? `${parentPath}/${name}` : name;
      result.set(path, { path, name, parent_path: parentPath });
      parentPath = path;
    }
  }
  return [...result.values()];
}

function mergeDirectories(
  left: WorkspaceDirectory[],
  right: WorkspaceDirectory[],
): WorkspaceDirectory[] {
  return [...new Map(
    [...left, ...right].map((item) => [item.path, item]),
  ).values()];
}
export default function ModelPlatformApp() {
  const { currentWorkspace } = useAuth();
  if (!currentWorkspace) {
    return (
      <div className="app-shell" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
        <div style={{ textAlign: "center" }}>
          <span style={{ fontSize: 18 }}>加载中…</span>
        </div>
      </div>
    );
  }
  return <AuthenticatedModelPlatformApp />;
}

function AuthenticatedModelPlatformApp() {
  const location = useLocation();
  const navigate = useNavigate();
  const activePage = pageFromPath(location.pathname);
  const auth = useAuth();
  const { user, workspaces, setCurrentWorkspace, logout } = auth;
  const currentWorkspace = auth.currentWorkspace!;
  const api = useApi();
  const [scripts, setScripts] = useState<ScriptItem[]>([]);
  const [directories, setDirectories] = useState<WorkspaceDirectory[]>([]);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [keyword, setKeyword] = useState("");
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [apiOnline, setApiOnline] = useState(false);
  const [createOpen, setCreateOpen] = useState(false);
  const [creating, setCreating] = useState(false);
  const [form, setForm] = useState<NewScriptForm>(initialForm);
  const [folderDialog, setFolderDialog] = useState<{
    open: boolean;
    parentPath: string;
    name: string;
    busy: boolean;
  }>({ open: false, parentPath: "", name: "", busy: false });
  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
  const [workspaceMenuOpen, setWorkspaceMenuOpen] = useState(false);
  const [uploadParentPath, setUploadParentPath] = useState("");
  const [uploading, setUploading] = useState(false);
  const uploadInputRef = useRef<HTMLInputElement | null>(null);
  const [toast, setToast] = useState<ToastState | null>(null);
  const [editSession, setEditSession] = useState<ActiveEditSession | null>(null);
  const editSessionRef = useRef<ActiveEditSession | null>(null);
  const selectedIdRef = useRef<string | null>(null);
  const editorOpenRequestRef = useRef(0);
  const editorOpeningRef = useRef(false);
  const [embeddedJupyterUrl, setEmbeddedJupyterUrl] =
    useState<string | null>(null);
  const [editBusy, setEditBusy] = useState(false);
  const [editorOpenError, setEditorOpenError] = useState<{
    scriptId: string;
    message: string;
  } | null>(null);
  const [versions, setVersions] = useState<StableVersion[]>([]);
  const [versionsLoading, setVersionsLoading] = useState(false);
  const [publishTarget, setPublishTarget] = useState<ScriptItem | null>(null);
  const [releaseNote, setReleaseNote] = useState("");
  const [publishVisibility, setPublishVisibility] =
    useState<Visibility>("workspace");
  const [publishing, setPublishing] = useState(false);
  const [publishedVersion, setPublishedVersion] =
    useState<StableVersion | null>(null);

  const load = async (silent = false) => {
    if (!silent) setLoading(true);
    setRefreshing(silent);
    try {
      const [items, folderItems] = await Promise.all([
        api.listScripts(),
        api.listWorkspaceDirectories(),
      ]);
      setScripts(items);
      setDirectories(folderItems);
      setApiOnline(true);
      setSelectedId((current) => {
        if (current && items.some((item) => item.script_id === current)) {
          selectedIdRef.current = current;
          return current;
        }
        const nextSelectedId = (
          items.find((item) => item.script_type === "notebook")?.script_id
          ?? items[0]?.script_id
          ?? null
        );
        selectedIdRef.current = nextSelectedId;
        return nextSelectedId;
      });
    } catch (error) {
      setApiOnline(false);
      setToast({
        tone: "error",
        message: error instanceof Error ? error.message : "脚本列表加载失败",
      });
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  };

  useEffect(() => {
    void load();
  }, []);

  useEffect(() => {
    if (!toast) return;
    const timer = window.setTimeout(() => setToast(null), 3200);
    return () => window.clearTimeout(timer);
  }, [toast]);

  useEffect(() => {
    if (!contextMenu) return;
    const close = () => setContextMenu(null);
    const closeOnEscape = (event: KeyboardEvent) => {
      if (event.key === "Escape") close();
    };
    window.addEventListener("pointerdown", close);
    window.addEventListener("blur", close);
    window.addEventListener("resize", close);
    window.addEventListener("scroll", close, true);
    window.addEventListener("keydown", closeOnEscape);
    return () => {
      window.removeEventListener("pointerdown", close);
      window.removeEventListener("blur", close);
      window.removeEventListener("resize", close);
      window.removeEventListener("scroll", close, true);
      window.removeEventListener("keydown", closeOnEscape);
    };
  }, [contextMenu]);

  useEffect(() => {
    editSessionRef.current = editSession;
  }, [editSession]);

  useEffect(() => {
    if (!selectedId) {
      setVersions([]);
      return;
    }
    let ignore = false;
    setVersionsLoading(true);
    void api.listScriptVersions(selectedId)
      .then((items) => {
        if (!ignore) setVersions(items);
      })
      .catch((error) => {
        if (!ignore) {
          setToast({
            tone: "error",
            message: error instanceof Error ? error.message : "版本列表加载失败",
          });
        }
      })
      .finally(() => {
        if (!ignore) setVersionsLoading(false);
      });
    return () => {
      ignore = true;
    };
  }, [selectedId]);

  useEffect(() => {
    if (!editSession) return;
    const intervalSeconds = Math.max(
      5,
      editSession.heartbeat_interval_seconds || 15,
    );
    let heartbeatRunning = false;
    const timer = window.setInterval(() => {
      if (heartbeatRunning) return;
      const current = editSessionRef.current;
      if (!current || current.edit_session_id !== editSession.edit_session_id) {
        return;
      }
      heartbeatRunning = true;
      void api.heartbeatFileLock(current)
        .then((updated) => {
          setEditSession((active) => active
            && active.edit_session_id === updated.edit_session_id
            ? {
                ...active,
                session_status: updated.session_status,
                expires_at: updated.expires_at,
              }
            : active);
        })
        .catch((error) => {
          setEditSession(null);
          setEmbeddedJupyterUrl(null);
          setToast({
            tone: "error",
            message: `编辑锁心跳已中断：${
              error instanceof Error ? error.message : "请重新打开文件"
            }`,
          });
        })
        .finally(() => {
          heartbeatRunning = false;
        });
    }, intervalSeconds * 1000);
    return () => window.clearInterval(timer);
  }, [editSession?.edit_session_id, editSession?.heartbeat_interval_seconds]);

  useEffect(() => {
    if (!editSession?.ticket_expires_at) return;
    const expiresAt = new Date(editSession.ticket_expires_at).getTime();
    const renewAfter = Math.max(15_000, expiresAt - Date.now() - 60_000);
    const timer = window.setTimeout(() => {
      const current = editSessionRef.current;
      if (!current || current.edit_session_id !== editSession.edit_session_id) {
        return;
      }
      void api.createJupyterAccessTicket(current)
        .then((ticket) => {
          setEditSession((active) => active
            && active.edit_session_id === ticket.edit_session_id
            ? { ...active, ticket_expires_at: ticket.expires_at }
            : active);
        })
        .catch((error) => {
          setToast({
            tone: "error",
            message: `Jupyter 访问票据续签失败：${
              error instanceof Error ? error.message : "请重新打开文件"
            }`,
          });
        });
    }, renewAfter);
    return () => window.clearTimeout(timer);
  }, [editSession?.edit_session_id, editSession?.ticket_expires_at]);

  useEffect(() => {
    if (!editSession) return;
    const handleUnload = () => {
      const current = editSessionRef.current;
      if (current) api.releaseFileLockOnUnload(current);
    };
    window.addEventListener("beforeunload", handleUnload);
    return () => window.removeEventListener("beforeunload", handleUnload);
  }, [editSession?.edit_session_id]);

  const filteredScripts = useMemo(() => {
    const normalized = keyword.trim().toLocaleLowerCase();
    if (!normalized) return scripts;
    return scripts.filter((item) =>
      item.script_name.toLocaleLowerCase().includes(normalized),
    );
  }, [keyword, scripts]);

  const memberScriptGroups = (() => {
    const currentUserScripts = filteredScripts.filter(
      (item) => item.owner_user_id === user?.user_id,
    );
    const inferred = inferredDirectories(currentUserScripts);
    return [{
      user: user,
      scripts: currentUserScripts,
      directories: mergeDirectories(directories, inferred),
    }];
  })();
  const selected = scripts.find((item) => item.script_id === selectedId) ?? null;

  const selectScript = (scriptId: string | null) => {
    if (selectedIdRef.current !== scriptId) {
      editorOpenRequestRef.current += 1;
      setEditorOpenError(null);
    }
    selectedIdRef.current = scriptId;
    setSelectedId(scriptId);
  };

  const openScriptEditor = async (
    script: ScriptItem,
    showToast = true,
  ) => {
    if (editorOpeningRef.current) return;
    editorOpeningRef.current = true;
    const requestId = editorOpenRequestRef.current + 1;
    editorOpenRequestRef.current = requestId;
    const requestIsCurrent = () =>
      editorOpenRequestRef.current === requestId
      && selectedIdRef.current === script.script_id;
    const clearSessionIfActive = (session: ActiveEditSession) => {
      if (
        editSessionRef.current?.edit_session_id === session.edit_session_id
      ) {
        setEmbeddedJupyterUrl(null);
        setEditSession(null);
        editSessionRef.current = null;
      }
    };

    setEditBusy(true);
    setEditorOpenError((current) =>
      current?.scriptId === script.script_id ? null : current);
    let active = editSessionRef.current;
    let newlyAcquired = false;
    try {
      if (active && active.script_id !== script.script_id) {
        await api.releaseFileLock(active);
        setEmbeddedJupyterUrl(null);
        setEditSession(null);
        editSessionRef.current = null;
        active = null;
      }
      if (!requestIsCurrent()) return;

      if (!active) {
        active = await api.acquireFileLock(script);
        newlyAcquired = true;
      }
      if (!requestIsCurrent()) {
        if (active) {
          await api.releaseFileLock(active);
          clearSessionIfActive(active);
        }
        return;
      }

      const ticket = await api.createJupyterAccessTicket(active);
      if (!requestIsCurrent()) {
        await api.releaseFileLock(active);
        clearSessionIfActive(active);
        return;
      }

      const readySession = {
        ...active,
        ticket_expires_at: ticket.expires_at,
      };
      setEditSession(readySession);
      editSessionRef.current = readySession;
      setEmbeddedJupyterUrl(ticket.jupyter_url);
      if (showToast) {
        setToast({
          tone: "success",
          message: `${script.script_name} 已打开，Jupyter 已嵌入当前工作区`,
        });
      }
    } catch (error) {
      if (newlyAcquired && active) {
        try {
          await api.releaseFileLock(active);
        } catch {
          // The database lease is the final safety net if compensation cannot reach Runtime.
        }
        setEditSession(null);
        editSessionRef.current = null;
      }
      setEmbeddedJupyterUrl(null);
      if (requestIsCurrent()) {
        const message = error instanceof Error ? error.message : "打开编辑器失败";
        setEditorOpenError({ scriptId: script.script_id, message });
        if (showToast) {
          setToast({ tone: "error", message });
        }
      }
    } finally {
      editorOpeningRef.current = false;
      setEditBusy(false);
    }
  };

  useEffect(() => {
    if (
      activePage !== "scripts"
      || !selected
      || selected.script_type !== "notebook"
      || editBusy
      || editorOpenError?.scriptId === selected.script_id
      || (
        editSession?.script_id === selected.script_id
        && embeddedJupyterUrl
      )
    ) {
      return;
    }

    void openScriptEditor(selected, false);
  }, [
    activePage,
    editBusy,
    editSession?.script_id,
    editorOpenError?.scriptId,
    embeddedJupyterUrl,
    selected?.script_id,
    selected?.script_type,
  ]);

  const endEditing = async (closeTab = false, showToast = true) => {
    editorOpenRequestRef.current += 1;
    setEditorOpenError(null);
    const active = editSessionRef.current;
    if (!active) {
      if (closeTab) selectScript(null);
      return;
    }
    setEditBusy(true);
    try {
      await api.releaseFileLock(active);
      setEmbeddedJupyterUrl(null);
      setEditSession(null);
      editSessionRef.current = null;
      if (closeTab) selectScript(null);
      if (showToast) {
        setToast({
          tone: "success",
          message: `${active.script_name} 的编辑锁已释放`,
        });
      }
    } catch (error) {
      setToast({
        tone: "error",
        message: error instanceof Error ? error.message : "释放编辑锁失败",
      });
    } finally {
      setEditBusy(false);
    }
  };

  useEffect(() => {
    const active = editSessionRef.current;
    if (
      !active
      || !selected
      || selected.script_type === "notebook"
      || selected.script_id === active.script_id
      || editBusy
    ) {
      return;
    }
    void endEditing(false, false);
  }, [editBusy, selected?.script_id, selected?.script_type]);

  useEffect(() => {
    if (
      activePage === "scripts"
      || editBusy
      || (!editSessionRef.current && !editorOpeningRef.current)
    ) {
      return;
    }
    void endEditing(true, false);
  }, [activePage, editBusy]);

  const openPublishDialog = (script: ScriptItem) => {
    setPublishTarget(script);
    setReleaseNote("");
    setPublishVisibility(
      script.visibility === "private" ? "private" : "workspace",
    );
  };

  const submitPublish = async (event: FormEvent) => {
    event.preventDefault();
    if (!publishTarget) return;
    setPublishing(true);
    try {
      const version = await api.publishScriptVersion({
        script: publishTarget,
        releaseNote,
        visibility: publishVisibility,
      });
      setVersions((items) => [
        version,
        ...items.filter((item) => item.versions_id !== version.versions_id),
      ]);
      setPublishTarget(null);
      setPublishedVersion(version);
      setToast({
        tone: "success",
        message: `${version.version_label} 稳定版本发布成功`,
      });
    } catch (error) {
      setToast({
        tone: "error",
        message: error instanceof Error ? error.message : "稳定版本发布失败",
      });
    } finally {
      setPublishing(false);
    }
  };

  const submitCreate = async (event: FormEvent) => {
    event.preventDefault();
    if (!form.name.trim()) return;
    setCreating(true);
    try {
      const created = await api.createScript(form);
      setScripts((items) => [created, ...items]);
      selectScript(created.script_id);
      setCreateOpen(false);
      setForm(initialForm);
      setToast({
        tone: "success",
        message: `${created.script_name} 已创建`,
      });
    } catch (error) {
      setToast({
        tone: "error",
        message: error instanceof Error ? error.message : "创建失败",
      });
    } finally {
      setCreating(false);
    }
  };

  const openCreateDialog = (
    parentPath = "",
    scriptType: ScriptType = "notebook",
  ) => {
    setContextMenu(null);
    setForm({
      ...initialForm,
      parentPath,
      scriptType,
    });
    setCreateOpen(true);
  };

  const openFolderDialog = (parentPath = "") => {
    setContextMenu(null);
    setFolderDialog({
      open: true,
      parentPath,
      name: "",
      busy: false,
    });
  };

  const chooseUpload = (parentPath = "") => {
    setContextMenu(null);
    setUploadParentPath(parentPath);
    uploadInputRef.current?.click();
  };

  const handleUpload = async (event: ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(event.target.files ?? []);
    event.target.value = "";
    if (files.length === 0) return;
    setUploading(true);
    let lastCreated: ScriptItem | null = null;
    try {
      for (const file of files) {
        lastCreated = await api.uploadScript(file, uploadParentPath);
      }
      await load(true);
      if (lastCreated) selectScript(lastCreated.script_id);
      setToast({
        tone: "success",
        message: `${files.length} 个文件已上传到${
          uploadParentPath ? ` ${uploadParentPath}` : "当前目录"
        }`,
      });
    } catch (error) {
      await load(true);
      setToast({
        tone: "error",
        message: error instanceof Error ? error.message : "文件上传失败",
      });
    } finally {
      setUploading(false);
    }
  };

  const submitFolder = async (event: FormEvent) => {
    event.preventDefault();
    if (!folderDialog.name.trim()) return;
    setFolderDialog((current) => ({ ...current, busy: true }));
    try {
      await api.createWorkspaceDirectory(
        folderDialog.name.trim(),
        folderDialog.parentPath,
      );
      await load(true);
      setFolderDialog({
        open: false,
        parentPath: "",
        name: "",
        busy: false,
      });
      setToast({
        tone: "success",
        message: `${folderDialog.name.trim()} 文件夹已创建`,
      });
    } catch (error) {
      setFolderDialog((current) => ({ ...current, busy: false }));
      setToast({
        tone: "error",
        message: error instanceof Error ? error.message : "文件夹创建失败",
      });
    }
  };

  const removeScript = async (script: ScriptItem) => {
    setContextMenu(null);
    if (!window.confirm(`确定删除文件“${script.script_name}”吗？稳定版本会保留。`)) {
      return;
    }
    if (editSessionRef.current?.script_id === script.script_id) {
      await endEditing(false, false);
      if (editSessionRef.current?.script_id === script.script_id) return;
    }
    try {
      await api.deleteScript(script.script_id);
      if (selectedIdRef.current === script.script_id) selectScript(null);
      await load(true);
      setToast({
        tone: "success",
        message: `${script.script_name} 已删除`,
      });
    } catch (error) {
      setToast({
        tone: "error",
        message: error instanceof Error ? error.message : "文件删除失败",
      });
    }
  };

  const removeDirectory = async (path: string) => {
    setContextMenu(null);
    if (!window.confirm(`确定递归删除文件夹“${path}”及其内容吗？稳定版本会保留。`)) {
      return;
    }
    const activeScript = scripts.find(
      (item) => item.script_id === editSessionRef.current?.script_id,
    );
    if (
      activeScript
      && (
        ownedScriptPath(activeScript) === path
        || ownedScriptPath(activeScript).startsWith(`${path}/`)
      )
    ) {
      await endEditing(false, false);
      if (editSessionRef.current?.script_id === activeScript.script_id) return;
    }
    try {
      const result = await api.deleteWorkspaceDirectory(path);
      const selectedScript = scripts.find(
        (item) => item.script_id === selectedIdRef.current,
      );
      if (
        selectedScript
        && ownedScriptPath(selectedScript).startsWith(`${path}/`)
      ) {
        selectScript(null);
      }
      await load(true);
      setToast({
        tone: "success",
        message: `${path} 已删除（含 ${result.deleted_scripts} 个脚本）`,
      });
    } catch (error) {
      setToast({
        tone: "error",
        message: error instanceof Error ? error.message : "文件夹删除失败",
      });
    }
  };

  const showContextMenu = (
    event: ReactMouseEvent,
    target: Omit<ContextMenuState, "x" | "y">,
  ) => {
    event.preventDefault();
    event.stopPropagation();
    const width = 188;
    const height = target.kind === "file" ? 92 : 190;
    setContextMenu({
      ...target,
      x: Math.min(event.clientX, window.innerWidth - width - 8),
      y: Math.min(event.clientY, window.innerHeight - height - 8),
    });
  };

  return (
    <div className="app-shell">
      <aside className="sidebar">
        <div className="brand">
          <span className="brand__mark"><Icon name="brand" size={31} /></span>
          <span className="brand__name">模型实验开发平台</span>
        </div>

        <nav className="navigation" aria-label="主导航">
          {navigation.map((item) => (
            <button
              className={`nav-item${
                item.page === activePage ? " nav-item--active" : ""
              }`}
              key={item.label}
              type="button"
              onClick={() => {
                if (item.page !== "scripts") {
                  if (editSessionRef.current) {
                    void endEditing(true);
                  } else {
                    selectScript(null);
                  }
                }
                navigate(pathForPage(item.page));
              }}
            >
              <Icon name={item.icon} size={19} />
              <span>{item.label}</span>
            </button>
          ))}
        </nav>

        <button className="sidebar-footer" type="button">
          <Icon name="menu" size={19} />
          <span>收起菜单</span>
        </button>
      </aside>

      <main className="main-area">
        <header className="topbar">
          <div className="page-title">
            <button className="icon-button icon-button--back" type="button">
              <Icon name="chevron" size={19} />
            </button>
            <div>
              <span className="page-title__eyebrow">开发工作区</span>
              <h1>{{
                home: "工作台",
                scripts: "构建脚本",
                schedules: "调度配置",
                system: "系统管理",
              }[activePage]}</h1>
            </div>
          </div>
          <div className="topbar__actions">
            <div className="api-state">
              <span className={`api-state__dot${apiOnline ? " is-online" : ""}`} />
              {apiOnline ? "服务已连接" : "服务未连接"}
            </div>
            <div className="topbar-menu-wrap">
              <button className="workspace-switcher" type="button" onClick={() => { setWorkspaceMenuOpen((value) => !value); }}>
                <span className="workspace-switcher__icon"><Icon name="workspace" size={18} /></span>
                <span><small>当前 Workspace</small><strong>{currentWorkspace.workspace_name}</strong></span>
                <Icon name="chevron" size={15} />
              </button>
              {workspaceMenuOpen && (
                <div className="topbar-dropdown">
                  {workspaces.map((workspace) => (
                    <button className={workspace.workspace_id === currentWorkspace.workspace_id ? "is-selected" : ""} type="button" key={workspace.workspace_id} onClick={() => { setCurrentWorkspace(workspace.workspace_id); setWorkspaceMenuOpen(false); }}>
                      <Icon name="workspace" size={15} /><span><strong>{workspace.workspace_name}</strong><small>{workspace.workspace_id === currentWorkspace.workspace_id ? "当前使用" : "点击切换"}</small></span>
                    </button>
                  ))}
                </div>
              )}
            </div>
            <div className="topbar-menu-wrap">
              <button className="user-menu" type="button">
                <span className="avatar">{user?.display_name?.slice(0, 1) ?? "?"}</span>
                <span className="user-menu__copy"><strong>{user?.display_name ?? "未知用户"}</strong><small>{user?.role_code === "admin" ? "管理员" : "开发人员"}</small></span>
              </button>
              <button className="text-button" type="button" onClick={() => { logout(); window.location.assign("/login"); }}>
                登出
              </button>
            </div>
          </div>
        </header>

        {activePage === "scripts" ? (
        <section className="workspace-layout">
          <aside className="explorer">
            <div className="explorer__header">
              <div>
                <h2>脚本目录</h2>
                <span>{scripts.length} 个工作副本</span>
              </div>
              <div className="explorer__actions">
                <button
                  className="text-button"
                  type="button"
                  disabled={uploading}
                  onClick={() => chooseUpload("")}
                >
                  <Icon name="upload" size={15} />
                  {uploading ? "上传中…" : "上传"}
                </button>
                <input
                  ref={uploadInputRef}
                  className="visually-hidden"
                  type="file"
                  accept=".py,.ipynb"
                  multiple
                  onChange={(event) => void handleUpload(event)}
                />
                <button
                  className="text-button"
                  type="button"
                  onClick={() => openCreateDialog("")}
                >
                  <Icon name="plus" size={16} />
                  新建
                </button>
              </div>
            </div>

            <div className="search-box">
              <Icon name="search" size={17} />
              <input
                aria-label="搜索脚本"
                placeholder="搜索脚本名称"
                value={keyword}
                onChange={(event) => setKeyword(event.target.value)}
              />
              <button
                className={refreshing ? "is-spinning" : ""}
                type="button"
                aria-label="刷新脚本"
                onClick={() => void load(true)}
              >
                <Icon name="refresh" size={16} />
              </button>
            </div>

            <div className="tree-scroll">
              {loading ? (
                <div className="tree-skeleton">
                  <span /><span /><span /><span />
                </div>
              ) : (
                <>
                  {memberScriptGroups.map((group) => (
                    <WorkspaceTreeGroup
                      key={group.user?.user_id ?? "anon"}
                      title={`${group.user?.display_name}的文件`}
                      scripts={group.scripts}
                      directories={group.directories}
                      selectedId={selectedId}
                      onSelect={selectScript}
                      onContextMenu={
                        group.user?.user_id === user?.user_id
                          ? showContextMenu
                          : undefined
                      }
                      readOnly={group.user?.user_id !== user?.user_id}
                    />
                  ))}
                  {filteredScripts.length === 0 && (
                    <div className="tree-empty">
                      <span className="tree-empty__icon">
                        <Icon name="script" size={24} />
                      </span>
                      <strong>{keyword ? "没有匹配脚本" : "还没有构建脚本"}</strong>
                      <p>
                        {keyword
                          ? "换个关键词试试"
                          : "新建 Notebook 或 Python 脚本开始实验"}
                      </p>
                      {!keyword && (
                        <button type="button" onClick={() => openCreateDialog("")}>
                          <Icon name="plus" size={15} />
                          新建脚本
                        </button>
                      )}
                    </div>
                  )}
                </>
              )}
            </div>
          </aside>

          <section className="editor-area">
            {selected ? (
              <ScriptWorkspace
                key={selected.script_id}
                script={selected}
                editSession={
                  editSession?.script_id === selected.script_id
                    ? editSession
                    : null
                }
                jupyterUrl={
                  editSession?.script_id === selected.script_id
                    ? embeddedJupyterUrl
                    : null
                }
                editBusy={editBusy}
                openError={
                  editorOpenError?.scriptId === selected.script_id
                    ? editorOpenError.message
                    : null
                }
                latestVersion={versions[0] ?? null}
                versionsLoading={versionsLoading}
                onOpenEditor={() => void openScriptEditor(selected)}
                onEndEditing={() => void endEditing()}
                onClose={() => {
                  if (
                    editSessionRef.current?.script_id === selected.script_id
                  ) {
                    void endEditing(true);
                  } else {
                    selectScript(null);
                  }
                }}
                onPublish={() => openPublishDialog(selected)}
                onInfo={setToast}
              />
            ) : (
              <div className="welcome-panel">
                <div className="welcome-panel__visual">
                  <Icon name="script" size={42} />
                </div>
                <span className="welcome-panel__label">构建脚本工作台</span>
                <h2>创建你的第一个模型脚本</h2>
                <p>
                  通过 Notebook 完成数据探索，或使用 Python
                  脚本构建可调度的处理任务。
                </p>
                <button className="primary-button" onClick={() => openCreateDialog("")}>
                  <Icon name="plus" size={17} />
                  新建构建脚本
                </button>
              </div>
            )}
          </section>
        </section>
        ) : activePage === "schedules" ? (
          <SchedulePage
            key={`${user?.user_id ?? "anon"}-${currentWorkspace?.workspace_id ?? "none"}`}
            onNotify={setToast}
            onConnectionChange={setApiOnline}
          />
        ) : activePage === "system" ? (
          <SystemAdminPage
            key={`${user?.user_id ?? "anon"}-${currentWorkspace?.workspace_id ?? "none"}`}
            onNotify={setToast}
            onConnectionChange={setApiOnline}
          />
        ) : (
          <DashboardPage
            scriptCount={scripts.length}
            online={apiOnline}
            onNavigate={(page) => {
              navigate(pathForPage(page));
            }}
          />
        )}
      </main>

      {createOpen && (
        <div className="modal-backdrop" role="presentation">
          <section className="modal" role="dialog" aria-modal="true">
            <div className="modal__header">
              <div>
                <span className="modal__eyebrow">工作副本</span>
                <h2>新建构建脚本</h2>
              </div>
              <button
                className="icon-button"
                type="button"
                aria-label="关闭"
                onClick={() => setCreateOpen(false)}
              >
                <Icon name="close" />
              </button>
            </div>
            <form onSubmit={submitCreate}>
              <div className="destination-chip">
                <Icon name="folder" size={16} />
                保存到：{form.parentPath || "个人根目录"}
              </div>
              <label className="form-field">
                <span>脚本名称</span>
                <input
                  autoFocus
                  maxLength={255}
                  placeholder={form.scriptType === "notebook"
                    ? "例如：数据探索"
                    : "例如：data_process"}
                  value={form.name}
                  onChange={(event) =>
                    setForm((current) => ({
                      ...current,
                      name: event.target.value,
                    }))}
                />
                <small>
                  系统会自动补充
                  {form.scriptType === "notebook" ? " .ipynb" : " .py"} 后缀
                </small>
              </label>

              <fieldset className="type-picker">
                <legend>脚本类型</legend>
                <button
                  className={form.scriptType === "notebook" ? "is-selected" : ""}
                  type="button"
                  onClick={() => setForm((current) => ({
                    ...current,
                    scriptType: "notebook",
                  }))}
                >
                  <span className="type-picker__icon type-picker__icon--notebook">
                    <Icon name="notebook" size={22} />
                  </span>
                  <span>
                    <strong>Jupyter Notebook</strong>
                    <small>交互式数据探索与模型实验</small>
                  </span>
                  <span className="type-picker__check">
                    <Icon name="check" size={14} />
                  </span>
                </button>
                <button
                  className={form.scriptType === "python" ? "is-selected" : ""}
                  type="button"
                  onClick={() => setForm((current) => ({
                    ...current,
                    scriptType: "python",
                  }))}
                >
                  <span className="type-picker__icon type-picker__icon--python">
                    <Icon name="python" size={23} />
                  </span>
                  <span>
                    <strong>Python 脚本</strong>
                    <small>批处理、训练和模型调用任务</small>
                  </span>
                  <span className="type-picker__check">
                    <Icon name="check" size={14} />
                  </span>
                </button>
              </fieldset>

              <label className="form-field">
                <span>可见范围</span>
                <select
                  value={form.visibility}
                  onChange={(event) =>
                    setForm((current) => ({
                      ...current,
                      visibility: event.target.value as Visibility,
                    }))}
                >
                  <option value="private">仅自己可见</option>
                  <option value="workspace">Workspace 成员可见</option>
                  <option value="public">公开</option>
                </select>
              </label>

              <div className="modal__footer">
                <button
                  className="secondary-button"
                  type="button"
                  onClick={() => setCreateOpen(false)}
                >
                  取消
                </button>
                <button
                  className="primary-button"
                  type="submit"
                  disabled={creating || !form.name.trim()}
                >
                  {creating ? <span className="button-spinner" /> : <Icon name="plus" size={16} />}
                  {creating ? "正在创建…" : "创建脚本"}
                </button>
              </div>
            </form>
          </section>
        </div>
      )}

      {folderDialog.open && (
        <div className="modal-backdrop" role="presentation">
          <section className="modal modal--compact" role="dialog" aria-modal="true">
            <div className="modal__header">
              <div>
                <span className="modal__eyebrow">WORKSPACE</span>
                <h2>新建文件夹</h2>
              </div>
              <button
                className="icon-button"
                type="button"
                aria-label="关闭"
                onClick={() => setFolderDialog((current) => ({
                  ...current,
                  open: false,
                }))}
              >
                <Icon name="close" />
              </button>
            </div>
            <form onSubmit={submitFolder}>
              <div className="destination-chip">
                <Icon name="folder" size={16} />
                创建到：{folderDialog.parentPath || "个人根目录"}
              </div>
              <label className="form-field">
                <span>文件夹名称</span>
                <input
                  autoFocus
                  maxLength={255}
                  placeholder="例如：模型训练"
                  value={folderDialog.name}
                  onChange={(event) => setFolderDialog((current) => ({
                    ...current,
                    name: event.target.value,
                  }))}
                />
              </label>
              <div className="modal__footer">
                <button
                  className="secondary-button"
                  type="button"
                  onClick={() => setFolderDialog((current) => ({
                    ...current,
                    open: false,
                  }))}
                >
                  取消
                </button>
                <button
                  className="primary-button"
                  type="submit"
                  disabled={folderDialog.busy || !folderDialog.name.trim()}
                >
                  {folderDialog.busy
                    ? <span className="button-spinner" />
                    : <Icon name="folder" size={16} />}
                  {folderDialog.busy ? "正在创建…" : "创建文件夹"}
                </button>
              </div>
            </form>
          </section>
        </div>
      )}

      {contextMenu && (
        <div
          className="tree-context-menu"
          role="menu"
          style={{ left: contextMenu.x, top: contextMenu.y }}
          onPointerDown={(event) => event.stopPropagation()}
        >
          {contextMenu.kind === "file" && contextMenu.script ? (
            <>
              <button
                type="button"
                role="menuitem"
                onClick={() => {
                  selectScript(contextMenu.script!.script_id);
                  setContextMenu(null);
                }}
              >
                <Icon name="script" size={16} />
                打开文件
              </button>
              <button
                className="is-danger"
                type="button"
                role="menuitem"
                onClick={() => void removeScript(contextMenu.script!)}
              >
                <Icon name="close" size={16} />
                删除文件
              </button>
            </>
          ) : (
            <>
              <button
                type="button"
                role="menuitem"
                onClick={() => openCreateDialog(contextMenu.path, "notebook")}
              >
                <Icon name="notebook" size={16} />
                新建 Notebook
              </button>
              <button
                type="button"
                role="menuitem"
                onClick={() => openCreateDialog(contextMenu.path, "python")}
              >
                <Icon name="python" size={16} />
                新建 Python 文件
              </button>
              <button
                type="button"
                role="menuitem"
                onClick={() => openFolderDialog(contextMenu.path)}
              >
                <Icon name="folder" size={16} />
                新建文件夹
              </button>
              <button
                type="button"
                role="menuitem"
                onClick={() => chooseUpload(contextMenu.path)}
              >
                <Icon name="upload" size={16} />
                上传到此处
              </button>
              {contextMenu.kind === "directory" && (
                <>
                  <span className="tree-context-menu__separator" />
                  <button
                    className="is-danger"
                    type="button"
                    role="menuitem"
                    onClick={() => void removeDirectory(contextMenu.path)}
                  >
                    <Icon name="close" size={16} />
                    删除文件夹
                  </button>
                </>
              )}
            </>
          )}
        </div>
      )}

      {publishTarget && (
        <div className="modal-backdrop" role="presentation">
          <section className="modal publish-modal" role="dialog" aria-modal="true">
            <div className="modal__header">
              <div>
                <span className="modal__eyebrow">不可变制品</span>
                <h2>发布稳定版本</h2>
              </div>
              <button
                className="icon-button"
                type="button"
                aria-label="关闭"
                onClick={() => setPublishTarget(null)}
              >
                <Icon name="close" />
              </button>
            </div>
            <form onSubmit={submitPublish}>
              <div className="publish-source">
                <span className={`file-icon file-icon--${publishTarget.script_type}`}>
                  <Icon name={scriptIcon(publishTarget)} size={18} />
                </span>
                <span>
                  <strong>{publishTarget.script_name}</strong>
                  <small>当前 Workspace 工作副本</small>
                </span>
              </div>
              <label className="form-field">
                <span>发布说明</span>
                <textarea
                  maxLength={1000}
                  placeholder="例如：完成数据清洗和特征工程"
                  value={releaseNote}
                  onChange={(event) => setReleaseNote(event.target.value)}
                />
                <small>稳定版本内容不可修改，可作为后续调度节点输入。</small>
              </label>
              <label className="form-field">
                <span>可见范围</span>
                <select
                  value={publishVisibility}
                  onChange={(event) =>
                    setPublishVisibility(event.target.value as Visibility)}
                >
                  <option value="private">仅自己可见</option>
                  <option value="workspace">Workspace 成员可见</option>
                  <option value="public">公开</option>
                </select>
              </label>
              <div className="modal__footer">
                <button
                  className="secondary-button"
                  type="button"
                  onClick={() => setPublishTarget(null)}
                >
                  取消
                </button>
                <button
                  className="primary-button"
                  type="submit"
                  disabled={publishing}
                >
                  {publishing
                    ? <span className="button-spinner" />
                    : <Icon name="release" size={16} />}
                  {publishing ? "正在发布…" : "确认发布"}
                </button>
              </div>
            </form>
          </section>
        </div>
      )}

      {publishedVersion && (
        <div className="modal-backdrop" role="presentation">
          <section className="modal version-receipt" role="dialog" aria-modal="true">
            <div className="version-receipt__check">
              <Icon name="check" size={28} />
            </div>
            <span className="modal__eyebrow">STABLE VERSION</span>
            <h2>稳定版本发布成功</h2>
            <p>
              {publishedVersion.version_label} 已成为不可变制品，
              后续调度将通过 versions_id 引用它。
            </p>
            <div className="version-id-box">
              <span>versions_id</span>
              <code>{publishedVersion.versions_id}</code>
              <button
                type="button"
                onClick={() => {
                  void navigator.clipboard.writeText(
                    publishedVersion.versions_id,
                  );
                  setToast({ tone: "success", message: "versions_id 已复制" });
                }}
              >
                复制
              </button>
            </div>
            <button
              className="primary-button version-receipt__close"
              type="button"
              onClick={() => setPublishedVersion(null)}
            >
              完成
            </button>
          </section>
        </div>
      )}

      {toast && (
        <div className={`toast toast--${toast.tone}`} role="status">
          <span>
            <Icon name={toast.tone === "success" ? "check" : "info"} size={17} />
          </span>
          {toast.message}
        </div>
      )}
    </div>
  );
}