import { useEffect, useRef, useState } from "react";
import { Outlet, useLocation, useNavigate } from "react-router";

import { PanelLeft, ChevronRight } from "lucide-react";
import { navigation } from "./platform.navigation";
import type { ActivePage, NavigationItem } from "./platform.navigation";
import { Collapsible } from "@base-ui/react/collapsible";

import type { Route } from "./+types/platform";
import { Topbar } from "../components/common/Topbar";
import { BrandMark } from "../components/common/BrandMark";
import {
  Sidebar,
  SidebarProvider,
  SidebarHeader,
  SidebarContent,
  SidebarFooter,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarMenuSub,
  SidebarMenuSubItem,
  SidebarMenuSubButton,
  SidebarTrigger,
  SidebarInset,
} from "~/components/ui/sidebar";
import { useApi, useAuth, usePermission, type AuthWorkspace } from "~/context/AuthContext";
import { useEditSessionLifecycle } from "~/features/platform/hooks/useEditSessionLifecycle";
import {
  bindScriptWorkspaceApi,
  bindScriptWorkspaceId,
  bindScriptWorkspaceUser,
  editSessionHandle,
  useScriptWorkspaceStore,
} from "../features/platform/state/scriptWorkspaceStore";
import { useUiStore } from "~/features/platform/state/uiStore";
import { bindAdminApi } from "~/features/admin/state/adminStore";
import { bindSchedulesApi } from "~/features/schedules/state/helpers";
import { resolveOperationsRole, type OperationsRole } from "~/features/operations/operationsRole";

function pageFromPath(pathname: string): ActivePage {
  const first = pathname.replace(/^\/+/, "").split("/")[0];
  if (first === "workbench" || first === "") return "home";
  if (first === "scripts" || first === "schedules" || first === "operations" || first === "system") {
    return first as ActivePage;
  }
  return "home";
}

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

const OPERATIONS_GLOBAL_WORKSPACE: AuthWorkspace = {
  workspace_id: "operations-global",
  workspace_code: "operations-global",
  workspace_name: "运维全局视图",
  role_code: "viewer",
  role_name: "运维用户",
};

export function meta({}: Route.MetaArgs) {
  return [
    { title: "模型实验开发平台" },
    { name: "description", content: "模型实验、脚本版本与 DAG 调度平台" },
  ];
}

function NavRow({
  item,
  can,
  activePage,
  pathname,
  onNavigate,
  operationsRole,
}: {
  item: NavigationItem;
  can: (code: string) => boolean;
  activePage: ActivePage;
  pathname: string;
  onNavigate: (targetPath: string) => void;
  operationsRole: OperationsRole;
}) {
  const itemIcon = <item.icon />;
  const childActivePath = (child: NavigationItem) =>
    child.activePath ?? pathForPage(child.page);
  const childIsActive = (child: NavigationItem) => {
    const activePath = childActivePath(child);
    return pathname === activePath || Boolean(child.sub && pathname.startsWith(`${activePath}/`));
  };
  const childTargetPath = (child: NavigationItem) =>
    child.targetPath ?? child.activePath ?? (child.sub ? `${pathForPage(child.page)}/${child.sub}` : pathForPage(child.page));
  const groupIsActive = Boolean(item.children?.some(childIsActive));

  if (item.children && item.children.length > 0) {
    return (
      <Collapsible.Root
        defaultOpen={groupIsActive}
        className="group/collapsible"
      >
        <SidebarMenuItem>
          <Collapsible.Trigger
            render={
              <SidebarMenuButton
                className="py-3 text-sm"
                isActive={groupIsActive}
                data-active={groupIsActive ? "true" : undefined}
              />
            }
          >
            {itemIcon}
            <span>{item.label}</span>
            <ChevronRight className="ml-auto size-4 transition-transform group-data-[open]/collapsible:rotate-90" />
          </Collapsible.Trigger>
          <Collapsible.Panel>
            <SidebarMenuSub className="gap-1.5 mt-2">
              {item.children
              .filter((child) => (!child.permission || can(child.permission))
                  && (!child.visibleToOperationsRoles || child.visibleToOperationsRoles.includes(operationsRole)))
                .map((child) => (
                  <SidebarMenuSubItem key={child.label}>
                    <SidebarMenuSubButton
                      className="h-9 text-xs"
                      onClick={() => onNavigate(childTargetPath(child))}
                      isActive={childIsActive(child)}
                    >
                      <child.icon /> <span>{child.label}</span>
                    </SidebarMenuSubButton>
                  </SidebarMenuSubItem>
                ))}
            </SidebarMenuSub>
          </Collapsible.Panel>
        </SidebarMenuItem>
      </Collapsible.Root>
    );
  }

  return (
    <SidebarMenuItem>
      <SidebarMenuButton
        className="py-3 text-sm"
        onClick={() => onNavigate(pathForPage(item.page))}
        isActive={activePage === item.page}
        data-active={activePage === item.page ? "true" : undefined}
      >
        {itemIcon}
        <span>{item.label}</span>
      </SidebarMenuButton>
    </SidebarMenuItem>
  );
}

export default function PlatformLayout() {
  const { currentWorkspace } = useAuth();
  const location = useLocation();
  if (!currentWorkspace && !location.pathname.startsWith("/operations")) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-[#eef2f6]">
        <div className="text-center">
          <span className="text-lg">加载中…</span>
        </div>
      </div>
    );
  }
  return <AuthenticatedLayout />;
}

