"use client";

/* eslint-disable @next/next/no-img-element */
import dynamic from "next/dynamic";
import {
  Box,
  CheckCircle2,
  Download,
  File,
  FileSpreadsheet,
  ImageIcon,
  Loader2,
  Maximize2,
  Minimize2,
  Package,
  RotateCcw,
  ShieldAlert,
  Undo2,
  X,
} from "lucide-react";
import {
  useCallback,
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,
} from "react";
import {
  buildOpenClawArtifactProxyUrl,
  getOpenClaw3DArtifactVariant,
  getOpenClaw3DArtifactBundle,
  type OpenClawArtifact,
} from "@/lib/openclaw-chat/artifacts";
import {
  getOpenClawPackagingInteractionParts,
  normalizeOpenClawModelInteractionManifest,
  type OpenClawModelInteractionManifest,
  type OpenClawModelInteractionPart,
} from "@/lib/openclaw-chat/model-interaction";
import {
  isOpenClawProductionDrawingReleased,
  normalizeOpenClawProductionDrawingManifest,
  type OpenClawProductionDrawingManifest,
} from "@/lib/openclaw-chat/production-drawing";
import {
  clearOpenClaw3DViewerSession,
  readOpenClaw3DViewerSession,
  writeOpenClaw3DViewerSession,
} from "@/lib/openclaw-chat/viewer-session";
import type { OpenClawModelCameraState } from "@/components/canvas/chat-panel/OpenClawInteractiveModelViewer";

const Model3DViewer = dynamic(
  () =>
    import("@/components/canvas/model3d/Model3DViewer").then(
      (module) => module.Model3DViewer
    ),
  {
    ssr: false,
    loading: () => <ViewerLoading />,
  }
);

const OpenClawInteractiveModelViewer = dynamic(
  () =>
    import(
      "@/components/canvas/chat-panel/OpenClawInteractiveModelViewer"
    ).then((module) => module.OpenClawInteractiveModelViewer),
  {
    ssr: false,
    loading: () => <ViewerLoading />,
  }
);

const ACTIVE_VIEWER_EVENT = "openclaw-active-3d-viewer";
type OpenClaw3DViewMode = "product" | "packaging";

function ViewerLoading() {
  return (
    <div className="flex h-full w-full items-center justify-center bg-zinc-950 text-zinc-400">
      <Loader2 className="h-6 w-6 animate-spin" />
      <span className="ml-2 text-xs">正在准备 3D 预览…</span>
    </div>
  );
}

function supportsWebGl() {
  try {
    const canvas = document.createElement("canvas");
    return Boolean(
      canvas.getContext("webgl2") ||
        canvas.getContext("webgl") ||
        canvas.getContext("experimental-webgl")
    );
  } catch {
    return false;
  }
}

function getViewerSessionStorage() {
  try {
    return window.sessionStorage;
  } catch {
    return null;
  }
}

function formatDimensions(part: OpenClawModelInteractionPart) {
  const dimensions = part.dimensionsMm;
  if (!dimensions) return null;
  return `${dimensions.x} x ${dimensions.y} x ${dimensions.z} mm`;
}

function formatArtifactDimensions(artifact: OpenClawArtifact) {
  const dimensions = artifact.dimensionsMm;
  if (!dimensions) return null;
  return `${dimensions.x} x ${dimensions.y} x ${dimensions.z} mm`;
}

