import { forwardRef } from "react";
import { fireEvent, render, screen, within } from "@testing-library/react";
import { afterEach, beforeEach, vi } from "vitest";
import { DoubleSide, PerspectiveCamera, Vector3 } from "three";
import { clearViewportCaptureHandler, requestViewportCapture } from "../io/captureBridge";
import {
  DEFAULT_DIRECTOR_VIEW_SNAPSHOT,
  getViewportGizmoHitButtonStyle,
  VIEWPORT_WHEEL_ZOOM_SPEED,
} from "./DirectorCanvas";
import { GROUND_PLANE_SIZE } from "./sceneGround";
import { getViewportAspectFrameRect } from "./viewportAspectFrame";
import { degreesRotationToRadians } from "../schema/directorProject";

const mockCameraPositionSet = vi.hoisted(() => vi.fn());
const mockCameraLookAt = vi.hoisted(() => vi.fn());
const mockCameraUpdateMatrixWorld = vi.hoisted(() => vi.fn());
const mockCameraUpdateProjectionMatrix = vi.hoisted(() => vi.fn());
const mockCaptureExcludedObjects = vi.hoisted(() => [
  { name: "viewport-grid", userData: { hideFromViewportCapture: true }, visible: true },
  { name: "viewport-camera-wireframe", userData: { hideFromViewportCapture: true }, visible: true },
]);
const mockCaptureVisibleObject = vi.hoisted(() => ({
  name: "role-model",
  userData: {},
  visible: true,
}));
const mockRenderVisibilitySnapshots = vi.hoisted(() => [] as boolean[][]);

beforeEach(() => {
  vi.spyOn(console, "error").mockImplementation(() => {});
  vi.spyOn(console, "warn").mockImplementation(() => {});
  vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockImplementation(() => null);
  mockCameraPositionSet.mockClear();
  mockCameraLookAt.mockClear();
  mockCameraUpdateMatrixWorld.mockClear();
  mockCameraUpdateProjectionMatrix.mockClear();
  mockRenderVisibilitySnapshots.length = 0;
  mockCaptureExcludedObjects.forEach((object) => {
    object.visible = true;
  });
  mockCaptureVisibleObject.visible = true;
  useDirectorStore.setState({
    ...useDirectorStore.getState(),
    ...createInitialDirectorState(),
  });
});

afterEach(() => {
  clearViewportCaptureHandler();
  vi.restoreAllMocks();
});

