import React, { useCallback, useEffect, useRef, useState } from 'react';
import {
  Settings2,
  Download,
  RotateCcw,
  RotateCw,
  Rotate3d,
  AlertCircle,
  ChevronDown,
  ChevronUp,
  Eye,
  Lock,
  Maximize2,
  RefreshCcw,
  Save,
  Upload,
  FlipHorizontal2,
  FlipVertical2,
  Move3d,
} from 'lucide-react';
import * as THREE from 'three';
import { DicomFusionVolume, DicomPreview, ModelPose, ModuleStyle, Project, SavedModelPose } from '../types';
import { api, downloadProjectExportBundle, ProjectExportTarget, SegmentationExportMode, SegmentationExportScope } from '../lib/api';

export interface ModelPreviewPayload {
  fileName: string;
  triangleCount: number;
  sampledTriangles: number;
  vertices: number[];
  bounds?: {
    min: { x: number; y: number; z: number };
    max: { x: number; y: number; z: number };
  };
}

export type DisplayLevel = 'standard' | 'fine' | 'ultra' | 'solid';
export type DicomOpacityLevel = 'low' | 'medium' | 'high';
export type MappingDisplayMode = DicomPreview['mode'];
type ModelPoseKey = Exclude<keyof ModelPose, 'flipX' | 'flipY' | 'flipZ'>;
type ModelPoseFlipKey = Extract<keyof ModelPose, 'flipX' | 'flipY' | 'flipZ'>;
type PoseDraftValues = Record<ModelPoseKey, string>;
type AxisKey = 'x' | 'y' | 'z';

interface AxisVector2D {
  dx: number;
  dy: number;
  opacity: number;
}

type AxisProjection = Record<AxisKey, AxisVector2D>;
type WorkspaceLeaveGuard = () => Promise<boolean>;

interface WorkspaceLoadState {
  ready: boolean;
  phase: string;
  loaded: number;
  total: number;
  startedAt: number;
  error: string;
}

const modelPoseKeys: ModelPoseKey[] = ['rotateX', 'rotateY', 'rotateZ', 'translateX', 'translateY', 'translateZ', 'scale'];
const modelPoseFlipOptions: Array<{ key: ModelPoseFlipKey; label: string; axis: string; icon: typeof FlipHorizontal2 }> = [
  { key: 'flipX', label: '镜像 X', axis: 'X', icon: FlipHorizontal2 },
  { key: 'flipY', label: '镜像 Y', axis: 'Y', icon: FlipVertical2 },
  { key: 'flipZ', label: '镜像 Z', axis: 'Z', icon: Move3d },
];

export const displayOptions: Array<{ id: DisplayLevel; label: string; limit: number }> = [
  { id: 'standard', label: '标准', limit: 16000 },
  { id: 'fine', label: '精细', limit: 36000 },
  { id: 'ultra', label: '超精细', limit: 72000 },
  { id: 'solid', label: '实体', limit: 800000 },
];
export const dicomOpacityOptions: Array<{ id: DicomOpacityLevel; label: string; sliceOpacity: number; volumeOpacity: number; boxOpacity: number }> = [
  { id: 'low', label: '低', sliceOpacity: 0.82, volumeOpacity: 0.12, boxOpacity: 0.32 },
  { id: 'medium', label: '中', sliceOpacity: 0.92, volumeOpacity: 0.2, boxOpacity: 0.42 },
  { id: 'high', label: '高', sliceOpacity: 1, volumeOpacity: 0.32, boxOpacity: 0.54 },
];
const mappingDisplayModes: Array<{ id: MappingDisplayMode; label: string }> = [
  { id: 'default', label: '默认' },
  { id: 'bone', label: '骨窗' },
  { id: 'soft', label: '软组织' },
  { id: 'contrast', label: '高对比' },
];
const poseStepConfig: Record<ModelPoseKey, { min: number; max: number; step: number; minus: string; plus: string; quick?: number }> = {
  rotateX: { min: -180, max: 180, step: 1, minus: '-90°', plus: '+90°', quick: 90 },
  rotateY: { min: -180, max: 180, step: 1, minus: '-90°', plus: '+90°', quick: 90 },
  rotateZ: { min: -180, max: 180, step: 1, minus: '-90°', plus: '+90°', quick: 90 },
  translateX: { min: -2, max: 2, step: 0.001, minus: '-0.001', plus: '+0.001' },
  translateY: { min: -2, max: 2, step: 0.001, minus: '-0.001', plus: '+0.001' },
  translateZ: { min: -2, max: 2, step: 0.001, minus: '-0.001', plus: '+0.001' },
  scale: { min: 0.5, max: 3, step: 0.001, minus: '-0.001', plus: '+0.001' },
};
const poseRepeatDelayMs = 240;
const poseRepeatIntervalMs = 55;
const poseRepeatDeltaMultiplier: Partial<Record<ModelPoseKey, number>> = {
  translateX: 5,
  translateY: 5,
  translateZ: 5,
  scale: 5,
};

const defaultModelPose: ModelPose = {
  rotateX: 0,
  rotateY: 0,
  rotateZ: 0,
  translateX: 0,
  translateY: 0,
  translateZ: 0,
  scale: 1,
  flipX: false,
  flipY: false,
  flipZ: false,
};

const defaultSavedPoses: SavedModelPose[] = [
  { id: 'default', name: '默认', pose: defaultModelPose },
  { id: 'top', name: '俯视', pose: { ...defaultModelPose, rotateX: 0, rotateY: 0, rotateZ: 0 } },
  { id: 'side', name: '侧视', pose: { ...defaultModelPose, rotateX: 0, rotateY: 90, rotateZ: 0 } },
];
const exportOptions: Array<{ id: ProjectExportTarget; label: string; description: string }> = [
  { id: 'dicom', label: 'DICOM 原始影像', description: '主影像 NII.GZ' },
  { id: 'stl', label: 'STL 原始模型', description: '原始三维构件' },
  { id: 'pose', label: '位姿数据', description: 'JSON 侧车' },
  { id: 'segmentation', label: '分割影像', description: '同维度 Label Map' },
];
const segmentationScopeOptions: Array<{ id: SegmentationExportScope; label: string; description: string }> = [
  { id: 'visible', label: '可见类别', description: '仅导出当前显示构件' },
  { id: 'all', label: '所有类别', description: '包含隐藏构件' },
];
const segmentationExportModeOptions: Array<{ id: SegmentationExportMode; label: string; description: string }> = [
  { id: 'combined', label: '构件整体导出', description: '生成一个多标签 Label Map' },
  { id: 'separate', label: '构件分别导出', description: '全部构件集中到同一目录' },
];
const moduleColors = ['#3b82f6', '#22c55e', '#f59e0b', '#ef4444', '#8b5cf6', '#14b8a6', '#f97316', '#64748b', '#ec4899'];
const fusionBaseExtent = 4.6;
const axisInsetLength = 17;
const defaultAxisProjection: AxisProjection = {
  x: { dx: axisInsetLength, dy: 0, opacity: 0.95 },
  y: { dx: -10, dy: 10, opacity: 0.82 },
  z: { dx: 0, dy: -axisInsetLength, opacity: 0.95 },
};
const dicomPreviewCache = new Map<string, Promise<DicomPreview>>();
const dicomFusionVolumeCache = new Map<string, Promise<DicomFusionVolume>>();
const modelPreviewCache = new Map<string, Promise<ModelPreviewPayload>>();

function rememberRequest<T>(cache: Map<string, Promise<T>>, key: string, loader: () => Promise<T>) {
  const cached = cache.get(key);
  if (cached) {
    return cached;
  }

  const request = loader().catch((error) => {
    cache.delete(key);
    throw error;
  });
  cache.set(key, request);
  return request;
}

export function getCachedDicomPreview(
  projectId: string,
  slice: number,
  plane: DicomPreview['plane'] = 'axial',
  mode: DicomPreview['mode'] = 'default',
) {
  return rememberRequest(
    dicomPreviewCache,
    `${projectId}:${plane}:${mode}:${slice}`,
    () => api.getDicomPreview(projectId, slice, plane, mode),
  );
}

export function getCachedDicomFusionVolume(
  projectId: string,
  start: number,
  end: number,
  mode: DicomPreview['mode'] = 'soft',
) {
  const safeStart = Math.min(start, end);
  const safeEnd = Math.max(start, end);
  return rememberRequest(
    dicomFusionVolumeCache,
    `${projectId}:${mode}:${safeStart}:${safeEnd}`,
    () => api.getDicomFusionVolume(projectId, safeStart, safeEnd, mode),
  );
}

export function getCachedModelPreview(projectId: string, fileName: string, limit: number) {
  const safeLimit = Math.max(1, Math.round(limit));
  return rememberRequest(
    modelPreviewCache,
    `${projectId}:${fileName}:${safeLimit}`,
    () => fetch(`/api/projects/${projectId}/models/${encodeURIComponent(fileName)}/preview?limit=${safeLimit}`)
      .then((response) => {
        if (!response.ok) {
          throw new Error('模型预览数据加载失败');
        }
        return response.json() as Promise<ModelPreviewPayload>;
      }),
  );
}

export function clearCachedProjectAssets(projectId: string) {
  [dicomPreviewCache, dicomFusionVolumeCache, modelPreviewCache].forEach((cache) => {
    [...cache.keys()].forEach((key) => {
      if (key.startsWith(`${projectId}:`)) {
        cache.delete(key);
      }
    });
  });
}

function clamp(value: number, min: number, max: number) {
  return Math.max(min, Math.min(max, value));
}

function getDicomDisplaySliceNumber(sliceIndex: number, totalSlices: number) {
  const total = Math.max(Math.round(totalSlices), 0);
  if (!total) {
    return 0;
  }
  return total - clamp(Math.round(sliceIndex), 0, total - 1);
}

function getDicomDisplayRange(startIndex: number, endIndex: number, totalSlices: number) {
  const first = getDicomDisplaySliceNumber(startIndex, totalSlices);
  const second = getDicomDisplaySliceNumber(endIndex, totalSlices);
  return {
    start: Math.min(first, second),
    end: Math.max(first, second),
  };
}

function getStepPrecision(step: number) {
  if (step >= 1) {
    return 0;
  }

  const text = step.toString();
  if (text.includes('e-')) {
    return Number(text.split('e-')[1] ?? 2);
  }

  return text.split('.')[1]?.length ?? 0;
}

function formatPoseValue(key: ModelPoseKey, value: number) {
  return Number(value).toFixed(getStepPrecision(poseStepConfig[key].step));
}

function formatPoseDraftValues(pose: ModelPose): PoseDraftValues {
  return modelPoseKeys.reduce((accumulator, key) => ({
    ...accumulator,
    [key]: formatPoseValue(key, pose[key]),
  }), {} as PoseDraftValues);
}

function isNinetyDegreeMultiple(value: number) {
  const normalized = ((value % 90) + 90) % 90;
  return Math.min(normalized, 90 - normalized) < 1e-6;
}

function isOrthogonalModelPose(pose: ModelPose) {
  return isNinetyDegreeMultiple(pose.rotateX)
    && isNinetyDegreeMultiple(pose.rotateY)
    && isNinetyDegreeMultiple(pose.rotateZ);
}

function getRotatedModelSize(bounds: { min: THREE.Vector3; max: THREE.Vector3 }, pose: ModelPose) {
  const center = new THREE.Vector3().addVectors(bounds.min, bounds.max).multiplyScalar(0.5);
  const rotationMatrix = new THREE.Matrix4().makeRotationFromEuler(new THREE.Euler(
    THREE.MathUtils.degToRad(pose.rotateX),
    THREE.MathUtils.degToRad(pose.rotateY),
    THREE.MathUtils.degToRad(pose.rotateZ),
  ));
  const rotatedBox = new THREE.Box3();
  [bounds.min.x, bounds.max.x].forEach((x) => {
    [bounds.min.y, bounds.max.y].forEach((y) => {
      [bounds.min.z, bounds.max.z].forEach((z) => {
        const point = new THREE.Vector3(x, y, z).sub(center).applyMatrix4(rotationMatrix);
        rotatedBox.expandByPoint(point);
      });
    });
  });
  return rotatedBox.getSize(new THREE.Vector3());
}

function isRecord(value: unknown): value is Record<string, unknown> {
  return typeof value === 'object' && value !== null && !Array.isArray(value);
}

function normalizePoseValue(input: unknown, fallback: ModelPose = defaultModelPose): ModelPose | null {
  if (!isRecord(input)) {
    return null;
  }

  let hasPoseValue = false;
  const normalized = { ...fallback };
  modelPoseKeys.forEach((key) => {
    const rawValue = input[key];
    const numericValue = typeof rawValue === 'number' ? rawValue : Number(rawValue);
    if (!Number.isFinite(numericValue)) {
      return;
    }

    const limit = poseStepConfig[key];
    normalized[key] = clamp(numericValue, limit.min, limit.max);
    hasPoseValue = true;
  });
  modelPoseFlipOptions.forEach(({ key }) => {
    const rawValue = input[key];
    if (typeof rawValue !== 'boolean') {
      return;
    }
    normalized[key] = rawValue;
    hasPoseValue = true;
  });

  return hasPoseValue ? normalized : null;
}

function normalizeImportedModelPoses(input: unknown): SavedModelPose[] | null {
  if (!Array.isArray(input)) {
    return null;
  }

  const normalized = input
    .map((item, index) => {
      if (!isRecord(item)) {
        return null;
      }

      const pose = normalizePoseValue(item.pose);
      if (!pose) {
        return null;
      }

      const rawId = typeof item.id === 'string' && item.id.trim()
        ? item.id.trim()
        : `imported-pose-${Date.now()}-${index}`;
      const rawName = typeof item.name === 'string' && item.name.trim()
        ? item.name.trim()
        : `导入位姿${index + 1}`;

      return {
        id: rawId.slice(0, 80),
        name: rawName.slice(0, 80),
        pose,
      };
    })
    .filter((item): item is SavedModelPose => Boolean(item));

  if (!normalized.length) {
    return null;
  }

  const deduped = new Map<string, SavedModelPose>();
  normalized.forEach((item) => {
    deduped.set(item.id, item);
  });

  return [...deduped.values()];
}

function mergeImportedModelPoses(imported: SavedModelPose[]) {
  const importedById = new Map(imported.map((pose) => [pose.id, pose]));
  const defaults = defaultSavedPoses.map((pose) => importedById.get(pose.id) ?? pose);
  const custom = imported.filter((pose) => !defaultSavedPoses.some((item) => item.id === pose.id));

  return [...defaults, ...custom];
}

function poseValuesMatch(left: ModelPose, right: ModelPose) {
  return modelPoseKeys.every((key) => Math.abs(left[key] - right[key]) < 1e-6)
    && modelPoseFlipOptions.every(({ key }) => left[key] === right[key]);
}

function stableModuleStyles(styles: Record<string, ModuleStyle>) {
  return Object.keys(styles)
    .sort((left, right) => left.localeCompare(right, 'zh-Hans-CN'))
    .reduce<Record<string, ModuleStyle>>((accumulator, key) => {
      accumulator[key] = styles[key];
      return accumulator;
    }, {});
}

function createWorkspaceSnapshot(input: {
  modelPose: ModelPose;
  segmentationExportScope: SegmentationExportScope;
  moduleStyles: Record<string, ModuleStyle>;
  sliceStart: number;
  sliceEnd: number;
  mappingSlice: number;
  displayLevel: DisplayLevel;
  dicomOpacityLevel: DicomOpacityLevel;
  showBounds: boolean;
  cutEnabled: boolean;
}) {
  return JSON.stringify({
    modelPose: input.modelPose,
    segmentationExportScope: input.segmentationExportScope,
    moduleStyles: stableModuleStyles(input.moduleStyles),
    sliceStart: input.sliceStart,
    sliceEnd: input.sliceEnd,
    mappingSlice: input.mappingSlice,
    displayLevel: input.displayLevel,
    dicomOpacityLevel: input.dicomOpacityLevel,
    showBounds: input.showBounds,
    cutEnabled: input.cutEnabled,
  });
}

function parseImportedPosePayload(payload: unknown) {
  const record = isRecord(payload) ? payload : {};
  const importedModelPoses = normalizeImportedModelPoses(record.modelPoses);
  const activePose = normalizePoseValue(record.activePose)
    ?? normalizePoseValue(record.pose)
    ?? normalizePoseValue(payload)
    ?? importedModelPoses?.[0]?.pose
    ?? null;

  return { activePose, importedModelPoses };
}

function projectModelAxisDirections(camera: THREE.Camera, object: THREE.Object3D): AxisProjection {
  const origin = object.getWorldPosition(new THREE.Vector3());
  const originProjected = origin.clone().project(camera);
  const quaternion = object.getWorldQuaternion(new THREE.Quaternion());
  const axisDirections: Record<AxisKey, THREE.Vector3> = {
    x: new THREE.Vector3(1, 0, 0),
    y: new THREE.Vector3(0, 1, 0),
    z: new THREE.Vector3(0, 0, 1),
  };

  const projectAxis = (direction: THREE.Vector3): AxisVector2D => {
    const end = origin.clone().add(direction.applyQuaternion(quaternion).normalize().multiplyScalar(0.72));
    const endProjected = end.project(camera);
    const dx = endProjected.x - originProjected.x;
    const dy = originProjected.y - endProjected.y;
    const magnitude = Math.hypot(dx, dy);

    if (magnitude < 0.0001) {
      return { dx: 0, dy: -5, opacity: 0.5 };
    }

    return {
      dx: (dx / magnitude) * axisInsetLength,
      dy: (dy / magnitude) * axisInsetLength,
      opacity: endProjected.z < originProjected.z ? 1 : 0.58,
    };
  };

  return {
    x: projectAxis(axisDirections.x),
    y: projectAxis(axisDirections.y),
    z: projectAxis(axisDirections.z),
  };
}

function axisProjectionSignature(projection: AxisProjection) {
  return (['x', 'y', 'z'] as AxisKey[])
    .map((key) => {
      const item = projection[key];
      return `${Math.round(item.dx * 10)},${Math.round(item.dy * 10)},${Math.round(item.opacity * 100)}`;
    })
    .join('|');
}

function createDicomTexture(frame: string, width: number, height: number) {
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const context = canvas.getContext('2d');
  if (!context) {
    return null;
  }

  const binary = atob(frame);
  const imageData = context.createImageData(width, height);
  for (let index = 0; index < binary.length; index += 1) {
    const value = binary.charCodeAt(index);
    const offset = index * 4;
    imageData.data[offset] = value;
    imageData.data[offset + 1] = value;
    imageData.data[offset + 2] = value;
    imageData.data[offset + 3] = value > 4 ? 235 : 0;
  }
  context.putImageData(imageData, 0, 0);

  const texture = new THREE.CanvasTexture(canvas);
  texture.colorSpace = THREE.SRGBColorSpace;
  texture.minFilter = THREE.LinearFilter;
  texture.magFilter = THREE.LinearFilter;
  texture.needsUpdate = true;
  return texture;
}

function CoordinateAxesInset({ projection }: { projection: AxisProjection }) {
  const origin = { x: 25, y: 31 };
  const axisItems: Array<{ key: AxisKey; label: string; color: string; labelColor: string; markerId: string }> = [
    { key: 'x', label: 'X', color: '#ef4444', labelColor: '#fecaca', markerId: 'fusion-axis-arrow-x' },
    { key: 'y', label: 'Y', color: '#22c55e', labelColor: '#bbf7d0', markerId: 'fusion-axis-arrow-y' },
    { key: 'z', label: 'Z', color: '#38bdf8', labelColor: '#bae6fd', markerId: 'fusion-axis-arrow-z' },
  ];

  return (
    <div
      className="pointer-events-none absolute bottom-3 right-3 z-10 rounded-lg border border-white/10 bg-black/60 p-1.5 shadow-lg backdrop-blur-sm"
      title="当前视角下模型平移 XYZ 方向"
    >
      <svg width="54" height="54" viewBox="0 0 54 54" aria-hidden="true" className="block">
        <defs>
          {axisItems.map((item) => (
            <marker key={item.key} id={item.markerId} markerWidth="5" markerHeight="5" refX="4.3" refY="2.5" orient="auto" markerUnits="strokeWidth">
              <path d="M0,0 L5,2.5 L0,5 Z" fill={item.color} />
            </marker>
          ))}
        </defs>
        <circle cx={origin.x} cy={origin.y} r="2.2" fill="#e5e7eb" />
        {axisItems.map((item) => {
          const vector = projection[item.key];
          const endX = origin.x + vector.dx;
          const endY = origin.y + vector.dy;
          const textAnchor = vector.dx >= 0 ? 'start' : 'end';
          return (
            <g key={item.key} opacity={vector.opacity}>
              <line
                x1={origin.x}
                y1={origin.y}
                x2={endX}
                y2={endY}
                stroke={item.color}
                strokeWidth="2.2"
                strokeLinecap="round"
                markerEnd={`url(#${item.markerId})`}
              />
              <text
                x={endX + (vector.dx >= 0 ? 4 : -4)}
                y={endY + (vector.dy >= 0 ? 6 : -3)}
                fill={item.labelColor}
                fontSize="8"
                fontWeight="700"
                textAnchor={textAnchor}
              >
                {item.label}
              </text>
            </g>
          );
        })}
      </svg>
    </div>
  );
}