function OpenClawProductionDrawingPanel({
  artifacts,
  chatId,
  messageId,
}: {
  artifacts: Array<{ artifact: OpenClawArtifact; index: number }>;
  chatId: string;
  messageId: string;
}) {
  const manifestArtifact = artifacts.find(
    ({ artifact }) =>
      artifact.artifactRole.toLowerCase() === "production_drawing_manifest"
  );
  const pdfs = artifacts.filter(
    ({ artifact }) =>
      artifact.artifactRole.toLowerCase() === "production_drawing_pdf"
  );
  const dxfBundles = artifacts.filter(
    ({ artifact }) =>
      artifact.artifactRole.toLowerCase() === "production_drawing_dxf_bundle"
  );
  const [manifest, setManifest] =
    useState<OpenClawProductionDrawingManifest | null>();
  const [manifestError, setManifestError] = useState(false);
  // The parent normalizes artifacts on each render. Object identity must not
  // restart an in-flight request (or refetch an already loaded manifest).
  const manifestIndex = manifestArtifact?.index ?? -1;

  const proxyUrl = useCallback(
    (index: number, download = false) =>
      buildOpenClawArtifactProxyUrl({
        chatId,
        messageId,
        artifactIndex: index,
        download,
      }),
    [chatId, messageId]
  );

  useEffect(() => {
    if (manifestIndex < 0) {
      setManifest(null);
      return;
    }
    const controller = new AbortController();
    setManifestError(false);
    fetch(proxyUrl(manifestIndex), {
      signal: controller.signal,
    })
      .then(async (response) => {
        if (!response.ok) throw new Error("production manifest unavailable");
        const normalized = normalizeOpenClawProductionDrawingManifest(
          await response.json()
        );
        if (!normalized) throw new Error("invalid production manifest");
        setManifest(normalized);
      })
      .catch(() => {
        if (controller.signal.aborted) return;
        setManifest(null);
        setManifestError(true);
      });
    return () => controller.abort();
  }, [manifestIndex, proxyUrl]);

  if (!manifestArtifact && pdfs.length === 0 && dxfBundles.length === 0) {
    return null;
  }

  const isReleased = isOpenClawProductionDrawingReleased(manifest || null);
  const awaitingEngineeringRelease = Boolean(
    manifest?.automatedValidationStatus === "production_ready" &&
      manifest.approvalStatus === "awaiting_engineering_release"
  );
  const statusLabel = isReleased
    ? "生产图已签批发布"
    : awaitingEngineeringRelease
      ? "自动检查通过，待结构工程师签批"
      : "未批准不得下料";

  return (
    <section className="mt-3 overflow-hidden rounded-md border border-black/10 dark:border-white/10">
      <div
        className={
          isReleased
            ? "flex items-start gap-2 bg-emerald-50 px-3 py-2.5 text-emerald-800 dark:bg-emerald-950/35 dark:text-emerald-300"
            : awaitingEngineeringRelease
              ? "flex items-start gap-2 bg-amber-50 px-3 py-2.5 text-amber-800 dark:bg-amber-950/35 dark:text-amber-300"
              : "flex items-start gap-2 bg-red-50 px-3 py-2.5 text-red-700 dark:bg-red-950/35 dark:text-red-300"
        }
      >
        {isReleased ? (
          <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0" />
        ) : (
          <ShieldAlert className="mt-0.5 h-4 w-4 shrink-0" />
        )}
        <div className="min-w-0">
          <p className="text-xs font-semibold">{statusLabel}</p>
          {manifestError ? (
            <p className="mt-1 text-[11px] opacity-80">
              发布清单读取失败，已按未发布状态保护。
            </p>
          ) : null}
          {!manifestArtifact ? (
            <p className="mt-1 text-[11px] opacity-80">
              缺少生产图发布清单，不能确认签批状态。
            </p>
          ) : null}
          {manifest?.releaseBlockers.length ? (
            <ul className="mt-1 space-y-0.5 text-[11px] opacity-90">
              {manifest.releaseBlockers.map((blocker, index) => (
                <li key={`${blocker}:${index}`}>· {blocker}</li>
              ))}
            </ul>
          ) : null}
          {isReleased ? (
            <div className="mt-1 flex flex-wrap gap-x-3 gap-y-0.5 text-[11px] opacity-85">
              {manifest?.version ? <span>版本：{manifest.version}</span> : null}
              {manifest?.approvedBy ? (
                <span>签批人：{manifest.approvedBy}</span>
              ) : null}
              {manifest?.fileSha256 ? (
                <span className="break-all">SHA-256：{manifest.fileSha256}</span>
              ) : null}
            </div>
          ) : null}
        </div>
      </div>
      {pdfs.length > 0 || dxfBundles.length > 0 ? (
        <div className="flex flex-wrap gap-2 px-3 py-2.5">
          {pdfs.map(({ artifact, index }) => (
            <a
              key={`${artifact.downloadUrl}:${index}`}
              className="inline-flex h-9 items-center gap-2 rounded-md border border-black/10 px-3 text-xs font-medium text-[#535d6d] hover:bg-black/5 dark:border-white/15 dark:text-zinc-300 dark:hover:bg-white/8"
              href={proxyUrl(index)}
              rel="noreferrer"
              target="_blank"
            >
              <File className="h-4 w-4" />
              预览/下载生产工艺图
            </a>
          ))}
          {dxfBundles.map(({ artifact, index }) => (
            <a
              key={`${artifact.downloadUrl}:${index}`}
              className="inline-flex h-9 items-center gap-2 rounded-md border border-black/10 px-3 text-xs font-medium text-[#535d6d] hover:bg-black/5 dark:border-white/15 dark:text-zinc-300 dark:hover:bg-white/8"
              href={proxyUrl(index, true)}
            >
              <Download className="h-4 w-4" />
              下载DXF图包
            </a>
          ))}
        </div>
      ) : null}
    </section>
  );
}

