import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it } from "vitest";

import type { PageRoute } from "../contracts/page";
import type { CurrentUserView } from "../contracts/workspace";
import appShellSource from "./AppShell.tsx?raw";
import { AppShell } from "./AppShell";

const routes: PageRoute[] = [
  { id: "home", label: "首页", path: "/home", hash: "#/home", description: "概览", requiredCapability: "platform.overview.read", showInNav: true },
  { id: "servers", label: "服务器管理", path: "/servers", hash: "#/servers", description: "服务器", requiredCapability: "servers.read", showInNav: true }
];

const session: CurrentUserView = {
  id: "operator",
  displayName: "Operator",
  status: "active",
  roles: ["platformAdmin"],
  capabilities: ["platform.overview.read", "servers.read"],
  profile: {},
  source: "api"
};

describe("AppShell mobile navigation", () => {
  it("renders a labelled edge control and vertical menu labels", () => {
    const html = renderToStaticMarkup(
      <AppShell routes={routes} currentPage="home" session={session} operations={[]} onNavigate={() => undefined}>
        <p>页面内容</p>
      </AppShell>
    );

    expect(html).toContain('class="mobile-sidebar-handle"');
    expect(html).toContain('aria-controls="primary-sidebar"');
    expect(html).toContain('id="primary-sidebar"');
    expect(html).toContain("平台概览");
    expect(html).toContain("服务器管理");
    expect(html).toContain("关闭导航菜单");
  });

  it("renders the animation layer above the workspace background", () => {
    const html = renderToStaticMarkup(
      <AppShell routes={routes} currentPage="home" session={session} operations={[]} onNavigate={() => undefined}>
        <p>页面内容</p>
      </AppShell>
    );

    expect(html.indexOf("workspace-background-layer")).toBeLessThan(html.indexOf("global-particle-layer"));
    expect(html).toContain("global-orbital-construct");
    expect(html).toContain("global-particle-lightfall");
    expect(html).toContain("global-particle-side-ray");
    expect(html).not.toContain("global-particle-orbit");
    expect(html).not.toContain("global-particle-frame");
  });

  it("uses bounded edge-swipe thresholds and accessible dismissal", () => {
    expect(appShellSource).toContain("start.x <= 28 && deltaX >= 56");
    expect(appShellSource).toContain("deltaX <= -56");
    expect(appShellSource).toContain('event.key === "Escape"');
    expect(appShellSource).toContain("setIsMobileSidebarOpen(false)");
  });
});