export function FusionThreeView({
  project,
  volume,
  modelPose,
  moduleStyles,
  detailLimit,
  solidMode,
  dicomOpacity,
  showBounds,
  cutEnabled,
  cutStart,
  cutEnd,
  viewPreset = 'workspace',
}: {
  project: Project;
  volume: DicomFusionVolume | null;
  modelPose: ModelPose;
  moduleStyles: Record<string, ModuleStyle>;
  detailLimit: number;
  solidMode: boolean;
  dicomOpacity: { sliceOpacity: number; volumeOpacity: number; boxOpacity: number };
  showBounds: boolean;
  cutEnabled: boolean;
  cutStart: number;
  cutEnd: number;
  viewPreset?: 'workspace' | 'libraryResult';
}) {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const modelPoseRef = useRef(modelPose);
  const [status, setStatus] = useState('准备融合 DICOM 与 STL');
  const [loadProgress, setLoadProgress] = useState(0);
  const [webglError, setWebglError] = useState<string | null>(null);
  const [axisProjection, setAxisProjection] = useState<AxisProjection>(defaultAxisProjection);
  const axisProjectionSignatureRef = useRef(axisProjectionSignature(defaultAxisProjection));
  const resetFusionViewRef = useRef<() => void>(() => undefined);

  useEffect(() => {
    modelPoseRef.current = modelPose;
  }, [modelPose]);

  useEffect(() => {
    const container = containerRef.current;
    if (!container || !volume) return;

    container.innerHTML = '';
    setWebglError(null);
    setStatus('正在构建三维融合场景...');
    setLoadProgress(8);
    setAxisProjection(defaultAxisProjection);
    axisProjectionSignatureRef.current = axisProjectionSignature(defaultAxisProjection);

    let disposed = false;
    let animationId = 0;
    const scene = new THREE.Scene();
    scene.background = new THREE.Color('#030712');

    const width = Math.max(container.clientWidth, 1);
    const height = Math.max(container.clientHeight, 1);
    const camera = new THREE.PerspectiveCamera(45, width / height, 0.05, 1000);
    camera.position.set(0, -6.2, 4.6);
    camera.up.set(0, 0, 1);
    camera.lookAt(0, 0, 0);

    let renderer: THREE.WebGLRenderer;
    try {
      renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    } catch {
      const message = '当前浏览器无法创建 WebGL 三维上下文';
      setStatus(message);
      setLoadProgress(100);
      setWebglError('三维融合视图暂不可用，请检查浏览器硬件加速、显卡驱动或远程桌面图形支持。二维 DICOM 与逆向分割映射功能仍可继续使用。');
      resetFusionViewRef.current = () => undefined;
      return () => {
        container.innerHTML = '';
      };
    }
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.setSize(width, height);
    renderer.localClippingEnabled = true;
    container.appendChild(renderer.domElement);

    scene.add(new THREE.AmbientLight(0xffffff, 0.72));
    const keyLight = new THREE.DirectionalLight(0xffffff, 1.1);
    keyLight.position.set(4, -5, 5);
    scene.add(keyLight);
    const fillLight = new THREE.DirectionalLight(0x8fb8ff, 0.55);
    fillLight.position.set(-4, 3, 2);
    scene.add(fillLight);

    const fusionRoot = new THREE.Group();
    const dicomGroup = new THREE.Group();
    const modelPoseGroup = new THREE.Group();
    const modelPivot = new THREE.Group();
    modelPoseGroup.add(modelPivot);
    fusionRoot.add(dicomGroup);
    fusionRoot.add(modelPoseGroup);
    scene.add(fusionRoot);

    const maxPhysical = Math.max(volume.physicalSize.width, volume.physicalSize.height, volume.physicalSize.depth, 1);
    const baseExtent = 4.6;
    const dicomWidth = (volume.physicalSize.width / maxPhysical) * baseExtent;
    const dicomHeight = (volume.physicalSize.height / maxPhysical) * baseExtent;
    const dicomDepth = Math.max((volume.physicalSize.depth / maxPhysical) * baseExtent, 0.18);
    const planeGeometry = new THREE.PlaneGeometry(dicomWidth, dicomHeight);

    const box = new THREE.Mesh(
      new THREE.BoxGeometry(dicomWidth, dicomHeight, dicomDepth),
      new THREE.MeshBasicMaterial({ color: '#020617', transparent: true, opacity: dicomOpacity.boxOpacity, depthWrite: false }),
    );
    dicomGroup.add(box);
    const edges = new THREE.LineSegments(
      new THREE.EdgesGeometry(box.geometry),
      new THREE.LineBasicMaterial({ color: '#38bdf8', transparent: true, opacity: 0.46 }),
    );
    edges.visible = showBounds;
    dicomGroup.add(edges);

    const sliceToZ = (sliceIndex: number) => (
      volume.total <= 1
        ? 0
        : -dicomDepth / 2 + (dicomDepth * clamp(sliceIndex, 0, volume.total - 1)) / (volume.total - 1)
    );
    const cutRangeStart = Math.min(
      clamp(cutStart, 0, volume.total - 1),
      clamp(cutEnd, 0, volume.total - 1),
    );
    const cutRangeEnd = Math.max(
      clamp(cutStart, 0, volume.total - 1),
      clamp(cutEnd, 0, volume.total - 1),
    );
    const lowerCutZ = sliceToZ(cutRangeStart);
    const upperCutZ = sliceToZ(cutRangeEnd);
    const lowerClippingPlane = new THREE.Plane();
    const upperClippingPlane = new THREE.Plane();

    const textures: THREE.Texture[] = [];
    volume.frames.forEach((frame, index) => {
      const texture = createDicomTexture(frame, volume.width, volume.height);
      if (!texture) return;
      textures.push(texture);
      const isLast = index === volume.frames.length - 1;
      const dicomIndex = volume.indices[index] ?? (volume.start + index);
      const material = new THREE.MeshBasicMaterial({
        map: texture,
        transparent: true,
        opacity: isLast ? dicomOpacity.sliceOpacity : dicomOpacity.volumeOpacity,
        side: THREE.DoubleSide,
        depthWrite: false,
      });
      const slicePlane = new THREE.Mesh(planeGeometry, material);
      const z = volume.total <= 1
        ? 0
        : -dicomDepth / 2 + (dicomDepth * dicomIndex) / (volume.total - 1);
      slicePlane.position.set(0, 0, z + (isLast ? 0.006 : 0));
      dicomGroup.add(slicePlane);
    });

    setLoadProgress(42);

    const stlFiles = project.stlFiles ?? [];
    const visibleStlFiles = stlFiles.filter((fileName) => moduleStyles[fileName]?.visible !== false);
    const modelPreviewLimit = solidMode ? Math.max(detailLimit, 800000) : detailLimit;
    let modelBaseScale = 1;
    let loadedModels = 0;
    let failedModels = 0;
    const loadedBounds: Array<{ min: THREE.Vector3; max: THREE.Vector3 }> = [];

    Promise.allSettled(stlFiles.map((fileName, index) => (
      getCachedModelPreview(project.id, fileName, modelPreviewLimit)
        .then((payload) => {
          if (disposed) return;
          const style = moduleStyles[fileName] ?? {
            visible: true,
            color: moduleColors[index % moduleColors.length],
            opacity: 0.72,
            partId: index + 1,
          };
          if (payload.bounds) {
            loadedBounds.push({
              min: new THREE.Vector3(payload.bounds.min.x, payload.bounds.min.y, payload.bounds.min.z),
              max: new THREE.Vector3(payload.bounds.max.x, payload.bounds.max.y, payload.bounds.max.z),
            });
          }
          if (style.visible !== false) {
            const geometry = new THREE.BufferGeometry();
            geometry.setAttribute('position', new THREE.Float32BufferAttribute(payload.vertices, 3));
            geometry.computeVertexNormals();
            const materialOpacity = solidMode ? 1 : style.opacity;
            const material = new THREE.MeshStandardMaterial({
              color: style.color,
              transparent: materialOpacity < 1,
              opacity: materialOpacity,
              depthWrite: materialOpacity >= 1,
              roughness: solidMode ? 0.56 : 0.48,
              metalness: 0.03,
              side: THREE.DoubleSide,
              clippingPlanes: cutEnabled ? [lowerClippingPlane, upperClippingPlane] : [],
              clipIntersection: false,
              clipShadows: true,
            });
            const mesh = new THREE.Mesh(geometry, material);
            modelPivot.add(mesh);
          }
          loadedModels += 1;
          setLoadProgress(42 + Math.round(((loadedModels + failedModels) / Math.max(stlFiles.length, 1)) * 46));
        })
    ))).then(() => {
      if (disposed) return;
      const modelBox = new THREE.Box3();
      if (loadedBounds.length) {
        loadedBounds.forEach((bounds) => {
          modelBox.expandByPoint(bounds.min);
          modelBox.expandByPoint(bounds.max);
        });
      } else {
        modelBox.setFromObject(modelPivot);
      }

      const center = modelBox.getCenter(new THREE.Vector3());
      const size = modelBox.getSize(new THREE.Vector3());
      const maxModelSize = Math.max(size.x, size.y, size.z, 1);
      modelPivot.traverse((object) => {
        if (object instanceof THREE.Mesh) {
          object.geometry.translate(-center.x, -center.y, -center.z);
          object.geometry.computeBoundingBox();
          object.geometry.computeBoundingSphere();
          object.geometry.computeVertexNormals();
        }
      });
      const modelBounds = new THREE.LineSegments(
        new THREE.EdgesGeometry(new THREE.BoxGeometry(size.x, size.y, size.z)),
        new THREE.LineBasicMaterial({ color: '#facc15', transparent: true, opacity: 0.72 }),
      );
      modelBounds.visible = showBounds;
      modelPivot.add(modelBounds);
      modelBaseScale = (Math.max(dicomWidth, dicomHeight, dicomDepth) / maxModelSize) * 0.92;
      modelPoseGroup.position.set(0, 0, 0);
      modelPivot.position.set(0, 0, 0);
      setLoadProgress(100);
      setStatus(visibleStlFiles.length ? '三维融合场景已就绪' : 'DICOM 三维体已就绪，当前没有显示的 STL 构件');
    });

    const defaultRootPose = viewPreset === 'libraryResult' ? {
      rotateX: THREE.MathUtils.degToRad(70),
      rotateY: 0,
      rotateZ: 0,
      translateX: 0,
      translateY: 0.02,
      scale: 0.94,
    } : {
      rotateX: THREE.MathUtils.degToRad(58),
      rotateY: 0,
      rotateZ: THREE.MathUtils.degToRad(-18),
      translateX: 0,
      translateY: 0,
      scale: 1,
    };
    const rootPose = { ...defaultRootPose };
    const dragState = {
      active: false,
      mode: 'rotate' as 'rotate' | 'pan',
      pointerId: 0,
      startX: 0,
      startY: 0,
      root: { ...rootPose },
    };
    resetFusionViewRef.current = () => {
      Object.assign(rootPose, defaultRootPose);
      setStatus('三维融合视角已复位');
    };

    const handlePointerDown = (event: PointerEvent) => {
      dragState.active = true;
      dragState.mode = event.button === 2 || event.shiftKey ? 'pan' : 'rotate';
      dragState.pointerId = event.pointerId;
      dragState.startX = event.clientX;
      dragState.startY = event.clientY;
      dragState.root = { ...rootPose };
      container.setPointerCapture(event.pointerId);
    };
    const handlePointerMove = (event: PointerEvent) => {
      if (!dragState.active || event.pointerId !== dragState.pointerId) return;
      const deltaX = event.clientX - dragState.startX;
      const deltaY = event.clientY - dragState.startY;
      if (dragState.mode === 'pan') {
        rootPose.translateX = dragState.root.translateX + deltaX * 0.006;
        rootPose.translateY = dragState.root.translateY - deltaY * 0.006;
        return;
      }
      rootPose.rotateZ = dragState.root.rotateZ + deltaX * 0.008;
      rootPose.rotateX = dragState.root.rotateX + deltaY * 0.008;
    };
    const stopPointerDrag = (event: PointerEvent) => {
      if (event.pointerId !== dragState.pointerId) return;
      dragState.active = false;
      if (container.hasPointerCapture(event.pointerId)) {
        container.releasePointerCapture(event.pointerId);
      }
    };
    const handleWheel = (event: WheelEvent) => {
      event.preventDefault();
      rootPose.scale = clamp(rootPose.scale - event.deltaY * 0.001, 0.45, 2.2);
    };
    const preventContextMenu = (event: MouseEvent) => event.preventDefault();

    container.addEventListener('pointerdown', handlePointerDown);
    container.addEventListener('pointermove', handlePointerMove);
    container.addEventListener('pointerup', stopPointerDrag);
    container.addEventListener('pointercancel', stopPointerDrag);
    container.addEventListener('wheel', handleWheel, { passive: false });
    container.addEventListener('contextmenu', preventContextMenu);

    const handleResize = () => {
      if (!container.clientWidth || !container.clientHeight) return;
      camera.aspect = container.clientWidth / container.clientHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(container.clientWidth, container.clientHeight);
    };
    window.addEventListener('resize', handleResize);

    const animate = () => {
      if (disposed) return;
      fusionRoot.rotation.set(rootPose.rotateX, rootPose.rotateY, rootPose.rotateZ);
      fusionRoot.position.set(rootPose.translateX, rootPose.translateY, 0);
      fusionRoot.scale.setScalar(rootPose.scale);
      fusionRoot.updateMatrixWorld(true);
      if (cutEnabled) {
        const rootQuaternion = fusionRoot.getWorldQuaternion(new THREE.Quaternion());
        const lowerNormal = new THREE.Vector3(0, 0, 1).applyQuaternion(rootQuaternion).normalize();
        const upperNormal = new THREE.Vector3(0, 0, -1).applyQuaternion(rootQuaternion).normalize();
        const lowerCutPoint = new THREE.Vector3(0, 0, lowerCutZ).applyMatrix4(fusionRoot.matrixWorld);
        const upperCutPoint = new THREE.Vector3(0, 0, upperCutZ).applyMatrix4(fusionRoot.matrixWorld);
        lowerClippingPlane.setFromNormalAndCoplanarPoint(lowerNormal, lowerCutPoint);
        upperClippingPlane.setFromNormalAndCoplanarPoint(upperNormal, upperCutPoint);
      }

      const pose = modelPoseRef.current;
      modelPoseGroup.rotation.set(
        THREE.MathUtils.degToRad(pose.rotateX),
        THREE.MathUtils.degToRad(pose.rotateY),
        THREE.MathUtils.degToRad(pose.rotateZ),
      );
      modelPoseGroup.position.set(
        pose.translateX,
        pose.translateY,
        pose.translateZ,
      );
      const poseScale = modelBaseScale * pose.scale;
      modelPoseGroup.scale.set(
        pose.flipX ? -poseScale : poseScale,
        pose.flipY ? -poseScale : poseScale,
        pose.flipZ ? -poseScale : poseScale,
      );
      modelPoseGroup.updateMatrixWorld(true);
      const nextAxisProjection = projectModelAxisDirections(camera, modelPoseGroup);
      const nextAxisSignature = axisProjectionSignature(nextAxisProjection);
      if (axisProjectionSignatureRef.current !== nextAxisSignature) {
        axisProjectionSignatureRef.current = nextAxisSignature;
        setAxisProjection(nextAxisProjection);
      }
      renderer.render(scene, camera);
      animationId = window.requestAnimationFrame(animate);
    };
    animate();

    return () => {
      disposed = true;
      window.cancelAnimationFrame(animationId);
      window.removeEventListener('resize', handleResize);
      container.removeEventListener('pointerdown', handlePointerDown);
      container.removeEventListener('pointermove', handlePointerMove);
      container.removeEventListener('pointerup', stopPointerDrag);
      container.removeEventListener('pointercancel', stopPointerDrag);
      container.removeEventListener('wheel', handleWheel);
      container.removeEventListener('contextmenu', preventContextMenu);
      textures.forEach((texture) => texture.dispose());
      scene.traverse((object) => {
        if (object instanceof THREE.Mesh) {
          object.geometry.dispose();
          const material = object.material;
          if (Array.isArray(material)) {
            material.forEach((item) => item.dispose());
          } else {
            material.dispose();
          }
        }
      });
      renderer.dispose();
      resetFusionViewRef.current = () => undefined;
      container.innerHTML = '';
    };
  }, [
    project.id,
    project.stlFiles?.join('|'),
    volume,
    JSON.stringify(moduleStyles),
    detailLimit,
    solidMode,
    dicomOpacity.sliceOpacity,
    dicomOpacity.volumeOpacity,
    dicomOpacity.boxOpacity,
    showBounds,
    cutEnabled,
    cutStart,
    cutEnd,
    viewPreset,
  ]);

  const volumeDisplayRange = volume ? getDicomDisplayRange(volume.start, volume.end, volume.total) : null;

  return (
    <div className="relative h-full min-h-[520px] overflow-hidden rounded-3xl border border-slate-800 bg-black shadow-xl">
      <div ref={containerRef} className="absolute inset-0 cursor-grab active:cursor-grabbing" />
      {webglError && (
        <div className="absolute inset-0 z-20 flex items-center justify-center bg-slate-950/92 px-8 text-center">
          <div className="max-w-md rounded-2xl border border-amber-300/20 bg-slate-900/90 p-6 text-amber-50 shadow-2xl">
            <AlertCircle className="mx-auto mb-3 text-amber-300" size={30} />
            <p className="text-sm font-bold">三维融合视图无法启动</p>
            <p className="mt-3 text-xs leading-6 text-amber-100/75">{webglError}</p>
          </div>
        </div>
      )}
      <div className="pointer-events-none absolute left-4 top-4 rounded-xl border border-white/10 bg-black/60 px-3 py-2 text-[10px] font-mono text-white/60">
        {status}
      </div>
      <div className="pointer-events-none absolute right-4 top-4 rounded-xl border border-cyan-400/20 bg-cyan-950/50 px-3 py-2 text-[10px] font-mono text-cyan-100">
        DICOM {volume && volumeDisplayRange ? `${volumeDisplayRange.start}-${volumeDisplayRange.end}/${volume.total}` : '加载中'} · STL {project.modelCount ?? 0}
      </div>
      <button
        onClick={() => resetFusionViewRef.current()}
        className="absolute right-4 top-16 z-10 flex h-8 items-center gap-1.5 rounded-xl border border-white/10 bg-black/60 px-3 text-[10px] font-bold text-white/70 shadow-lg hover:border-cyan-300/30 hover:text-cyan-100"
        title="重置影像与模型融合视角位置"
      >
        <RefreshCcw size={13} />
        位置重置
      </button>
      <CoordinateAxesInset projection={axisProjection} />
      {loadProgress < 100 && (
        <div className="absolute inset-x-10 bottom-8 rounded-xl border border-white/10 bg-black/70 p-3">
          <div className="mb-2 flex items-center justify-between text-[10px] font-bold text-white/70">
            <span>正在融合三维影像与模型</span>
            <span>{loadProgress}%</span>
          </div>
          <div className="h-2 overflow-hidden rounded-full bg-white/10">
            <div className="h-full bg-blue-500 transition-all" style={{ width: `${loadProgress}%` }} />
          </div>
        </div>
      )}
      {!volume && (
        <div className="absolute inset-0 flex items-center justify-center text-xs font-bold text-white/40">
          正在载入 DICOM 三维体...
        </div>
      )}
    </div>
  );
}