function OpenClawSupportingArtifacts({
  artifacts,
  chatId,
  messageId,
}: {
  artifacts: OpenClawArtifact[];
  chatId: string;
  messageId: string;
}) {
  const withIndex = artifacts.map((artifact, index) => ({ artifact, index }));
  const overview = withIndex.find(
    ({ artifact }) =>
      artifact.artifactRole.toLowerCase() === "bom_component_overview"
  );
  const thumbnails = withIndex.filter(
    ({ artifact }) =>
      artifact.artifactRole.toLowerCase() === "bom_component_thumbnail"
  );
  const workbooks = withIndex.filter(
    ({ artifact }) => artifact.artifactRole.toLowerCase() === "bom_workbook"
  );
  const advanced = withIndex.filter(({ artifact }) => {
    const role = artifact.artifactRole.toLowerCase();
    return (
      artifact.displayMode.toLowerCase() === "advanced" &&
      role !== "model_interaction_manifest" &&
      !role.startsWith("production_drawing_")
    );
  });
  const downloads = withIndex.filter(({ artifact }) => {
    const role = artifact.artifactRole.toLowerCase();
    return (
      artifact.displayMode.toLowerCase() === "download" &&
      role !== "bom_workbook" &&
      role !== "model_interaction_manifest" &&
      role !== "production_drawing_manifest" &&
      role !== "production_drawing_pdf" &&
      role !== "production_drawing_dxf_bundle"
    );
  });
  if (
    !overview &&
    thumbnails.length === 0 &&
    workbooks.length === 0 &&
    downloads.length === 0 &&
    advanced.length === 0 &&
    !withIndex.some(({ artifact }) =>
      artifact.artifactRole.toLowerCase().startsWith("production_drawing_")
    )
  ) {
    return null;
  }

  const proxyUrl = (index: number, download = false) =>
    buildOpenClawArtifactProxyUrl({
      chatId,
      messageId,
      artifactIndex: index,
      download,
    });

  return (
    <section className="mt-3 w-full max-w-[760px] border-t border-black/8 pt-3 dark:border-white/10">
      {overview ? (
        <figure className="overflow-hidden rounded-lg border border-black/10 bg-white dark:border-white/10 dark:bg-zinc-950">
          <img
            alt={overview.artifact.displayName || "配件图总览"}
            className="max-h-[460px] w-full object-contain"
            loading="lazy"
            src={proxyUrl(overview.index)}
          />
          <figcaption className="border-t border-black/8 px-3 py-2 text-xs font-medium text-[#535d6d] dark:border-white/10 dark:text-zinc-300">
            {overview.artifact.displayName || "配件图总览"}
          </figcaption>
        </figure>
      ) : null}

      {thumbnails.length > 0 ? (
        <div className="mt-3">
          <div className="mb-2 flex items-center gap-2 text-xs font-medium text-[#535d6d] dark:text-zinc-300">
            <ImageIcon className="h-4 w-4" />
            <span>配件图对照</span>
          </div>
          <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
            {thumbnails.map(({ artifact, index }) => {
              const dimensions = formatArtifactDimensions(artifact);
              return (
                <figure
                  key={`${artifact.partId || artifact.filename}:${index}`}
                  className="min-w-0 overflow-hidden rounded-md border border-black/10 bg-white dark:border-white/10 dark:bg-zinc-950"
                >
                  <img
                    alt={artifact.displayName || artifact.partName || "配件图"}
                    className="aspect-square w-full object-contain"
                    loading="lazy"
                    src={proxyUrl(index)}
                  />
                  <figcaption className="border-t border-black/8 px-2.5 py-2 dark:border-white/10">
                    <p className="truncate text-xs font-medium text-[#303744] dark:text-zinc-200">
                      {[artifact.partId, artifact.partName]
                        .filter(Boolean)
                        .join(" · ") || artifact.displayName}
                    </p>
                    {dimensions ? (
                      <p className="mt-0.5 truncate text-[10px] text-[#929baa] dark:text-zinc-500">
                        {dimensions}
                      </p>
                    ) : null}
                  </figcaption>
                </figure>
              );
            })}
          </div>
        </div>
      ) : null}

      {workbooks.length > 0 || downloads.length > 0 ? (
        <div className="mt-3 flex flex-wrap gap-2">
          {workbooks.map(({ artifact, index }) => (
            <a
              key={`${artifact.downloadUrl}:${index}`}
              className="inline-flex h-9 items-center gap-2 rounded-md bg-[#202631] px-3 text-xs font-medium text-white hover:bg-[#11151c] dark:bg-[#3ecf8e] dark:text-[#07120d] dark:hover:bg-[#55dda0]"
              href={proxyUrl(index, true)}
            >
              <FileSpreadsheet className="h-4 w-4" />
              {artifact.displayName || "下载带配件图BOM与成本报价"}
            </a>
          ))}
          {downloads.map(({ artifact, index }) => (
            <a
              key={`${artifact.downloadUrl}:${index}`}
              className="inline-flex h-9 items-center gap-2 rounded-md border border-black/10 px-3 text-xs font-medium text-[#535d6d] hover:bg-black/5 dark:border-white/15 dark:text-zinc-300 dark:hover:bg-white/8"
              href={proxyUrl(index, true)}
            >
              <Download className="h-4 w-4" />
              {artifact.displayName || artifact.filename}
            </a>
          ))}
        </div>
      ) : null}

      <OpenClawProductionDrawingPanel
        artifacts={withIndex}
        chatId={chatId}
        messageId={messageId}
      />

      {advanced.length > 0 ? (
        <details className="mt-3 border-t border-black/8 pt-2 dark:border-white/10">
          <summary className="cursor-pointer text-xs font-medium text-[#687386] dark:text-zinc-400">
            高级工程文件（{advanced.length}）
          </summary>
          <div className="mt-2 flex flex-wrap gap-2">
            {advanced.map(({ artifact, index }) => (
              <a
                key={`${artifact.downloadUrl}:${index}`}
                className="inline-flex h-8 items-center gap-1.5 rounded-md border border-black/10 px-2.5 text-[11px] text-[#687386] hover:bg-black/5 dark:border-white/15 dark:text-zinc-400 dark:hover:bg-white/8"
                href={proxyUrl(index, true)}
              >
                <File className="h-3.5 w-3.5" />
                {artifact.displayName || artifact.filename}
              </a>
            ))}
          </div>
        </details>
      ) : null}
    </section>
  );
}