vi.mock("@react-three/fiber", async () => {
  const actual = await vi.importActual<typeof import("@react-three/fiber")>("@react-three/fiber");

  return {
    ...actual,
    Canvas: ({
      children,
      className,
      onPointerMissed,
    }: {
      children: React.ReactNode;
      className?: string;
      onPointerMissed?: () => void;
    }) => (
      <div className={className} data-testid="mock-r3f-canvas" onClick={() => onPointerMissed?.()}>
        {children}
      </div>
    ),
    useFrame: () => undefined,
    useThree: () => {
      const testCamera = new PerspectiveCamera(50, 1000 / 700, 0.1, 1000);
      testCamera.position.set(0, 2.2, 9);
      testCamera.lookAt(0, 1.2, 0);
      testCamera.updateProjectionMatrix();
      testCamera.updateMatrixWorld();
      const position = testCamera.position;
      const originalLookAt = testCamera.lookAt.bind(testCamera);
      const originalUpdateMatrixWorld = testCamera.updateMatrixWorld.bind(testCamera);
      const originalUpdateProjectionMatrix = testCamera.updateProjectionMatrix.bind(testCamera);
      const originalPositionSet = position.set.bind(position);
      const originalPositionCopy = position.copy.bind(position);
      position.set = ((x: number, y: number, z: number) => {
        mockCameraPositionSet(x, y, z);
        const result = originalPositionSet(x, y, z);
        testCamera.updateMatrixWorld();
        return result;
      }) as typeof position.set;
      position.copy = ((vector: Vector3) => {
        const result = originalPositionCopy(vector);
        testCamera.updateMatrixWorld();
        return result;
      }) as typeof position.copy;

      const lookAt = (...args: Parameters<PerspectiveCamera["lookAt"]>) => {
        mockCameraLookAt(...args);
        const result = originalLookAt(...args);
        originalUpdateMatrixWorld();
        return result;
      };
      const updateMatrixWorld = (...args: Parameters<PerspectiveCamera["updateMatrixWorld"]>) => {
        mockCameraUpdateMatrixWorld(...args);
        return originalUpdateMatrixWorld(...args);
      };
      const updateProjectionMatrix = () => {
        mockCameraUpdateProjectionMatrix();
        return originalUpdateProjectionMatrix();
      };

      testCamera.lookAt = lookAt as PerspectiveCamera["lookAt"];
      testCamera.updateMatrixWorld = updateMatrixWorld as PerspectiveCamera["updateMatrixWorld"];
      testCamera.updateProjectionMatrix = updateProjectionMatrix as PerspectiveCamera["updateProjectionMatrix"];

      return {
        camera: testCamera,
        gl: {
          render: () => {
            mockRenderVisibilitySnapshots.push([
              ...mockCaptureExcludedObjects.map((object) => object.visible),
              mockCaptureVisibleObject.visible,
            ]);
          },
          setClearColor: () => undefined,
          domElement: {
            width: 1000,
            height: 700,
            clientWidth: 1000,
            clientHeight: 700,
            toDataURL: () => "data:image/png;base64,mock",
          },
        },
        scene: {
          background: null,
          backgroundRotation: {
            clone: () => ({
              copy: () => undefined,
            }),
            copy: () => undefined,
            set: () => undefined,
          },
          backgroundBlurriness: 0,
          backgroundIntensity: 1,
          traverse: (callback: (object: { userData?: Record<string, unknown>; visible: boolean }) => void) => {
            [...mockCaptureExcludedObjects, mockCaptureVisibleObject].forEach(callback);
          },
        },
      };
    },
  };
});

vi.mock("@react-three/drei", async () => {
  const actual = await vi.importActual<typeof import("@react-three/drei")>("@react-three/drei");

  return {
    ...actual,
    Grid: ({
      args,
      cellColor,
      cellSize,
      cellThickness,
      fadeDistance,
      infiniteGrid,
      position,
      sectionColor,
      sectionSize,
      sectionThickness,
      side,
    }: {
      args?: [number, number];
      cellColor?: string;
      cellSize?: number;
      cellThickness?: number;
      fadeDistance?: number;
      infiniteGrid?: boolean;
      position?: [number, number, number];
      sectionColor?: string;
      sectionSize?: number;
      sectionThickness?: number;
      side?: number;
    }) => (
      <div
        data-args={JSON.stringify(args)}
        data-cell-color={cellColor}
        data-cell-size={String(cellSize)}
        data-cell-thickness={String(cellThickness)}
        data-fade-distance={String(fadeDistance)}
        data-infinite-grid={String(Boolean(infiniteGrid))}
        data-position={JSON.stringify(position)}
        data-section-color={sectionColor}
        data-section-size={String(sectionSize)}
        data-section-thickness={String(sectionThickness)}
        data-side={String(side)}
        data-testid="viewport-grid"
      />
    ),
    GizmoHelper: ({
      alignment,
      children,
      margin,
    }: {
      alignment?: string;
      children?: React.ReactNode;
      margin?: [number, number];
    }) => (
      <div data-alignment={alignment} data-margin={JSON.stringify(margin)} data-testid="native-gizmo-helper">
        {children}
      </div>
    ),
    GizmoViewport: ({
      axisColors,
      disabled,
      scale,
    }: {
      axisColors?: [string, string, string];
      disabled?: boolean;
      scale?: number;
    }) => (
      <button
        data-axis-colors={JSON.stringify(axisColors)}
        data-disabled={String(disabled)}
        data-scale={String(scale)}
        data-testid="native-gizmo-viewport"
        type="button"
      />
    ),
    OrbitControls: forwardRef(
      ({
        enabled,
        onChange,
        zoomSpeed,
      }: {
        enabled?: boolean;
        onChange?: (event: unknown) => void;
        zoomSpeed?: number;
      }) => (
        <div data-enabled={String(enabled)} data-testid="orbit-controls" data-zoom-speed={String(zoomSpeed)}>
          {/* 模拟用户直接操作控件（滚轮缩放 / 拖拽）时控件抛出的 change 事件载荷 */}
          <button
            aria-label="模拟操作视角控件"
            type="button"
            onClick={() =>
              onChange?.({
                target: {
                  object: { fov: 50, position: { x: 9, y: 2.2, z: 0 } },
                  target: { x: 0, y: 1.05, z: 0 },
                },
              })
            }
          />
        </div>
      )
    ),
    PerspectiveCamera: () => null,
    Html: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
    Line: () => null,
    useTexture: () => ({ isTexture: true }),
  };
});

