"use client";

import { AlertTriangle, Box, Loader2 } from "lucide-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import CadViewer from "@/viewer-port/components/CadViewer";
import { RENDER_FORMAT } from "@/viewer-port/workbench/constants";
import { loadRenderGlb, loadRenderJson } from "@/viewer-runtime/lib/renderAssetClient";
import { cloneThemePresetSettings } from "@/viewer-runtime/lib/themeSettings";
import { encodeArtifactUrl } from "@/lib/cad-artifacts";
import { buildCdslSelectorRuntime } from "@/lib/cdsl-selector-runtime";
import { cadEditToolForOperation, cadEditToolNextPickKind, cadEditToolPickComplete, defaultCadEditParameters, type AiSelectionMode } from "@/lib/cad-edit-tools";
import type { CadResult } from "@/lib/cad-types";
import { buildViewerSelectionContext, type ViewerSelectionContext } from "@/lib/viewer-selection";
import { EmbeddedCadEditToolbar, EmbeddedCadViewToolbar } from "./embedded-cad-toolbar";
import { GenerationEdgeGlow } from "./generation-edge-glow";
import { ParameterPanel } from "./parameter-panel";

type Props = {
  result: CadResult | null;
  isGenerating: boolean;
  lastError?: string;
  theme: "light" | "dark";
  onResult: (result: CadResult) => void;
  onError: (message: string) => void;
  onSelectionChange: (selection: ViewerSelectionContext | null) => void;
};

type SelectorRuntime = ReturnType<typeof buildCdslSelectorRuntime>;
type LoadState = { kind: "empty" | "loading" | "error" } | { kind: "ready"; meshData: unknown; selectorRuntime: SelectorRuntime | null };
type AiSelectionDraft = {
  active?: boolean;
  points?: Array<{ x: number; y: number }>;
} | null;

const VIEWER_THEME = (() => {
  const base = cloneThemePresetSettings("workbench") as Record<string, unknown>;
  return {
    ...base,
    materials: { ...(base.materials as Record<string, unknown>), defaultColor: "#d7dce2", roughness: 0.36, metalness: 0.18 },
    edges: { ...(base.edges as Record<string, unknown>), enabled: true, color: "#768493", opacity: 0.22, thickness: 1 },
    floor: { ...(base.floor as Record<string, unknown>), enabled: false, mode: "none" },
    environment: { ...(base.environment as Record<string, unknown>), enabled: false },
  };
})();

function resultFromBackend(payload: Record<string, unknown>): CadResult {
  return {
    taskId: String(payload.task_id), revisionId: String(payload.revision_id),
    cdslPath: String(payload.cdsl_path), stepPath: String(payload.step_path),
    glbPath: String(payload.glb_path), reportPath: String(payload.report_path),
    parametersPath: typeof payload.parameters_path === "string" ? payload.parameters_path : undefined,
    selectorPath: typeof payload.selector_path === "string" ? payload.selector_path : undefined,
    edgesPath: typeof payload.edges_path === "string" ? payload.edges_path : undefined,
    summary: String(payload.summary || "Updated CDSL model"),
    referenceIds: Array.isArray(payload.reference_ids) ? payload.reference_ids.map(String) : [],
    engine: String(payload.engine || "cdsl_only"),
  };
}

function finiteClientPoint(pick: Record<string, unknown> | null) {
  const x = Number(pick?.clientX);
  const y = Number(pick?.clientY);
  return Number.isFinite(x) && Number.isFinite(y) ? { x, y } : null;
}

function editToolPickMarkerLabel(activeToolId: string, index: number) {
  if (activeToolId === "add_slot") return index === 0 ? "起点" : "终点";
  if (activeToolId === "add_hole_pattern") return "中心";
  return "位置";
}

function editParameter(parameters: Record<string, string | number>, name: string, fallback: number) {
  const value = Number(parameters[name]);
  return Number.isFinite(value) ? value : fallback;
}

function previewPixels(valueMm: number, scale = 5, min = 12, max = 180) {
  const value = Math.abs(valueMm);
  return Number.isFinite(value) && value > 0 ? Math.min(Math.max(value * scale, min), max) : min;
}