function AuthenticatedLayout() {
  const api = useApi();
  const location = useLocation();
  const navigate = useNavigate();
  const activePage = pageFromPath(location.pathname);
  const auth = useAuth();
  const {
    user,
    workspaces,
    currentWorkspace,
    setCurrentWorkspace,
    logout,
  } = auth;

  const apiOnline = useScriptWorkspaceStore((s) => s.apiOnline);
  const endEditing = useScriptWorkspaceStore((s) => s.endEditing);
  const selectScript = useScriptWorkspaceStore((s) => s.selectScript);

  const workspaceMenuOpen = useUiStore((s) => s.workspaceMenuOpen);
  const setWorkspaceMenuOpen = useUiStore((s) => s.setWorkspaceMenuOpen);

  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
  const bindingGeneration = useRef(0);

  const can = usePermission;
  const operationsRole = resolveOperationsRole(user);
  const effectiveWorkspace = currentWorkspace ?? OPERATIONS_GLOBAL_WORKSPACE;
  const effectiveWorkspaces = currentWorkspace ? workspaces : [OPERATIONS_GLOBAL_WORKSPACE];

  // 绑定 api 到 script workspace store。
  // 必须放在 render body(同步),不能用 useEffect([api]) + cleanup —
  // 后者会在 deps 变化时先 cleanup(null),再让 ScriptsPage 的 useEffect 跑,
  // 此时 _api 为 null,load() 抛 "script workspace API 未绑定"。
  bindScriptWorkspaceApi(api);
  bindSchedulesApi(api);
  bindAdminApi(api);
  // 当前用户 id + 工作区 id 同步绑定到 script workspace store（render body，
  // 与 bindScriptWorkspaceApi 同理）。store 的 lazy 跨 owner 逻辑据此区分
  // "我"与他人、并调用需要显式 workspaceId 的 listWorkspaceMembers。
  bindScriptWorkspaceUser(user?.user_id ?? null);
  bindScriptWorkspaceId(currentWorkspace?.workspace_id ?? null);
  useEffect(() => {
    const generation = ++bindingGeneration.current;
    return () => queueMicrotask(() => {
      // React Strict Mode runs effect cleanup/setup once during development.
      // Only clear bindings when this layout really unmounts, not during that
      // rehearsal, otherwise child data effects see "API 未绑定".
      if (bindingGeneration.current !== generation) return;
      bindScriptWorkspaceApi(null);
      bindSchedulesApi(null);
      bindAdminApi(null);
      bindScriptWorkspaceUser(null);
      bindScriptWorkspaceId(null);
    });
  }, []);

  // 心跳 / cleanup / 切页结束编辑 / 卸载前释放
  useEditSessionLifecycle({ activePage });

  // 原 common/Sidebar 的编辑会话守卫上移到这里：切出 /scripts 时有活动编辑
  // 会话先 endEditing，回工作台时清空选中脚本；再按当前激活页导航。
  function guardedNavigate(targetPath: string) {
    const targetPage = pageFromPath(targetPath);
    if (targetPage !== "scripts" && editSessionHandle.current) {
      void endEditing(true);
    } else if (targetPage === "home") {
      selectScript(null);
    }
    navigate(targetPath);
  }

  const canShowNavItem = (item: NavigationItem) => (
    (!item.permission || can(item.permission))
    && (!item.children || item.children.some((child) => (
      (!child.permission || can(child.permission))
      && (!child.visibleToOperationsRoles || child.visibleToOperationsRoles.includes(operationsRole))
    )))
  );

  return (
    <SidebarProvider
      defaultOpen={!sidebarCollapsed}
      open={!sidebarCollapsed}
      onOpenChange={(open) => setSidebarCollapsed(!open)}
      className="bg-[#eef2f6]"
    >
      <Sidebar collapsible="icon">
        <SidebarHeader>
          <div
            className={`flex h-[70px] items-center gap-2.5 border-b border-[var(--sidebar-border)] text-white ${sidebarCollapsed ? "justify-center px-0" : "px-[17px]"}`}
          >
            <span className="grid size-9 shrink-0 place-items-center text-[#5ca9ff]">
              <BrandMark size={31} />
            </span>
            {!sidebarCollapsed && (
              <span className="whitespace-nowrap text-[15px] font-bold tracking-[0.01em] max-xl:text-[13px]">
                模型实验开发平台
              </span>
            )}
          </div>
        </SidebarHeader>
        <SidebarContent>
          <SidebarMenu className="gap-1.5">
            {navigation
              .filter(canShowNavItem)
              .map((item) => (
                <NavRow
                  key={item.label}
                  item={item}
                  can={can}
                  activePage={activePage}
                  pathname={location.pathname}
                  onNavigate={guardedNavigate}
                  operationsRole={operationsRole}
                />
              ))}
          </SidebarMenu>
        </SidebarContent>
        <SidebarFooter>
          <SidebarTrigger>
            <PanelLeft /> {!sidebarCollapsed && <span>收起菜单</span>}
          </SidebarTrigger>
        </SidebarFooter>
      </Sidebar>

      <SidebarInset className="h-screen min-w-0">
        <Topbar
          activePage={activePage}
          apiOnline={apiOnline}
          user={user}
          currentWorkspace={effectiveWorkspace}
          workspaces={effectiveWorkspaces}
          workspaceMenuOpen={workspaceMenuOpen}
          onSetWorkspaceMenuOpen={setWorkspaceMenuOpen}
          onSetCurrentWorkspace={setCurrentWorkspace}
          onLogout={logout}
        />

        <Outlet />
      </SidebarInset>

    </SidebarProvider>
  );
}