vi.mock("./SceneRoot", () => ({
  SceneRoot: () => null,
}));

import App from "../../App";
import { createInitialDirectorState, useDirectorStore } from "../store/directorStore";

it("renders a live R3F viewport and director scene controls", () => {
  render(<App />);

  expect(screen.getByTestId("director-canvas")).toBeInTheDocument();
  expect(screen.getByLabelText("场景缩放")).toBeInTheDocument();
  expect(screen.getByText("全景背景")).toBeInTheDocument();
  expect(screen.getByText("全景球")).toBeInTheDocument();
  expect(screen.getByTestId("orbit-controls")).toHaveAttribute("data-enabled", "true");
});

it("keeps orbit controls available when a transformable object is selected but no handle is being dragged", () => {
  useDirectorStore.setState({
    ...useDirectorStore.getState(),
    selectedObjectId: "char_default_a",
  });

  render(<App />);

  expect(screen.getByTestId("orbit-controls")).toHaveAttribute("data-enabled", "true");
});

it("does not render a full-viewport transform drag layer over the 3D viewport", () => {
  useDirectorStore.setState({
    ...useDirectorStore.getState(),
    selectedObjectId: "char_default_a",
  });

  render(<App />);

  expect(screen.queryByRole("application", { name: "3D视口移动拖拽层" })).not.toBeInTheDocument();
  expect(screen.queryByRole("application", { name: "3D视口旋转拖拽层" })).not.toBeInTheDocument();
  expect(screen.queryByRole("application", { name: "3D视口缩放拖拽层" })).not.toBeInTheDocument();
});

it("renders a fine viewport grid with thicker, darker major lines every 5 cells on the same footprint as the ground", () => {
  render(<App />);

  const grid = screen.getByTestId("viewport-grid");
  expect(grid).toHaveAttribute("data-position", "[0,0.002,0]");
  expect(grid).toHaveAttribute("data-cell-size", "1");
  expect(grid).toHaveAttribute("data-section-size", "5");
  // 每 5 格一条更粗的分割线
  expect(grid).toHaveAttribute("data-section-thickness", "1.4");
  // 细分割线比主分割线更细
  expect(grid).toHaveAttribute("data-cell-thickness", "0.5");
  // 主分割线颜色更浅（中性灰，突出 RGB 坐标轴）
  expect(grid).toHaveAttribute("data-section-color", "#6b7280");
  expect(grid).toHaveAttribute("data-fade-distance", "80");
  // 网格不能是"无限网格"：默认尺寸（1×1 × (1+fadeDistance)）比地面小得多，
  // 边缘不重合就会被看成另一层地面。这里必须和地面同尺寸。
  expect(grid).toHaveAttribute("data-infinite-grid", "false");
  expect(grid).toHaveAttribute("data-args", `[${GROUND_PLANE_SIZE},${GROUND_PLANE_SIZE}]`);
});