function AiSelectionOverlay({ draft }: { draft: AiSelectionDraft }) {
  const points = draft?.active && Array.isArray(draft.points) ? draft.points : [];
  const polylinePoints = points.map((point) => `${Number(point.x)},${Number(point.y)}`).join(" ");
  if (!polylinePoints) return null;
  return (
    <div className="pointer-events-none fixed inset-0 z-[26]" aria-hidden="true">
      <svg className="fixed inset-0 size-full overflow-visible">
        <polyline
          points={polylinePoints}
          fill="none"
          className="stroke-[var(--ui-accent)] opacity-[0.85]"
          strokeWidth="2.25"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    </div>
  );
}

function EditToolPickOverlay({
  activeToolId,
  picks,
  hoverPick,
  parameters,
}: {
  activeToolId: string;
  picks: Record<string, unknown>[];
  hoverPick: Record<string, unknown> | null;
  parameters: Record<string, string | number>;
}) {
  if (!activeToolId) return null;
  const selected = picks.flatMap((pick, index) => {
    const point = finiteClientPoint(pick);
    return point ? [{ pick, index, point, hover: false }] : [];
  });
  const hoverPoint = finiteClientPoint(hoverPick);
  const hover = hoverPoint && !selected.some((entry) => Math.hypot(entry.point.x - hoverPoint.x, entry.point.y - hoverPoint.y) < 1)
    ? { pick: hoverPick || {}, index: selected.length, point: hoverPoint, hover: true }
    : null;
  const points = hover ? [...selected, hover] : selected;
  if (!points.length) return null;

  const slot = activeToolId === "add_slot" && points.length >= 2
    ? { start: points[0].point, end: points[1].point, preview: points[1].hover }
    : null;
  const anchor = activeToolId === "add_slot" ? null : (selected.at(-1)?.point || hover?.point || null);
  const tool = activeToolId === "add_counterbore" ? "double" : activeToolId;
  const circle = anchor && ["add_hole", "double", "add_countersink", "add_circular_pocket"].includes(tool)
    ? {
      point: anchor,
      inner: previewPixels(editParameter(parameters, tool === "add_circular_pocket" ? "diameter" : "holeDiameter", tool === "add_circular_pocket" ? 8 : 3)),
      outer: tool === "double"
        ? previewPixels(editParameter(parameters, "counterboreDiameter", 6))
        : tool === "add_countersink"
          ? previewPixels(editParameter(parameters, "countersinkDiameter", 6))
          : 0,
      dashed: tool === "add_countersink",
    }
    : null;
  const pocket = anchor && activeToolId === "add_pocket"
    ? { point: anchor, width: previewPixels(editParameter(parameters, "width", 10), 4, 24, 240), height: previewPixels(editParameter(parameters, "height", 6), 4, 18, 180) }
    : null;
  const pattern = anchor && activeToolId === "add_hole_pattern"
    ? {
      point: anchor,
      rows: Math.min(Math.max(Math.round(editParameter(parameters, "rows", 2)), 1), 8),
      columns: Math.min(Math.max(Math.round(editParameter(parameters, "columns", 2)), 1), 8),
      pitchX: previewPixels(editParameter(parameters, "pitchX", 8), 3, 18, 90),
      pitchY: previewPixels(editParameter(parameters, "pitchY", 8), 3, 18, 90),
      diameter: previewPixels(editParameter(parameters, "holeDiameter", 2), 4, 8, 48),
    }
    : null;
  const slotWidth = slot ? previewPixels(editParameter(parameters, "slotWidth", 2), 5, 12, 80) : 0;

  return (
    <div className="pointer-events-none fixed inset-0 z-[25]" aria-hidden="true">
      {(slot || circle || pocket || pattern) ? (
        <svg className="fixed inset-0 size-full overflow-visible">
          {slot ? <>
            <line x1={slot.start.x} y1={slot.start.y} x2={slot.end.x} y2={slot.end.y} className="stroke-[var(--ui-accent-soft)]" strokeWidth={slotWidth} strokeLinecap="round" />
            <line x1={slot.start.x} y1={slot.start.y} x2={slot.end.x} y2={slot.end.y} className={slot.preview ? "stroke-[var(--ui-accent)] opacity-65" : "stroke-[var(--ui-accent)] opacity-90"} strokeWidth="2.5" strokeLinecap="round" strokeDasharray={slot.preview ? "7 5" : "none"} />
          </> : null}
          {circle ? <>
            {circle.outer ? <circle cx={circle.point.x} cy={circle.point.y} r={circle.outer / 2} className="fill-[var(--ui-accent-soft)] stroke-[var(--ui-accent)]" strokeWidth="2" strokeDasharray={circle.dashed ? "7 4" : "none"} /> : null}
            <circle cx={circle.point.x} cy={circle.point.y} r={circle.inner / 2} className="fill-[var(--ui-accent-soft)] stroke-[var(--ui-accent)]" strokeWidth="2" strokeDasharray={circle.outer ? "4 4" : "5 4"} />
          </> : null}
          {pocket ? <rect x={pocket.point.x - pocket.width / 2} y={pocket.point.y - pocket.height / 2} width={pocket.width} height={pocket.height} rx="6" className="fill-[var(--ui-accent-soft)] stroke-[var(--ui-accent)]" strokeWidth="2" strokeDasharray="6 4" /> : null}
          {pattern ? Array.from({ length: pattern.rows * pattern.columns }, (_, index) => {
            const row = Math.floor(index / pattern.columns);
            const column = index % pattern.columns;
            return <circle key={index} cx={pattern.point.x + (column - (pattern.columns - 1) / 2) * pattern.pitchX} cy={pattern.point.y + (row - (pattern.rows - 1) / 2) * pattern.pitchY} r={pattern.diameter / 2} className="fill-[var(--ui-accent-soft)] stroke-[var(--ui-accent)]" strokeWidth="1.5" strokeDasharray="4 3" />;
          }) : null}
        </svg>
      ) : null}
      {points.map(({ index, point, hover: isHover }) => (
        <div key={`${index}:${point.x}:${point.y}`} className="fixed" style={{ left: `${point.x}px`, top: `${point.y}px`, transform: "translate(-50%, -50%)" }}>
          <span className={`absolute left-1/2 top-1/2 h-12 w-px -translate-x-1/2 -translate-y-1/2 bg-[var(--ui-accent-muted)] ${isHover ? "opacity-60" : "opacity-100"}`} />
          <span className={`absolute left-1/2 top-1/2 h-px w-12 -translate-x-1/2 -translate-y-1/2 bg-[var(--ui-accent-muted)] ${isHover ? "opacity-60" : "opacity-100"}`} />
          <span className={`absolute left-1/2 top-1/2 size-7 -translate-x-1/2 -translate-y-1/2 rounded-full border bg-[var(--ui-accent-soft)] shadow-[0_0_22px_var(--ui-accent-muted)] ${isHover ? "border-[var(--ui-accent-border)] border-dashed opacity-75" : "border-[var(--ui-accent-border)]"}`} />
          <span className={`relative block rounded-full border border-[var(--ui-text-inverse)] bg-[var(--ui-accent)] shadow-[var(--ui-shadow-soft)] ${isHover ? "size-2 opacity-70" : "size-3"}`} />
          <span className="absolute left-4 top-3 whitespace-nowrap rounded-full border border-[var(--ui-accent-border)] bg-[var(--ui-glass-popover)] px-2 py-0.5 text-[10px] font-semibold text-[var(--ui-text-strong)] shadow-[var(--ui-shadow-soft)]">{isHover ? "预选" : editToolPickMarkerLabel(activeToolId, index)}</span>
        </div>
      ))}
    </div>
  );
}