function CutSectionPreview({
  project,
  volume,
  modelPose,
  moduleStyles,
  detailLimit,
  cutEnabled,
  cutStart,
  cutEnd,
}: {
  project: Project | null;
  volume: DicomFusionVolume | null;
  modelPose: ModelPose;
  moduleStyles: Record<string, ModuleStyle>;
  detailLimit: number;
  cutEnabled: boolean;
  cutStart: number;
  cutEnd: number;
}) {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const modelPoseRef = useRef(modelPose);
  const [webglError, setWebglError] = useState<string | null>(null);

  useEffect(() => {
    modelPoseRef.current = modelPose;
  }, [modelPose]);

  useEffect(() => {
    const container = containerRef.current;
    if (!container || !project || !volume) return;

    container.innerHTML = '';
    setWebglError(null);
    let disposed = false;
    let animationId = 0;
    const scene = new THREE.Scene();
    scene.background = new THREE.Color('#020617');

    const width = Math.max(container.clientWidth, 1);
    const height = Math.max(container.clientHeight, 1);
    const camera = new THREE.PerspectiveCamera(42, width / height, 0.05, 1000);
    camera.position.set(0, -5.6, 3.4);
    camera.up.set(0, 0, 1);
    camera.lookAt(0, 0, 0);

    let renderer: THREE.WebGLRenderer;
    try {
      renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    } catch {
      setWebglError('当前浏览器无法创建 WebGL 三维上下文，STL 切面三维预览暂不可用。');
      return () => {
        container.innerHTML = '';
      };
    }
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.setSize(width, height);
    renderer.localClippingEnabled = true;
    container.appendChild(renderer.domElement);

    scene.add(new THREE.AmbientLight(0xffffff, 0.78));
    const keyLight = new THREE.DirectionalLight(0xffffff, 1.25);
    keyLight.position.set(3, -4, 5);
    scene.add(keyLight);
    const rimLight = new THREE.DirectionalLight(0x93c5fd, 0.72);
    rimLight.position.set(-4, 3, 2);
    scene.add(rimLight);

    const fusionRoot = new THREE.Group();
    const modelPoseGroup = new THREE.Group();
    const modelPivot = new THREE.Group();
    modelPoseGroup.add(modelPivot);
    fusionRoot.add(modelPoseGroup);
    scene.add(fusionRoot);

    const maxPhysical = Math.max(volume.physicalSize.width, volume.physicalSize.height, volume.physicalSize.depth, 1);
    const baseExtent = 4.4;
    const dicomWidth = (volume.physicalSize.width / maxPhysical) * baseExtent;
    const dicomHeight = (volume.physicalSize.height / maxPhysical) * baseExtent;
    const dicomDepth = Math.max((volume.physicalSize.depth / maxPhysical) * baseExtent, 0.18);
    const sliceToZ = (sliceIndex: number) => (
      volume.total <= 1
        ? 0
        : -dicomDepth / 2 + (dicomDepth * clamp(sliceIndex, 0, volume.total - 1)) / (volume.total - 1)
    );
    const cutRangeStart = Math.min(
      clamp(cutStart, 0, volume.total - 1),
      clamp(cutEnd, 0, volume.total - 1),
    );
    const cutRangeEnd = Math.max(
      clamp(cutStart, 0, volume.total - 1),
      clamp(cutEnd, 0, volume.total - 1),
    );
    const lowerCutZ = sliceToZ(cutRangeStart);
    const upperCutZ = sliceToZ(cutRangeEnd);
    const lowerClippingPlane = new THREE.Plane();
    const upperClippingPlane = new THREE.Plane();

    let modelBaseScale = 1;
    let loadedModels = 0;
    let failedModels = 0;
    const loadedBounds: Array<{ min: THREE.Vector3; max: THREE.Vector3 }> = [];
    const stlFiles = (project.stlFiles ?? []).filter((fileName) => moduleStyles[fileName]?.visible !== false);

    Promise.allSettled(stlFiles.map((fileName, index) => (
      getCachedModelPreview(project.id, fileName, Math.max(detailLimit, 200000))
        .then((payload) => {
          if (disposed) return;
          const geometry = new THREE.BufferGeometry();
          geometry.setAttribute('position', new THREE.Float32BufferAttribute(payload.vertices, 3));
          geometry.computeVertexNormals();
          const style = moduleStyles[fileName] ?? {
            visible: true,
            color: moduleColors[index % moduleColors.length],
            opacity: 1,
            partId: index + 1,
          };
          const material = new THREE.MeshStandardMaterial({
            color: style.color,
            roughness: 0.5,
            metalness: 0.04,
            side: THREE.DoubleSide,
            clippingPlanes: cutEnabled ? [lowerClippingPlane, upperClippingPlane] : [],
            clipIntersection: false,
            clipShadows: true,
          });
          modelPivot.add(new THREE.Mesh(geometry, material));
          if (payload.bounds) {
            loadedBounds.push({
              min: new THREE.Vector3(payload.bounds.min.x, payload.bounds.min.y, payload.bounds.min.z),
              max: new THREE.Vector3(payload.bounds.max.x, payload.bounds.max.y, payload.bounds.max.z),
            });
          }
          loadedModels += 1;
        })
        .catch(() => {
          failedModels += 1;
        })
    ))).then(() => {
      if (disposed || (loadedModels + failedModels === 0)) return;
      const modelBox = new THREE.Box3();
      if (loadedBounds.length) {
        loadedBounds.forEach((bounds) => {
          modelBox.expandByPoint(bounds.min);
          modelBox.expandByPoint(bounds.max);
        });
      } else {
        modelBox.setFromObject(modelPivot);
      }
      const center = modelBox.getCenter(new THREE.Vector3());
      const size = modelBox.getSize(new THREE.Vector3());
      const maxModelSize = Math.max(size.x, size.y, size.z, 1);
      modelPivot.traverse((object) => {
        if (object instanceof THREE.Mesh) {
          object.geometry.translate(-center.x, -center.y, -center.z);
          object.geometry.computeBoundingBox();
          object.geometry.computeBoundingSphere();
          object.geometry.computeVertexNormals();
        }
      });
      modelBaseScale = (Math.max(dicomWidth, dicomHeight, dicomDepth) / maxModelSize) * 0.98;
      modelPoseGroup.position.set(0, 0, 0);
      modelPivot.position.set(0, 0, 0);
    });

    const rootPose = {
      rotateX: THREE.MathUtils.degToRad(58),
      rotateY: 0,
      rotateZ: THREE.MathUtils.degToRad(-18),
      translateX: 0,
      translateY: 0,
      scale: 1,
    };
    const dragState = {
      active: false,
      mode: 'rotate' as 'rotate' | 'pan',
      pointerId: 0,
      startX: 0,
      startY: 0,
      root: { ...rootPose },
    };

    const handlePointerDown = (event: PointerEvent) => {
      dragState.active = true;
      dragState.mode = event.button === 2 || event.shiftKey ? 'pan' : 'rotate';
      dragState.pointerId = event.pointerId;
      dragState.startX = event.clientX;
      dragState.startY = event.clientY;
      dragState.root = { ...rootPose };
      container.setPointerCapture(event.pointerId);
    };
    const handlePointerMove = (event: PointerEvent) => {
      if (!dragState.active || event.pointerId !== dragState.pointerId) return;
      const deltaX = event.clientX - dragState.startX;
      const deltaY = event.clientY - dragState.startY;
      if (dragState.mode === 'pan') {
        rootPose.translateX = dragState.root.translateX + deltaX * 0.006;
        rootPose.translateY = dragState.root.translateY - deltaY * 0.006;
        return;
      }
      rootPose.rotateZ = dragState.root.rotateZ + deltaX * 0.008;
      rootPose.rotateX = dragState.root.rotateX + deltaY * 0.008;
    };
    const stopPointerDrag = (event: PointerEvent) => {
      if (event.pointerId !== dragState.pointerId) return;
      dragState.active = false;
      if (container.hasPointerCapture(event.pointerId)) {
        container.releasePointerCapture(event.pointerId);
      }
    };
    const handleWheel = (event: WheelEvent) => {
      event.preventDefault();
      rootPose.scale = clamp(rootPose.scale - event.deltaY * 0.001, 0.55, 2.4);
    };
    const preventContextMenu = (event: MouseEvent) => event.preventDefault();
    const handleResize = () => {
      if (!container.clientWidth || !container.clientHeight) return;
      camera.aspect = container.clientWidth / container.clientHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(container.clientWidth, container.clientHeight);
    };

    container.addEventListener('pointerdown', handlePointerDown);
    container.addEventListener('pointermove', handlePointerMove);
    container.addEventListener('pointerup', stopPointerDrag);
    container.addEventListener('pointercancel', stopPointerDrag);
    container.addEventListener('wheel', handleWheel, { passive: false });
    container.addEventListener('contextmenu', preventContextMenu);
    window.addEventListener('resize', handleResize);

    const animate = () => {
      if (disposed) return;
      fusionRoot.rotation.set(rootPose.rotateX, rootPose.rotateY, rootPose.rotateZ);
      fusionRoot.position.set(rootPose.translateX, rootPose.translateY, 0);
      fusionRoot.scale.setScalar(rootPose.scale);
      if (cutEnabled) {
        fusionRoot.updateMatrixWorld(true);
        const rootQuaternion = fusionRoot.getWorldQuaternion(new THREE.Quaternion());
        const lowerNormal = new THREE.Vector3(0, 0, 1).applyQuaternion(rootQuaternion).normalize();
        const upperNormal = new THREE.Vector3(0, 0, -1).applyQuaternion(rootQuaternion).normalize();
        const lowerCutPoint = new THREE.Vector3(0, 0, lowerCutZ).applyMatrix4(fusionRoot.matrixWorld);
        const upperCutPoint = new THREE.Vector3(0, 0, upperCutZ).applyMatrix4(fusionRoot.matrixWorld);
        lowerClippingPlane.setFromNormalAndCoplanarPoint(lowerNormal, lowerCutPoint);
        upperClippingPlane.setFromNormalAndCoplanarPoint(upperNormal, upperCutPoint);
      }

      const pose = modelPoseRef.current;
      modelPoseGroup.rotation.set(
        THREE.MathUtils.degToRad(pose.rotateX),
        THREE.MathUtils.degToRad(pose.rotateY),
        THREE.MathUtils.degToRad(pose.rotateZ),
      );
      modelPoseGroup.position.set(pose.translateX, pose.translateY, pose.translateZ);
      const poseScale = modelBaseScale * pose.scale;
      modelPoseGroup.scale.set(
        pose.flipX ? -poseScale : poseScale,
        pose.flipY ? -poseScale : poseScale,
        pose.flipZ ? -poseScale : poseScale,
      );
      renderer.render(scene, camera);
      animationId = window.requestAnimationFrame(animate);
    };
    animate();

    return () => {
      disposed = true;
      window.cancelAnimationFrame(animationId);
      window.removeEventListener('resize', handleResize);
      container.removeEventListener('pointerdown', handlePointerDown);
      container.removeEventListener('pointermove', handlePointerMove);
      container.removeEventListener('pointerup', stopPointerDrag);
      container.removeEventListener('pointercancel', stopPointerDrag);
      container.removeEventListener('wheel', handleWheel);
      container.removeEventListener('contextmenu', preventContextMenu);
      scene.traverse((object) => {
        if (object instanceof THREE.Mesh) {
          object.geometry.dispose();
          const material = object.material;
          if (Array.isArray(material)) {
            material.forEach((item) => item.dispose());
          } else {
            material.dispose();
          }
        }
      });
      renderer.dispose();
      container.innerHTML = '';
    };
  }, [
    project?.id,
    project?.stlFiles?.join('|'),
    volume,
    JSON.stringify(moduleStyles),
    detailLimit,
    cutEnabled,
    cutStart,
    cutEnd,
  ]);

  return (
    <div className="relative h-full min-h-[420px] overflow-hidden rounded-3xl border border-slate-800 bg-slate-950 shadow-2xl">
      <div ref={containerRef} className="absolute inset-0 cursor-grab active:cursor-grabbing" />
      {webglError && (
        <div className="absolute inset-0 flex items-center justify-center px-6 text-center">
          <div className="rounded-2xl border border-amber-300/20 bg-slate-900/90 p-5 text-xs font-bold leading-6 text-amber-100">
            {webglError}
          </div>
        </div>
      )}
      {(!project || !volume) && (
        <div className="absolute inset-0 flex items-center justify-center text-xs font-bold text-white/40">
          正在载入 STL 切面...
        </div>
      )}
    </div>
  );
}

interface ModelBounds {
  min: { x: number; y: number; z: number };
  max: { x: number; y: number; z: number };
}

interface Point2D {
  x: number;
  y: number;
}

interface Point3D {
  x: number;
  y: number;
  z: number;
}

interface ModelSceneMetrics {
  center: Point3D;
  modelBaseScale: number;
  modelPivotOffsetZ: number;
  dicomWidth: number;
  dicomHeight: number;
  dicomDepth: number;
}

interface PlaneSegment {
  a: Point2D;
  b: Point2D;
}

export interface OverlayStats {
  activeModules: number;
  filledPixels: number;
  segmentCount: number;
  modules: Array<{
    fileName: string;
    name: string;
    color: string;
    opacity: number;
    partId: number;
    segmentCount: number;
    filledPixels: number;
  }>;
}

function getPayloadBounds(payload: ModelPreviewPayload): ModelBounds | null {
  if (payload.bounds) {
    return payload.bounds;
  }

  if (payload.vertices.length < 3) {
    return null;
  }

  const bounds: ModelBounds = {
    min: { x: Infinity, y: Infinity, z: Infinity },
    max: { x: -Infinity, y: -Infinity, z: -Infinity },
  };

  for (let index = 0; index < payload.vertices.length; index += 3) {
    const x = payload.vertices[index];
    const y = payload.vertices[index + 1];
    const z = payload.vertices[index + 2];
    bounds.min.x = Math.min(bounds.min.x, x);
    bounds.min.y = Math.min(bounds.min.y, y);
    bounds.min.z = Math.min(bounds.min.z, z);
    bounds.max.x = Math.max(bounds.max.x, x);
    bounds.max.y = Math.max(bounds.max.y, y);
    bounds.max.z = Math.max(bounds.max.z, z);
  }

  return Number.isFinite(bounds.min.x) ? bounds : null;
}

function getGlobalModelBounds(files: string[], previews: Record<string, ModelPreviewPayload>) {
  const bounds: ModelBounds = {
    min: { x: Infinity, y: Infinity, z: Infinity },
    max: { x: -Infinity, y: -Infinity, z: -Infinity },
  };
  let hasBounds = false;

  files.forEach((fileName) => {
    const payloadBounds = previews[fileName] ? getPayloadBounds(previews[fileName]) : null;
    if (!payloadBounds) {
      return;
    }
    hasBounds = true;
    bounds.min.x = Math.min(bounds.min.x, payloadBounds.min.x);
    bounds.min.y = Math.min(bounds.min.y, payloadBounds.min.y);
    bounds.min.z = Math.min(bounds.min.z, payloadBounds.min.z);
    bounds.max.x = Math.max(bounds.max.x, payloadBounds.max.x);
    bounds.max.y = Math.max(bounds.max.y, payloadBounds.max.y);
    bounds.max.z = Math.max(bounds.max.z, payloadBounds.max.z);
  });

  return hasBounds ? bounds : null;
}

function getPreviewPhysicalSize(preview: DicomPreview) {
  const columnSpacing = preview.spacing?.displayX ?? preview.spacing?.column ?? 1;
  const rowSpacing = preview.spacing?.displayY ?? preview.spacing?.row ?? 1;
  const width = preview.physicalSize?.width ?? preview.width * columnSpacing;
  const height = preview.physicalSize?.height ?? preview.height * rowSpacing;

  return {
    width: Math.max(width, 0.001),
    height: Math.max(height, 0.001),
    columnSpacing: Math.max(columnSpacing, 0.001),
    rowSpacing: Math.max(rowSpacing, 0.001),
    sliceSpacing: Math.max(preview.spacing?.slice ?? 1, 0.001),
  };
}

function getFovCanvasSize(preview: DicomPreview) {
  const physical = getPreviewPhysicalSize(preview);
  const unit = Math.max(0.001, Math.min(physical.columnSpacing, physical.rowSpacing));
  const rawWidth = Math.max(1, Math.round(physical.width / unit));
  const rawHeight = Math.max(1, Math.round(physical.height / unit));
  const maxDimension = 960;
  const scale = Math.min(1, maxDimension / Math.max(rawWidth, rawHeight));

  return {
    width: Math.max(1, Math.round(rawWidth * scale)),
    height: Math.max(1, Math.round(rawHeight * scale)),
  };
}

function getModelSceneMetrics(
  files: string[],
  previews: Record<string, ModelPreviewPayload>,
  preview: DicomPreview,
  totalSlices: number,
): ModelSceneMetrics | null {
  const globalBounds = getGlobalModelBounds(files, previews);
  if (!globalBounds) {
    return null;
  }

  const spanX = Math.max(globalBounds.max.x - globalBounds.min.x, 0.001);
  const spanY = Math.max(globalBounds.max.y - globalBounds.min.y, 0.001);
  const spanZ = Math.max(globalBounds.max.z - globalBounds.min.z, 0.001);
  const maxModelSize = Math.max(spanX, spanY, spanZ, 1);
  const physical = getPreviewPhysicalSize(preview);
  const physicalDepth = Math.max(totalSlices, 1) * physical.sliceSpacing;
  const maxPhysical = Math.max(physical.width, physical.height, physicalDepth, 1);
  const dicomWidth = (physical.width / maxPhysical) * fusionBaseExtent;
  const dicomHeight = (physical.height / maxPhysical) * fusionBaseExtent;
  const dicomDepth = Math.max((physicalDepth / maxPhysical) * fusionBaseExtent, 0.18);
  const modelBaseScale = (Math.max(dicomWidth, dicomHeight, dicomDepth) / maxModelSize) * 0.92;

  return {
    center: {
      x: (globalBounds.min.x + globalBounds.max.x) / 2,
      y: (globalBounds.min.y + globalBounds.max.y) / 2,
      z: (globalBounds.min.z + globalBounds.max.z) / 2,
    },
    modelBaseScale,
    modelPivotOffsetZ: dicomDepth * 0.08,
    dicomWidth,
    dicomHeight,
    dicomDepth,
  };
}

function transformPointForPose(x: number, y: number, z: number, metrics: ModelSceneMetrics, pose: ModelPose): Point3D {
  const scalar = metrics.modelBaseScale * pose.scale;
  let px = (x - metrics.center.x) * scalar * (pose.flipX ? -1 : 1);
  let py = (y - metrics.center.y) * scalar * (pose.flipY ? -1 : 1);
  let pz = (z - metrics.center.z) * scalar * (pose.flipZ ? -1 : 1);
  pz += metrics.modelPivotOffsetZ * scalar;

  const rotateX = THREE.MathUtils.degToRad(pose.rotateX);
  const rotateY = THREE.MathUtils.degToRad(pose.rotateY);
  const rotateZ = THREE.MathUtils.degToRad(pose.rotateZ);
  const cosX = Math.cos(rotateX);
  const sinX = Math.sin(rotateX);
  const cosY = Math.cos(rotateY);
  const sinY = Math.sin(rotateY);
  const cosZ = Math.cos(rotateZ);
  const sinZ = Math.sin(rotateZ);

  const afterX = {
    x: px,
    y: py * cosX - pz * sinX,
    z: py * sinX + pz * cosX,
  };
  const afterY = {
    x: afterX.x * cosY + afterX.z * sinY,
    y: afterX.y,
    z: -afterX.x * sinY + afterX.z * cosY,
  };
  px = afterY.x * cosZ - afterY.y * sinZ;
  py = afterY.x * sinZ + afterY.y * cosZ;
  pz = afterY.z;

  return {
    x: px + pose.translateX,
    y: py + pose.translateY,
    z: pz + pose.translateZ,
  };
}

function intersectEdgeWithPlane(start: Point3D, end: Point3D, targetZ: number): Point2D | null {
  const epsilon = 1e-5;
  const startDistance = start.z - targetZ;
  const endDistance = end.z - targetZ;

  if (Math.abs(startDistance) <= epsilon && Math.abs(endDistance) <= epsilon) {
    return null;
  }

  if (Math.abs(startDistance) <= epsilon) {
    return { x: start.x, y: start.y };
  }

  if (Math.abs(endDistance) <= epsilon) {
    return { x: end.x, y: end.y };
  }

  if ((startDistance > 0 && endDistance > 0) || (startDistance < 0 && endDistance < 0)) {
    return null;
  }

  const t = startDistance / (startDistance - endDistance);
  return {
    x: start.x + (end.x - start.x) * t,
    y: start.y + (end.y - start.y) * t,
  };
}

function pointDistanceSquared(a: Point2D, b: Point2D) {
  const dx = a.x - b.x;
  const dy = a.y - b.y;
  return dx * dx + dy * dy;
}

function intersectTriangleWithPlane(a: Point3D, b: Point3D, c: Point3D, targetZ: number): PlaneSegment | null {
  const intersections = [
    intersectEdgeWithPlane(a, b, targetZ),
    intersectEdgeWithPlane(b, c, targetZ),
    intersectEdgeWithPlane(c, a, targetZ),
  ].filter((point): point is Point2D => Boolean(point));

  const uniquePoints: Point2D[] = [];
  intersections.forEach((point) => {
    const exists = uniquePoints.some((current) => pointDistanceSquared(current, point) < 1e-8);
    if (!exists) {
      uniquePoints.push(point);
    }
  });

  if (uniquePoints.length < 2) {
    return null;
  }

  let segment: PlaneSegment = { a: uniquePoints[0], b: uniquePoints[1] };
  let maxDistance = pointDistanceSquared(segment.a, segment.b);
  for (let first = 0; first < uniquePoints.length; first += 1) {
    for (let second = first + 1; second < uniquePoints.length; second += 1) {
      const distance = pointDistanceSquared(uniquePoints[first], uniquePoints[second]);
      if (distance > maxDistance) {
        maxDistance = distance;
        segment = { a: uniquePoints[first], b: uniquePoints[second] };
      }
    }
  }

  return maxDistance > 1e-8 ? segment : null;
}