it("does not bounce the camera back while the user is driving OrbitControls", () => {
  render(<App />);
  mockCameraPositionSet.mockClear();

  // 用户滚轮 / 拖拽时控件每帧都会抛 change；模拟其中一次
  fireEvent.click(screen.getByRole("button", { name: "模拟操作视角控件" }));

  // 相机归 OrbitControls 逐帧驱动，不能再把回调里那份（上一帧的）快照写回去，
  // 否则缩放时会出现"缩小时突然又放大一点"的抖动
  expect(mockCameraPositionSet).not.toHaveBeenCalled();
  // 快照本身仍照常同步给 UI：坐标控件命中按钮跟着这次视角变化重算
  const expectedStyle = getViewportGizmoHitButtonStyle(
    { fov: 50, position: [9, 2.2, 0], target: [0, 1.05, 0] },
    [1, 0, 0]
  );
  expect(screen.getByRole("button", { name: "切换到 X 正向视图" })).toHaveStyle({
    left: expectedStyle.left,
    top: expectedStyle.top,
  });
});

it("speeds up wheel zoom beyond the three.js default so scrolling feels responsive", () => {
  render(<App />);

  const controls = screen.getByTestId("orbit-controls");
  const zoomSpeed = Number(controls.getAttribute("data-zoom-speed"));

  expect(zoomSpeed).toBe(VIEWPORT_WHEEL_ZOOM_SPEED);
  // three 的 zoomSpeed 默认 1（每格滚轮只推拉约 5%），必须大于它才是"变快"
  expect(zoomSpeed).toBeGreaterThan(1);
});

it("keeps the viewport grid visible when the view drops below the ground plane", () => {
  render(<App />);

  // drei 的 Grid 默认 BackSide：视角转到地面以下时会因背面剔除整个消失
  expect(screen.getByTestId("viewport-grid")).toHaveAttribute("data-side", String(DoubleSide));
});

it("keeps the viewport grid slightly above the configured ground plane", () => {
  useDirectorStore.setState({
    ...useDirectorStore.getState(),
    project: {
      ...useDirectorStore.getState().project,
      scene: {
        ...useDirectorStore.getState().project.scene,
        groundHeight: 1.5,
      },
    },
  });

  render(<App />);

  expect(screen.getByTestId("viewport-grid")).toHaveAttribute("data-position", "[0,1.502,0]");
});

it("shares the scene transform with the ground plane so the grid never becomes a second floor", () => {
  useDirectorStore.setState({
    ...useDirectorStore.getState(),
    project: {
      ...useDirectorStore.getState().project,
      scene: {
        ...useDirectorStore.getState().project.scene,
        scale: 2,
        position: [1, 3, -2],
        rotation: [0, 90, 0],
        groundHeight: 1.5,
      },
    },
  });

  render(<App />);

  const grid = screen.getByTestId("viewport-grid");
  // 网格被包在「导出时隐藏」的 group 里，再外层才是与地面共享变换的场景 group
  const gridWrapper = grid.closest("group");
  const sceneGroup = gridWrapper?.parentElement?.closest("group");

  // 网格与地面同在场景组内：共享场景平移/旋转/缩放，不会各自留在不同坐标空间
  expect(sceneGroup).not.toBeNull();
  expect(sceneGroup).toHaveAttribute("position", "1,3,-2");
  // 场景旋转存的是度数，写进 Three.js group 前会转成弧度（90° → π/2）
  expect(sceneGroup).toHaveAttribute("rotation", degreesRotationToRadians([0, 90, 0]).join(","));
  expect(sceneGroup).toHaveAttribute("scale", "2,2,2");
  // 网格自身的 y 相对场景原点，仍是「地面高度 + 微小抬升」
  expect(grid).toHaveAttribute("data-position", "[0,1.502,0]");
});

