"use client";
import {
  commitDirectorScene,
  resolveDirectorCamera,
  cameraAngles,
  rotateDirectorCamera,
  directorBodies,
  createDirectorCrowd,
} from "@/lib/video-canvas/director-extensions";
import { directorPoses, type DirectorPoseName } from "@/lib/video-canvas/director-poses";
import { useEffect, useRef, useState } from "react";
import { ArrowUp, Camera, Plus, Upload, X, Trash2 } from "lucide-react";
import { toast } from "sonner";
import { DirectorViewport, type DirectorViewportHandle } from "./DirectorViewport";
import {
  readDirectorScene,
  directorRatios,
  directorImageSize,
  type DirectorScene,
  type DirectorSnapshot,
  type DirectorObject,
  type DirectorVector,
} from "@/lib/video-canvas/director-scene";
import { DirectorObjectTimeline } from "./DirectorObjectTimeline";
import {
  DirectorReconstructionPanel,
  type ReconstructionTask,
} from "./DirectorReconstructionPanel";
import {
  recordObjectFrames,
  sampleDirectorObjects,
} from "@/lib/video-canvas/director-object-tracks";
import { DirectorMotionPanel } from "./DirectorMotionPanel";
import {
  sampleDirectorMotion,
  mergeDirectorCameraPose,
  type DirectorMotion,
} from "@/lib/video-canvas/director-motion";
async function upload(file: File) {
  const form = new FormData();
  form.append("file", file);
  form.append(
    "purpose",
    file.type.startsWith("video/") ? "canvas-video-process" : "director-studio",
  );
  const response = await fetch(
    /\.glb$/i.test(file.name) ? "/api/canvas/director/upload-model" : "/api/files/upload",
    {
      method: "POST",
      body: form,
      signal: AbortSignal.timeout(120000),
    },
  );
  const result = await response.json();
  const url = result.url || result.data?.url;
  if (!response.ok || !url) throw new Error(result.error || "上传失败");
  return String(url);
}
export function DirectorStudioDialog({
  initialScene,
  onChange,
  onClose,
  onSend,
  onSendMotion,
  onSendVideo,
  onReconstruct,
  reconstructionTask,
}: {
  onReconstruct?: (input: { imageUrl: string; prompt: string }) => Promise<unknown>;
  reconstructionTask?: ReconstructionTask;
  initialScene: unknown;
  onChange: (scene: DirectorScene) => void;
  onClose: () => void;
  onSend: (snapshots: DirectorSnapshot[]) => void;
  onSendMotion: (snapshot: DirectorSnapshot, motion: DirectorMotion) => void;
  onSendVideo: (video: { url: string; width: number; height: number; duration: number }) => void;
}) {
  const [scene, setScene] = useState(() => readDirectorScene(initialScene));
  const current = useRef(scene);
  current.current = scene;
  const commit = (input: DirectorScene) => {
    const next = commitDirectorScene(current.current, input);
    if (next.activeCameraId !== current.current.activeCameraId) setPreviewTime(null);
    current.current = next;
    setScene(next);
    onChange(next);
  };
  const [objectSearch, setObjectSearch] = useState("");
  const [scenePrompt, setScenePrompt] = useState("");
  const [sceneReferenceUrl, setSceneReferenceUrl] = useState("");
  const [scenePromptBusy, setScenePromptBusy] = useState(false);
  const sceneReferenceInput = useRef<HTMLInputElement>(null);
  const [selected, setSelected] = useState("");
  const [rightTab, setRightTab] = useState<"properties" | "pose">("properties");
  const [mode, setMode] = useState<"translate" | "rotate" | "scale">("translate");
  const [cameraView, setCameraView] = useState(false);
  const [busy, setBusy] = useState(false);
  const viewport = useRef<DirectorViewportHandle>(null);
  const timelineDrawer = useRef<HTMLDetailsElement>(null);
  const reconstructionAnchor = useRef<HTMLDivElement>(null);
  const [previewTime, setPreviewState] = useState<number | null>(null);
  const [timelineTime, setTimelineTime] = useState(0);
  const [externalSeek, setExternalSeek] = useState<{ time: number; editing?: boolean }>();
  const [autoObjectFrame, setAutoObjectFrame] = useState(false);
  const setPreviewTime = (time: number | null) => {
    setPreviewState(time);
    if (time !== null) setTimelineTime(time);
  };
  const [exportProgress, setExportProgress] = useState<number | null>(null);
  const recording = useRef<AbortController | null>(null);
  useEffect(() => () => recording.current?.abort(), []);
  const [exportedVideo, setExportedVideo] = useState<{
    blob: Blob;
    url: string;
    width: number;
    height: number;
    duration: number;
  } | null>(null);
  useEffect(
    () => () => {
      if (exportedVideo) URL.revokeObjectURL(exportedVideo.url);
    },
    [exportedVideo],
  );
  const exportMotion = async () => {
    if (busy) return;
    setBusy(true);
    setExportProgress(0);
    const controller = new AbortController();
    recording.current = controller;
    try {
      const motion = current.current.motion;
      const dimensions = directorImageSize(current.current.ratio);
      const blob = await viewport.current!.record(controller.signal, setExportProgress);
      setExportedVideo({
        blob,
        url: URL.createObjectURL(blob),
        ...dimensions,
        duration: motion.duration,
      });
      toast.success("真实运镜视频已导出，可下载或发送到画布");
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "轨迹导出失败");
    } finally {
      recording.current = null;
      setBusy(false);
      setExportProgress(null);
    }
  };
  const sendMotion = async () => {
    if (busy) return;
    setBusy(true);
    try {
      const motion = {
        ...current.current.motion,
        keyframes: current.current.motion.keyframes.map((k) => ({
          ...k,
          ...resolveDirectorCamera(current.current, k),
          id: k.id,
          time: k.time,
        })),
      };
      const pose = sampleDirectorMotion(motion, 0);
      if (!pose || motion.keyframes.length < 2) throw new Error("至少需要两个关键帧");
      const image = await viewport.current!.capture(pose, 0);
      const url = await upload(
        new File([image.blob], `director-motion-${Date.now()}.png`, {
          type: "image/png",
        }),
      );
      const snapshot = {
        id: crypto.randomUUID(),
        title: "运镜首帧",
        url,
        width: image.width,
        height: image.height,
        cameraId: current.current.activeCameraId,
      };
      commit({
        ...current.current,
        snapshots: [...current.current.snapshots, snapshot],
      });
      onSendMotion(snapshot, motion);
      toast.success("首帧和运镜描述已发送，请在视频节点选择模型");
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "发送失败");
    } finally {
      setBusy(false);
    }
  };
  const backgroundInput = useRef<HTMLInputElement>(null);
  const fileInput = useRef<HTMLInputElement>(null);
  const camera = resolveDirectorCamera(scene);
  const angles = cameraAngles(camera);
  const object = scene.objects.find((o) => o.id === selected);
  const patchObject = (id: string, patch: Partial<DirectorObject>) => {
    let next = {
      ...current.current,
      objects: current.current.objects.map((o) => (o.id === id ? { ...o, ...patch } : o)),
    };
    try {
      if (
        autoObjectFrame &&
        previewTime === null &&
        ["position", "rotation", "scale", "visible"].some((key) => Object.hasOwn(patch, key))
      )
        next = recordObjectFrames(next, [id], timelineTime, () => crypto.randomUUID());
      commit(next);
    } catch (error) {
      toast.error((error as Error).message);
    }
  };
  const patchCamera = (patch: Partial<typeof camera>) =>
    commit({
      ...current.current,
      cameras: current.current.cameras.map((c) =>
        c.id === current.current.activeCameraId
          ? {
              ...mergeDirectorCameraPose(c, patch),
              ...(Object.hasOwn(patch, "followObjectId")
                ? { followObjectId: patch.followObjectId }
                : {}),
            }
          : c,
      ),
    });
  const addObject = (kind: DirectorObject["kind"], name: string, url?: string) => {
    const id = crypto.randomUUID();
    commit({
      ...current.current,
      objects: [
        ...current.current.objects,
        {
          id,
          kind,
          name,
          url,
          position: [current.current.objects.length * 1.2, 0.5, 0],
          rotation: [0, 0, 0],
          scale: [1, 1, 1],
        },
      ],
    });
    setSelected(id);
  };
  const screenshot = async () => {
    if (busy) return;
    setBusy(true);
    try {
      const image = await viewport.current!.capture();
      const url = await upload(
        new File([image.blob], `director-${Date.now()}.png`, {
          type: "image/png",
        }),
      );
      const active = current.current.cameras.find((c) => c.id === current.current.activeCameraId)!;
      const snapshot = {
        id: crypto.randomUUID(),
        title: `${active.name}-截图${current.current.snapshots.length + 1}`,
        url,
        width: image.width,
        height: image.height,
        cameraId: active.id,
      };
      commit({
        ...current.current,
        snapshots: [...current.current.snapshots, snapshot],
      });
      toast.success("真实机位截图已保存");
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "截图失败");
    } finally {
      setBusy(false);
    }
  };
  const field = "w-full rounded bg-white/10 px-2 py-1.5 text-sm outline-none";
  const button =
    "whitespace-nowrap rounded-lg border border-white/10 px-2 py-2 text-sm hover:bg-white/10 disabled:opacity-40";
  return (
    <div
      role="dialog"
      aria-label="3D导演台"
      data-canvas-overlay="true"
      className="fixed inset-0 z-[600] flex flex-col bg-[#141414] text-white"
      onPointerDown={(e) => e.stopPropagation()}
    >
      <header className="flex h-11 shrink-0 items-center justify-between border-b border-white/10 px-4">
        <strong className="text-[13px]">3D导演台</strong>
        <div className="flex gap-2">
          <button
            className={button}
            aria-pressed={!cameraView}
            disabled={busy}
            onClick={() => setCameraView(false)}
          >
            导演视角
          </button>
          <button
            className={button}
            aria-pressed={cameraView}
            disabled={busy}
            onClick={() => setCameraView(true)}
          >
            机位视角
          </button>
        </div>
        <button
          aria-label="关闭导演台"
          className={button}
          onClick={() => {
            recording.current?.abort();
            onClose();
          }}
        >
          <X size={18} />
        </button>
      </header>
      <div className="grid min-h-0 flex-1 grid-cols-[248px_minmax(0,1fr)_248px]">
        <aside inert={busy} className="overflow-y-auto border-r border-white/10 bg-[#1c1c1c] p-3">
          <div className="mb-3 text-sm text-white/70">场景</div>
          <input
            aria-label="搜索场景对象"
            className={`${field} mb-3`}
            placeholder="搜索场景对象"
            value={objectSearch}
            onChange={(e) => setObjectSearch(e.target.value)}
          />
          <div className="space-y-1">
            <button className={`${button} w-full text-left ${!selected?"bg-white/10":""}`} onClick={()=>setSelected("")} type="button">▤ 场景</button>
            {scene.cameras.map((cameraItem) => (
              <button className={`${button} w-full text-left ${scene.activeCameraId===cameraItem.id?"bg-white/10":""}`} key={cameraItem.id}
                onClick={()=>{commit({...current.current,activeCameraId:cameraItem.id});setCameraView(true)}} type="button">◧ {cameraItem.name}</button>
            ))}
            {scene.objects
              .filter((o) => o.name.toLowerCase().includes(objectSearch.trim().toLowerCase()))
              .map((o) => (
                <button
                  className={`${button} w-full text-left ${selected === o.id ? "bg-white/15" : ""}`}
                  key={o.id}
                  onClick={() => setSelected(o.id)}
                >
                  {o.name}
                </button>
              ))}
          </div>
          <details className="mt-5 border-t border-white/10 pt-2">
            <summary className="cursor-pointer text-xs text-white/55">添加与场景资源</summary>
          <div className="mt-3 flex flex-col gap-2">
            <button className={button} onClick={() => addObject("actor", "基础人偶")}>
              添加人偶
            </button>
            <button className={button} onClick={() => addObject("box", "立方体")}>
              添加立方体
            </button>
            <button className={button} onClick={() => addObject("sphere", "球体")}>
              添加球体
            </button>
            <button className={button} disabled={busy} onClick={() => fileInput.current?.click()}>
              <Upload size={14} className="mr-2 inline" />
              上传 GLB 模型
            </button>
            <button
              className={button}
              disabled={busy}
              onClick={() => backgroundInput.current?.click()}
            >
              上传 360° 全景背景
            </button>
            <label className="block text-xs">
              全景背景历史
              <select
                aria-label="全景背景历史"
                className={`${field} mt-1`}
                value={scene.backgroundUrl || ""}
                onChange={(e) =>
                  commit({ ...current.current, backgroundUrl: e.target.value || undefined })
                }
              >
                <option value="">默认背景</option>
                {scene.backgroundHistory?.map((url, index) => (
                  <option key={url} value={url}>
                    全景背景 {index + 1}
                  </option>
                ))}
              </select>
            </label>
            <button
              className={button}
              disabled={!onReconstruct || busy}
              onClick={() => {
                if (timelineDrawer.current) timelineDrawer.current.open = true;
                reconstructionAnchor.current?.scrollIntoView({
                  block: "nearest",
                  behavior: "smooth",
                });
              }}
            >
              AI 识图重建布景
            </button>
          </div>
          </details>
          <p className="mt-4 text-xs leading-5 text-white/45">
            左键旋转视角，右键平移，滚轮缩放。选择对象后使用变换轴调整。
          </p>
        </aside>
        <main
          inert={busy}
          className="relative flex min-h-0 items-center justify-center overflow-hidden bg-[#080808]"
        >
          <div
            className="h-full max-h-full w-full"
            style={{ aspectRatio: scene.ratio.replace(":", " / ") }}
          >
            <DirectorViewport
              ref={viewport}
              scene={scene}
              selected={selected}
              mode={mode}
              cameraView={cameraView}
              previewTime={previewTime}
              locked={busy}
              onTransform={patchObject}
              onCamera={(position, target) => patchCamera({ position, target })}
            />
          </div>
          <div className="absolute bottom-4 left-[39%] flex -translate-x-1/2 gap-1 rounded-xl border border-white/10 bg-[#242424] p-2">
            {(["translate", "rotate", "scale"] as const).map((m, i) => (
              <button
                key={m}
                className={`${button} ${mode === m ? "bg-white/20" : ""}`}
                onClick={() => setMode(m)}
              >
                {["移动", "旋转", "缩放"][i]}
              </button>
            ))}
            <button className={button} disabled={busy} onClick={screenshot}>
              <Camera className="mr-1 inline" size={16} />
              {busy ? "处理中..." : "截图"}
            </button>
          </div>
          {onReconstruct ? (
            <div className="absolute bottom-4 left-[65%] flex h-[42px] w-[min(360px,42%)] -translate-x-1/2 items-center gap-2 rounded-full border border-white/10 bg-[#242424] px-2 text-white shadow-lg">
              <button aria-label="上传场景参考图" className="flex size-8 shrink-0 items-center justify-center rounded-full hover:bg-white/10" disabled={scenePromptBusy} onClick={()=>sceneReferenceInput.current?.click()} type="button"><Plus size={16}/></button>
              <input ref={sceneReferenceInput} hidden type="file" accept="image/png,image/jpeg,image/webp" onChange={async event=>{
                const file=event.target.files?.[0];event.target.value="";if(!file)return;
                if(file.size>20*1024*1024){toast.error("参考图需小于 20 MiB");return}
                setScenePromptBusy(true);try{setSceneReferenceUrl(await upload(file));toast.success("已添加场景参考图")}catch(cause){toast.error(cause instanceof Error?cause.message:"参考图上传失败")}finally{setScenePromptBusy(false)}
              }}/>
              <input aria-label="描述想搭建的场景" className="min-w-0 flex-1 bg-transparent text-[12px] text-white outline-none placeholder:text-white/35" placeholder={sceneReferenceUrl?"描述想搭建的场景 · 已添加参考图":"描述想搭建的场景"} value={scenePrompt} onChange={event=>setScenePrompt(event.target.value)}/>
              <button aria-label="创建场景" className="flex size-8 shrink-0 items-center justify-center rounded-full bg-white/12 disabled:opacity-35" disabled={!sceneReferenceUrl||scenePromptBusy||busy} onClick={async()=>{
                if(!sceneReferenceUrl)return;setScenePromptBusy(true);try{await onReconstruct({imageUrl:sceneReferenceUrl,prompt:scenePrompt});timelineDrawer.current!.open=true;toast.success("重建任务已提交")}catch(cause){toast.error(cause instanceof Error?cause.message:"重建提交失败")}finally{setScenePromptBusy(false)}
              }} type="button"><ArrowUp size={16}/></button>
            </div>
          ) : null}
        </main>
        <aside className="space-y-4 overflow-y-auto border-l border-white/10 bg-[#222] p-3">
          {!object ? (
            <div className="space-y-4 text-[12px]">
              <div className="border-b border-white/10 pb-2 text-[14px] font-medium">3D场景</div>
              <label className="flex items-center justify-between gap-2">天空颜色
                <input aria-label="天空颜色" type="color" value={scene.skyColor || "#080808"} onChange={event=>commit({...current.current,skyColor:event.target.value})}/>
              </label>
              <label className="flex items-center justify-between gap-2">网格吸附
                <input aria-label="显示场景网格" type="checkbox" checked={scene.gridVisible !== false} onChange={event=>commit({...current.current,gridVisible:event.target.checked})}/>
              </label>
              <label className="flex items-center justify-between gap-2">地面
                <input aria-label="显示场景地面" type="checkbox" checked={scene.groundVisible !== false} onChange={event=>commit({...current.current,groundVisible:event.target.checked})}/>
              </label>
            </div>
          ) : (
            <div className="space-y-3 text-[12px]">
              <div className="border-b border-white/10 pb-2 text-[14px] font-medium">{object.kind==="actor"?"角色":"场景对象"}</div>
              <div className="flex gap-2 border-b border-white/10 pb-2">
                <button className={rightTab==="properties"?"rounded bg-white/10 px-3 py-1":"px-3 py-1 text-white/45"} onClick={()=>setRightTab("properties")} type="button">属性</button>
                <button className={rightTab==="pose"?"rounded bg-white/10 px-3 py-1":"px-3 py-1 text-white/45"} onClick={()=>setRightTab("pose")} type="button">姿势</button>
              </div>
              {rightTab==="properties" ? <>
                <label className="block text-white/55">名称<input aria-label="对象名称" className={`${field} mt-1`} value={object.name} onChange={event=>patchObject(object.id,{name:event.target.value})}/></label>
                {(["position","rotation","scale"] as const).map(key=>(
                  <div key={key} className="text-white/55">
                    <span>{key==="position"?"位置":key==="rotation"?"旋转":"缩放"}</span>
                    <div className="mt-1 grid grid-cols-3 gap-1">
                      {object[key].map((value,index)=>(<label className="flex items-center rounded bg-[#353535] px-1" key={index}>
                        <span className="text-[10px] text-white/40">{"XYZ"[index]}</span>
                        <input aria-label={`${key}-${"XYZ"[index]}`} className="w-full min-w-0 bg-transparent px-1 py-1 text-[11px] text-white outline-none" type="number" step="0.1"
                          value={Number((key==="rotation"?value*180/Math.PI:value).toFixed(2))}
                          onChange={event=>{const next=Number(event.target.value);if(!Number.isFinite(next)||(key==="scale"&&next<=0))return;const values=[...object[key]] as DirectorVector;values[index]=key==="rotation"?next*Math.PI/180:next;patchObject(object.id,{[key]:values})}}/>
                      </label>))}
                    </div>
                  </div>
                ))}
              </> : <select aria-label="角色姿势" className={field} value={object.pose||""} onChange={event=>patchObject(object.id,{pose:event.target.value as DirectorPoseName})}>
                <option value="">默认姿势</option>{Object.keys(directorPoses).map(pose=><option key={pose} value={pose}>{pose}</option>)}
              </select>}
            </div>
          )}
          <details className="border-t border-white/10 pt-2"><summary className="cursor-pointer text-xs text-white/55">相机与高级属性</summary>
          <fieldset disabled={busy || previewTime !== null} className="mt-3 space-y-4">
            <label className="block text-sm">
              机位
              <select
                aria-label="机位"
                className={`${field} mt-2`}
                value={scene.activeCameraId}
                onChange={(e) => commit({ ...current.current, activeCameraId: e.target.value })}
              >
                {scene.cameras.map((c) => (
                  <option key={c.id} value={c.id}>
                    {c.name}
                  </option>
                ))}
              </select>
            </label>
            <div className="flex flex-wrap gap-1">
              {[
                ["正面", [0, 2, 7]],
                ["侧面", [7, 2, 0]],
                ["俯视", [0, 8, 0.1]],
                ["正面特写", [0, 1.7, 2]],
                ["正面全景", [0, 2, 10]],
                ["侧面近景", [2, 1.5, 0]],
                ["背面", [0, 2, -7]],
                ["45°俯拍", [4, 6, 4]],
                ["低机位", [0, 0.3, 4]],
                ["左过肩", [-1, 1.8, -2]],
                ["右过肩", [1, 1.8, -2]],
                ["鸟瞰", [0, 14, 0.1]],
              ].map(([name, position]) => (
                <button
                  className={button}
                  key={String(name)}
                  onClick={() => {
                    const id = crypto.randomUUID();
                    commit({
                      ...current.current,
                      activeCameraId: id,
                      cameras: [
                        ...current.current.cameras,
                        {
                          id,
                          name: `${name}机位${current.current.cameras.length + 1}`,
                          position: position as DirectorVector,
                          target: [0, 1, 0],
                          fov: 50,
                        },
                      ],
                    });
                  }}
                >
                  <Plus size={12} className="inline" />
                  {String(name)}
                </button>
              ))}
            </div>
            <label className="block text-sm">
              跟随对象
              <select
                aria-label="相机跟随对象"
                className={`${field} mt-2`}
                value={camera.followObjectId || ""}
                onChange={(e) =>
                  patchCamera({
                    followObjectId: e.target.value || undefined,
                    target: camera.target,
                  })
                }
              >
                <option value="">不跟随</option>
                {scene.objects.map((o) => (
                  <option key={o.id} value={o.id}>
                    {o.name}
                  </option>
                ))}
              </select>
            </label>
            <div className="grid grid-cols-2 gap-2">
              {(["yaw", "pitch"] as const).map((axis) => (
                <label key={axis} className="text-xs">
                  {axis === "yaw" ? "水平旋转（度）" : "俯仰旋转（度）"}
                  <input
                    aria-label={`相机${axis}`}
                    className={field}
                    type="number"
                    step="1"
                    min={axis === "yaw" ? -180 : -89}
                    max={axis === "yaw" ? 180 : 89}
                    value={Number(angles[axis].toFixed(1))}
                    onChange={(e) => {
                      const n = Number(e.target.value);
                      if (Number.isFinite(n))
                        patchCamera({
                          target: rotateDirectorCamera(
                            camera,
                            axis === "yaw" ? n : angles.yaw,
                            axis === "pitch" ? n : angles.pitch,
                          ),
                          followObjectId: undefined,
                        });
                    }}
                  />
                </label>
              ))}
            </div>
            <label className="block text-sm">
              视角 FOV
              <input
                aria-label="视角 FOV"
                className={`${field} mt-2`}
                type="number"
                min={15}
                max={90}
                value={Number(camera.fov.toFixed(2))}
                onChange={(e) => {
                  const n = Number(e.target.value);
                  if (n >= 15 && n <= 90) patchCamera({ fov: n });
                }}
              />
            </label>
            <label className="block text-sm">
              截图比例
              <select
                aria-label="截图比例"
                className={`${field} mt-2`}
                value={scene.ratio}
                onChange={(e) => commit({ ...current.current, ratio: e.target.value })}
              >
                {directorRatios.map((r) => (
                  <option key={r}>{r}</option>
                ))}
              </select>
            </label>
            {(["position", "target"] as const).map((key, j) => (
              <label className="block text-xs" key={key}>
                {j === 0 ? "相机位置" : "相机注视点"}
                <div className="mt-1 grid grid-cols-3 gap-1">
                  {camera[key].map((n, i) => (
                    <input
                      key={i}
                      aria-label={`相机-${key}-${"XYZ"[i]}`}
                      className={field}
                      type="number"
                      step="0.1"
                      value={Number(n.toFixed(2))}
                      onChange={(e) => {
                        const n = Number(e.target.value);
                        if (!Number.isFinite(n) || Math.abs(n) > 10000) return;
                        const values = [...camera[key]] as DirectorVector;
                        values[i] = n;
                        patchCamera({ [key]: values });
                      }}
                    />
                  ))}
                </div>
              </label>
            ))}
            {object ? (
              <section className="space-y-2 border-t border-white/10 pt-3">
                <div className="flex items-center justify-between text-sm">
                  <input
                    aria-label="对象名称"
                    className={field}
                    value={object.name}
                    maxLength={80}
                    onChange={(e) => patchObject(object.id, { name: e.target.value })}
                  />
                  <button
                    aria-label="删除所选场景对象"
                    onClick={() => {
                      commit({
                        ...current.current,
                        objects: current.current.objects.filter((o) => o.id !== object.id),
                      });
                      setSelected("");
                    }}
                  >
                    <Trash2 size={14} />
                  </button>
                </div>
                <div className="flex flex-wrap gap-3 text-xs">
                  <label>
                    <input
                      type="checkbox"
                      checked={object.visible !== false}
                      onChange={(e) => patchObject(object.id, { visible: e.target.checked })}
                    />{" "}
                    显示
                  </label>
                  <label>
                    <input
                      type="checkbox"
                      checked={object.locked === true}
                      onChange={(e) => patchObject(object.id, { locked: e.target.checked })}
                    />{" "}
                    锁定变换轴
                  </label>
                  {object.kind !== "model" && (
                    <label>
                      颜色{" "}
                      <input
                        aria-label="对象颜色"
                        type="color"
                        value={object.color || (object.kind === "actor" ? "#687bb0" : "#c3664c")}
                        onChange={(e) => patchObject(object.id, { color: e.target.value })}
                      />
                    </label>
                  )}
                </div>
                {object.kind === "actor" && (
                  <label className="block text-xs">
                    人偶体型
                    <select
                      aria-label="人偶体型"
                      className={`${field} mt-1`}
                      value={object.body || "标准"}
                      onChange={(e) =>
                        patchObject(object.id, {
                          body: e.target.value as keyof typeof directorBodies,
                        })
                      }
                    >
                      {Object.keys(directorBodies).map((name) => (
                        <option key={name}>{name}</option>
                      ))}
                    </select>
                  </label>
                )}
                {object.kind === "actor" && (
                  <label className="block text-xs">
                    人偶姿势
                    <select
                      aria-label="人偶姿势"
                      className={`${field} mt-1`}
                      value={object.pose || "站立"}
                      onChange={(e) =>
                        patchObject(object.id, { pose: e.target.value as DirectorPoseName })
                      }
                    >
                      {Object.keys(directorPoses).map((name) => (
                        <option key={name}>{name}</option>
                      ))}
                    </select>
                  </label>
                )}
                <button
                  className={button}
                  onClick={() => {
                    const copy = {
                      ...object,
                      id: crypto.randomUUID(),
                      name: `${object.name} 副本`,
                      position: [
                        object.position[0] + 1,
                        ...object.position.slice(1),
                      ] as DirectorVector,
                    };
                    commit({ ...current.current, objects: [...current.current.objects, copy] });
                    setSelected(copy.id);
                  }}
                >
                  复制对象
                </button>
                <button
                  className={button}
                  onClick={() => {
                    try {
                      const crowd = createDirectorCrowd(
                        object,
                        current.current.objects.length,
                        () => crypto.randomUUID(),
                      );
                      commit({
                        ...current.current,
                        objects: [...current.current.objects, ...crowd],
                      });
                    } catch (error) {
                      toast.error(error instanceof Error ? error.message : "阵列创建失败");
                    }
                  }}
                >
                  创建 3×3 阵列
                </button>
                <button
                  className={button}
                  onClick={() =>
                    patchCamera({
                      target: [object.position[0], object.position[1] + 1, object.position[2]],
                    })
                  }
                >
                  相机对准所选对象
                </button>
                <label className="block text-xs">
                  等比缩放
                  <input
                    aria-label="等比缩放"
                    className={`${field} mt-1`}
                    type="number"
                    step="0.1"
                    min="0.01"
                    value={Number(object.scale[0].toFixed(2))}
                    onChange={(e) => {
                      const n = Number(e.target.value);
                      if (n > 0 && Number.isFinite(n))
                        patchObject(object.id, {
                          scale: object.scale.map(
                            (v) => (v * n) / object.scale[0],
                          ) as DirectorVector,
                        });
                    }}
                  />
                </label>
                {(["position", "rotation", "scale"] as const).map((key, j) => (
                  <div key={key}>
                    <div className="mb-1 text-xs text-white/50">
                      {["位置", "旋转（度）", "缩放"][j]}
                    </div>
                    <div className="grid grid-cols-3 gap-1">
                      {object[key].map((v, i) => (
                        <input
                          key={i}
                          aria-label={`${object.name}-${key}-${"XYZ"[i]}`}
                          className={field}
                          type="number"
                          step="0.1"
                          value={Number((key === "rotation" ? (v * 180) / Math.PI : v).toFixed(2))}
                          onChange={(e) => {
                            const n = Number(e.target.value);
                            if (!Number.isFinite(n) || (key === "scale" && n <= 0)) return;
                            const values = [...object[key]] as DirectorVector;
                            values[i] = key === "rotation" ? (n * Math.PI) / 180 : n;
                            patchObject(object.id, { [key]: values });
                          }}
                        />
                      ))}
                    </div>
                  </div>
                ))}
              </section>
            ) : null}
          </fieldset>
          </details>
          {exportedVideo ? (
            <section className="space-y-2 border-t border-white/10 pt-3" aria-label="运镜导出结果">
              <video
                controls
                src={exportedVideo.url}
                className="w-full"
                aria-label="真实运镜导出预览"
              />
              <a
                className={button}
                href={exportedVideo.url}
                download={`director-motion.${exportedVideo.blob.type.includes("mp4") ? "mp4" : "webm"}`}
              >
                下载运镜视频
              </a>
              <button
                disabled={busy}
                className={`${button} w-full`}
                onClick={async () => {
                  setBusy(true);
                  try {
                    const ext = exportedVideo.blob.type.includes("mp4") ? "mp4" : "webm";
                    const url = await upload(
                      new File([exportedVideo.blob], `director-motion-${Date.now()}.${ext}`, {
                        type: exportedVideo.blob.type.split(";")[0],
                      }),
                    );
                    onSendVideo({ ...exportedVideo, url });
                    toast.success("运镜视频已发送到画布");
                  } catch (e) {
                    toast.error(e instanceof Error ? e.message : "上传失败");
                  } finally {
                    setBusy(false);
                  }
                }}
              >
                发送真实运镜视频到画布
              </button>
            </section>
          ) : null}
          <section className="space-y-2 border-t border-white/10 pt-3">
            <div className="text-sm">机位截图（{scene.snapshots.length}）</div>
            {scene.snapshots.map((s) => (
              <div key={s.id} className="rounded-lg border border-white/10 p-2">
                <img src={s.url} alt={s.title} className="w-full rounded" />
                <div className="mt-1 truncate text-xs">
                  {s.title} · {s.width}×{s.height}
                </div>
                <button
                  className={`${button} mt-2 w-full`}
                  onClick={() => {
                    onSend([s]);
                    toast.success("截图已发送到画布");
                  }}
                >
                  发送到画布
                </button>
              </div>
            ))}
          </section>
        </aside>
      </div>
      <details
        ref={timelineDrawer}
        className="max-h-[32vh] shrink-0 overflow-auto border-t border-white/15 bg-[#1c1c1c] px-4 pb-3"
      >
        <summary className="cursor-pointer py-2 text-sm">
          相机时间轴与运镜 · {camera.name}（独立轨道）
        </summary>
        <DirectorMotionPanel
          key={scene.activeCameraId}
          compact
          hasObjectMotion={Object.values(scene.objectTracks || {}).some(
            (t) => !t.muted && t.keyframes.length >= 2,
          )}
          externalSeek={externalSeek}
          motion={scene.motion}
          pose={camera}
          disabled={busy}
          onChange={(motion) => commit({ ...current.current, motion })}
          onPose={patchCamera}
          onPreview={setPreviewTime}
          onExport={exportMotion}
          onSend={sendMotion}
          exportProgress={exportProgress}
          onCancel={() => recording.current?.abort()}
          onOverview={() => {
            setCameraView(false);
            viewport.current?.showPath();
          }}
        />
        <DirectorObjectTimeline
          scene={scene}
          time={timelineTime}
          selected={selected}
          disabled={busy}
          preview={previewTime !== null}
          auto={autoObjectFrame}
          onAuto={setAutoObjectFrame}
          onChange={commit}
          onSelect={setSelected}
          onSeek={(time) => {
            setExternalSeek({ time });
            setPreviewTime(time);
          }}
          onEdit={() => {
            commit({
              ...current.current,
              objects: sampleDirectorObjects(current.current, timelineTime),
            });
            setPreviewTime(null);
            setExternalSeek({ time: timelineTime, editing: true });
          }}
        />
        {onReconstruct ? (
          <div ref={reconstructionAnchor}>
            <DirectorReconstructionPanel
              scene={scene}
              onChange={commit}
              onSubmit={onReconstruct}
              task={reconstructionTask}
              disabled={busy}
            />
          </div>
        ) : null}
      </details>
      <input
        ref={backgroundInput}
        type="file"
        accept="image/png,image/jpeg,image/webp"
        className="hidden"
        onChange={async (e) => {
          const file = e.target.files?.[0];
          e.target.value = "";
          if (!file) return;
          if (file.size > 20 * 1024 * 1024) {
            toast.error("全景背景需小于 20 MiB");
            return;
          }
          setBusy(true);
          try {
            const bitmap = await createImageBitmap(file);
            const ratio = bitmap.width / bitmap.height;
            bitmap.close();
            if (Math.abs(ratio - 2) > 0.02) throw new Error("请上传 2:1 比例的等距柱状全景图");
            const url = await upload(file);
            commit({
              ...current.current,
              backgroundUrl: url,
              backgroundHistory: [
                ...new Set([...(current.current.backgroundHistory || []), url]),
              ].slice(-20),
            });
          } catch (error) {
            toast.error(error instanceof Error ? error.message : "全景背景上传失败");
          } finally {
            setBusy(false);
          }
        }}
      />
      <input
        ref={fileInput}
        className="hidden"
        type="file"
        accept=".glb,model/gltf-binary"
        onChange={async (e) => {
          const file = e.target.files?.[0];
          e.target.value = "";
          if (!file) return;
          if (!/\.glb$/i.test(file.name) || file.size > 25 * 1024 * 1024) {
            toast.error("请上传 25 MiB 以内的 GLB 模型");
            return;
          }
          setBusy(true);
          try {
            const header = new DataView(await file.slice(0, 12).arrayBuffer());
            if (header.byteLength < 12 || header.getUint32(0, true) !== 0x46546c67)
              throw new Error("文件不是有效 GLB 模型");
            const url = await upload(file);
            addObject("model", file.name, url);
          } catch (e) {
            toast.error(e instanceof Error ? e.message : "模型上传失败");
          } finally {
            setBusy(false);
          }
        }}
      />
    </div>
  );
}