export function OpenClawModel3DPreview({
  artifacts,
  chatId,
  messageId,
}: {
  artifacts: OpenClawArtifact[];
  chatId: string;
  messageId: string;
}) {
  const viewerId = useId();
  const bundle = useMemo(
    () => getOpenClaw3DArtifactBundle(artifacts),
    [artifacts]
  );
  const primaryModel = bundle?.model || null;
  const packagingModel =
    bundle && bundle.packagingModelIndex >= 0
      ? artifacts[bundle.packagingModelIndex] || null
      : null;
  const primaryIsPackaging =
    primaryModel && getOpenClaw3DArtifactVariant(primaryModel) === "packaging";
  const productModel = primaryIsPackaging ? null : primaryModel;
  const [viewMode, setViewMode] = useState<OpenClaw3DViewMode>(
    productModel ? "product" : "packaging"
  );
  const model =
    viewMode === "packaging" && packagingModel
      ? packagingModel
      : productModel || packagingModel;
  const [isActive, setIsActive] = useState(false);
  const [webGlUnavailable, setWebGlUnavailable] = useState(false);
  const [resetViewToken, setResetViewToken] = useState(0);
  const [resetSelectedToken, setResetSelectedToken] = useState(0);
  const [resetAllToken, setResetAllToken] = useState(0);
  const [manifest, setManifest] =
    useState<OpenClawModelInteractionManifest | null>();
  const [manifestError, setManifestError] = useState<string | null>(null);
  const interactionManifestIndex = bundle?.manifestIndex ?? -1;
  const [failedPreviewUrl, setFailedPreviewUrl] = useState<string | null>(null);
  const [previewRetry, setPreviewRetry] = useState(0);
  const [selectedPart, setSelectedPart] =
    useState<OpenClawModelInteractionPart | null>(null);
  const [selectedPackagingPart, setSelectedPackagingPart] =
    useState<OpenClawModelInteractionPart | null>(null);
  const [matchState, setMatchState] = useState({ matched: 0, total: 0 });
  const [explodeAmount, setExplodeAmount] = useState(0);
  const [packagingExplodeAmount, setPackagingExplodeAmount] = useState(1);
  const [transformRequest, setTransformRequest] = useState({
    actionId: null as string | null,
    amount: productModel ? 0 : 1,
    animate: false,
    durationMs: 700,
    nonce: 0,
  });
  const hasRestoredSessionRef = useRef(false);
  const restoredSelectedNodeNameRef = useRef<string | null>(null);
  const restoredSelectedPackagingNodeNameRef = useRef<string | null>(null);
  const cameraStatesRef = useRef<
    Partial<Record<OpenClaw3DViewMode, OpenClawModelCameraState>>
  >({});

  const closeViewer = useCallback(() => {
    setIsActive(false);
    setSelectedPart(null);
    setSelectedPackagingPart(null);
    setMatchState({ matched: 0, total: 0 });
    if (typeof window !== "undefined") {
      const storage = getViewerSessionStorage();
      if (!storage) return;
      clearOpenClaw3DViewerSession({
        storage,
        chatId,
        messageId,
      });
    }
  }, [chatId, messageId]);
  const handleMatchChange = useCallback((matched: number, total: number) => {
    setMatchState((current) =>
      current.matched === matched && current.total === total
        ? current
        : { matched, total }
    );
  }, []);

  useEffect(() => {
    if (hasRestoredSessionRef.current || !primaryModel) return;
    hasRestoredSessionRef.current = true;
    const storage = getViewerSessionStorage();
    if (!storage) return;
    const session = readOpenClaw3DViewerSession({
      storage,
      chatId,
    });
    if (session?.messageId !== messageId) return;
    if (!supportsWebGl()) {
      setWebGlUnavailable(true);
      clearOpenClaw3DViewerSession({
        storage,
        chatId,
        messageId,
      });
      return;
    }

    const restoredViewMode =
      session.viewMode === "packaging" && packagingModel
        ? "packaging"
        : productModel
          ? "product"
          : "packaging";
    restoredSelectedNodeNameRef.current = session.selectedNodeName;
    restoredSelectedPackagingNodeNameRef.current =
      session.selectedPackagingNodeName;
    setViewMode(restoredViewMode);
    setExplodeAmount(session.explodeAmount);
    setPackagingExplodeAmount(session.packagingExplodeAmount);
    setTransformRequest((current) => ({
      actionId: null,
      amount:
        restoredViewMode === "packaging"
          ? session.packagingExplodeAmount
          : session.explodeAmount,
      animate: false,
      durationMs:
        (restoredViewMode === "packaging"
          ? packagingModel?.viewer?.transitionDurationMs
          : productModel?.viewer?.transitionDurationMs) || 700,
      nonce: current.nonce + 1,
    }));
    window.dispatchEvent(
      new CustomEvent(ACTIVE_VIEWER_EVENT, { detail: viewerId })
    );
    setIsActive(true);
  }, [chatId, messageId, packagingModel, primaryModel, productModel, viewerId]);

  useEffect(() => {
    if (!isActive) return;
    const storage = getViewerSessionStorage();
    if (!storage) return;
    writeOpenClaw3DViewerSession({
      storage,
      chatId,
      messageId,
      viewMode,
      explodeAmount,
      packagingExplodeAmount,
      selectedNodeName: selectedPart?.nodeName || null,
      selectedPackagingNodeName: selectedPackagingPart?.nodeName || null,
    });
  }, [
    chatId,
    explodeAmount,
    isActive,
    messageId,
    packagingExplodeAmount,
    selectedPackagingPart?.nodeName,
    selectedPart?.nodeName,
    viewMode,
  ]);

  useEffect(() => {
    const nodeName = restoredSelectedNodeNameRef.current;
    if (!manifest || !nodeName) return;
    restoredSelectedNodeNameRef.current = null;
    setSelectedPart(
      manifest.parts.find((part) => part.nodeName === nodeName) || null
    );
  }, [manifest]);

  useEffect(() => {
    const nodeName = restoredSelectedPackagingNodeNameRef.current;
    if (!manifest || !nodeName) return;
    restoredSelectedPackagingNodeNameRef.current = null;
    setSelectedPackagingPart(
      getOpenClawPackagingInteractionParts(manifest).find(
        (part) => part.nodeName === nodeName
      ) || null
    );
  }, [manifest]);

  useEffect(() => {
    const handleOtherViewerActivated = (event: Event) => {
      const activeId = (event as CustomEvent<string>).detail;
      if (activeId !== viewerId) closeViewer();
    };
    window.addEventListener(ACTIVE_VIEWER_EVENT, handleOtherViewerActivated);
    return () => {
      window.removeEventListener(ACTIVE_VIEWER_EVENT, handleOtherViewerActivated);
    };
  }, [closeViewer, viewerId]);

  useEffect(() => {
    if (!isActive) return;
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key !== "Escape") return;
      event.preventDefault();
      closeViewer();
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [closeViewer, isActive]);

  useEffect(() => {
    if (!isActive || manifest !== undefined) return;
    if (interactionManifestIndex < 0) {
      setManifest(null);
      return;
    }
    const controller = new AbortController();
    const manifestUrl = buildOpenClawArtifactProxyUrl({
      chatId,
      messageId,
      artifactIndex: interactionManifestIndex,
    });
    const timeout = setTimeout(() => {
      controller.abort();
      setManifest(null);
      setManifestError("交互清单加载超时");
    }, 15000);
    setManifestError(null);
    fetch(manifestUrl, { signal: controller.signal })
      .then(async (response) => {
        if (!response.ok) {
          throw new Error(`交互清单读取失败（HTTP ${response.status}）`);
        }
        const normalized = normalizeOpenClawModelInteractionManifest(
          await response.json()
        );
        if (!normalized) throw new Error("交互清单格式不正确");
        setManifest(normalized);
      })
      .catch((error) => {
        if (controller.signal.aborted) return;
        setManifest(null);
        setManifestError(
          error instanceof Error ? error.message : "交互清单读取失败"
        );
      })
      .finally(() => clearTimeout(timeout));
    return () => {
      clearTimeout(timeout);
      controller.abort();
    };
  }, [interactionManifestIndex, chatId, isActive, manifest, messageId]);

  useEffect(() => {
    if (viewMode === "product" && !productModel && packagingModel) {
      setViewMode("packaging");
    } else if (viewMode === "packaging" && !packagingModel && productModel) {
      setViewMode("product");
    }
  }, [packagingModel, productModel, viewMode]);

  const packagingInteractionParts = useMemo(
    () => (manifest ? getOpenClawPackagingInteractionParts(manifest) : []),
    [manifest]
  );

  if (!bundle || !model) {
    return (
      <OpenClawSupportingArtifacts
        artifacts={artifacts}
        chatId={chatId}
        messageId={messageId}
      />
    );
  }

  const isPackagingView = viewMode === "packaging" && Boolean(packagingModel);
  const activeModelIndex = isPackagingView
    ? bundle.packagingModelIndex
    : bundle.modelIndex;
  const activePreviewIndex = isPackagingView
    ? bundle.packagingPreviewIndex
    : bundle.previewIndex;
  const interactionParts = isPackagingView
    ? packagingInteractionParts
    : manifest?.parts || [];
  const selectedInteractionPart = isPackagingView
    ? selectedPackagingPart
    : selectedPart;
  const activeExplodeAmount = isPackagingView
    ? packagingExplodeAmount
    : explodeAmount;

  const modelUrl = buildOpenClawArtifactProxyUrl({
    chatId,
    messageId,
    artifactIndex: activeModelIndex,
  });
  const downloadUrl = buildOpenClawArtifactProxyUrl({
    chatId,
    messageId,
    artifactIndex: activeModelIndex,
    download: true,
  });
  const previewUrl =
    activePreviewIndex >= 0
      ? buildOpenClawArtifactProxyUrl({
          chatId,
          messageId,
          artifactIndex: activePreviewIndex,
        })
      : null;
  const isAssembledModel =
    model.artifactRole.toLowerCase() === "assembled_3d" ||
    model.viewer?.variant === "assembled";
  const artifactVariant = getOpenClaw3DArtifactVariant(model);
  const sourceVariant = artifactVariant === "packaging" ? "exploded" : artifactVariant;
  const supportsNodeInteraction = Boolean(
    manifest &&
      interactionParts.length > 0 &&
      (isPackagingView || isAssembledModel || sourceVariant === "exploded")
  );
  const displayedModelName =
    isPackagingView
      ? model.displayName || "3D包装预览"
      : supportsNodeInteraction && sourceVariant === "exploded"
      ? "可旋转3D整装成品模型"
      : model.displayName || model.filename || "3D 模型";
  const canDragParts = Boolean(
    !isPackagingView &&
      supportsNodeInteraction &&
      (model.viewer?.partDragging || manifest?.parts.some((part) => part.draggable))
  );
  const canExplode = Boolean(
    supportsNodeInteraction &&
      (isPackagingView
        ? manifest?.capabilities.oneClickPackagingExplode
        : model.viewer?.oneClickExplode || manifest?.capabilities.oneClickExplode)
  );
  const canAssemble = Boolean(
    supportsNodeInteraction &&
      (isPackagingView
        ? manifest?.capabilities.oneClickPackagingPack
        : model.viewer?.oneClickAssemble || manifest?.capabilities.oneClickAssemble)
  );
  const showExplodeSlider = Boolean(
    !isPackagingView &&
      supportsNodeInteraction &&
      (model.viewer?.explodeSlider || manifest?.capabilities.explodeSlider)
  );
  const canResetParts = Boolean(
    !isPackagingView &&
      supportsNodeInteraction &&
      (model.viewer?.resetParts || manifest?.parts.some((part) => part.draggable))
  );

  const activateViewer = () => {
    if (!supportsWebGl()) {
      setWebGlUnavailable(true);
      return;
    }
    setWebGlUnavailable(false);
    window.dispatchEvent(new CustomEvent(ACTIVE_VIEWER_EVENT, { detail: viewerId }));
    setIsActive(true);
  };
  const updateExplodeAmount = (
    amount: number,
    animate: boolean,
    actionId: string | null = null
  ) => {
    const normalized = Math.max(0, Math.min(1, amount));
    if (isPackagingView) {
      setPackagingExplodeAmount(normalized);
    } else {
      setExplodeAmount(normalized);
    }
    const action = manifest?.actions.find((item) => item.id === actionId);
    setTransformRequest((current) => ({
      actionId,
      amount: normalized,
      animate,
      durationMs:
        action?.durationMs || model.viewer?.transitionDurationMs || 700,
      nonce: current.nonce + 1,
    }));
  };
  const switchViewMode = (nextMode: OpenClaw3DViewMode) => {
    if (nextMode === viewMode) return;
    const nextAmount =
      nextMode === "packaging" ? packagingExplodeAmount : explodeAmount;
    setViewMode(nextMode);
    setMatchState({ matched: 0, total: 0 });
    setTransformRequest((current) => ({
      actionId: null,
      amount: nextAmount,
      animate: false,
      durationMs: 700,
      nonce: current.nonce + 1,
    }));
  };
  const selectedDimensions = selectedInteractionPart
    ? formatDimensions(selectedInteractionPart)
    : null;
  const packagingInfo = isPackagingView ? manifest?.packaging : null;
  const packagingDimensions = packagingInfo?.packageDimensions.length
    ? packagingInfo.packageDimensions
        .map(
          (item) =>
            `第${item.packageIndex}箱 ${item.dimensionsMm.x} x ${item.dimensionsMm.y} x ${item.dimensionsMm.z} mm`
        )
        .join("；")
    : packagingInfo?.packageDimensionsMm
      ? `${packagingInfo.packageDimensionsMm.x} x ${packagingInfo.packageDimensionsMm.y} x ${packagingInfo.packageDimensionsMm.z} mm`
      : null;

  return (
    <>
      <section className="mt-3 w-full max-w-[760px] overflow-hidden rounded-lg border border-black/10 bg-white dark:border-white/10 dark:bg-zinc-950">
      <header className="flex min-h-11 items-center justify-between gap-2 border-b border-black/8 px-3 py-1.5 dark:border-white/10">
        <div className="flex min-w-0 items-center gap-2">
          <Box className="h-4 w-4 shrink-0 text-[#687386] dark:text-zinc-400" />
          <span className="truncate text-[13px] font-medium text-[#2f3640] dark:text-zinc-200">
            {displayedModelName}
          </span>
          <span className="shrink-0 text-[11px] uppercase text-[#9aa2af] dark:text-zinc-500">
            {model.viewer?.format || "glb"}
          </span>
        </div>
        <div className="flex shrink-0 items-center gap-1">
          {isActive ? (
            <>
              <button
                type="button"
                className="inline-flex h-8 w-8 items-center justify-center rounded-md text-[#697386] transition-colors hover:bg-black/5 hover:text-[#202631] dark:text-zinc-400 dark:hover:bg-white/10 dark:hover:text-zinc-100"
                aria-label="复位3D视角"
                title="复位3D视角"
                onClick={() => {
                  delete cameraStatesRef.current[viewMode];
                  setResetViewToken((value) => value + 1);
                }}
              >
                <RotateCcw className="h-4 w-4" />
              </button>
              <button
                type="button"
                className="inline-flex h-8 items-center justify-center gap-1 rounded-md px-2 text-[12px] font-medium text-[#535d6d] transition-colors hover:bg-black/5 hover:text-[#202631] dark:text-zinc-300 dark:hover:bg-white/10 dark:hover:text-white"
                aria-label="退出3D预览"
                title="退出3D预览，恢复页面滚动"
                onClick={closeViewer}
              >
                <X className="h-4 w-4" />
                <span className="hidden sm:inline">退出预览</span>
              </button>
            </>
          ) : null}
          <a
            className="inline-flex h-8 w-8 items-center justify-center rounded-md text-[#697386] transition-colors hover:bg-black/5 hover:text-[#202631] dark:text-zinc-400 dark:hover:bg-white/10 dark:hover:text-zinc-100"
            aria-label="下载3D模型"
            title="下载3D模型"
            href={downloadUrl}
          >
            <Download className="h-4 w-4" />
          </a>
        </div>
      </header>

      {productModel && packagingModel ? (
        <div className="flex items-center gap-1 border-b border-black/8 bg-black/[0.015] px-3 py-2 dark:border-white/10 dark:bg-white/[0.025]">
          <button
            type="button"
            aria-pressed={viewMode === "product"}
            className={
              viewMode === "product"
                ? "inline-flex h-8 items-center gap-1.5 rounded-md bg-[#202631] px-3 text-xs font-medium text-white dark:bg-[#3ecf8e] dark:text-[#07120d]"
                : "inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs font-medium text-[#687386] hover:bg-black/5 hover:text-[#202631] dark:text-zinc-400 dark:hover:bg-white/8 dark:hover:text-white"
            }
            onClick={() => switchViewMode("product")}
          >
            <Box className="h-3.5 w-3.5" />
            产品
          </button>
          <button
            type="button"
            aria-pressed={viewMode === "packaging"}
            className={
              viewMode === "packaging"
                ? "inline-flex h-8 items-center gap-1.5 rounded-md bg-[#202631] px-3 text-xs font-medium text-white dark:bg-[#3ecf8e] dark:text-[#07120d]"
                : "inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs font-medium text-[#687386] hover:bg-black/5 hover:text-[#202631] dark:text-zinc-400 dark:hover:bg-white/8 dark:hover:text-white"
            }
            onClick={() => switchViewMode("packaging")}
          >
            <Package className="h-3.5 w-3.5" />
            包装预览
          </button>
        </div>
      ) : null}

      <div
        className="relative h-[clamp(300px,44vw,460px)] w-full overflow-hidden"
        style={{ backgroundColor: model.viewer?.background || "#f7f9fc" }}
      >
        {isActive ? (
          manifest === undefined && bundle.manifestIndex >= 0 ? (
            <ViewerLoading />
          ) : supportsNodeInteraction && manifest ? (
            <>
              <OpenClawInteractiveModelViewer
                allowDragging={canDragParts}
                background={model.viewer?.background || "#f7f9fc"}
                fitExplodedSource={isPackagingView}
                initialCameraState={cameraStatesRef.current[viewMode] || null}
                interactionParts={interactionParts}
                manifest={manifest}
                modelUrl={modelUrl}
                onCameraStateChange={(state) => {
                  cameraStatesRef.current[viewMode] = state;
                }}
                onMatchChange={handleMatchChange}
                onSelectedPartChange={(part) => {
                  if (isPackagingView) {
                    setSelectedPackagingPart(part);
                  } else {
                    setSelectedPart(part);
                  }
                }}
                previewImageUrl={previewUrl}
                resetAllToken={resetAllToken}
                resetSelectedToken={resetSelectedToken}
                resetViewToken={resetViewToken}
                selectedNodeName={selectedInteractionPart?.nodeName || null}
                sourceVariant={sourceVariant}
                transformRequest={transformRequest}
              />

              {selectedInteractionPart ? (
                <div className="pointer-events-none absolute left-3 top-3 max-w-[calc(100%-24px)] rounded-md bg-black/72 px-3 py-2 text-white shadow-sm backdrop-blur-sm">
                  <p className="truncate text-xs font-medium">
                    {selectedInteractionPart.partId} · {selectedInteractionPart.partName}
                  </p>
                  {selectedDimensions ? (
                    <p className="mt-0.5 text-[11px] text-white/65">
                      {selectedDimensions}
                    </p>
                  ) : null}
                </div>
              ) : null}

              <div className="absolute inset-x-0 bottom-0 border-t border-black/10 bg-white/94 px-3 py-2.5 backdrop-blur-md dark:border-white/10 dark:bg-zinc-950/94">
                <div className="flex flex-wrap items-center gap-2">
                  {canExplode || canAssemble ? (
                    <div
                      aria-label={isPackagingView ? "3D包装状态" : "3D模型状态"}
                      className="inline-flex h-8 items-center rounded-md border border-black/10 bg-black/[0.025] p-0.5 dark:border-white/15 dark:bg-white/[0.06]"
                      role="group"
                    >
                      {canAssemble ? (
                        <button
                          type="button"
                          aria-pressed={activeExplodeAmount < 0.5}
                          className={
                            activeExplodeAmount < 0.5
                              ? "inline-flex h-7 items-center gap-1.5 rounded-[4px] bg-white px-2.5 text-xs font-medium text-[#202631] shadow-sm dark:bg-[#3ecf8e] dark:text-[#07120d]"
                              : "inline-flex h-7 items-center gap-1.5 rounded-[4px] px-2.5 text-xs font-medium text-[#687386] hover:text-[#202631] dark:text-zinc-400 dark:hover:text-zinc-100"
                          }
                          onClick={() =>
                            updateExplodeAmount(
                              0,
                              true,
                              isPackagingView
                                ? "packaging_pack"
                                : model.viewer?.assembleActionId || "assemble_all"
                            )
                          }
                        >
                          <Minimize2 className="h-3.5 w-3.5" />
                          {isPackagingView ? "合上包装" : "组合状态"}
                        </button>
                      ) : null}
                      {canExplode ? (
                        <button
                          type="button"
                          aria-pressed={activeExplodeAmount >= 0.5}
                          className={
                            activeExplodeAmount >= 0.5
                              ? "inline-flex h-7 items-center gap-1.5 rounded-[4px] bg-white px-2.5 text-xs font-medium text-[#202631] shadow-sm dark:bg-[#3ecf8e] dark:text-[#07120d]"
                              : "inline-flex h-7 items-center gap-1.5 rounded-[4px] px-2.5 text-xs font-medium text-[#687386] hover:text-[#202631] dark:text-zinc-400 dark:hover:text-zinc-100"
                          }
                          onClick={() =>
                            updateExplodeAmount(
                              1,
                              true,
                              isPackagingView
                                ? "packaging_explode"
                                : model.viewer?.explodeActionId || "explode_all"
                            )
                          }
                        >
                          <Maximize2 className="h-3.5 w-3.5" />
                          {isPackagingView ? "展开包装" : "爆炸状态"}
                        </button>
                      ) : null}
                    </div>
                  ) : null}
                  {selectedInteractionPart && canResetParts ? (
                    <button
                      type="button"
                      className="inline-flex h-8 w-8 items-center justify-center rounded-md text-[#697386] hover:bg-black/5 hover:text-[#202631] dark:text-zinc-400 dark:hover:bg-white/10 dark:hover:text-white"
                      aria-label="归位当前配件"
                      title="归位当前配件"
                      onClick={() => setResetSelectedToken((value) => value + 1)}
                    >
                      <Undo2 className="h-4 w-4" />
                    </button>
                  ) : null}
                  {canResetParts ? (
                    <button
                      type="button"
                      className="inline-flex h-8 w-8 items-center justify-center rounded-md text-[#697386] hover:bg-black/5 hover:text-[#202631] dark:text-zinc-400 dark:hover:bg-white/10 dark:hover:text-white"
                      aria-label="全部配件归位"
                      title="全部配件归位"
                      onClick={() => setResetAllToken((value) => value + 1)}
                    >
                      <RotateCcw className="h-4 w-4" />
                    </button>
                  ) : null}
                  {matchState.total > 0 && matchState.matched < matchState.total ? (
                    <span className="text-[11px] text-amber-700 dark:text-amber-300">
                      已识别 {matchState.matched}/{matchState.total} 个
                      {isPackagingView ? "包装层" : "配件"}
                    </span>
                  ) : null}
                </div>
                {showExplodeSlider ? (
                  <label className="mt-2 flex items-center gap-3 text-[11px] text-[#697386] dark:text-zinc-400">
                    <span className="shrink-0">爆炸程度</span>
                    <input
                      type="range"
                      min="0"
                      max="100"
                      value={Math.round(activeExplodeAmount * 100)}
                      className="h-1.5 min-w-0 flex-1 accent-[#202631] dark:accent-[#3ecf8e]"
                      onChange={(event) =>
                        updateExplodeAmount(Number(event.target.value) / 100, false)
                      }
                    />
                    <span className="w-8 text-right tabular-nums">
                      {Math.round(activeExplodeAmount * 100)}%
                    </span>
                  </label>
                ) : null}
              </div>
            </>
          ) : (
            <Model3DViewer
              autoFitModel
              localStudioEnvironment
              modelFormat={model.viewer?.format || "glb"}
              modelUrl={modelUrl}
              previewImageUrl={previewUrl}
              resetViewToken={resetViewToken}
              settings={{
                autoRotate: model.viewer?.autoRotate || false,
                cameraPreset: "iso",
                envPreset: "studio",
                lightIntensity: 1,
                showGrid: false,
                wireframe: false,
              }}
            />
          )
        ) : (
          <div className="relative flex h-full w-full items-center justify-center bg-[#f7f9fc] dark:bg-zinc-950">
            {previewUrl && failedPreviewUrl !== previewUrl ? (
              <img
                alt={`${model.displayName || "3D 模型"}静态预览`}
                className="absolute inset-0 h-full w-full object-contain"
                loading="lazy"
                src={previewRetry ? `${previewUrl}&previewRetry=${previewRetry}` : previewUrl}
                onError={() => setFailedPreviewUrl(previewUrl)}
              />
            ) : (
              <Box className="h-16 w-16 text-[#c7cdd6] dark:text-zinc-700" />
            )}
            <button
              type="button"
              className="relative inline-flex h-10 items-center justify-center gap-2 rounded-md bg-[#202631] px-4 text-[13px] font-medium text-white shadow-sm transition-colors hover:bg-[#11151c] dark:bg-[#3ecf8e] dark:text-[#07120d] dark:hover:bg-[#55dda0]"
              onClick={activateViewer}
            >
              <Box className="h-4 w-4" />
              查看 3D
            </button>
            {previewUrl && failedPreviewUrl === previewUrl ? (
              <div className="absolute inset-x-0 bottom-3 text-center text-xs text-[#687386]">
                <p>静态预览加载失败，可以直接查看 3D 或重试预览。</p>
                <button
                  type="button"
                  className="mt-1 underline underline-offset-2"
                  onClick={() => {
                    setPreviewRetry((value) => value + 1);
                    setFailedPreviewUrl(null);
                  }}
                >
                  重试预览
                </button>
              </div>
            ) : null}
          </div>
        )}
      </div>
      {packagingInfo ? (
        <div className="grid grid-cols-2 gap-x-4 gap-y-2 border-t border-black/8 bg-black/[0.015] px-3 py-3 text-xs dark:border-white/10 dark:bg-white/[0.025] sm:grid-cols-4">
          <div className="min-w-0">
            <p className="text-[11px] text-[#929baa] dark:text-zinc-500">箱型</p>
            <p className="mt-0.5 truncate font-medium text-[#303744] dark:text-zinc-200">
              {packagingInfo.boxStyleLabel || "未标注"}
            </p>
          </div>
          <div className="min-w-0">
            <p className="text-[11px] text-[#929baa] dark:text-zinc-500">包装箱数</p>
            <p className="mt-0.5 font-medium text-[#303744] dark:text-zinc-200">
              {packagingInfo.packageCount ?? "-"}
            </p>
          </div>
          <div className="min-w-0">
            <p className="text-[11px] text-[#929baa] dark:text-zinc-500">总包装体积</p>
            <p className="mt-0.5 font-medium text-[#303744] dark:text-zinc-200">
              {packagingInfo.totalPackagingVolumeM3 != null
                ? `${packagingInfo.totalPackagingVolumeM3.toFixed(3)} m³`
                : "-"}
            </p>
          </div>
          <div className="min-w-0">
            <p className="text-[11px] text-[#929baa] dark:text-zinc-500">体积重</p>
            <p className="mt-0.5 font-medium text-[#303744] dark:text-zinc-200">
              {packagingInfo.volumeWeightKg != null
                ? `${packagingInfo.volumeWeightKg.toFixed(1)} kg`
                : "-"}
            </p>
          </div>
          {packagingDimensions ? (
            <div className="col-span-2 min-w-0 sm:col-span-4">
              <p className="text-[11px] text-[#929baa] dark:text-zinc-500">每箱尺寸</p>
              <p className="mt-0.5 break-words font-medium text-[#303744] dark:text-zinc-200">
                {packagingDimensions}
              </p>
            </div>
          ) : null}
        </div>
      ) : null}
      {webGlUnavailable || manifestError ? (
        <p className="border-t border-black/8 px-3 py-2 text-xs text-amber-700 dark:border-white/10 dark:text-amber-300">
          {webGlUnavailable
            ? "当前浏览器无法启动3D预览，已保留静态预览和模型下载。"
            : `${manifestError}，已切换为基础3D预览。`}
        </p>
      ) : null}
      </section>
      <OpenClawSupportingArtifacts
        artifacts={artifacts}
        chatId={chatId}
        messageId={messageId}
      />
    </>
  );
}