it("opens the scene inspector when users click empty 3D viewport space", () => {
  useDirectorStore.setState({
    ...useDirectorStore.getState(),
    selectedObjectId: "char_default_a",
  });

  render(<App />);

  expect(screen.getByLabelText("角色名称")).toBeInTheDocument();

  fireEvent.click(within(screen.getByTestId("director-canvas")).getByTestId("mock-r3f-canvas"));

  expect(useDirectorStore.getState().selectedObjectId).toBeNull();
  expect(screen.getByLabelText("3D场景右侧属性面板")).toBeInTheDocument();
  expect(screen.getByLabelText("场景缩放")).toBeInTheDocument();
});

it("renders the viewport aspect ratio overlay when a non-auto frame is selected", () => {
  useDirectorStore.setState({
    ...useDirectorStore.getState(),
    viewportAspectRatio: "9:16",
  });

  render(<App />);

  expect(screen.getByLabelText("视口画幅框")).toBeInTheDocument();
  // 遮罩已由「四块矩形」改为单元素 + CSS mask-composite 挖洞（见 index.css 契约测试）。
  expect(screen.getAllByLabelText("视口画幅遮罩")).toHaveLength(1);
  expect(screen.getByLabelText("视口画幅框")).toHaveAttribute("data-aspect-ratio", "9:16");
});

it("toggles the viewport rule-of-thirds guide from the aspect frame button", () => {
  useDirectorStore.setState({
    ...useDirectorStore.getState(),
    viewportAspectRatio: "16:9",
    viewportRuleOfThirdsEnabled: false,
  });

  render(<App />);

  const guideToggle = screen.getByRole("button", { name: "开启九宫格辅助线" });
  fireEvent.click(guideToggle);

  expect(useDirectorStore.getState().viewportRuleOfThirdsEnabled).toBe(true);
  expect(screen.getByLabelText("九宫格辅助线")).toBeInTheDocument();
});

it("renders the native 3D viewport gizmo in an overlay canvas above the aspect mask", () => {
  render(<App />);

  expect(screen.getAllByTestId("mock-r3f-canvas")).toHaveLength(2);
  expect(screen.getByLabelText("3D视口原生坐标控件")).toContainElement(screen.getByTestId("native-gizmo-helper"));
  expect(screen.getByTestId("native-gizmo-helper")).toHaveAttribute("data-alignment", "center-center");
  expect(screen.getByTestId("native-gizmo-helper")).toHaveAttribute("data-margin", "[0,0]");
  expect(screen.getByTestId("native-gizmo-viewport")).toHaveAttribute(
    "data-axis-colors",
    "[\"#FF4D4F\",\"#52C41A\",\"#1890FF\"]"
  );
  expect(screen.getByTestId("native-gizmo-viewport")).toHaveAttribute("data-disabled", "true");
  expect(screen.getByTestId("native-gizmo-viewport")).toHaveAttribute("data-scale", "25");
  expect(screen.getByTestId("native-gizmo-viewport").closest(".director-canvas")).not.toBeInTheDocument();
  expect(screen.queryByLabelText("3D视口坐标指示")).not.toBeInTheDocument();
});

it("offsets the native viewport gizmo inward when overlay side panels are open", () => {
  render(<App />);

  const gizmo = screen.getByLabelText("3D视口原生坐标控件");

  // 右侧悬浮卡片宽 300px，内缩 16px，再加 16px 间距 → 坐标控件贴在其左侧
  expect(gizmo).toHaveStyle({
    right: "332px",
  });
});

it("resets the director view from the button below the native gizmo", () => {
  useDirectorStore.getState().setViewMode("camera");
  render(<App />);

  const resetButton = screen.getByRole("button", { name: "重置视角" });
  expect(resetButton).toHaveClass("viewport-view-reset-button");
  // 文字按钮：不再用图标 + 悬停提示
  expect(resetButton).toHaveTextContent("重置视角");
  expect(resetButton.querySelector("svg")).not.toBeInTheDocument();
  mockCameraPositionSet.mockClear();

  fireEvent.click(resetButton);

  expect(useDirectorStore.getState().viewMode).toBe("director");
  expect(mockCameraPositionSet).toHaveBeenCalledWith(...DEFAULT_DIRECTOR_VIEW_SNAPSHOT.position);
});