export function CadViewerPreview({ result, isGenerating, lastError, theme, onResult, onError, onSelectionChange }: Props) {
  const viewerRef = useRef<{ captureScreenshot?: (options?: unknown) => Promise<void>; zoomToFit?: () => void } | null>(null);
  // A task restored from the URL should appear quietly after a page refresh.
  // Subsequent revisions in this mounted workspace still receive completion feedback.
  const suppressInitialReveal = useRef(Boolean(result));
  const [loadState, setLoadState] = useState<LoadState>({ kind: "empty" });
  const [activeTool, setActiveTool] = useState("");
  const [editPicks, setEditPicks] = useState<Record<string, unknown>[]>([]);
  const [editParameters, setEditParameters] = useState<Record<string, string | number>>({});
  const [editHoverPick, setEditHoverPick] = useState<Record<string, unknown> | null>(null);
  const [editSelectionReady, setEditSelectionReady] = useState(false);
  const [aiSelectionDraft, setAiSelectionDraft] = useState<AiSelectionDraft>(null);
  const [hoveredReferenceId, setHoveredReferenceId] = useState("");
  const [selectedReferenceIds, setSelectedReferenceIds] = useState<string[]>([]);
  const [selectionMode, setSelectionMode] = useState<AiSelectionMode>("point");
  const [editPending, setEditPending] = useState(false);
  const [reveal, setReveal] = useState(0);
  const [showParameters, setShowParameters] = useState(false);
  const [parameters, setParameters] = useState<Record<string, unknown>[]>([]);
  const [parameterPending, setParameterPending] = useState("");
  const [parameterError, setParameterError] = useState("");

  useEffect(() => {
    if (!result) {
      setLoadState((current) => current.kind === "ready" ? current : { kind: "empty" });
      return;
    }
    const controller = new AbortController();
    setLoadState((current) => current.kind === "ready" ? current : { kind: "loading" });
    const glbUrl = encodeArtifactUrl(result.taskId, result.glbPath);
    const selectorUrl = result.selectorPath ? encodeArtifactUrl(result.taskId, result.selectorPath) : "";
    void Promise.all([
      loadRenderGlb(glbUrl),
      selectorUrl ? loadRenderJson(selectorUrl).catch(() => null) : Promise.resolve(null),
    ])
      .then(([meshData, selectorSidecar]) => {
        if (controller.signal.aborted) return;
        const selectorRuntime = selectorSidecar && typeof selectorSidecar === "object"
          ? buildCdslSelectorRuntime(selectorSidecar, meshData)
          : null;
        setLoadState({ kind: "ready", meshData, selectorRuntime });
        setHoveredReferenceId("");
        setSelectedReferenceIds([]);
        setEditPicks([]);
        setEditHoverPick(null);
        setEditSelectionReady(false);
        setAiSelectionDraft(null);
        onSelectionChange(null);
        if (suppressInitialReveal.current) {
          suppressInitialReveal.current = false;
        } else {
          setReveal((value) => value + 1);
        }
      })
      .catch((error: unknown) => {
        if (controller.signal.aborted) return;
        setLoadState((current) => current.kind === "ready" ? current : { kind: "error" });
        onError(error instanceof Error ? error.message : "CAD Viewer asset loading failed");
      });
    return () => controller.abort();
  }, [onError, onSelectionChange, result?.glbPath, result?.revisionId, result?.selectorPath, result?.taskId]);

  useEffect(() => {
    if (!reveal) return;
    const timer = window.setTimeout(() => setReveal(0), 3600);
    return () => window.clearTimeout(timer);
  }, [reveal]);

  useEffect(() => {
    if (!result) {
      setParameters([]);
      setShowParameters(false);
      return;
    }
    const controller = new AbortController();
    setParameterError("");
    void fetch(`/api/tasks/${encodeURIComponent(result.taskId)}/parameters`, { signal: controller.signal })
      .then(async (response) => {
        if (response.status === 404) return [];
        if (!response.ok) throw new Error(await response.text());
        const payload = await response.json() as { parameters?: Record<string, unknown>[] };
        return Array.isArray(payload.parameters) ? payload.parameters : [];
      })
      .then((next) => { if (!controller.signal.aborted) setParameters(next); })
      .catch((error: unknown) => {
        if (!controller.signal.aborted) setParameterError(error instanceof Error ? error.message : "无法读取参数");
      });
    return () => controller.abort();
  }, [result?.revisionId, result?.taskId]);

  const submitEdit = useCallback(async (operation: string, picks: Record<string, unknown>[]) => {
    if (!result || !operation || !picks.length) return;
    setEditPending(true);
    try {
      const response = await fetch(`/api/tasks/${encodeURIComponent(result.taskId)}/modify`, {
        method: "POST", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ operation, selection: { pick: picks[0], picks }, parameters: editParameters }),
      });
      const payload = await response.json() as Record<string, unknown> & { error?: string };
      if (!response.ok) throw new Error(payload.error || "Direct CAD edit failed");
      onResult(resultFromBackend(payload));
      setActiveTool("");
      setEditPicks([]);
      setEditHoverPick(null);
      setEditSelectionReady(false);
    } catch (error) {
      onError(error instanceof Error ? error.message : "Direct CAD edit failed");
    } finally {
      setEditPending(false);
    }
  }, [editParameters, onError, onResult, result]);

  const onEditPick = useCallback((pick: Record<string, unknown> | null) => {
    if (!activeTool || editPending) return;
    if (!pick) {
      onError("未命中可编辑平面，请在模型实体表面点击。");
      return;
    }
    setEditPicks((current) => {
      if (cadEditToolPickComplete(activeTool, current)) return current;
      const next = [...current, pick];
      const referenceId = typeof pick.referenceId === "string" ? pick.referenceId : "";
      if (referenceId) setSelectedReferenceIds([referenceId]);
      setEditHoverPick(null);
      setEditSelectionReady(cadEditToolPickComplete(activeTool, next));
      return next;
    });
  }, [activeTool, editPending, onError]);

  const handleAiSelectionDraftChange = useCallback((draft: AiSelectionDraft) => {
    setAiSelectionDraft((current) => {
      const currentPoints = current?.points || [];
      const nextPoints = draft?.points || [];
      if (current?.active === draft?.active && currentPoints.length === nextPoints.length && currentPoints.every((point, index) => point.x === nextPoints[index]?.x && point.y === nextPoints[index]?.y)) {
        return current;
      }
      return draft;
    });
  }, []);

  const cancelEdit = useCallback(() => {
    setActiveTool("");
    setEditPicks([]);
    setEditHoverPick(null);
    setEditSelectionReady(false);
    setSelectedReferenceIds([]);
    setSelectionMode("point");
  }, []);

  const onAiSelectionComplete = useCallback((selection: Record<string, unknown> | null) => {
    const referenceIds = Array.isArray(selection?.referenceIds)
      ? selection.referenceIds.filter((value): value is string => typeof value === "string" && value.length > 0)
      : [];
    setSelectedReferenceIds(referenceIds);
    if (!selection || !referenceIds.length || loadState.kind !== "ready" || !result) {
      onSelectionChange(null);
      return;
    }
    onSelectionChange(buildViewerSelectionContext({
      selection,
      references: loadState.selectorRuntime?.references || [],
      taskId: result.taskId,
      revisionId: result.revisionId,
    }));
  }, [loadState, onSelectionChange, result]);

  const handleActivateReference = useCallback((referenceId: string) => {
    const normalized = String(referenceId || "").trim();
    setSelectedReferenceIds(normalized ? [normalized] : []);
    if (!normalized || loadState.kind !== "ready" || !result) {
      onSelectionChange(null);
      return;
    }
    onSelectionChange(buildViewerSelectionContext({
      selection: {
        kind: "single_reference_activation",
        selectionMode: "point",
        referenceIds: [normalized],
      },
      references: loadState.selectorRuntime?.references || [],
      taskId: result.taskId,
      revisionId: result.revisionId,
    }));
  }, [loadState, onSelectionChange, result]);

  const commitParameters = useCallback(async (values: Record<string, number>) => {
    if (!result || !Object.keys(values).length) return;
    const parameterId = Object.keys(values)[0];
    setParameterPending(parameterId);
    setParameterError("");
    try {
      const response = await fetch(`/api/tasks/${encodeURIComponent(result.taskId)}/parameters`, {
        method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ values }),
      });
      const payload = await response.json() as Record<string, unknown> & { error?: string };
      if (!response.ok) throw new Error(payload.error || "参数更新失败");
      onResult(resultFromBackend(payload));
    } catch (error) {
      setParameterError(error instanceof Error ? error.message : "参数更新失败");
    } finally {
      setParameterPending("");
    }
  }, [onResult, result]);

  const viewerTheme = useMemo(() => ({ ...VIEWER_THEME, colorMode: theme }), [theme]);
  const activeToolDefinition = activeTool ? cadEditToolForOperation(activeTool) : null;
  const pickableFaces = useMemo(
    () => loadState.kind === "ready" ? loadState.selectorRuntime?.references.filter((reference) => reference.selectorType === "face") || [] : [],
    [loadState]
  );
  if (loadState.kind === "empty") return <ViewerState icon={<Box size={20} />} text="3D 预览等待模型" />;
  if (loadState.kind === "loading") return <ViewerState icon={<Loader2 className="spin" size={20} />} text="加载 CAD Viewer 资产..." />;
  if (loadState.kind === "error") return <ViewerState icon={<AlertTriangle size={20} />} text={lastError || "CAD Viewer 资产加载失败"} error />;
  if (loadState.kind !== "ready") return null;

  return (
    <div className={`cad-deepbuild-viewer-bg relative h-full min-h-0 overflow-hidden ${theme === "dark" ? "cad-viewer-dark" : ""}`}>
      <CadViewer
        ref={viewerRef}
        meshData={loadState.meshData}
        modelKey={`${result?.taskId}:${result?.revisionId}`}
        renderFormat={RENDER_FORMAT.STEP}
        showEdges
        recomputeNormals={false}
        themeSettings={viewerTheme}
        theme={theme === "dark" ? { sceneBackground: "#0d0f11" } : { sceneBackground: "#fbfbfc" }}
        showViewPlane
        generationIntroKey={`${result?.taskId}:${reveal}`}
        // The enclosing studio owns completion feedback. Enabling CadViewer's
        // shader reveal here would play a second, separate animation.
        generationIntroEnabled={false}
        hoveredReferenceId={hoveredReferenceId}
        selectedReferenceIds={selectedReferenceIds}
        selectorRuntime={loadState.selectorRuntime}
        pickableFaces={pickableFaces}
        pickableEdges={[]}
        onHoverReferenceChange={setHoveredReferenceId}
        onActivateReference={handleActivateReference}
        editPointPickEnabled={Boolean(activeTool)}
        activeEditToolId={activeTool}
        editToolPickKind={cadEditToolNextPickKind(activeTool, editPicks.length)}
        editToolPicks={editPicks}
        editToolHoverPick={editHoverPick}
        editToolParameters={editParameters}
        onEditToolPick={onEditPick}
        onEditToolHover={setEditHoverPick}
        aiSelectionMode={selectionMode === "none" ? "" : selectionMode}
        onAiSelectionDraftChange={handleAiSelectionDraftChange}
        onAiSelectionComplete={onAiSelectionComplete}
      />
      <AiSelectionOverlay draft={aiSelectionDraft} />
      <EditToolPickOverlay
        activeToolId={activeTool}
        picks={editPicks}
        hoverPick={editHoverPick}
        parameters={editParameters}
      />
      <EmbeddedCadEditToolbar
        activeToolId={activeTool}
        aiSelectionMode={selectionMode}
        disabled={!result || editPending}
        unavailableToolIds={["add_chamfer", "add_fillet"]}
        onSelectTool={(tool) => {
          setActiveTool(tool);
          setEditPicks([]);
          setEditHoverPick(null);
          setEditSelectionReady(false);
          setAiSelectionDraft(null);
          setHoveredReferenceId("");
          setSelectedReferenceIds([]);
          setEditParameters(tool ? defaultCadEditParameters(tool) : {});
          setSelectionMode(tool ? "none" : "point");
        }}
        onSelectionModeChange={(mode) => {
          setSelectionMode(mode);
          if (mode !== "lasso") setAiSelectionDraft(null);
        }}
      />
      <EmbeddedCadViewToolbar
        disabled={!result}
        onResetView={() => viewerRef.current?.zoomToFit?.()}
        onScreenshot={() => void viewerRef.current?.captureScreenshot?.({ filename: "cdsl-cad.png" })}
        onParameters={() => setShowParameters(true)}
      />
      {editPending || isGenerating ? <div className="viewer-loading"><Loader2 className="spin" size={16} /><span>{editPending ? "正在应用 CDSL 编辑..." : "正在生成 CDSL 模型..."}</span></div> : null}
      {activeToolDefinition ? (
        <div className="absolute bottom-3 left-3 z-30 w-[236px] border border-[var(--ui-border)] bg-[var(--ui-glass-popover)] p-3 text-[var(--ui-text-strong)] shadow-[var(--ui-shadow-soft)] backdrop-blur" data-viewer-interaction-overlay="true">
          <div className="mb-2 text-xs font-semibold">{activeToolDefinition.label}</div>
          <div className="grid gap-2">
            {activeToolDefinition.parameterFields.map((field) => (
              <label className="grid grid-cols-[72px_minmax(0,1fr)] items-center gap-2 text-[11px] text-[var(--ui-text-muted)]" key={field.name}>
                <span>{field.label}</span>
                {field.type === "select" ? (
                  <select
                    className="h-7 min-w-0 border border-[var(--ui-border)] bg-[var(--ui-control-bg)] px-2 text-[11px] text-[var(--ui-text-strong)]"
                    value={String(editParameters[field.name] ?? "")}
                    onChange={(event) => setEditParameters((current) => ({ ...current, [field.name]: event.target.value }))}
                  >
                    {(field.options || []).map((option) => <option key={option} value={option}>{option}</option>)}
                  </select>
                ) : (
                  <div className="flex min-w-0 items-center gap-1">
                    <input
                      className="h-7 min-w-0 flex-1 border border-[var(--ui-border)] bg-[var(--ui-control-bg)] px-2 text-[11px] text-[var(--ui-text-strong)]"
                      type={field.type === "number" ? "number" : "text"}
                      min={field.min}
                      step={field.step}
                      value={String(editParameters[field.name] ?? "")}
                      onChange={(event) => setEditParameters((current) => ({
                        ...current,
                        [field.name]: field.type === "number" ? Number(event.target.value) : event.target.value,
                      }))}
                    />
                    {field.unit ? <span className="w-5 text-[10px]">{field.unit}</span> : null}
                  </div>
                )}
              </label>
            ))}
          </div>
          <div className="mt-2 text-[10px] text-[var(--ui-text-subtle)]">{editPicks.length}/{activeToolDefinition.pickKinds.length} 个几何点已选择</div>
          <div className="mt-3 flex justify-end gap-2 border-t border-[var(--ui-border)] pt-2">
            <button
              type="button"
              className="h-7 border border-[var(--ui-border-strong)] px-2 text-[11px] text-[var(--ui-text-muted)] hover:bg-[var(--ui-control-hover)]"
              onClick={cancelEdit}
            >
              取消
            </button>
            <button
              type="button"
              disabled={!editSelectionReady || editPending}
              className="h-7 border border-[var(--ui-accent-border)] bg-[var(--ui-accent-soft)] px-2 text-[11px] text-[var(--ui-accent-text)] transition hover:bg-[var(--ui-accent-muted)] disabled:cursor-not-allowed disabled:opacity-45"
              onClick={() => void submitEdit(activeTool, editPicks)}
            >
              应用
            </button>
          </div>
        </div>
      ) : null}
      {reveal > 0 ? <GenerationEdgeGlow /> : null}
      {showParameters && result ? (
        <div className="absolute inset-y-0 right-0 z-40 w-full max-w-[360px] shadow-[var(--ui-shadow-panel)]">
          <ParameterPanel
            parameters={parameters}
            pendingParameter={parameterPending}
            error={parameterError}
            onClose={() => setShowParameters(false)}
            onCommit={(id, value) => void commitParameters({ [id]: value })}
            onReset={(values) => void commitParameters(values)}
            downloads={[
              { label: "STEP", description: "CAD exchange", url: encodeArtifactUrl(result.taskId, result.stepPath) },
              { label: "CDSL", description: "Editable model", url: encodeArtifactUrl(result.taskId, result.cdslPath) },
              { label: "GLB", description: "Preview mesh", url: encodeArtifactUrl(result.taskId, result.glbPath) },
              { label: "REPORT", description: "Rebuild validation", url: encodeArtifactUrl(result.taskId, result.reportPath) },
            ]}
          />
        </div>
      ) : null}
    </div>
  );
}

function ViewerState({ icon, text, error = false }: { icon: React.ReactNode; text: string; error?: boolean }) {
  return <div className={`viewer-state ${error ? "viewer-state-error" : ""}`}>{icon}<span>{text}</span></div>;
}