function parseHexColor(color: string) {
  const normalized = color.replace('#', '').trim();
  const value = normalized.length === 3
    ? normalized.split('').map((item) => item + item).join('')
    : normalized.padEnd(6, '0').slice(0, 6);
  const parsed = Number.parseInt(value, 16);

  if (!Number.isFinite(parsed)) {
    return { r: 59, g: 130, b: 246 };
  }

  return {
    r: (parsed >> 16) & 255,
    g: (parsed >> 8) & 255,
    b: parsed & 255,
  };
}

function fillInternalMaskHoles(
  maskData: ImageData,
  width: number,
  height: number,
  rgb: { r: number; g: number; b: number },
  alpha: number,
) {
  const outside = new Uint8Array(width * height);
  const stack: number[] = [];
  const pushIfEmpty = (x: number, y: number) => {
    if (x < 0 || x >= width || y < 0 || y >= height) {
      return;
    }

    const index = y * width + x;
    if (outside[index] || maskData.data[index * 4 + 3] > 0) {
      return;
    }

    outside[index] = 1;
    stack.push(index);
  };

  for (let x = 0; x < width; x += 1) {
    pushIfEmpty(x, 0);
    pushIfEmpty(x, height - 1);
  }
  for (let y = 0; y < height; y += 1) {
    pushIfEmpty(0, y);
    pushIfEmpty(width - 1, y);
  }

  while (stack.length) {
    const index = stack.pop();
    if (index === undefined) {
      continue;
    }

    const x = index % width;
    const y = Math.floor(index / width);
    pushIfEmpty(x + 1, y);
    pushIfEmpty(x - 1, y);
    pushIfEmpty(x, y + 1);
    pushIfEmpty(x, y - 1);
  }

  let patchedPixels = 0;
  for (let index = 0; index < outside.length; index += 1) {
    const offset = index * 4;
    if (!outside[index] && maskData.data[offset + 3] === 0) {
      maskData.data[offset] = rgb.r;
      maskData.data[offset + 1] = rgb.g;
      maskData.data[offset + 2] = rgb.b;
      maskData.data[offset + 3] = alpha;
      patchedPixels += 1;
    }
  }

  return patchedPixels;
}

function addSegmentIntersectionsToRows(rows: number[][], width: number, height: number, segment: PlaneSegment) {
  const { a, b } = segment;
  if (!Number.isFinite(a.x) || !Number.isFinite(a.y) || !Number.isFinite(b.x) || !Number.isFinite(b.y)) {
    return;
  }

  const deltaY = b.y - a.y;
  if (Math.abs(deltaY) < 0.01) {
    return;
  }

  const minY = Math.max(0, Math.floor(Math.min(a.y, b.y)));
  const maxY = Math.min(height - 1, Math.ceil(Math.max(a.y, b.y)));
  for (let row = minY; row <= maxY; row += 1) {
    const sampleY = row + 0.5;
    const crosses = (sampleY >= a.y && sampleY < b.y) || (sampleY >= b.y && sampleY < a.y);
    if (!crosses) {
      continue;
    }

    const t = (sampleY - a.y) / deltaY;
    const x = a.x + (b.x - a.x) * t;
    if (Number.isFinite(x)) {
      rows[row].push(x);
    }
  }
}

function groupPlaneSegmentsByConnectivity(segments: PlaneSegment[], tolerance = 1.35) {
  if (segments.length <= 1) {
    return segments.length ? [segments] : [];
  }

  const parents = segments.map((_, index) => index);
  const find = (index: number): number => {
    if (parents[index] !== index) {
      parents[index] = find(parents[index]);
    }
    return parents[index];
  };
  const union = (left: number, right: number) => {
    const leftRoot = find(left);
    const rightRoot = find(right);
    if (leftRoot !== rightRoot) {
      parents[rightRoot] = leftRoot;
    }
  };
  const buckets = new Map<string, Array<{ x: number; y: number; index: number }>>();
  const cellSize = Math.max(tolerance, 0.1);
  const toleranceSquared = tolerance * tolerance;
  const cellKey = (x: number, y: number) => `${x},${y}`;

  segments.forEach((segment, index) => {
    [segment.a, segment.b].forEach((point) => {
      if (!Number.isFinite(point.x) || !Number.isFinite(point.y)) {
        return;
      }

      const cellX = Math.floor(point.x / cellSize);
      const cellY = Math.floor(point.y / cellSize);
      for (let dx = -1; dx <= 1; dx += 1) {
        for (let dy = -1; dy <= 1; dy += 1) {
          const candidates = buckets.get(cellKey(cellX + dx, cellY + dy));
          candidates?.forEach((candidate) => {
            const distanceSquared = (candidate.x - point.x) ** 2 + (candidate.y - point.y) ** 2;
            if (distanceSquared <= toleranceSquared) {
              union(index, candidate.index);
            }
          });
        }
      }

      const key = cellKey(cellX, cellY);
      const bucket = buckets.get(key) ?? [];
      bucket.push({ x: point.x, y: point.y, index });
      buckets.set(key, bucket);
    });
  });

  const groups = new Map<number, PlaneSegment[]>();
  segments.forEach((segment, index) => {
    const root = find(index);
    const group = groups.get(root) ?? [];
    group.push(segment);
    groups.set(root, group);
  });

  return [...groups.values()].sort((left, right) => right.length - left.length);
}

function closeSmallMaskGaps(
  maskData: ImageData,
  width: number,
  height: number,
  rgb: { r: number; g: number; b: number },
  alpha: number,
  maxGap = 2,
) {
  const toFill = new Set<number>();
  const hasPixel = (x: number, y: number) => maskData.data[(y * width + x) * 4 + 3] > 0;
  const mark = (x: number, y: number) => {
    if (x >= 0 && x < width && y >= 0 && y < height && !hasPixel(x, y)) {
      toFill.add(y * width + x);
    }
  };

  for (let y = 0; y < height; y += 1) {
    let lastFilled = -1;
    for (let x = 0; x < width; x += 1) {
      if (!hasPixel(x, y)) {
        continue;
      }
      const gap = x - lastFilled - 1;
      if (lastFilled >= 0 && gap > 0 && gap <= maxGap) {
        for (let fillX = lastFilled + 1; fillX < x; fillX += 1) {
          mark(fillX, y);
        }
      }
      lastFilled = x;
    }
  }

  for (let x = 0; x < width; x += 1) {
    let lastFilled = -1;
    for (let y = 0; y < height; y += 1) {
      if (!hasPixel(x, y)) {
        continue;
      }
      const gap = y - lastFilled - 1;
      if (lastFilled >= 0 && gap > 0 && gap <= maxGap) {
        for (let fillY = lastFilled + 1; fillY < y; fillY += 1) {
          mark(x, fillY);
        }
      }
      lastFilled = y;
    }
  }

  toFill.forEach((index) => {
    const offset = index * 4;
    maskData.data[offset] = rgb.r;
    maskData.data[offset + 1] = rgb.g;
    maskData.data[offset + 2] = rgb.b;
    maskData.data[offset + 3] = alpha;
  });

  return toFill.size;
}

function solidStrokeRadius(width: number, height: number) {
  return Math.max(2.2, Math.min(5.5, Math.max(width, height) * 0.006));
}

function paintMaskPixel(
  maskData: ImageData,
  width: number,
  height: number,
  x: number,
  y: number,
  rgb: { r: number; g: number; b: number },
  alpha: number,
) {
  if (x < 0 || x >= width || y < 0 || y >= height) {
    return 0;
  }

  const offset = (y * width + x) * 4;
  if (maskData.data[offset + 3] > 0) {
    return 0;
  }

  maskData.data[offset] = rgb.r;
  maskData.data[offset + 1] = rgb.g;
  maskData.data[offset + 2] = rgb.b;
  maskData.data[offset + 3] = alpha;
  return 1;
}

function fillSegmentCapsulesIntoMask(
  maskData: ImageData,
  width: number,
  height: number,
  segments: PlaneSegment[],
  rgb: { r: number; g: number; b: number },
  alpha: number,
  radius: number,
) {
  let paintedPixels = 0;
  const radiusSquared = radius * radius;

  segments.forEach(({ a, b }) => {
    if (!Number.isFinite(a.x) || !Number.isFinite(a.y) || !Number.isFinite(b.x) || !Number.isFinite(b.y)) {
      return;
    }

    const dx = b.x - a.x;
    const dy = b.y - a.y;
    const lengthSquared = dx * dx + dy * dy;
    const minX = clamp(Math.floor(Math.min(a.x, b.x) - radius), 0, width - 1);
    const maxX = clamp(Math.ceil(Math.max(a.x, b.x) + radius), 0, width - 1);
    const minY = clamp(Math.floor(Math.min(a.y, b.y) - radius), 0, height - 1);
    const maxY = clamp(Math.ceil(Math.max(a.y, b.y) + radius), 0, height - 1);

    for (let y = minY; y <= maxY; y += 1) {
      for (let x = minX; x <= maxX; x += 1) {
        const px = x + 0.5;
        const py = y + 0.5;
        const t = lengthSquared <= 1e-6
          ? 0
          : clamp(((px - a.x) * dx + (py - a.y) * dy) / lengthSquared, 0, 1);
        const closestX = a.x + dx * t;
        const closestY = a.y + dy * t;
        const distanceSquared = (px - closestX) ** 2 + (py - closestY) ** 2;
        if (distanceSquared <= radiusSquared) {
          paintedPixels += paintMaskPixel(maskData, width, height, x, y, rgb, alpha);
        }
      }
    }
  });

  return paintedPixels;
}

function drawFallbackClosedRegion(
  context: CanvasRenderingContext2D,
  width: number,
  height: number,
  segments: PlaneSegment[],
  color: string,
  opacity: number,
) {
  const points = segments.flatMap((segment) => [segment.a, segment.b])
    .filter((point) => (
      Number.isFinite(point.x)
      && Number.isFinite(point.y)
      && point.x >= -width
      && point.x <= width * 2
      && point.y >= -height
      && point.y <= height * 2
    ));

  if (points.length < 3) {
    return 0;
  }

  const uniquePoints: Point2D[] = [];
  points.forEach((point) => {
    if (!uniquePoints.some((current) => pointDistanceSquared(current, point) < 1e-6)) {
      uniquePoints.push(point);
    }
  });
  if (uniquePoints.length < 3) {
    return 0;
  }

  const sorted = [...uniquePoints].sort((left, right) => (
    Math.abs(left.x - right.x) > 1e-6 ? left.x - right.x : left.y - right.y
  ));
  const cross = (origin: Point2D, a: Point2D, b: Point2D) => (
    (a.x - origin.x) * (b.y - origin.y) - (a.y - origin.y) * (b.x - origin.x)
  );
  const lower: Point2D[] = [];
  sorted.forEach((point) => {
    while (lower.length >= 2 && cross(lower[lower.length - 2], lower[lower.length - 1], point) <= 0) {
      lower.pop();
    }
    lower.push(point);
  });
  const upper: Point2D[] = [];
  [...sorted].reverse().forEach((point) => {
    while (upper.length >= 2 && cross(upper[upper.length - 2], upper[upper.length - 1], point) <= 0) {
      upper.pop();
    }
    upper.push(point);
  });
  const hull = [...lower.slice(0, -1), ...upper.slice(0, -1)];
  const ordered = hull.length >= 3 ? hull : uniquePoints;

  context.save();
  context.globalAlpha = clamp(opacity, 0.1, 1) * 0.62;
  context.fillStyle = color;
  context.beginPath();
  ordered.forEach((point, index) => {
    if (index === 0) {
      context.moveTo(point.x, point.y);
      return;
    }
    context.lineTo(point.x, point.y);
  });
  context.closePath();
  context.fill();
  context.restore();

  return Math.max(1, Math.round(ordered.length / 2));
}

function fillSegmentsAsSolidMask(
  context: CanvasRenderingContext2D,
  width: number,
  height: number,
  segments: PlaneSegment[],
  color: string,
  opacity: number,
) {
  if (!segments.length) {
    return 0;
  }

  const rgb = parseHexColor(color);
  const alpha = Math.round(clamp(opacity, 0.1, 1) * 190);
  const maskCanvas = document.createElement('canvas');
  maskCanvas.width = width;
  maskCanvas.height = height;
  const maskContext = maskCanvas.getContext('2d');
  if (!maskContext) {
    return 0;
  }
  const maskData = maskContext.createImageData(width, height);
  let filledPixels = 0;
  const radius = solidStrokeRadius(width, height);
  const groups = groupPlaneSegmentsByConnectivity(segments, radius * 1.15);
  const fallbackGroups: PlaneSegment[][] = [];

  groups.forEach((group) => {
    const rows: number[][] = Array.from({ length: height }, () => []);
    group.forEach((segment) => addSegmentIntersectionsToRows(rows, width, height, segment));
    let groupPixels = 0;

    rows.forEach((intersections, row) => {
      if (intersections.length < 2) {
        return;
      }

      intersections.sort((left, right) => left - right);
      const cleaned: number[] = [];
      intersections.forEach((x) => {
        const previous = cleaned[cleaned.length - 1];
        if (previous === undefined || Math.abs(previous - x) > 0.35) {
          cleaned.push(x);
        }
      });

      for (let index = 0; index + 1 < cleaned.length; index += 2) {
        const rawStartX = cleaned[index];
        const rawEndX = cleaned[index + 1];
        if (rawEndX < 0 || rawStartX > width - 1) {
          continue;
        }

        const startX = clamp(Math.ceil(rawStartX), 0, width - 1);
        const endX = clamp(Math.floor(rawEndX), 0, width - 1);
        if (endX < startX) {
          continue;
        }

        for (let x = startX; x <= endX; x += 1) {
          const offset = (row * width + x) * 4;
          if (maskData.data[offset + 3] === 0) {
            maskData.data[offset] = rgb.r;
            maskData.data[offset + 1] = rgb.g;
            maskData.data[offset + 2] = rgb.b;
            maskData.data[offset + 3] = alpha;
            groupPixels += 1;
          }
        }
      }
    });
    groupPixels += fillSegmentCapsulesIntoMask(maskData, width, height, group, rgb, alpha, radius);

    filledPixels += groupPixels;
    if (groupPixels < Math.max(20, Math.round(group.length * 0.5)) && group.length >= 3) {
      fallbackGroups.push(group);
    }
  });

  filledPixels += closeSmallMaskGaps(maskData, width, height, rgb, alpha, 3);
  filledPixels += fillInternalMaskHoles(maskData, width, height, rgb, alpha);
  maskContext.putImageData(maskData, 0, 0);
  context.drawImage(maskCanvas, 0, 0);
  fallbackGroups.forEach((group) => {
    filledPixels += drawFallbackClosedRegion(context, width, height, group, color, opacity);
  });

  if (filledPixels === 0) {
    context.save();
    context.globalAlpha = clamp(opacity, 0.1, 1) * 0.42;
    context.strokeStyle = color;
    context.lineWidth = Math.max(0.8, Math.max(width, height) * 0.0012);
    context.lineCap = 'round';
    context.lineJoin = 'round';
    context.beginPath();
    segments.forEach((segment) => {
      context.moveTo(segment.a.x, segment.a.y);
      context.lineTo(segment.b.x, segment.b.y);
    });
    context.stroke();
    context.restore();
  }

  return filledPixels;
}

function drawDicomBaseLayer(canvas: HTMLCanvasElement, preview: DicomPreview) {
  const fovCanvas = getFovCanvasSize(preview);
  canvas.width = fovCanvas.width;
  canvas.height = fovCanvas.height;
  const context = canvas.getContext('2d');
  if (!context) {
    return;
  }

  const binary = atob(preview.pixels);
  const imageData = context.createImageData(fovCanvas.width, fovCanvas.height);
  for (let y = 0; y < fovCanvas.height; y += 1) {
    const sourceY = Math.min(preview.height - 1, Math.floor((y / fovCanvas.height) * preview.height));
    for (let x = 0; x < fovCanvas.width; x += 1) {
      const sourceX = Math.min(preview.width - 1, Math.floor((x / fovCanvas.width) * preview.width));
      const value = binary.charCodeAt(sourceY * preview.width + sourceX);
      const offset = (y * fovCanvas.width + x) * 4;
      imageData.data[offset] = value;
      imageData.data[offset + 1] = value;
      imageData.data[offset + 2] = value;
      imageData.data[offset + 3] = 255;
    }
  }
  context.putImageData(imageData, 0, 0);
}

function drawVoxelOverlayLayer(
  canvas: HTMLCanvasElement,
  preview: DicomPreview,
  files: string[],
  previews: Record<string, ModelPreviewPayload>,
  metricFiles: string[],
  metricPreviews: Record<string, ModelPreviewPayload>,
  moduleStyles: Record<string, ModuleStyle>,
  modelPose: ModelPose,
  slice: number,
  totalSlices: number,
): OverlayStats {
  const fovCanvas = getFovCanvasSize(preview);
  canvas.width = fovCanvas.width;
  canvas.height = fovCanvas.height;
  const context = canvas.getContext('2d');
  if (!context) {
    return { activeModules: 0, filledPixels: 0, segmentCount: 0, modules: [] };
  }

  context.clearRect(0, 0, fovCanvas.width, fovCanvas.height);
  const metrics = getModelSceneMetrics(metricFiles, metricPreviews, preview, totalSlices)
    ?? getModelSceneMetrics(files, previews, preview, totalSlices);
  if (!metrics) {
    return { activeModules: 0, filledPixels: 0, segmentCount: 0, modules: [] };
  }

  const safeSlice = clamp(slice, 0, Math.max(totalSlices - 1, 0));
  const targetZ = totalSlices <= 1
    ? 0
    : -metrics.dicomDepth / 2 + (metrics.dicomDepth * safeSlice) / (totalSlices - 1);
  const mapPoint = (point: Point2D): Point2D => ({
    x: ((point.x + metrics.dicomWidth / 2) / metrics.dicomWidth) * fovCanvas.width,
    y: fovCanvas.height - ((point.y + metrics.dicomHeight / 2) / metrics.dicomHeight) * fovCanvas.height,
  });
  let activeModules = 0;
  let filledPixels = 0;
  let segmentCount = 0;
  const modules: OverlayStats['modules'] = [];

  files.forEach((fileName, index) => {
    const payload = previews[fileName];
    const style = moduleStyles[fileName] ?? {
      visible: true,
      color: moduleColors[index % moduleColors.length],
      opacity: 0.72,
      partId: index + 1,
    };

    if (!payload || style.visible === false) {
      return;
    }

    const segments: PlaneSegment[] = [];

    for (let vertexIndex = 0; vertexIndex < payload.vertices.length; vertexIndex += 9) {
      const a = transformPointForPose(
        payload.vertices[vertexIndex],
        payload.vertices[vertexIndex + 1],
        payload.vertices[vertexIndex + 2],
        metrics,
        modelPose,
      );
      const b = transformPointForPose(
        payload.vertices[vertexIndex + 3],
        payload.vertices[vertexIndex + 4],
        payload.vertices[vertexIndex + 5],
        metrics,
        modelPose,
      );
      const c = transformPointForPose(
        payload.vertices[vertexIndex + 6],
        payload.vertices[vertexIndex + 7],
        payload.vertices[vertexIndex + 8],
        metrics,
        modelPose,
      );
      const segment = intersectTriangleWithPlane(a, b, c, targetZ);

      if (segment) {
        segments.push({
          a: mapPoint(segment.a),
          b: mapPoint(segment.b),
        });
      }
    }

    const modulePixels = fillSegmentsAsSolidMask(context, fovCanvas.width, fovCanvas.height, segments, style.color, style.opacity);
    if (segments.length > 0 || modulePixels > 0) {
      activeModules += 1;
      modules.push({
        fileName,
        name: fileName.replace(/\.stl$/i, ''),
        color: style.color,
        opacity: style.opacity,
        partId: style.partId,
        segmentCount: segments.length,
        filledPixels: modulePixels,
      });
    }
    filledPixels += modulePixels;
    segmentCount += segments.length;
  });

  return { activeModules, filledPixels, segmentCount, modules };
}