it("syncs native viewport gizmo axis clicks back to the main director view", () => {
  render(<App />);
  mockCameraPositionSet.mockClear();

  const xAxisHitTarget = screen.getByRole("button", { name: "切换到 X 正向视图" });
  expect(xAxisHitTarget).toHaveClass("viewport-gizmo-hit-button");

  fireEvent.click(xAxisHitTarget);

  expect(mockCameraPositionSet).toHaveBeenCalledWith(expect.closeTo(5.423099, 5), 1.05, 0);
});

it("captures screenshots using the selected viewport aspect ratio crop", async () => {
  useDirectorStore.setState({
    ...useDirectorStore.getState(),
    viewportAspectRatio: "9:16",
  });

  const originalCreateElement = document.createElement.bind(document);
  const drawImage = vi.fn();
  const cropCanvas = {
    width: 0,
    height: 0,
    getContext: vi.fn(() => ({
      drawImage,
    })),
    toDataURL: vi.fn(() => "data:image/png;base64,cropped"),
  };

  vi.spyOn(document, "createElement").mockImplementation(((tagName: string) => {
    if (tagName === "canvas") {
      return cropCanvas as unknown as HTMLCanvasElement;
    }

    return originalCreateElement(tagName);
  }) as typeof document.createElement);

  render(<App />);

  const results = await requestViewportCapture({
    preset: "current",
    source: "capture-panel",
  });

  expect(results[0]?.dataUrl).toBe("data:image/png;base64,cropped");
  expect(drawImage).toHaveBeenCalledTimes(1);
  expect(cropCanvas.width / cropCanvas.height).toBeCloseTo(9 / 16, 2);
});

it("draws visible character name labels into viewport screenshots", async () => {
  useDirectorStore.setState({
    ...useDirectorStore.getState(),
    viewportAspectRatio: "16:9",
  });

  const originalCreateElement = document.createElement.bind(document);
  const fillText = vi.fn();
  const cropCanvas = {
    width: 0,
    height: 0,
    getContext: vi.fn(() => ({
      beginPath: vi.fn(),
      closePath: vi.fn(),
      drawImage: vi.fn(),
      fill: vi.fn(),
      fillText,
      measureText: vi.fn(() => ({ width: 32 })),
      quadraticCurveTo: vi.fn(),
      lineTo: vi.fn(),
      moveTo: vi.fn(),
    })),
    toDataURL: vi.fn(() => "data:image/png;base64,labelled"),
  };

  vi.spyOn(document, "createElement").mockImplementation(((tagName: string) => {
    if (tagName === "canvas") {
      return cropCanvas as unknown as HTMLCanvasElement;
    }

    return originalCreateElement(tagName);
  }) as typeof document.createElement);

  render(<App />);

  await requestViewportCapture({
    preset: "current",
    source: "capture-panel",
  });

  expect(fillText).toHaveBeenCalledWith("角色01", expect.any(Number), expect.any(Number));
});

it("does not draw character name labels into screenshots when scene labels are hidden", async () => {
  useDirectorStore.setState({
    ...useDirectorStore.getState(),
    project: {
      ...useDirectorStore.getState().project,
      scene: {
        ...useDirectorStore.getState().project.scene,
        showLabels: false,
      },
    },
    viewportAspectRatio: "16:9",
  });

  const originalCreateElement = document.createElement.bind(document);
  const fillText = vi.fn();
  const cropCanvas = {
    width: 0,
    height: 0,
    getContext: vi.fn(() => ({
      beginPath: vi.fn(),
      closePath: vi.fn(),
      drawImage: vi.fn(),
      fill: vi.fn(),
      fillText,
      measureText: vi.fn(() => ({ width: 32 })),
      quadraticCurveTo: vi.fn(),
      lineTo: vi.fn(),
      moveTo: vi.fn(),
    })),
    toDataURL: vi.fn(() => "data:image/png;base64-unlabelled"),
  };

  vi.spyOn(document, "createElement").mockImplementation(((tagName: string) => {
    if (tagName === "canvas") {
      return cropCanvas as unknown as HTMLCanvasElement;
    }

    return originalCreateElement(tagName);
  }) as typeof document.createElement);

  render(<App />);

  await requestViewportCapture({
    preset: "current",
    source: "capture-panel",
  });

  expect(fillText).not.toHaveBeenCalled();
});

it("hides viewport grid and camera helper models only while rendering screenshots", async () => {
  render(<App />);

  await requestViewportCapture({
    preset: "current",
    source: "capture-panel",
  });

  expect(mockRenderVisibilitySnapshots).toContainEqual([false, false, true]);
  expect(mockCaptureExcludedObjects.map((object) => object.visible)).toEqual([true, true]);
  expect(mockCaptureVisibleObject.visible).toBe(true);
});

it("captures screenshots from the same safe-area frame shown by the aspect overlay", async () => {
  useDirectorStore.setState({
    ...useDirectorStore.getState(),
    viewportAspectRatio: "16:9",
    viewportPanelsCollapsed: false,
  });

  const originalCreateElement = document.createElement.bind(document);
  const drawImage = vi.fn();
  const cropCanvas = {
    width: 0,
    height: 0,
    getContext: vi.fn(() => ({
      drawImage,
    })),
    toDataURL: vi.fn(() => "data:image/png;base64,cropped-safe-area"),
  };

  vi.spyOn(document, "createElement").mockImplementation(((tagName: string) => {
    if (tagName === "canvas") {
      return cropCanvas as unknown as HTMLCanvasElement;
    }

    return originalCreateElement(tagName);
  }) as typeof document.createElement);

  render(<App />);

  await requestViewportCapture({
    preset: "current",
    source: "capture-panel",
  });

  // 悬浮卡片左右等宽：300 + 16 + 16，与 DirectorCanvas 的安全区保持一致
  const expectedFrame = getViewportAspectFrameRect("16:9", 1000, 700, 124, {
    left: 332,
    right: 332,
    top: 0,
    bottom: 0,
  });

  expect(expectedFrame).not.toBeNull();
  expect(drawImage).toHaveBeenCalledWith(
    expect.anything(),
    Math.round(expectedFrame!.left),
    Math.round(expectedFrame!.top),
    Math.round(expectedFrame!.width),
    Math.round(expectedFrame!.height),
    0,
    0,
    Math.round(expectedFrame!.width),
    Math.round(expectedFrame!.height)
  );
});

it("captures every four-view screenshot using the selected viewport aspect ratio crop", async () => {
  useDirectorStore.setState({
    ...useDirectorStore.getState(),
    viewportAspectRatio: "4:3",
  });

  const originalCreateElement = document.createElement.bind(document);
  const drawImage = vi.fn();
  const cropCanvas = {
    width: 0,
    height: 0,
    getContext: vi.fn(() => ({
      drawImage,
    })),
    toDataURL: vi.fn(() => "data:image/png;base64,cropped-four"),
  };

  vi.spyOn(document, "createElement").mockImplementation(((tagName: string) => {
    if (tagName === "canvas") {
      return cropCanvas as unknown as HTMLCanvasElement;
    }

    return originalCreateElement(tagName);
  }) as typeof document.createElement);

  render(<App />);

  const results = await requestViewportCapture({
    preset: "four",
    source: "capture-panel",
  });

  expect(results).toHaveLength(4);
  results.forEach((result) => {
    expect(result.dataUrl).toBe("data:image/png;base64,cropped-four");
  });
  expect(drawImage).toHaveBeenCalledTimes(4);
  expect(cropCanvas.width / cropCanvas.height).toBeCloseTo(4 / 3, 2);
});