export function VoxelizationMappingView({
  project,
  moduleStyles,
  modelPose,
  detailLimit,
  slice,
  totalSlices,
  onSliceChange,
  displayMode,
  rotation,
  variant = 'workspace',
  toolbar,
  overlayPlacement,
  onOverlayStatsChange,
}: {
  project: Project | null;
  moduleStyles: Record<string, ModuleStyle>;
  modelPose: ModelPose;
  detailLimit: number;
  slice: number;
  totalSlices: number;
  onSliceChange: (slice: number) => void;
  displayMode: MappingDisplayMode;
  rotation: number;
  variant?: 'workspace' | 'library';
  toolbar?: React.ReactNode;
  overlayPlacement?: 'bottom' | 'side' | 'none';
  onOverlayStatsChange?: (stats: OverlayStats, visibleModuleCount: number) => void;
}) {
  const baseCanvasRef = useRef<HTMLCanvasElement | null>(null);
  const overlayCanvasRef = useRef<HTMLCanvasElement | null>(null);
  const mappingViewportRef = useRef<HTMLDivElement | null>(null);
  const [dicomPreview, setDicomPreview] = useState<DicomPreview | null>(null);
  const [modelPreviews, setModelPreviews] = useState<Record<string, ModelPreviewPayload>>({});
  const [metricPreviews, setMetricPreviews] = useState<Record<string, ModelPreviewPayload>>({});
  const [metricPreviewsLoaded, setMetricPreviewsLoaded] = useState(false);
  const [dicomStatus, setDicomStatus] = useState('等待 DICOM 切片');
  const [overlayStatus, setOverlayStatus] = useState('等待 STL 映射');
  const [overlayStats, setOverlayStats] = useState<OverlayStats>({ activeModules: 0, filledPixels: 0, segmentCount: 0, modules: [] });
  const [overlayLoadState, setOverlayLoadState] = useState({ loading: false, loaded: 0, total: 0, phase: '' });
  const [mappingViewport, setMappingViewport] = useState({ scale: 1, offsetX: 0, offsetY: 0 });
  const mappingPanRef = useRef({
    active: false,
    pointerId: 0,
    startX: 0,
    startY: 0,
    offsetX: 0,
    offsetY: 0,
  });
  const maxSlice = Math.max(totalSlices - 1, 0);
  const safeSlice = clamp(slice, 0, maxSlice);
  const stlFiles = project?.stlFiles ?? [];
  const stlFileSignature = stlFiles.join('|');
  const visibleStlFiles = stlFiles.filter((fileName) => moduleStyles[fileName]?.visible !== false);
  const visibleStlFileSignature = visibleStlFiles.join('|');
  const visibleModuleCount = visibleStlFiles.length;
  const metricPreviewsReady = !stlFiles.length || metricPreviewsLoaded;
  const isLibraryVariant = variant === 'library';
  const activeOverlayPlacement = overlayPlacement ?? (isLibraryVariant ? 'side' : 'bottom');

  useEffect(() => {
    onOverlayStatsChange?.(overlayStats, visibleModuleCount);
  }, [onOverlayStatsChange, overlayStats, visibleModuleCount]);

  useEffect(() => {
    if (!project?.dicomCount) {
      setDicomPreview(null);
      setDicomStatus('没有可显示的 DICOM 切片');
      return;
    }

    let disposed = false;
    setDicomStatus('正在载入 DICOM Base Layer...');
    getCachedDicomPreview(project.id, safeSlice, 'axial', displayMode)
      .then((preview) => {
        if (disposed) return;
        setDicomPreview(preview);
        setDicomStatus('DICOM Base Layer 已就绪');
      })
      .catch((error) => {
        if (disposed) return;
        setDicomPreview(null);
        setDicomStatus(error instanceof Error ? error.message : 'DICOM 切片载入失败');
      });

    return () => {
      disposed = true;
    };
  }, [project?.id, project?.dicomCount, safeSlice, displayMode]);

  useEffect(() => {
    if (!project || !stlFiles.length) {
      setMetricPreviews({});
      setMetricPreviewsLoaded(true);
      return;
    }

    let disposed = false;
    setMetricPreviews({});
    setMetricPreviewsLoaded(false);
    Promise.allSettled(stlFiles.map((fileName) => (
      getCachedModelPreview(project.id, fileName, 1000)
        .then((payload) => ({ fileName, payload }))
    ))).then((results) => {
      if (disposed) return;
      const nextPreviews: Record<string, ModelPreviewPayload> = {};
      results.forEach((result) => {
        if (result.status === 'fulfilled') {
          nextPreviews[result.value.fileName] = result.value.payload;
        }
      });
      setMetricPreviews(nextPreviews);
      setMetricPreviewsLoaded(true);
    });

    return () => {
      disposed = true;
    };
  }, [project?.id, stlFileSignature]);

  useEffect(() => {
    if (!project || !visibleStlFiles.length) {
      setModelPreviews({});
      setOverlayStats({ activeModules: 0, filledPixels: 0, segmentCount: 0, modules: [] });
      setOverlayLoadState({ loading: false, loaded: 0, total: 0, phase: '' });
      setOverlayStatus(stlFiles.length ? '当前没有可见 STL 构件' : '当前项目没有 STL 构件');
      return;
    }

    let disposed = false;
    let loaded = 0;
    const total = visibleStlFiles.length;
    const previewLimit = Math.max(detailLimit, 800000);
    const updateLoadProgress = (phase: string) => {
      if (!disposed) {
        setOverlayLoadState({ loading: true, loaded, total, phase });
      }
    };

    setModelPreviews({});
    setOverlayStats({ activeModules: 0, filledPixels: 0, segmentCount: 0, modules: [] });
    setOverlayLoadState({ loading: true, loaded: 0, total, phase: '正在载入可见构件' });
    setOverlayStatus('正在载入可见 STL 构件层级...');
    Promise.allSettled(visibleStlFiles.map((fileName) => (
      getCachedModelPreview(project.id, fileName, previewLimit)
        .then((payload) => {
          loaded += 1;
          updateLoadProgress(fileName.replace(/\.stl$/i, ''));
          return { fileName, payload };
        })
        .catch((error) => {
          loaded += 1;
          updateLoadProgress(`${fileName.replace(/\.stl$/i, '')} 载入失败`);
          throw error;
        })
    ))).then((results) => {
      if (disposed) return;
      const nextPreviews: Record<string, ModelPreviewPayload> = {};
      results.forEach((result) => {
        if (result.status === 'fulfilled') {
          nextPreviews[result.value.fileName] = result.value.payload;
        }
      });
      setModelPreviews(nextPreviews);
      setOverlayLoadState({ loading: false, loaded: total, total, phase: '' });
      setOverlayStatus(Object.keys(nextPreviews).length ? 'Overlay Label Map 已就绪' : 'Overlay Layer 无可用 STL 数据');
    });

    return () => {
      disposed = true;
    };
  }, [project?.id, stlFileSignature, visibleStlFileSignature, detailLimit]);

  useEffect(() => {
    const canvas = baseCanvasRef.current;
    if (!canvas || !dicomPreview) {
      return;
    }
    drawDicomBaseLayer(canvas, dicomPreview);
  }, [dicomPreview]);

  useEffect(() => {
    const canvas = overlayCanvasRef.current;
    if (!canvas || !dicomPreview) {
      return;
    }
    if (!metricPreviewsReady) {
      const context = canvas.getContext('2d');
      context?.clearRect(0, 0, canvas.width, canvas.height);
      setOverlayStats({ activeModules: 0, filledPixels: 0, segmentCount: 0, modules: [] });
      setOverlayStatus('正在计算全局模型边界...');
      return;
    }
    const frame = window.requestAnimationFrame(() => {
      const stats = drawVoxelOverlayLayer(
        canvas,
        dicomPreview,
        visibleStlFiles,
        modelPreviews,
        stlFiles,
        metricPreviews,
        moduleStyles,
        modelPose,
        safeSlice,
        Math.max(totalSlices, 1),
      );
      setOverlayStats(stats);
    });

    return () => window.cancelAnimationFrame(frame);
  }, [
    dicomPreview,
    stlFileSignature,
    visibleStlFileSignature,
    modelPreviews,
    metricPreviews,
    metricPreviewsReady,
    JSON.stringify(moduleStyles),
    modelPose.rotateX,
    modelPose.rotateY,
    modelPose.rotateZ,
    modelPose.translateX,
    modelPose.translateY,
    modelPose.translateZ,
    modelPose.scale,
    modelPose.flipX,
    modelPose.flipY,
    modelPose.flipZ,
    safeSlice,
    totalSlices,
  ]);

  useEffect(() => {
    const element = mappingViewportRef.current;
    if (!element) {
      return;
    }

    const handleWheel = (event: WheelEvent) => {
      event.preventDefault();
      const scaleFactor = event.deltaY > 0 ? 0.9 : 1.1;
      setMappingViewport((current) => ({
        ...current,
        scale: clamp(current.scale * scaleFactor, 0.45, 6),
      }));
    };

    element.addEventListener('wheel', handleWheel, { passive: false });
    return () => {
      element.removeEventListener('wheel', handleWheel);
    };
  }, [isLibraryVariant]);

  const stepSlice = (delta: number) => {
    onSliceChange(clamp(safeSlice + delta, 0, maxSlice));
  };
  const sliderSliceValue = safeSlice;
  const displaySliceNumber = getDicomDisplaySliceNumber(safeSlice, Math.max(totalSlices, 1));
  const resetMappingViewport = () => {
    setMappingViewport({ scale: 1, offsetX: 0, offsetY: 0 });
  };
  const handleMappingPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
    if (event.button !== 0) {
      return;
    }
    mappingPanRef.current = {
      active: true,
      pointerId: event.pointerId,
      startX: event.clientX,
      startY: event.clientY,
      offsetX: mappingViewport.offsetX,
      offsetY: mappingViewport.offsetY,
    };
    event.currentTarget.setPointerCapture(event.pointerId);
  };
  const handleMappingPointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
    const dragState = mappingPanRef.current;
    if (!dragState.active || dragState.pointerId !== event.pointerId) {
      return;
    }
    setMappingViewport((current) => ({
      ...current,
      offsetX: dragState.offsetX + event.clientX - dragState.startX,
      offsetY: dragState.offsetY + event.clientY - dragState.startY,
    }));
  };
  const stopMappingPointerDrag = (event: React.PointerEvent<HTMLDivElement>) => {
    const dragState = mappingPanRef.current;
    if (!dragState.active || dragState.pointerId !== event.pointerId) {
      return;
    }
    mappingPanRef.current = { ...dragState, active: false };
    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
      event.currentTarget.releasePointerCapture(event.pointerId);
    }
  };
  const renderOverlayLoadProgress = (tone: 'dark' | 'light') => {
    if (!overlayLoadState.loading || !overlayLoadState.total) {
      return null;
    }

    const percent = Math.round((overlayLoadState.loaded / overlayLoadState.total) * 100);
    const isDark = tone === 'dark';
    return (
      <div className={`pointer-events-none absolute left-4 top-4 z-20 w-64 rounded-xl border px-3 py-2 shadow-lg backdrop-blur-md ${
        isDark
          ? 'border-white/10 bg-black/70 text-white'
          : 'border-slate-200 bg-white/90 text-slate-700'
      }`}>
        <div className="flex items-center justify-between gap-3 text-[10px] font-bold">
          <span className={`min-w-0 truncate ${isDark ? 'text-cyan-100' : 'text-cyan-700'}`}>
            构件层级加载中
          </span>
          <span className={`font-mono ${isDark ? 'text-white/70' : 'text-slate-500'}`}>
            {overlayLoadState.loaded}/{overlayLoadState.total}
          </span>
        </div>
        <div className={`mt-2 h-1.5 overflow-hidden rounded-full ${isDark ? 'bg-white/10' : 'bg-slate-200'}`}>
          <div
            className="h-full rounded-full bg-cyan-400 transition-[width] duration-200"
            style={{ width: `${percent}%` }}
          />
        </div>
        <div className={`mt-1 flex items-center justify-between gap-3 text-[9px] font-bold ${isDark ? 'text-white/45' : 'text-slate-400'}`}>
          <span className="min-w-0 truncate">{overlayLoadState.phase || overlayStatus}</span>
          <span className="font-mono">{percent}%</span>
        </div>
      </div>
    );
  };
  const renderOverlaySummary = (placement: 'bottom' | 'side') => (
    <div className={`${placement === 'side' ? 'w-full rounded-2xl border border-white/10 bg-black/40 p-2' : 'border-t border-white/10 bg-[#030712] px-4 py-3'}`}>
      <div className={`mb-2 flex gap-2 text-[10px] font-bold text-white/60 ${placement === 'side' ? 'flex-col' : 'items-center justify-between'}`}>
        <span className="truncate">Overlay Label Map</span>
        <span className="font-mono text-cyan-100">
          {overlayStats.activeModules}/{visibleModuleCount} 构件 · {overlayStats.segmentCount} 边 · {overlayStats.filledPixels} px
        </span>
      </div>
      <div className={`${placement === 'side' ? 'max-h-44' : 'max-h-24'} overflow-auto pr-1`}>
        {overlayStats.modules.length ? (
          <div className={`grid gap-1.5 ${placement === 'side' ? 'grid-cols-1' : 'grid-cols-2 xl:grid-cols-3'}`}>
            {overlayStats.modules.map((item) => (
              <div key={item.fileName} className="grid grid-cols-[10px_1fr_auto] items-center gap-1 rounded-md border border-white/10 bg-white/5 px-1.5 py-1 text-[8px] font-bold text-white/65">
                <span className="h-2 w-2 rounded-sm border border-white/30" style={{ backgroundColor: item.color, opacity: item.opacity }} />
                <span className="min-w-0 truncate">{item.name}</span>
                <span className="font-mono text-cyan-100">ID {item.partId}</span>
                <span className="col-start-2 font-mono text-white/35">{item.segmentCount} 边</span>
                <span className="font-mono text-white/35">{item.filledPixels} px</span>
              </div>
            ))}
          </div>
        ) : (
          <div className="rounded-lg border border-white/10 bg-white/5 px-2 py-1.5 text-[9px] font-bold text-white/35">
            当前切片暂无可见构件
          </div>
        )}
      </div>
    </div>
  );

  if (isLibraryVariant) {
    return (
      <div className="relative flex h-full min-h-[560px] flex-col overflow-hidden rounded-3xl border border-slate-800 bg-black shadow-xl">
        <div className="flex items-center justify-between gap-3 border-b border-white/10 bg-[#030712] px-4 py-3">
          <div className="min-w-0 rounded-xl border border-white/10 bg-black/60 px-3 py-2 text-[11px] font-bold text-white/70">
            逆向分割映射视图
          </div>
          <div className="flex min-w-0 flex-wrap items-center justify-end gap-1.5">
            {toolbar}
            <button
              onClick={resetMappingViewport}
              className="flex h-8 shrink-0 items-center gap-1.5 rounded-xl border border-white/10 bg-black/60 px-3 text-[10px] font-bold text-white/70 shadow-lg hover:border-cyan-300/30 hover:text-cyan-100"
              title="重置逆向分割映射视图位置"
            >
              <RefreshCcw size={13} />
              位置重置
            </button>
          </div>
        </div>

        <div className={`grid min-h-0 flex-1 ${activeOverlayPlacement === 'side' ? 'grid-cols-[minmax(0,1fr)_188px]' : 'grid-cols-[minmax(0,1fr)_56px]'} bg-black`}>
          <div
            className="flex min-h-0 flex-col"
          >
            <div
              ref={mappingViewportRef}
              className={`relative min-h-0 flex-1 touch-none overflow-hidden bg-black ${mappingPanRef.current.active ? 'cursor-grabbing' : 'cursor-grab'}`}
              onPointerDown={handleMappingPointerDown}
              onPointerMove={handleMappingPointerMove}
              onPointerUp={stopMappingPointerDrag}
              onPointerCancel={stopMappingPointerDrag}
            >
              {dicomPreview ? (
                <div
                  className="absolute inset-0 flex items-center justify-center"
                  style={{
                    transform: `translate3d(${mappingViewport.offsetX}px, ${mappingViewport.offsetY}px, 0) rotate(${rotation}deg) scale(${mappingViewport.scale})`,
                    transformOrigin: 'center center',
                  }}
                >
                  <canvas ref={baseCanvasRef} className="absolute inset-0 h-full w-full object-contain" />
                  <canvas ref={overlayCanvasRef} className="absolute inset-0 h-full w-full object-contain" />
                </div>
              ) : (
                <div className="absolute inset-0 flex items-center justify-center px-8 text-center text-xs font-bold text-white/40">
                  {dicomStatus}
                </div>
              )}
              {renderOverlayLoadProgress('dark')}
              <div className="pointer-events-none absolute bottom-4 right-4 rounded-xl border border-white/10 bg-black/70 px-3 py-2 text-right shadow-lg">
                <p className="text-[9px] font-bold text-white/45">DICOM 切片位置</p>
                <p className="mt-1 font-mono text-[12px] font-bold text-cyan-100">
                  {displaySliceNumber} / {Math.max(totalSlices, 1)}
                </p>
              </div>
            </div>
            {activeOverlayPlacement === 'bottom' && renderOverlaySummary('bottom')}
          </div>

          <aside className="flex min-h-0 flex-col items-center gap-3 border-l border-white/10 bg-[#0f172a] px-2 py-5">
            <div className="relative min-h-[220px] w-8 flex-1">
              <div className="absolute inset-y-0 left-1/2 w-1.5 -translate-x-1/2 rounded-full bg-white/10" />
              <input
                type="range"
                min="0"
                max={maxSlice}
                value={sliderSliceValue}
                onChange={(event) => onSliceChange(Number(event.target.value))}
                className="mapping-slice-dark-vertical-input"
                aria-label="项目库逆向分割映射视图切片导航"
              />
            </div>
            {activeOverlayPlacement === 'side' && renderOverlaySummary('side')}
          </aside>
        </div>
      </div>
    );
  }

  return (
    <div className="relative flex h-full min-h-[520px] flex-col overflow-hidden rounded-3xl border border-slate-100 bg-white shadow-sm">
      <div className="flex items-center justify-between gap-3 border-b border-slate-100 bg-white px-4 py-3">
        <div className="flex min-w-0 flex-wrap items-center gap-2">
          <span className="rounded-lg border border-slate-200 bg-slate-50 px-2.5 py-1 text-[9px] font-bold uppercase tracking-widest text-slate-600">
            Base DICOM
          </span>
          <span className="rounded-lg border border-cyan-200 bg-cyan-50 px-2.5 py-1 text-[9px] font-bold uppercase tracking-widest text-cyan-700">
            Overlay Label Map
          </span>
          <span className="rounded-lg bg-slate-100 px-2.5 py-1 text-[9px] font-mono font-bold text-slate-500">
            Z {displaySliceNumber}/{Math.max(totalSlices, 1)}
          </span>
        </div>
        <button
          onClick={resetMappingViewport}
          className="flex h-8 shrink-0 items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-3 text-[10px] font-bold text-slate-600 shadow-sm hover:border-cyan-200 hover:bg-cyan-50 hover:text-cyan-700"
          title="重置逆向分割映射视图位置"
        >
          <RefreshCcw size={13} />
          位置重置
        </button>
      </div>

      <div className="grid min-h-0 flex-1 grid-cols-[minmax(0,1fr)_110px]">
        <div className="flex min-h-0 flex-col">
          <div
            ref={mappingViewportRef}
            className={`relative min-h-0 flex-1 touch-none overflow-hidden bg-black ${mappingPanRef.current.active ? 'cursor-grabbing' : 'cursor-grab'}`}
            onPointerDown={handleMappingPointerDown}
            onPointerMove={handleMappingPointerMove}
            onPointerUp={stopMappingPointerDrag}
            onPointerCancel={stopMappingPointerDrag}
          >
            {dicomPreview ? (
              <div
                className="absolute inset-0 flex items-center justify-center"
                style={{
                  transform: `translate3d(${mappingViewport.offsetX}px, ${mappingViewport.offsetY}px, 0) rotate(${rotation}deg) scale(${mappingViewport.scale})`,
                  transformOrigin: 'center center',
                }}
              >
                <canvas ref={baseCanvasRef} className="absolute inset-0 h-full w-full object-contain" />
                <canvas ref={overlayCanvasRef} className="absolute inset-0 h-full w-full object-contain" />
              </div>
            ) : (
              <div className="absolute inset-0 flex items-center justify-center px-8 text-center text-xs font-bold text-white/40">
                {dicomStatus}
              </div>
            )}
            {renderOverlayLoadProgress('dark')}
          </div>

          <div className="border-t border-slate-100 bg-white px-4 py-3">
            <div className="mb-2 flex items-center justify-between gap-3 text-[10px] font-bold text-slate-600">
              <span className="truncate">Overlay Label Map</span>
              <span className="font-mono text-cyan-700">
                {overlayStats.activeModules}/{visibleModuleCount} 构件 · {overlayStats.segmentCount} 边 · {overlayStats.filledPixels} px
              </span>
            </div>
            <div className="max-h-24 overflow-auto pr-1">
              {overlayStats.modules.length ? (
                <div className="grid grid-cols-2 gap-1.5 xl:grid-cols-3">
                  {overlayStats.modules.map((item) => (
                    <div key={item.fileName} className="grid grid-cols-[10px_1fr_auto] items-center gap-1 rounded-md border border-slate-100 bg-slate-50 px-1.5 py-1 text-[8px] font-bold text-slate-600">
                      <span className="h-2 w-2 rounded-sm border border-white" style={{ backgroundColor: item.color, opacity: item.opacity }} />
                      <span className="min-w-0 truncate">{item.name}</span>
                      <span className="font-mono text-cyan-700">ID {item.partId}</span>
                      <span className="col-start-2 font-mono text-slate-400">{item.segmentCount} 边</span>
                      <span className="font-mono text-slate-400">{item.filledPixels} px</span>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="rounded-lg border border-slate-100 bg-slate-50 px-2 py-1.5 text-[9px] font-bold text-slate-400">
                  当前切片暂无可见构件
                </div>
              )}
            </div>
          </div>
        </div>

        <aside className="flex min-h-0 flex-col items-center gap-3 border-l border-slate-100 bg-white px-3 py-4">
          <div className="w-full rounded-2xl border border-slate-100 bg-white px-2 py-3 text-center shadow-sm">
            <p className="text-[10px] font-bold text-slate-700">DICOM 切片位置</p>
            <span className="mt-1 block font-mono text-[10px] font-bold text-blue-600">
              {displaySliceNumber} / {Math.max(totalSlices, 1)}
            </span>
          </div>
          <button
            onClick={() => stepSlice(1)}
            disabled={safeSlice >= maxSlice}
            className="flex h-8 w-8 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-500 shadow-sm hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600 disabled:opacity-35"
            title="上一层"
          >
            <ChevronUp size={16} />
          </button>
          <div className="relative min-h-[240px] w-10 flex-1">
            <div className="absolute inset-y-0 left-1/2 w-2 -translate-x-1/2 rounded-full bg-slate-200" />
            <input
              type="range"
              min="0"
              max={maxSlice}
              value={sliderSliceValue}
              onChange={(event) => onSliceChange(Number(event.target.value))}
              className="mapping-slice-vertical-input"
              aria-label="逆向分割映射视图切片导航"
            />
          </div>
          <button
            onClick={() => stepSlice(-1)}
            disabled={safeSlice <= 0}
            className="flex h-8 w-8 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-500 shadow-sm hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600 disabled:opacity-35"
            title="下一层"
          >
            <ChevronDown size={16} />
          </button>
          <div className="grid w-full grid-cols-1 gap-1 text-center text-[9px] font-bold text-slate-500">
            <span>顶层 1</span>
            <span className="text-blue-600">当前 {displaySliceNumber}</span>
            <span>底层 {Math.max(totalSlices, 1)}</span>
          </div>
        </aside>
      </div>
    </div>
  );
}

export default function ReverseWorkspace({
  projectId,
  onLeaveGuardChange,
}: {
  projectId: string;
  onLeaveGuardChange?: (handler: WorkspaceLeaveGuard | null) => void;
}) {
  const [sliceStart, setSliceStart] = useState(0);
  const [sliceEnd, setSliceEnd] = useState(49);
  const [mappingSlice, setMappingSlice] = useState(0);
  const [modelPose, setModelPose] = useState<ModelPose>(defaultModelPose);
  const [poseValueDrafts, setPoseValueDrafts] = useState<PoseDraftValues>(() => formatPoseDraftValues(defaultModelPose));
  const [focusedPoseInput, setFocusedPoseInput] = useState<ModelPoseKey | null>(null);
  const [poseImportStatus, setPoseImportStatus] = useState('');
  const [displayLevel, setDisplayLevel] = useState<DisplayLevel>('standard');
  const [dicomOpacityLevel, setDicomOpacityLevel] = useState<DicomOpacityLevel>('low');
  const [mappingDisplayMode, setMappingDisplayMode] = useState<MappingDisplayMode>('soft');
  const [mappingRotation, setMappingRotation] = useState(0);
  const [showBounds, setShowBounds] = useState(true);
  const [cutEnabled, setCutEnabled] = useState(false);
  const [moduleStyles, setModuleStyles] = useState<Record<string, ModuleStyle>>({});
  const [savedPoses, setSavedPoses] = useState<SavedModelPose[]>(defaultSavedPoses);
  const [selectedPoseId, setSelectedPoseId] = useState('default');
  const [showExportMenu, setShowExportMenu] = useState(false);
  const [exportSelection, setExportSelection] = useState<Record<ProjectExportTarget, boolean>>({
    dicom: false,
    segmentation: true,
    pose: true,
    stl: false,
  });
  const [segmentationExportScope, setSegmentationExportScope] = useState<SegmentationExportScope>('visible');
  const [segmentationExportMode, setSegmentationExportMode] = useState<SegmentationExportMode>('combined');
  const [project, setProject] = useState<Project | null>(null);
  const [fusionVolume, setFusionVolume] = useState<DicomFusionVolume | null>(null);
  const [fusionError, setFusionError] = useState('');
  const [saveStatus, setSaveStatus] = useState('');
  const [exporting, setExporting] = useState(false);
  const [stretchingAxis, setStretchingAxis] = useState<AxisKey | null>(null);
  const modelBoundsCacheRef = useRef(new Map<string, { min: THREE.Vector3; max: THREE.Vector3 }>());
  const [workspaceLoadState, setWorkspaceLoadState] = useState<WorkspaceLoadState>({
    ready: false,
    phase: '正在读取项目配置...',
    loaded: 0,
    total: 1,
    startedAt: Date.now(),
    error: '',
  });
  const workspaceLoadProjectRef = useRef('');
  const poseRepeatRef = useRef<{ timeout: number | null; interval: number | null }>({ timeout: null, interval: null });
  const poseImportInputRef = useRef<HTMLInputElement | null>(null);
  const visualToolbarScrollRef = useRef<HTMLDivElement | null>(null);
  const saveToastTimerRef = useRef<number | null>(null);
  const savedWorkspaceSnapshotRef = useRef('');
  const initialZStretchRef = useRef<{ projectId: string; pending: boolean }>({ projectId: '', pending: false });

  const handleExportSelected = async () => {
    const selectedItems = exportOptions
      .filter((option) => exportSelection[option.id])
      .map((option) => option.id);
    if (!selectedItems.length) {
      setFusionError('请至少选择一个导出内容');
      return;
    }

    setExporting(true);
    setFusionError('');
    try {
      await downloadProjectExportBundle(projectId, selectedItems, 'nii.gz', {
        pose: modelPose,
        segmentationScope: segmentationExportScope,
        segmentationExportMode,
        moduleStyles,
      });
      window.setTimeout(() => setExporting(false), 900);
      setShowExportMenu(false);
    } catch (error) {
      setFusionError(error instanceof Error ? error.message : '导出失败');
      setExporting(false);
    }
  };

  const getCurrentWorkspaceSnapshot = useCallback(() => createWorkspaceSnapshot({
    modelPose,
    segmentationExportScope,
    moduleStyles,
    sliceStart,
    sliceEnd,
    mappingSlice,
    displayLevel,
    dicomOpacityLevel,
    showBounds,
    cutEnabled,
  }), [
    modelPose,
    segmentationExportScope,
    moduleStyles,
    sliceStart,
    sliceEnd,
    mappingSlice,
    displayLevel,
    dicomOpacityLevel,
    showBounds,
    cutEnabled,
  ]);

  const handleSaveSegmentationResult = useCallback(async (options: { showToast?: boolean } = {}) => {
    if (!project) {
      return false;
    }

    setFusionError('');
    setSaveStatus('');
    try {
      const updated = await api.saveProjectSegmentationResult(project.id, {
        name: '逆向分割结果',
        pose: modelPose,
        segmentationScope: segmentationExportScope,
        moduleStyles,
        sliceStart: clamp(sliceStart, 0, Math.max(project.dicomCount - 1, 0)),
        sliceEnd: clamp(sliceEnd, 0, Math.max(project.dicomCount - 1, 0)),
        mappingSlice: clamp(mappingSlice, 0, Math.max(project.dicomCount - 1, 0)),
        displayLevel,
        dicomOpacityLevel,
        showBounds,
        cutEnabled,
      });
      setProject(updated);
      savedWorkspaceSnapshotRef.current = getCurrentWorkspaceSnapshot();
      if (options.showToast !== false) {
        setSaveStatus('已保存至项目库的分割结果区域');
      }
      return true;
    } catch (error) {
      const message = error instanceof Error ? error.message : '保存至项目库失败';
      setFusionError(message);
      if (options.showToast === false) {
        window.alert(message);
      }
      return false;
    }
  }, [
    project,
    modelPose,
    segmentationExportScope,
    moduleStyles,
    sliceStart,
    sliceEnd,
    mappingSlice,
    displayLevel,
    dicomOpacityLevel,
    showBounds,
    cutEnabled,
    getCurrentWorkspaceSnapshot,
  ]);

  useEffect(() => {
    if (!saveStatus) {
      return undefined;
    }

    if (saveToastTimerRef.current !== null) {
      window.clearTimeout(saveToastTimerRef.current);
    }
    saveToastTimerRef.current = window.setTimeout(() => {
      setSaveStatus('');
      saveToastTimerRef.current = null;
    }, 2600);

    return () => {
      if (saveToastTimerRef.current !== null) {
        window.clearTimeout(saveToastTimerRef.current);
        saveToastTimerRef.current = null;
      }
    };
  }, [saveStatus]);

  useEffect(() => {
    if (!onLeaveGuardChange) {
      return undefined;
    }

    onLeaveGuardChange(async () => {
      if (!project) {
        return true;
      }
      if (project.locked) {
        return true;
      }
      if (savedWorkspaceSnapshotRef.current === getCurrentWorkspaceSnapshot()) {
        return true;
      }
      const shouldSave = window.confirm('是否保存当前结果至项目库？ 确定：保存后退出。取消：直接退出，不保存当前结果。');
      if (!shouldSave) {
        return true;
      }
      return handleSaveSegmentationResult({ showToast: false });
    });

    return () => onLeaveGuardChange(null);
  }, [getCurrentWorkspaceSnapshot, handleSaveSegmentationResult, onLeaveGuardChange, project]);

  const makeDefaultModuleStyle = (index: number, fallback?: Partial<ModuleStyle>): ModuleStyle => ({
    visible: fallback?.visible ?? true,
    color: fallback?.color ?? moduleColors[index % moduleColors.length],
    opacity: fallback?.opacity ?? 0.72,
    partId: clamp(Math.round(fallback?.partId ?? index + 1), 1, 255),
  });

  const commitModuleStyles = (next: Record<string, ModuleStyle>) => {
    setModuleStyles(next);
    if (!project) {
      return;
    }
    api.updateProjectModuleStyles(project.id, next)
      .then((updated) => {
        setProject(updated);
      })
      .catch(() => {
        setFusionError('构件样式保存失败，请稍后重试');
      });
  };

  const loadFusionVolume = async (start: number, end: number) => {
    if (!project?.dicomCount) return null;
    const maxSliceValue = Math.max(project.dicomCount - 1, 0);
    const safeA = clamp(start, 0, maxSliceValue);
    const safeB = clamp(end, 0, maxSliceValue);
    const safeStart = Math.min(safeA, safeB);
    const rangeEnd = Math.max(safeA, safeB);
    const volumePayload = await getCachedDicomFusionVolume(project.id, safeStart, rangeEnd, 'soft');
    return volumePayload;
  };

  const loadGlobalModelBounds = async () => {
    if (!project) {
      return null;
    }
    const modelFiles = project.stlFiles ?? [];
    const cacheKey = `${project.id}:global:${modelFiles.join('|')}`;
    const cached = modelBoundsCacheRef.current.get(cacheKey);
    if (cached) {
      return cached;
    }

    const modelBox = new THREE.Box3();
    const results = await Promise.allSettled(modelFiles.map((fileName) => (
      getCachedModelPreview(project.id, fileName, 1000)
    )));
    results.forEach((result) => {
      if (result.status !== 'fulfilled' || !result.value.bounds) {
        return;
      }
      modelBox.expandByPoint(new THREE.Vector3(result.value.bounds.min.x, result.value.bounds.min.y, result.value.bounds.min.z));
      modelBox.expandByPoint(new THREE.Vector3(result.value.bounds.max.x, result.value.bounds.max.y, result.value.bounds.max.z));
    });

    if (modelBox.isEmpty()) {
      return null;
    }
    const bounds = { min: modelBox.min.clone(), max: modelBox.max.clone() };
    modelBoundsCacheRef.current.set(cacheKey, bounds);
    return bounds;
  };

  const applyModelStretchByAxis = async (axis: AxisKey, options: { silentInitial?: boolean } = {}) => {
    if (!project || !fusionVolume) {
      setFusionError('请等待 DICOM 与 STL 数据加载完成后再拉伸模型');
      return;
    }
    if (!isOrthogonalModelPose(modelPose)) {
      setPoseImportStatus('');
      setFusionError('模型拉伸仅在旋转 X/Y/Z 均为 90° 的整数倍时可用');
      return;
    }

    setStretchingAxis(axis);
    setFusionError('');
    try {
      const bounds = await loadGlobalModelBounds();
      if (!bounds) {
        throw new Error('未获取到 STL 构件边界');
      }
      const rawSize = new THREE.Vector3().subVectors(bounds.max, bounds.min);
      const rotatedSize = getRotatedModelSize(bounds, modelPose);
      const maxModelSize = Math.max(rawSize.x, rawSize.y, rawSize.z, 1);
      const maxPhysical = Math.max(
        fusionVolume.physicalSize.width,
        fusionVolume.physicalSize.height,
        fusionVolume.physicalSize.depth,
        1,
      );
      const baseExtent = 4.6;
      const dicomSize = {
        x: (fusionVolume.physicalSize.width / maxPhysical) * baseExtent,
        y: (fusionVolume.physicalSize.height / maxPhysical) * baseExtent,
        z: Math.max((fusionVolume.physicalSize.depth / maxPhysical) * baseExtent, 0.18),
      };
      const baseScale = (Math.max(dicomSize.x, dicomSize.y, dicomSize.z) / maxModelSize) * 0.92;
      const rotatedAxisSize = Math.max(rotatedSize[axis], 1e-6);
      const axisFitScale = dicomSize[axis] / (rotatedAxisSize * baseScale);
      const containmentScale = Math.min(
        dicomSize.x / (Math.max(rotatedSize.x, 1e-6) * baseScale),
        dicomSize.y / (Math.max(rotatedSize.y, 1e-6) * baseScale),
        dicomSize.z / (Math.max(rotatedSize.z, 1e-6) * baseScale),
      );
      const nextScale = clampPoseValue('scale', Math.min(axisFitScale, containmentScale));
      const nextPose = { ...modelPose, scale: nextScale };
      updateModelPose({ scale: nextScale }, { markCustom: !options.silentInitial, keepStatus: true });
      setPoseImportStatus('');
      if (options.silentInitial) {
        savedWorkspaceSnapshotRef.current = createWorkspaceSnapshot({
          modelPose: nextPose,
          segmentationExportScope,
          moduleStyles,
          sliceStart,
          sliceEnd,
          mappingSlice,
          displayLevel,
          dicomOpacityLevel,
          showBounds,
          cutEnabled,
        });
      }
    } catch (error) {
      setFusionError(error instanceof Error ? error.message : '模型自动拉伸失败');
    } finally {
      setStretchingAxis(null);
    }
  };

  useEffect(() => {
    workspaceLoadProjectRef.current = '';
    setWorkspaceLoadState({
      ready: false,
      phase: '正在读取项目配置...',
      loaded: 0,
      total: 1,
      startedAt: Date.now(),
      error: '',
    });
    api.getProject(projectId).then((item) => {
      setProject(item);
      if (item.locked) {
        setFusionVolume(null);
        setWorkspaceLoadState({
          ready: false,
          phase: '项目已锁定',
          loaded: 1,
          total: 1,
          startedAt: Date.now(),
          error: '项目已锁定，请在项目库解锁后再进入逆向工作区。',
        });
        savedWorkspaceSnapshotRef.current = '';
        return;
      }
      const maxIndex = Math.max((item.dicomCount || 1) - 1, 0);
      const latestResult = item.segmentationResults?.[item.segmentationResults.length - 1];
      const restoredSliceStart = clamp(latestResult?.sliceStart ?? 0, 0, maxIndex);
      const restoredSliceEnd = clamp(latestResult?.sliceEnd ?? maxIndex, 0, maxIndex);
      const restoredMappingSlice = clamp(latestResult?.mappingSlice ?? restoredSliceEnd, 0, maxIndex);
      setSliceStart(restoredSliceStart);
      setSliceEnd(restoredSliceEnd);
      setMappingSlice(restoredMappingSlice);
      const nextPoses = (item.modelPoses?.length ? item.modelPoses : defaultSavedPoses).map((pose) => ({
        ...pose,
        pose: normalizePoseValue(pose.pose) ?? defaultModelPose,
      }));
      const preferredPose = nextPoses.find((pose) => pose.id === 'default') ?? nextPoses[0];
      const restoredPose = normalizePoseValue(latestResult?.pose)
        ?? normalizePoseValue(preferredPose?.pose)
        ?? defaultModelPose;
      initialZStretchRef.current = { projectId: item.id, pending: !latestResult };
      setModelPose(restoredPose);
      setPoseValueDrafts(formatPoseDraftValues(restoredPose));
      const nextStyles: Record<string, ModuleStyle> = {};
      (item.stlFiles ?? []).forEach((fileName, index) => {
        nextStyles[fileName] = makeDefaultModuleStyle(index, {
          ...(latestResult?.moduleStyles?.[fileName] ?? {}),
          ...(item.moduleStyles?.[fileName] ?? {}),
        });
      });
      setModuleStyles(nextStyles);
      setSavedPoses(nextPoses);
      setSelectedPoseId(latestResult ? 'reverse-result' : preferredPose?.id ?? 'default');
      setSegmentationExportScope(latestResult?.segmentationScope ?? 'visible');
      setDisplayLevel(latestResult?.displayLevel ?? 'standard');
      setDicomOpacityLevel(latestResult?.dicomOpacityLevel ?? 'low');
      setMappingDisplayMode('soft');
      setMappingRotation(0);
      setShowBounds(latestResult?.showBounds ?? true);
      setCutEnabled(latestResult?.cutEnabled ?? false);
      savedWorkspaceSnapshotRef.current = createWorkspaceSnapshot({
        modelPose: restoredPose,
        segmentationExportScope: latestResult?.segmentationScope ?? 'visible',
        moduleStyles: nextStyles,
        sliceStart: restoredSliceStart,
        sliceEnd: restoredSliceEnd,
        mappingSlice: restoredMappingSlice,
        displayLevel: latestResult?.displayLevel ?? 'standard',
        dicomOpacityLevel: latestResult?.dicomOpacityLevel ?? 'low',
        showBounds: latestResult?.showBounds ?? true,
        cutEnabled: latestResult?.cutEnabled ?? false,
      });
    }).catch(() => {
      setProject(null);
      setFusionVolume(null);
      setWorkspaceLoadState({
        ready: false,
        phase: '项目配置读取失败',
        loaded: 0,
        total: 1,
        startedAt: Date.now(),
        error: '项目配置读取失败',
      });
      savedWorkspaceSnapshotRef.current = '';
    });
  }, [projectId]);

  useEffect(() => {
    if (!project?.dicomCount) return;
    const maxSlice = Math.max(project.dicomCount - 1, 0);
    const safeStart = clamp(sliceStart, 0, maxSlice);
    const safeEnd = clamp(sliceEnd, 0, maxSlice);
    const timer = window.setTimeout(() => {
      setFusionError('');
      loadFusionVolume(safeStart, safeEnd)
        .then(setFusionVolume)
        .catch((error) => {
          setFusionVolume(null);
          setFusionError(error instanceof Error ? error.message : 'DICOM 融合体加载失败');
        });
    }, 180);
    return () => window.clearTimeout(timer);
  }, [project?.id, project?.dicomCount, sliceStart, sliceEnd]);

  useEffect(() => () => {
    if (poseRepeatRef.current.timeout !== null) {
      window.clearTimeout(poseRepeatRef.current.timeout);
    }
    if (poseRepeatRef.current.interval !== null) {
      window.clearInterval(poseRepeatRef.current.interval);
    }
  }, []);

  useEffect(() => {
    setPoseValueDrafts((current) => {
      const next = { ...current };
      modelPoseKeys.forEach((key) => {
        if (focusedPoseInput !== key) {
          next[key] = formatPoseValue(key, modelPose[key]);
        }
      });
      return next;
    });
  }, [
    focusedPoseInput,
    modelPose.rotateX,
    modelPose.rotateY,
    modelPose.rotateZ,
    modelPose.translateX,
    modelPose.translateY,
    modelPose.translateZ,
    modelPose.scale,
  ]);

  const clampPoseValue = (key: ModelPoseKey, value: number) => {
    const limit = poseStepConfig[key];
    const precision = getStepPrecision(limit.step);
    return Number(clamp(value, limit.min, limit.max).toFixed(precision));
  };

  const updateModelPose = (partial: Partial<ModelPose>, options: { markCustom?: boolean; keepStatus?: boolean } = {}) => {
    setModelPose((current) => {
      const next = { ...current };
      modelPoseKeys.forEach((key) => {
        const value = partial[key];
        if (typeof value === 'number' && Number.isFinite(value)) {
          next[key] = clampPoseValue(key, value);
        }
      });
      return next;
    });
    if (options.markCustom !== false) {
      setSelectedPoseId('custom');
    }
    if (!options.keepStatus) {
      setPoseImportStatus('');
    }
  };

  const restoreVisualToolbarScroll = (scrollTop: number | null) => {
    if (scrollTop === null) {
      return;
    }
    window.requestAnimationFrame(() => {
      if (visualToolbarScrollRef.current) {
        visualToolbarScrollRef.current.scrollTop = scrollTop;
      }
    });
  };

  const nudgeModelPose = (key: ModelPoseKey, delta: number) => {
    const scrollTop = visualToolbarScrollRef.current?.scrollTop ?? null;
    setModelPose((current) => ({
      ...current,
      [key]: clampPoseValue(key, current[key] + delta),
    }));
    setSelectedPoseId('custom');
    setPoseImportStatus('');
    restoreVisualToolbarScroll(scrollTop);
  };

  const handlePoseInputChange = (key: ModelPoseKey, value: string) => {
    setPoseValueDrafts((current) => ({ ...current, [key]: value }));
    if (!value.trim()) {
      return;
    }

    const numericValue = Number(value);
    if (!Number.isFinite(numericValue)) {
      return;
    }

    updateModelPose({ [key]: numericValue } as Partial<ModelPose>);
  };

  const commitPoseInputValue = (key: ModelPoseKey) => {
    const draftValue = poseValueDrafts[key];
    const numericValue = draftValue.trim() ? Number(draftValue) : NaN;
    if (Number.isFinite(numericValue)) {
      const nextValue = clampPoseValue(key, numericValue);
      if (Math.abs(nextValue - modelPose[key]) > 1e-9) {
        updateModelPose({ [key]: nextValue } as Partial<ModelPose>);
      }
      setPoseValueDrafts((current) => ({ ...current, [key]: formatPoseValue(key, nextValue) }));
    } else {
      setPoseValueDrafts((current) => ({ ...current, [key]: formatPoseValue(key, modelPose[key]) }));
    }
    setFocusedPoseInput(null);
  };

  const stopPoseRepeat = () => {
    if (poseRepeatRef.current.timeout !== null) {
      window.clearTimeout(poseRepeatRef.current.timeout);
      poseRepeatRef.current.timeout = null;
    }
    if (poseRepeatRef.current.interval !== null) {
      window.clearInterval(poseRepeatRef.current.interval);
      poseRepeatRef.current.interval = null;
    }
  };

  const startPoseRepeat = (key: ModelPoseKey, delta: number) => {
    stopPoseRepeat();
    const repeatDelta = delta * (poseRepeatDeltaMultiplier[key] ?? 1);
    poseRepeatRef.current.timeout = window.setTimeout(() => {
      nudgeModelPose(key, repeatDelta);
      poseRepeatRef.current.interval = window.setInterval(() => nudgeModelPose(key, repeatDelta), poseRepeatIntervalMs);
    }, poseRepeatDelayMs);
  };

  const resetRotationPose = () => {
    setModelPose((current) => ({
      ...current,
      rotateX: 0,
      rotateY: 0,
      rotateZ: 0,
    }));
    setSelectedPoseId('custom');
    setPoseImportStatus('');
  };

  const resetTransformPose = () => {
    setModelPose((current) => ({
      ...current,
      translateX: 0,
      translateY: 0,
      translateZ: 0,
      scale: 1,
    }));
    setSelectedPoseId('custom');
    setPoseImportStatus('');
  };

  const toggleModelFlip = (key: ModelPoseFlipKey) => {
    const scrollTop = visualToolbarScrollRef.current?.scrollTop ?? null;
    setModelPose((current) => ({
      ...current,
      [key]: !current[key],
    }));
    setSelectedPoseId('custom');
    setPoseImportStatus('');
    restoreVisualToolbarScroll(scrollTop);
  };

  const resetModelFlipPose = () => {
    const scrollTop = visualToolbarScrollRef.current?.scrollTop ?? null;
    setModelPose((current) => ({
      ...current,
      flipX: false,
      flipY: false,
      flipZ: false,
    }));
    setSelectedPoseId('custom');
    setPoseImportStatus('');
    restoreVisualToolbarScroll(scrollTop);
  };

  const allModulesVisible = Boolean(project?.stlFiles?.length) && (project?.stlFiles ?? []).every((fileName) => moduleStyles[fileName]?.visible !== false);

  const toggleAllModules = () => {
    const stlFiles = project?.stlFiles ?? [];
    const nextVisible = !allModulesVisible;
    const next = { ...moduleStyles };
    stlFiles.forEach((fileName, index) => {
      next[fileName] = makeDefaultModuleStyle(index, {
        ...(next[fileName] ?? project?.moduleStyles?.[fileName]),
        visible: nextVisible,
      });
    });
    commitModuleStyles(next);
  };

  const updateModuleStyle = (fileName: string, partial: Partial<ModuleStyle>) => {
    const stlFiles = project?.stlFiles ?? [];
    const index = Math.max(0, stlFiles.indexOf(fileName));
    const next = {
      ...moduleStyles,
      [fileName]: makeDefaultModuleStyle(index, {
        ...(moduleStyles[fileName] ?? project?.moduleStyles?.[fileName]),
        ...partial,
      }),
    };
    commitModuleStyles(next);
  };

  const updateModulePartId = (fileName: string, value: number) => {
    updateModuleStyle(fileName, { partId: clamp(Math.round(Number.isFinite(value) ? value : 1), 1, 255) });
  };

  const commitSavedPoses = (next: SavedModelPose[]) => {
    setSavedPoses(next);
    if (!project) {
      return;
    }
    api.updateProjectModelPoses(project.id, next)
      .then((updated) => {
        setProject(updated);
        setSavedPoses(updated.modelPoses?.length ? updated.modelPoses : next);
      })
      .catch(() => {
        setFusionError('位姿保存失败，请稍后重试');
      });
  };

  const saveCurrentPose = () => {
    const nextPose = {
      id: `pose-${Date.now()}`,
      name: `位姿${savedPoses.length - 2}`,
      pose: { ...modelPose },
    };
    commitSavedPoses([...savedPoses, nextPose]);
    setSelectedPoseId(nextPose.id);
  };

  const renamePose = (poseId: string, name: string) => {
    if (poseId === 'default') return;
    const nextName = name.trim();
    commitSavedPoses(savedPoses.map((item) => (
      item.id === poseId ? { ...item, name: nextName || item.name } : item
    )));
  };

  const selectPose = (poseId: string) => {
    const selected = savedPoses.find((item) => item.id === poseId);
    if (!selected) return;
    setSelectedPoseId(poseId);
    setModelPose(selected.pose);
    setPoseImportStatus('');
  };

  const handleImportPoseFile = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    event.target.value = '';
    if (!file) {
      return;
    }

    try {
      const payload = JSON.parse(await file.text()) as unknown;
      const { activePose, importedModelPoses } = parseImportedPosePayload(payload);
      if (!activePose && !importedModelPoses?.length) {
        throw new Error('未找到可用位姿数据');
      }

      const nextSavedPoses = importedModelPoses?.length
        ? mergeImportedModelPoses(importedModelPoses)
        : savedPoses;
      if (importedModelPoses?.length) {
        commitSavedPoses(nextSavedPoses);
      }

      if (activePose) {
        setModelPose(activePose);
        setPoseValueDrafts(formatPoseDraftValues(activePose));
        const matchedPose = nextSavedPoses.find((item) => poseValuesMatch(item.pose, activePose));
        setSelectedPoseId(matchedPose?.id ?? 'custom');
      }

      setFusionError('');
      setPoseImportStatus(importedModelPoses?.length ? '位姿数据已导入并保存' : '当前位姿已导入');
    } catch (error) {
      setPoseImportStatus('');
      setFusionError(error instanceof Error ? `位姿导入失败：${error.message}` : '位姿导入失败');
    }
  };

  const maxSlice = Math.max((project?.dicomCount ?? 1) - 1, 0);
  const safeSliceStart = clamp(sliceStart, 0, maxSlice);
  const safeSliceEnd = clamp(sliceEnd, 0, maxSlice);
  const safeMappingSlice = clamp(mappingSlice, 0, maxSlice);
  const displayStart = Math.min(safeSliceStart, safeSliceEnd);
  const displayEnd = Math.max(safeSliceStart, safeSliceEnd);
  const displaySliceRange = getDicomDisplayRange(displayStart, displayEnd, project?.dicomCount ?? 0);
  const rangeStartPercent = maxSlice > 0 ? (displayStart / maxSlice) * 100 : 0;
  const rangeEndPercent = maxSlice > 0 ? (displayEnd / maxSlice) * 100 : 0;
  const selectedDisplay = displayOptions.find((item) => item.id === displayLevel) ?? displayOptions[0];
  const selectedDicomOpacity = dicomOpacityOptions.find((item) => item.id === dicomOpacityLevel) ?? dicomOpacityOptions[0];
  const stretchEnabled = Boolean(project && fusionVolume && isOrthogonalModelPose(modelPose));
  const workspaceProgress = workspaceLoadState.total > 0
    ? Math.round((workspaceLoadState.loaded / workspaceLoadState.total) * 100)
    : 0;
  const workspaceElapsedSeconds = Math.max((Date.now() - workspaceLoadState.startedAt) / 1000, 0.1);
  const workspaceLoadSpeed = workspaceLoadState.loaded / workspaceElapsedSeconds;

  useEffect(() => {
    if (!project?.dicomCount || project.locked) {
      return undefined;
    }
    if (workspaceLoadProjectRef.current === project.id) {
      return undefined;
    }

    let cancelled = false;
    const stlFilesForLoad = project.stlFiles ?? [];
    const fusionStart = Math.min(displayStart, displayEnd);
    const fusionEnd = Math.max(displayStart, displayEnd);
    const previewLimit = selectedDisplay.limit;
    const mappingPreviewLimit = Math.max(previewLimit, 800000);
    const total = 2 + stlFilesForLoad.length * 2;
    const startedAt = Date.now();
    let loaded = 0;

    const updateLoadState = (phase: string, error = '') => {
      if (cancelled) {
        return;
      }
      setWorkspaceLoadState({
        ready: false,
        phase,
        loaded,
        total,
        startedAt,
        error,
      });
    };
    const markLoaded = (phase: string) => {
      loaded += 1;
      updateLoadState(phase);
    };

    updateLoadState('正在载入 DICOM 三维体与 STL 构件预览...');

    const tasks: Array<Promise<unknown>> = [
      getCachedDicomFusionVolume(project.id, fusionStart, fusionEnd, 'soft')
        .then((volume) => {
          if (!cancelled) {
            setFusionVolume(volume);
          }
          markLoaded('DICOM 三维融合体已载入');
        }),
      getCachedDicomPreview(project.id, safeMappingSlice, 'axial', mappingDisplayMode)
        .then(() => markLoaded('DICOM 切片预览已载入')),
      ...stlFilesForLoad.map((fileName) => (
        getCachedModelPreview(project.id, fileName, previewLimit)
          .then(() => markLoaded(`三维模型预览已缓存：${fileName.replace(/\.stl$/i, '')}`))
      )),
      ...stlFilesForLoad.map((fileName) => (
        getCachedModelPreview(project.id, fileName, mappingPreviewLimit)
          .then(() => markLoaded(`二维映射网格已缓存：${fileName.replace(/\.stl$/i, '')}`))
      )),
    ];

    Promise.allSettled(tasks).then((results) => {
      if (cancelled) {
        return;
      }
      const fusionFailed = results[0]?.status === 'rejected';
      if (fusionFailed) {
        setFusionVolume(null);
        setWorkspaceLoadState({
          ready: false,
          phase: 'DICOM 三维融合体载入失败',
          loaded,
          total,
          startedAt,
          error: 'DICOM 三维融合体载入失败，请检查数据或刷新页面重试。',
        });
        return;
      }
      workspaceLoadProjectRef.current = project.id;
      setWorkspaceLoadState({
        ready: true,
        phase: '逆向工作区已就绪',
        loaded: total,
        total,
        startedAt,
        error: '',
      });
    });

    return () => {
      cancelled = true;
    };
  }, [
    project?.id,
    project?.dicomCount,
    project?.locked,
    project?.stlFiles?.join('|'),
    displayStart,
    displayEnd,
    safeMappingSlice,
    selectedDisplay.limit,
    mappingDisplayMode,
  ]);

  useEffect(() => {
    if (!project || !fusionVolume || !workspaceLoadState.ready) {
      return;
    }
    const stretchState = initialZStretchRef.current;
    if (stretchState.projectId !== project.id || !stretchState.pending || !isOrthogonalModelPose(modelPose)) {
      return;
    }
    initialZStretchRef.current = { projectId: project.id, pending: false };
    void applyModelStretchByAxis('z', { silentInitial: true });
  }, [
    project?.id,
    fusionVolume,
    workspaceLoadState.ready,
    modelPose.rotateX,
    modelPose.rotateY,
    modelPose.rotateZ,
  ]);

  if (project?.locked) {
    return (
      <div className="flex h-full min-h-0 items-center justify-center overflow-hidden pr-2">
        <div className="w-full max-w-2xl rounded-3xl border border-amber-100 bg-white p-8 text-center shadow-sm">
          <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-amber-50 text-amber-600">
            <Lock size={24} />
          </div>
          <h2 className="mt-5 text-2xl font-black text-slate-900">项目已锁定</h2>
          <p className="mx-auto mt-3 max-w-lg text-sm font-semibold leading-6 text-slate-500">
            请先在项目库点击“解锁项目”，再进入逆向工作区继续修改位姿和分割结果。
          </p>
          <div className="mt-6 rounded-2xl bg-slate-50 px-4 py-3 text-left text-xs font-bold text-slate-500">
            <p>项目：{project.name}</p>
            <p className="mt-1">锁定时间：{project.lockedAt ? new Date(project.lockedAt).toLocaleString('zh-CN') : '未记录'}</p>
            <p className="mt-1">锁定结果：{project.lockedPoseSnapshotPath ?? '项目数据/锁定结果'}</p>
          </div>
        </div>
      </div>
    );
  }

  if (!workspaceLoadState.ready) {
    return (
      <div className="flex h-full min-h-0 items-center justify-center overflow-hidden pr-2">
        <div className="w-full max-w-3xl rounded-3xl border border-slate-100 bg-white p-8 shadow-sm">
          <div className="mb-6 flex items-start justify-between gap-4">
            <div>
              <p className="text-xs font-bold uppercase tracking-[0.24em] text-blue-500">Reverse Workspace</p>
              <h2 className="mt-2 text-2xl font-black text-slate-900">正在载入完整逆向工作区</h2>
              <p className="mt-2 text-sm font-semibold text-slate-500">
                DICOM 三维体、STL 构件预览和二维映射网格准备完成后再显示工作区。
              </p>
            </div>
            <span className="rounded-2xl bg-slate-950 px-4 py-2 font-mono text-sm font-bold text-cyan-100">
              {Math.max(0, Math.min(100, workspaceProgress))}%
            </span>
          </div>
          <div className="h-3 overflow-hidden rounded-full bg-slate-100">
            <div
              className="h-full rounded-full bg-blue-600 transition-all duration-300"
              style={{ width: `${Math.max(4, Math.min(100, workspaceProgress))}%` }}
            />
          </div>
          <div className="mt-5 grid gap-3 text-xs font-bold text-slate-500 sm:grid-cols-3">
            <div className="rounded-2xl bg-slate-50 px-4 py-3">
              <span className="block text-[10px] uppercase tracking-widest text-slate-400">当前阶段</span>
              <span className="mt-1 block truncate text-slate-700">{workspaceLoadState.phase}</span>
            </div>
            <div className="rounded-2xl bg-slate-50 px-4 py-3">
              <span className="block text-[10px] uppercase tracking-widest text-slate-400">加载进度</span>
              <span className="mt-1 block font-mono text-slate-700">
                {workspaceLoadState.loaded} / {workspaceLoadState.total}
              </span>
            </div>
            <div className="rounded-2xl bg-slate-50 px-4 py-3">
              <span className="block text-[10px] uppercase tracking-widest text-slate-400">加载速度</span>
              <span className="mt-1 block font-mono text-slate-700">
                {workspaceLoadSpeed.toFixed(1)} 项/秒
              </span>
            </div>
          </div>
          {workspaceLoadState.error && (
            <div className="mt-5 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-xs font-bold text-amber-700">
              {workspaceLoadState.error}
            </div>
          )}
        </div>
      </div>
    );
  }

  return (
    <div className="h-full min-h-0 overflow-y-auto pr-2 flex flex-col gap-6">
      {saveStatus && (
        <>
          <style>
            {`@keyframes reverse-result-toast { 0% { opacity: 0; transform: translate(-50%, -10px); } 14% { opacity: 1; transform: translate(-50%, 0); } 72% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -10px); } }`}
          </style>
          <div
            className="fixed left-1/2 top-20 z-50 rounded-2xl border border-cyan-200 bg-white px-5 py-3 text-sm font-bold text-cyan-700 shadow-2xl shadow-cyan-950/10"
            style={{ animation: 'reverse-result-toast 2.6s ease forwards' }}
          >
            {saveStatus}
          </div>
        </>
      )}
      <div className="flex items-center justify-between">
        <div>
          {project && (
            <div className="flex flex-wrap gap-3 text-sm font-bold">
              <span className="rounded-xl bg-blue-50 px-4 py-2 text-blue-700">当前项目：{project.name}</span>
              <span className="rounded-xl bg-slate-100 px-4 py-2 text-slate-700">DICOM {project.dicomCount}</span>
              <span className="rounded-xl bg-slate-100 px-4 py-2 text-slate-700">STL {project.modelCount ?? 0}</span>
            </div>
          )}
          {!project && <p className="text-sm text-slate-500">配准 DICOM 影像与三维模型，生成像素映射关系</p>}
        </div>
        <div className="flex gap-2">
          <button
            onClick={() => void handleSaveSegmentationResult()}
            disabled={!project}
            className="bg-cyan-600 text-white px-5 py-2.5 rounded-xl text-sm font-semibold hover:bg-cyan-700 transition-all shadow-lg flex items-center gap-2 disabled:opacity-50"
          >
            <Save size={18} />
            保存至项目库
          </button>
          <div className="relative">
            <button
              onClick={() => setShowExportMenu((value) => !value)}
              disabled={exporting}
              className="bg-emerald-600 text-white px-5 py-2.5 rounded-xl text-sm font-semibold hover:bg-emerald-700 transition-all shadow-lg flex items-center gap-2 disabled:opacity-50"
            >
              <Download size={18} />
              {exporting ? '正在导出' : '导出项目及结果'}
            </button>
            {showExportMenu && (
              <div className="absolute right-0 top-12 z-30 w-72 rounded-2xl border border-slate-200 bg-white p-3 text-xs shadow-2xl">
                <div className="mb-2 flex items-center justify-between">
                  <p className="font-bold text-slate-700">导出内容</p>
                  <button
                    onClick={() => setExportSelection({ dicom: true, segmentation: true, pose: true, stl: true })}
                    className="text-[10px] font-bold text-emerald-600 hover:text-emerald-700"
                  >
                    全选
                  </button>
                </div>
                <div className="space-y-2">
                  {exportOptions.map((option) => (
                    <label key={option.id} className="flex items-center gap-3 rounded-xl bg-slate-50 px-3 py-2 font-bold text-slate-600">
                      <input
                        type="checkbox"
                        checked={exportSelection[option.id]}
                        onChange={(event) => setExportSelection((current) => ({ ...current, [option.id]: event.target.checked }))}
                        className="accent-emerald-600"
                      />
                      <span className="min-w-0 flex-1">
                        <span className="block">{option.label}</span>
                        <span className="block text-[10px] text-slate-400">{option.description}</span>
                      </span>
                    </label>
                  ))}
                </div>
                {exportSelection.segmentation && (
                  <div className="mt-3 rounded-xl border border-emerald-100 bg-emerald-50/70 p-2">
                    <div className="mb-2 flex items-center justify-between gap-2">
                      <p className="text-[10px] font-bold text-emerald-800">分割类别范围</p>
                      <span className="text-[9px] font-bold text-emerald-600">附带 labels.json</span>
                    </div>
                    <div className="grid grid-cols-2 gap-1.5">
                      {segmentationScopeOptions.map((option) => (
                        <button
                          key={option.id}
                          onClick={() => setSegmentationExportScope(option.id)}
                          className={`rounded-lg px-2 py-1.5 text-left transition ${
                            segmentationExportScope === option.id
                              ? 'bg-emerald-600 text-white shadow-sm'
                              : 'bg-white text-emerald-700 hover:bg-emerald-100'
                          }`}
                        >
                          <span className="block text-[10px] font-bold">{option.label}</span>
                          <span className={`block text-[9px] ${segmentationExportScope === option.id ? 'text-emerald-50' : 'text-emerald-500'}`}>
                            {option.description}
                          </span>
                        </button>
                      ))}
                    </div>
                    <div className="mt-2 border-t border-emerald-100 pt-2">
                      <p className="mb-2 text-[10px] font-bold text-emerald-800">分割导出方式</p>
                      <div className="grid grid-cols-2 gap-1.5">
                        {segmentationExportModeOptions.map((option) => (
                          <button
                            key={option.id}
                            onClick={() => setSegmentationExportMode(option.id)}
                            className={`rounded-lg px-2 py-1.5 text-left transition ${
                              segmentationExportMode === option.id
                                ? 'bg-slate-900 text-white shadow-sm'
                                : 'bg-white text-slate-600 hover:bg-emerald-100'
                            }`}
                          >
                            <span className="block text-[10px] font-bold">{option.label}</span>
                            <span className={`block text-[9px] ${segmentationExportMode === option.id ? 'text-slate-200' : 'text-slate-400'}`}>
                              {option.description}
                            </span>
                          </button>
                        ))}
                      </div>
                    </div>
                  </div>
                )}
                <button
                  onClick={handleExportSelected}
                  disabled={exporting}
                  className="mt-3 flex h-9 w-full items-center justify-center rounded-xl bg-slate-900 text-[11px] font-bold text-white hover:bg-black disabled:opacity-50"
                >
                  导出所选压缩包
                </button>
              </div>
            )}
          </div>
        </div>
      </div>

      <div className="min-h-[840px] flex-1 grid grid-cols-1 items-stretch gap-5 xl:grid-cols-[minmax(300px,0.82fr)_minmax(350px,0.98fr)_minmax(520px,1.32fr)] 2xl:grid-cols-[minmax(330px,0.8fr)_minmax(390px,1fr)_minmax(620px,1.45fr)]">
        <div className="min-h-0 flex flex-col gap-4">
          <div className="px-2 flex flex-wrap items-center justify-between gap-2 shrink-0">
            <h3 className="font-bold text-slate-700 flex items-center gap-2">
              <Rotate3d size={18} className="text-blue-500" />
              影像与模型融合视角
            </h3>
            <div className="flex flex-wrap items-center justify-end gap-1.5">
              <span className="text-[10px] font-mono text-slate-400">
                Layer: {displaySliceRange.start}-{displaySliceRange.end}/{project?.dicomCount ?? 0}
              </span>
              <div className="flex items-center gap-1 rounded-xl bg-slate-100 p-1">
                <span className="hidden items-center gap-1 px-1 text-[9px] font-bold text-slate-400 2xl:flex">
                  <Maximize2 size={11} />
                  自动拉伸
                </span>
                {(['x', 'y', 'z'] as AxisKey[]).map((axis) => (
                  <button
                    key={axis}
                    onClick={() => void applyModelStretchByAxis(axis)}
                    disabled={!stretchEnabled || stretchingAxis !== null}
                    className={`rounded-lg px-2 py-1 text-[9px] font-bold transition ${
                      stretchEnabled && stretchingAxis === null
                        ? 'bg-white text-blue-600 shadow-sm hover:text-blue-700'
                        : 'cursor-not-allowed text-slate-300'
                    }`}
                    title={stretchEnabled ? `按 ${axis.toUpperCase()} 方向自动等比例拉伸模型` : '仅当旋转 X/Y/Z 均为 90° 的整数倍时可用'}
                  >
                    {stretchingAxis === axis ? '...' : `${axis.toUpperCase()}拉伸`}
                  </button>
                ))}
              </div>
            </div>
          </div>

          {project ? (
            <div className="min-h-0 flex-1">
              <FusionThreeView
                project={project}
                volume={fusionVolume}
                modelPose={modelPose}
                moduleStyles={moduleStyles}
                detailLimit={selectedDisplay.limit}
                solidMode={displayLevel === 'solid'}
                dicomOpacity={selectedDicomOpacity}
                showBounds={showBounds}
                cutEnabled={cutEnabled}
                cutStart={displayStart}
                cutEnd={displayEnd}
              />
            </div>
          ) : (
            <div className="flex-1 rounded-3xl border border-slate-100 bg-white flex items-center justify-center text-sm text-slate-400">
              正在载入项目...
            </div>
          )}

          {fusionError && (
            <div className="rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-xs font-bold text-amber-700 flex items-center gap-2">
              <AlertCircle size={16} />
              {fusionError}
            </div>
          )}

          <div className="rounded-2xl border border-slate-100 bg-white p-4 shadow-sm">
            <div className="mb-3 flex items-center justify-between">
              <p className="text-xs font-bold text-slate-700">DICOM 切片范围</p>
              <span className="text-[10px] font-mono text-blue-600">
                {displaySliceRange.start} - {displaySliceRange.end} / {project?.dicomCount ?? 0}
              </span>
            </div>
            <div className="py-1">
              <div className="relative h-10">
                <div className="absolute inset-x-0 top-1/2 h-2 -translate-y-1/2 rounded-full bg-slate-200" />
                <div
                  className="absolute top-1/2 h-2 -translate-y-1/2 rounded-full bg-blue-600"
                  style={{
                    left: `${rangeStartPercent}%`,
                    right: `${100 - rangeEndPercent}%`,
                  }}
                />
                <input
                  type="range"
                  aria-label="DICOM 切片范围起点"
                  min="0"
                  max={maxSlice}
                  value={safeSliceStart}
                  onChange={(event) => setSliceStart(Number(event.target.value))}
                  className="dicom-range-input"
                  style={{ zIndex: safeSliceStart >= safeSliceEnd ? 5 : 4 }}
                />
                <input
                  type="range"
                  aria-label="DICOM 切片范围终点"
                  min="0"
                  max={maxSlice}
                  value={safeSliceEnd}
                  onChange={(event) => setSliceEnd(Number(event.target.value))}
                  className="dicom-range-input"
                  style={{ zIndex: safeSliceStart >= safeSliceEnd ? 4 : 5 }}
                />
              </div>
              <div className="mt-1 grid grid-cols-3 text-[10px] font-bold text-slate-500">
                <span>起点 {getDicomDisplaySliceNumber(safeSliceStart, project?.dicomCount ?? 0)}</span>
                <span className="text-center text-blue-600">范围</span>
                <span className="text-right">终点 {getDicomDisplaySliceNumber(safeSliceEnd, project?.dicomCount ?? 0)}</span>
              </div>
            </div>
          </div>
        </div>

        <div className="min-h-0 flex flex-col gap-4 overflow-hidden">
          <div className="px-2 shrink-0">
            <h3 className="font-bold text-slate-700 flex items-center gap-2">
              <Settings2 size={18} className="text-emerald-500" />
              可视化工具栏
            </h3>
          </div>

          <div className="flex-1 bg-white rounded-3xl border border-slate-100 shadow-sm overflow-hidden flex flex-col p-4 gap-4">
            <div ref={visualToolbarScrollRef} className="flex-1 overflow-auto space-y-4 pr-1">
              <div>
                <p className="mb-2 text-[10px] font-bold uppercase tracking-widest text-slate-400">模型显示</p>
                <div className="grid grid-cols-2 gap-1 rounded-xl bg-slate-100 p-1">
                  {displayOptions.map((option) => (
                    <button
                      key={option.id}
                      onClick={() => setDisplayLevel(option.id)}
                      className={`rounded-lg px-2 py-1.5 text-[10px] font-bold transition-all ${
                        displayLevel === option.id ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'
                      }`}
                    >
                      {option.label}
                    </button>
                  ))}
                </div>
              </div>

              <div>
                <p className="mb-2 text-[10px] font-bold uppercase tracking-widest text-slate-400">融合显示</p>
                <div className="grid grid-cols-3 gap-1 rounded-xl bg-slate-100 p-1">
                  {dicomOpacityOptions.map((option) => (
                    <button
                      key={option.id}
                      onClick={() => setDicomOpacityLevel(option.id)}
                      className={`rounded-lg px-2 py-1.5 text-[10px] font-bold transition-all ${
                        dicomOpacityLevel === option.id ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'
                      }`}
                    >
                      DICOM {option.label}
                    </button>
                  ))}
                </div>
                <label className="mt-2 flex items-center justify-between rounded-lg bg-slate-50 px-2 py-1.5 text-[10px] font-bold text-slate-500">
                  显示 DICOM/模型边界
                  <input
                    type="checkbox"
                    checked={showBounds}
                    onChange={(event) => setShowBounds(event.target.checked)}
                    className="accent-blue-600"
                  />
                </label>
              </div>

              <div>
                <div className="mb-2 flex items-center justify-between">
                  <p className="text-[10px] font-bold uppercase tracking-widest text-slate-400">模型切分</p>
                  <label className="flex items-center gap-1 text-[10px] font-bold text-slate-500">
                    启用
                    <input
                      type="checkbox"
                      checked={cutEnabled}
                      onChange={(event) => setCutEnabled(event.target.checked)}
                      className="accent-orange-500"
                    />
                  </label>
                </div>
                <p className="rounded-lg bg-orange-50 px-2 py-2 text-[10px] font-bold leading-5 text-orange-700">
                  按 DICOM 切片范围 {displaySliceRange.start}-{displaySliceRange.end} 保留模型中间区域
                </p>
              </div>

              <div>
                <div className="mb-2 flex items-center justify-between">
                  <p className="text-[10px] font-bold uppercase tracking-widest text-slate-400">模型位姿</p>
                  <div className="flex items-center gap-2">
                    <button onClick={saveCurrentPose} className="flex items-center gap-1 text-[10px] font-bold text-blue-600 hover:text-blue-700">
                      <Save size={12} />
                      保存
                    </button>
                    <button onClick={() => poseImportInputRef.current?.click()} className="flex items-center gap-1 text-[10px] font-bold text-emerald-600 hover:text-emerald-700">
                      <Upload size={12} />
                      导入
                    </button>
                    <input
                      ref={poseImportInputRef}
                      type="file"
                      accept="application/json,.json"
                      onChange={handleImportPoseFile}
                      className="hidden"
                    />
                  </div>
                </div>
                <select
                  value={selectedPoseId}
                  onChange={(event) => selectPose(event.target.value)}
                  className="mb-2 h-8 w-full rounded-lg border border-slate-200 bg-white px-2 text-[10px] font-bold text-slate-600 outline-none focus:border-blue-400"
                >
                  {selectedPoseId === 'custom' && <option value="custom">当前未保存位姿</option>}
                  {savedPoses.map((item) => (
                    <option key={item.id} value={item.id}>{item.name}</option>
                  ))}
                </select>
                {selectedPoseId !== 'default' && selectedPoseId !== 'custom' && (
                  <input
                    value={savedPoses.find((item) => item.id === selectedPoseId)?.name ?? ''}
                    onChange={(event) => renamePose(selectedPoseId, event.target.value)}
                    className="mb-2 h-8 w-full rounded-lg border border-slate-200 bg-white px-2 text-[10px] font-bold text-slate-600 outline-none focus:border-blue-400"
                    placeholder="位姿名称"
                  />
                )}
                {poseImportStatus && (
                  <p className="mb-2 rounded-lg bg-emerald-50 px-2 py-1.5 text-[10px] font-bold text-emerald-700">
                    {poseImportStatus}
                  </p>
                )}
                <div className="grid grid-cols-3 gap-2">
                  <button
                    onClick={resetRotationPose}
                    className="h-8 rounded-lg bg-blue-50 text-[10px] font-bold text-blue-600 hover:bg-blue-100"
                  >
                    重置旋转位姿
                  </button>
                  <button
                    onClick={resetTransformPose}
                    className="h-8 rounded-lg bg-blue-50 text-[10px] font-bold text-blue-600 hover:bg-blue-100"
                  >
                    重置平移缩放位姿
                  </button>
                  <button
                    onClick={resetModelFlipPose}
                    className="h-8 rounded-lg bg-blue-50 text-[10px] font-bold text-blue-600 hover:bg-blue-100"
                  >
                    重置镜像位姿
                  </button>
                </div>
                <div className="mt-3 grid grid-cols-3 gap-2">
                  {modelPoseFlipOptions.map((item) => {
                    const Icon = item.icon;
                    const enabled = modelPose[item.key];
                    return (
                      <button
                        key={item.key}
                        onClick={() => toggleModelFlip(item.key)}
                        className={`flex h-8 items-center justify-center gap-1.5 rounded-lg border text-[10px] font-bold transition ${
                          enabled
                            ? 'border-emerald-200 bg-emerald-600 text-white shadow-sm'
                            : 'border-slate-100 bg-white text-slate-500 shadow-sm hover:border-emerald-200 hover:bg-emerald-50 hover:text-emerald-700'
                        }`}
                        title={`以模型中心沿 ${item.axis} 轴镜像翻转`}
                      >
                        <Icon size={13} />
                        {item.label}
                      </button>
                    );
                  })}
                </div>
                <div className="mt-3 space-y-2">
                  {[
                    { key: 'rotateX' as const, label: '旋转 X', value: modelPose.rotateX },
                    { key: 'rotateY' as const, label: '旋转 Y', value: modelPose.rotateY },
                    { key: 'rotateZ' as const, label: '旋转 Z', value: modelPose.rotateZ },
                    { key: 'translateX' as const, label: '平移 X', value: modelPose.translateX },
                    { key: 'translateY' as const, label: '平移 Y', value: modelPose.translateY },
                    { key: 'translateZ' as const, label: '平移 Z', value: modelPose.translateZ },
                    { key: 'scale' as const, label: '缩放', value: modelPose.scale },
                  ].map((item) => (
                    <div key={item.key} className="grid grid-cols-[44px_28px_1fr_28px_72px] items-center gap-2 text-[10px] font-bold text-slate-500">
                      <span>{item.label}</span>
                      <button
                        onPointerDown={() => {
                          startPoseRepeat(item.key, -poseStepConfig[item.key].step);
                        }}
                        onPointerUp={stopPoseRepeat}
                        onPointerLeave={stopPoseRepeat}
                        onPointerCancel={stopPoseRepeat}
                        onClick={() => nudgeModelPose(item.key, -poseStepConfig[item.key].step)}
                        className="h-6 touch-none rounded-md border border-slate-100 bg-white text-[9px] font-bold text-slate-500 shadow-sm hover:bg-blue-50 hover:text-blue-600"
                        title={`单击移动最低刻度，长按连续移动。${poseStepConfig[item.key].minus}`}
                      >
                        -
                      </button>
                      <input
                        type="range"
                        min={poseStepConfig[item.key].min}
                        max={poseStepConfig[item.key].max}
                        step={poseStepConfig[item.key].step}
                        value={item.value}
                        onChange={(event) => updateModelPose({ [item.key]: Number(event.target.value) })}
                        className="accent-blue-600"
                      />
                      <button
                        onPointerDown={() => {
                          startPoseRepeat(item.key, poseStepConfig[item.key].step);
                        }}
                        onPointerUp={stopPoseRepeat}
                        onPointerLeave={stopPoseRepeat}
                        onPointerCancel={stopPoseRepeat}
                        onClick={() => nudgeModelPose(item.key, poseStepConfig[item.key].step)}
                        className="h-6 touch-none rounded-md border border-slate-100 bg-white text-[9px] font-bold text-slate-500 shadow-sm hover:bg-blue-50 hover:text-blue-600"
                        title={`单击移动最低刻度，长按连续移动。${poseStepConfig[item.key].plus}`}
                      >
                        +
                      </button>
                      <input
                        type="number"
                        min={poseStepConfig[item.key].min}
                        max={poseStepConfig[item.key].max}
                        step={poseStepConfig[item.key].step}
                        value={poseValueDrafts[item.key]}
                        onFocus={() => setFocusedPoseInput(item.key)}
                        onChange={(event) => handlePoseInputChange(item.key, event.target.value)}
                        onBlur={() => commitPoseInputValue(item.key)}
                        onKeyDown={(event) => {
                          if (event.key === 'Enter') {
                            event.currentTarget.blur();
                          }
                        }}
                        className="h-7 min-w-0 rounded-md border border-slate-200 bg-white px-1.5 text-right font-mono text-[10px] font-bold text-slate-600 outline-none focus:border-blue-400 focus:bg-blue-50/40"
                      />
                      {poseStepConfig[item.key].quick && (
                        <div className="col-start-2 col-span-3 grid grid-cols-2 gap-1">
                          <button
                            onClick={() => nudgeModelPose(item.key, -(poseStepConfig[item.key].quick ?? 0))}
                            className="h-6 rounded-md bg-slate-50 text-[9px] font-bold text-slate-500 hover:bg-blue-50 hover:text-blue-600"
                          >
                            -90°
                          </button>
                          <button
                            onClick={() => nudgeModelPose(item.key, poseStepConfig[item.key].quick ?? 0)}
                            className="h-6 rounded-md bg-slate-50 text-[9px] font-bold text-slate-500 hover:bg-blue-50 hover:text-blue-600"
                          >
                            +90°
                          </button>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              </div>

              <div>
                <div className="mb-2 flex items-center justify-between">
                  <p className="text-[10px] font-bold uppercase tracking-widest text-slate-400">构件层级</p>
                  <div className="flex items-center gap-2">
                    <span className="text-[10px] font-mono text-slate-400">{project?.stlFiles?.length ?? 0}</span>
                    <button
                      onClick={toggleAllModules}
                      disabled={!project?.stlFiles?.length}
                      className={`rounded p-1 transition ${allModulesVisible ? 'text-blue-500' : 'text-slate-300'} hover:bg-white disabled:opacity-40`}
                      title={allModulesVisible ? '隐藏所有构件' : '显示所有构件'}
                    >
                      <Eye size={14} />
                    </button>
                  </div>
                </div>
                <div className="space-y-2">
                  {(project?.stlFiles ?? []).map((fileName, index) => {
                    const style = moduleStyles[fileName] ?? {
                      visible: true,
                      color: moduleColors[index % moduleColors.length],
                      opacity: 0.72,
                      partId: index + 1,
                    };
                    return (
                      <div key={fileName} className={`rounded-xl bg-slate-50 p-2 ${!style.visible ? 'opacity-50' : ''}`}>
                        <div className="mb-2 flex items-center gap-2">
                          <input
                            type="color"
                            value={style.color}
                            onChange={(event) => updateModuleStyle(fileName, { color: event.target.value })}
                            className="h-7 w-7 shrink-0 rounded border border-white bg-white p-0.5"
                            title="模型颜色"
                          />
                          <div className="min-w-0 flex-1">
                            <p className="truncate text-[10px] font-bold text-slate-700">{fileName.replace(/\.stl$/i, '')}</p>
                            <label className="mt-1 flex items-center gap-1 text-[9px] font-bold text-slate-400">
                              ID
                              <input
                                type="number"
                                min="1"
                                max="255"
                                value={style.partId}
                                onChange={(event) => updateModulePartId(fileName, Number(event.target.value))}
                                className="h-5 w-12 rounded border border-slate-200 bg-white px-1 font-mono text-slate-600"
                              />
                            </label>
                          </div>
                          <button
                            onClick={() => updateModuleStyle(fileName, { visible: !style.visible })}
                            className={`rounded p-1 ${style.visible ? 'text-blue-500' : 'text-slate-300'} hover:bg-white`}
                            title={style.visible ? '隐藏构件' : '显示构件'}
                          >
                            <Eye size={14} />
                          </button>
                        </div>
                        <div className="flex items-center gap-2">
                          <span className="text-[9px] text-slate-400">透明度</span>
                          <input
                            type="range"
                            min="0.1"
                            max="1"
                            step="0.05"
                            value={style.opacity}
                            onChange={(event) => updateModuleStyle(fileName, { opacity: Number(event.target.value) })}
                            className="min-w-0 flex-1 accent-blue-600"
                          />
                          <span className="w-7 text-right text-[9px] text-slate-400">{Math.round(style.opacity * 100)}%</span>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="min-h-0 flex flex-col gap-4 overflow-hidden">
          <div className="min-h-0 flex-1">
            <VoxelizationMappingView
              project={project}
              moduleStyles={moduleStyles}
              modelPose={modelPose}
              detailLimit={selectedDisplay.limit}
              slice={safeMappingSlice}
              totalSlices={project?.dicomCount ?? 0}
              onSliceChange={setMappingSlice}
              displayMode={mappingDisplayMode}
              rotation={mappingRotation}
              variant="library"
              overlayPlacement="bottom"
              toolbar={(
                <>
                  <div className="flex rounded-xl bg-white/10 p-1">
                    {mappingDisplayModes.map((mode) => (
                      <button
                        key={mode.id}
                        onClick={() => setMappingDisplayMode(mode.id)}
                        className={`rounded-lg px-2 py-1 text-[10px] font-bold transition ${
                          mappingDisplayMode === mode.id ? 'bg-white text-cyan-700 shadow-sm' : 'text-white/55 hover:text-white'
                        }`}
                      >
                        {mode.label}
                      </button>
                    ))}
                  </div>
                  <button
                    onClick={() => setMappingRotation((value) => (value + 270) % 360)}
                    className="flex h-8 w-8 items-center justify-center rounded-xl border border-white/10 bg-black/60 text-white/65 hover:border-cyan-300/30 hover:text-cyan-100"
                    title="左转 90°"
                  >
                    <RotateCcw size={14} />
                  </button>
                  <button
                    onClick={() => setMappingRotation((value) => (value + 90) % 360)}
                    className="flex h-8 w-8 items-center justify-center rounded-xl border border-white/10 bg-black/60 text-white/65 hover:border-cyan-300/30 hover:text-cyan-100"
                    title="右转 90°"
                  >
                    <RotateCw size={14} />
                  </button>
                </>
              )}
            />
          </div>
        </div>
      </div>
    </div>
  );
}