import { flushSync } from "react-dom";
import { ArrayBufferTarget, Muxer } from "mp4-muxer";
import { Vector2, type PerspectiveCamera } from "three";
import { useDirectorStore } from "../store/directorStore";
import { usePlaybackStore } from "../runtime/playbackStore";
import { getVideoExportContext } from "./videoExportBridge";
import { hideViewportCaptureHelpers, withViewportCaptureHelpersHidden } from "../canvas/viewportCapture";
import { applyActiveCameraViewAtTime, applyTimelineTransformsAtTime } from "../runtime/playbackTransforms";
import { getCameraViewSnapshotFromShot, type CameraViewSnapshot } from "../schema/cameraGeometry";
import { getViewportAspectRatioValue } from "../schema/viewportAspectRatio";
import { normalizeTimelineFps } from "../schema/timeline";

export type VideoExportView = "director" | "camera";

/** 导出分辨率按「短边 = 720」基准缩放，画面比例取自 viewportAspectRatio（auto 时用视口当前比例） */
const EXPORT_SHORT_EDGE = 720;

function pickMimeType(): { mimeType: string; ext: string } {
  if (typeof MediaRecorder === "undefined") return { mimeType: "", ext: "webm" };
  const candidates = [
    { mimeType: "video/mp4;codecs=avc1", ext: "mp4" },
    { mimeType: "video/webm;codecs=vp9", ext: "webm" },
    { mimeType: "video/webm;codecs=vp8", ext: "webm" },
    { mimeType: "video/webm", ext: "webm" },
  ];
  return (
    candidates.find((item) => {
      try {
        return MediaRecorder.isTypeSupported(item.mimeType);
      } catch {
        return false;
      }
    }) ?? { mimeType: "", ext: "webm" }
  );
}

function findViewportCanvas(): HTMLCanvasElement | null {
  return document.querySelector<HTMLCanvasElement>(".director-canvas canvas");
}

function downloadBlob(blob: Blob, filename: string) {
  const url = URL.createObjectURL(blob);
  const anchor = document.createElement("a");
  anchor.href = url;
  anchor.download = filename;
  anchor.rel = "noopener";
  document.body.appendChild(anchor);
  anchor.click();
  anchor.remove();
  URL.revokeObjectURL(url);
}

function waitNextFrame(): Promise<void> {
  return new Promise((resolve) =>
    requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
  );
}

/**
 * 机位没有运镜轨道时的兜底：把「这个机位自己的视角」直接写到导出相机上。
 *
 * 机位视角下 applyActiveCameraViewAtTime 只在有运镜轨道时才覆盖相机（无轨道直接 return false），
 * 也就是说无轨道时导出画面完全取决于「此刻 R3F 的默认相机是谁」。默认相机本来应该是
 * 机位视角挂载的那颗 drei 相机，但换相机要等 React/R3F 走一轮，稍有差池就会渲成
 * 导演视角（默认更高、更远）—— 所以这里不再赌它，直接按机位自身的视角写死。
 */
function applyCameraSnapshotToFrameCamera(camera: PerspectiveCamera, view: CameraViewSnapshot) {
  camera.position.set(view.position[0], view.position[1], view.position[2]);
  camera.lookAt(view.target[0], view.target[1], view.target[2]);
  if (Math.abs(camera.fov - view.fov) > 0.001) {
    camera.fov = view.fov;
  }
  camera.updateProjectionMatrix();
}

/**
 * 按视频比例（viewportAspectRatio）计算导出尺寸，短边 720，宽高取偶（编码器要求）。
 * 「自动」也固定按 16:9 导出 —— 导出画面比例绝不受视口布局（如时间轴拖高压扁视口）影响，
 * 否则视口是扁的时导出也会跟着扁。
 */
export function computeExportSize(
  aspectRatioId: ReturnType<typeof useDirectorStore.getState>["viewportAspectRatio"]
): { width: number; height: number } {
  const aspect = getViewportAspectRatioValue(aspectRatioId) ?? 16 / 9;
  let width: number;
  let height: number;
  if (aspect >= 1) {
    height = EXPORT_SHORT_EDGE;
    width = Math.round(height * aspect);
  } else {
    width = EXPORT_SHORT_EDGE;
    height = Math.round(width / aspect);
  }
  return { width: width + (width % 2), height: height + (height % 2) };
}

async function pickVideoEncoderConfig(width: number, height: number, fps: number) {
  const candidates = [
    { codec: "avc1.640028" }, // High 4.0
    { codec: "avc1.4d0028" }, // Main 4.0
    { codec: "avc1.42001f" }, // Baseline 3.1
  ];
  const bitrate = Math.round(width * height * fps * 0.15); // ≈6Mbps @720p30
  for (const { codec } of candidates) {
    const config: VideoEncoderConfig = {
      codec,
      width,
      height,
      bitrate,
      framerate: fps,
    };
    try {
      const support = await VideoEncoder.isConfigSupported(config);
      if (support.supported) return config;
    } catch {
      // 继续尝试下一个候选
    }
  }
  return null;
}

/**
 * 逐帧离线导出（快，不用实时播放一遍）：
 * - 渲染分辨率固定为视频比例（短边 720），不受视口布局影响 —— 时间轴拖多高画面都不会变扁
 * - 每帧直接 setPlayhead(t) + 手动渲染 + WebCodecs 编码，渲染多快导多快
 * - H.264 编码进 MP4（Chrome / Electron 均支持）
 */
async function exportVideoFrameByFrame(view: VideoExportView): Promise<void> {
  const bridge = getVideoExportContext();
  if (!bridge) throw new Error("找不到视口渲染上下文");
  const { gl, scene, camera } = bridge;
  const canvas = gl.domElement;

  const directorStore = useDirectorStore.getState();
  const { width, height } = computeExportSize(directorStore.viewportAspectRatio);
  const duration = directorStore.project.timeline.duration;
  // 帧率取自工程设置（时间轴设置里的「每秒帧数」），导出与读数保持一致
  const fps = normalizeTimelineFps(directorStore.project.timeline.fps);
  const totalFrames = Math.max(1, Math.round(duration * fps));

  const encoderConfig = await pickVideoEncoderConfig(width, height, fps);
  if (!encoderConfig) throw new Error("当前浏览器不支持 H.264 编码，请用最新版 Chrome / Edge");

  // 保存现场：导出完原样恢复（视角 / 指针 / 渲染尺寸 / 相机比例）。
  // 播放状态不在这里恢复：exportVideo 统一收口成「导出后停住」。
  const previousViewMode = directorStore.viewMode;
  const previousPlayhead = usePlaybackStore.getState().playhead;
  const previousSize = new Vector2();
  gl.getSize(previousSize);
  const previousPixelRatio = gl.getPixelRatio();
  const previousAspect = camera.aspect;
  // 兜底改写相机会动到位姿，导出结束要还回去（切回导演视角后不该变成机位的视角）
  const previousCameraPosition = camera.position.clone();
  const previousCameraQuaternion = camera.quaternion.clone();
  const previousCameraFov = camera.fov;

  const muxer = new Muxer({
    target: new ArrayBufferTarget(),
    video: { codec: "avc", width, height },
    fastStart: "in-memory",
  });
  let encodeError: unknown = null;
  const encoder = new VideoEncoder({
    output: (chunk, meta) => muxer.addVideoChunk(chunk, meta),
    error: (error) => {
      encodeError = encodeError ?? error;
    },
  });
  encoder.configure(encoderConfig);

  // 切到导出状态：固定分辨率渲染（不改 CSS 尺寸，canvas 加 object-fit: contain 保持显示不变形）
  usePlaybackStore.getState().setPlaying(false);
  directorStore.setViewMode(view);
  canvas.classList.add("is-video-exporting");
  gl.setPixelRatio(1);
  gl.setSize(width, height, false);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();

  // 切视角会让 R3F 更换渲染相机（机位视角挂载 drei PerspectiveCamera）。
  // 必须等一整帧：换相机要 React 重渲染 + R3F 换默认相机 + VideoExportBridge 重新注册，
  // 只等一个宏任务不够（截图路径同样要等一帧）。导出循环里也每帧取最新引用兜底。
  await waitNextFrame();

  // 切完视角再取当前机位：setViewMode("camera") 会在 activeCameraId 为空时补上第一个机位，
  // 所以不能用上面的 directorStore 快照（那时可能还是 null）。
  const exportState = useDirectorStore.getState();
  const activeCameraShot =
    view === "camera"
      ? exportState.project.cameras.find((item) => item.id === exportState.project.activeCameraId) ?? null
      : null;
  const activeCameraView = activeCameraShot ? getCameraViewSnapshotFromShot(activeCameraShot) : null;

  const frameDurationUs = Math.round(1_000_000 / fps);
  try {
    for (let frameIndex = 0; frameIndex <= totalFrames; frameIndex += 1) {
      if (encodeError) throw encodeError;
      const time = Math.min(frameIndex / fps, duration);
      // 相机可能因视角切换被替换，每帧从桥取最新；并保证导出画面比例
      const frameCamera = getVideoExportContext()?.camera ?? camera;
      frameCamera.aspect = width / height;
      frameCamera.updateProjectionMatrix();

      // 同步推进 playhead 让 React 侧内容（角色动作等）立刻更新到 t
      flushSync(() => {
        usePlaybackStore.getState().setPlayhead(time);
      });
      // 手动应用物体 / 相机运镜插值（与预览的 useFrame 同步逻辑共用）
      applyTimelineTransformsAtTime(
        scene,
        directorStore.project.timeline.tracks,
        directorStore.project.timeline.cameraTracks,
        time,
        usePlaybackStore.getState().editingObjectId,
        { objects: directorStore.project.objects, duration }
      );
      // 有运镜轨道时两边共用同一份插值（预览 / 导出一致）；返回 false 表示没覆盖相机
      const appliedCameraTrack = applyActiveCameraViewAtTime({
        camera: frameCamera,
        cameraTracks: directorStore.project.timeline.cameraTracks,
        activeCameraId: exportState.project.activeCameraId,
        playhead: time,
        viewMode: view,
        editingObjectId: usePlaybackStore.getState().editingObjectId,
      });

      // 没覆盖 = 这个机位没有运镜轨道。此时必须把机位自己的视角写进导出相机，
      // 否则画面取决于「此刻默认相机是谁」，换相机稍有差池就渲成导演视角（更高、更远）。
      if (!appliedCameraTrack && activeCameraView) {
        applyCameraSnapshotToFrameCamera(frameCamera, activeCameraView);
      }

      // 和截图同一套：渲染这一帧前先把编辑器辅助元素（gizmo 红绿蓝轴 / 网格 / 坐标轴 / 轨迹）藏起来，
      // 否则导出的视频里会带着选中的 gizmo 三条轴。渲完 withViewportCaptureHelpersHidden 会原样恢复。
      withViewportCaptureHelpersHidden(scene, () => gl.render(scene, frameCamera));

      const frame = new VideoFrame(canvas, {
        timestamp: frameIndex * frameDurationUs,
        duration: frameDurationUs,
      });
      encoder.encode(frame, { keyFrame: frameIndex % (fps * 2) === 0 });
      frame.close();

      // 背压：编码队列太深时等一等，防止内存堆积
      while (encoder.encodeQueueSize > 8) {
        await new Promise<void>((resolve) => window.setTimeout(resolve, 4));
      }
      // 让出主线程，保持界面可响应（进度画面快进效果）
      await new Promise<void>((resolve) => window.setTimeout(resolve, 0));
    }

    await encoder.flush();
    muxer.finalize();
    if (encodeError) throw encodeError;

    const blob = new Blob([muxer.target.buffer], { type: "video/mp4" });
    const viewLabel = view === "director" ? "上帝视角" : "机位视角";
    downloadBlob(blob, `director-desk-${viewLabel}-${Date.now()}.mp4`);
  } finally {
    encoder.close();
    canvas.classList.remove("is-video-exporting");
    gl.setPixelRatio(previousPixelRatio);
    gl.setSize(previousSize.x, previousSize.y, false);

    // 导出期间相机可能换过（切视角 → drei 挂载机位相机），两颗都按导出前的样子还原：
    // - aspect 两颗都要还，否则切回导演视角后画面比例还停在导出的 16:9；
    // - 位姿只在「导出用的就是导出前那颗相机」时还，否则等于把导演相机的位姿
    //   写到机位相机上，机位视角就会被带歪。
    const restoreCamera = getVideoExportContext()?.camera ?? camera;
    restoreCamera.aspect = previousAspect;
    restoreCamera.updateProjectionMatrix();
    camera.aspect = previousAspect;
    camera.updateProjectionMatrix();

    if (restoreCamera === camera) {
      restoreCamera.position.copy(previousCameraPosition);
      restoreCamera.quaternion.copy(previousCameraQuaternion);
      restoreCamera.fov = previousCameraFov;
      restoreCamera.updateProjectionMatrix();
    }

    directorStore.setViewMode(previousViewMode);
    usePlaybackStore.getState().setPlayhead(previousPlayhead);
  }
}

/**
 * 旧版实时录制（MediaRecorder 兜底路径）：只在浏览器不支持 WebCodecs 时使用。
 * 从 playhead 0 播放到时间轴末尾录屏，耗时 = 视频时长。
 */
async function exportVideoWithMediaRecorder(view: VideoExportView): Promise<void> {
  const canvas = findViewportCanvas();
  if (!canvas) throw new Error("找不到视口画布");
  if (typeof MediaRecorder === "undefined") {
    throw new Error("当前浏览器不支持视频录制（MediaRecorder），请用 Chrome/Edge/Firefox");
  }

  const { mimeType, ext } = pickMimeType();
  const fps = 30;
  const stream = canvas.captureStream(fps);
  const recorder = new MediaRecorder(stream, mimeType ? { mimeType } : undefined);
  const chunks: BlobPart[] = [];
  recorder.ondataavailable = (event) => {
    if (event.data && event.data.size > 0) chunks.push(event.data);
  };

  const directorStore = useDirectorStore.getState();
  const duration = directorStore.project.timeline.duration;

  // 实时录屏兜底路径录的是「实时画面」，整段录制期间都要藏住编辑器辅助元素
  //（gizmo 红绿蓝轴 / 网格 / 坐标轴等）—— 不能像逐帧路径那样只在某一帧渲染时隐藏。
  const captureBridge = getVideoExportContext();
  const restoreCaptureHelpers = captureBridge ? hideViewportCaptureHelpers(captureBridge.scene) : () => {};

  // 切视角 + 复位指针（时间轴本身就是单次播放，到末尾会自己停住）
  directorStore.setViewMode(view);
  usePlaybackStore.getState().setPlayhead(0);

  const stopped = new Promise<void>((resolve) => {
    recorder.onstop = () => {
      restoreCaptureHelpers();
      resolve();
    };
  });

  recorder.start();

  // 等两帧让视角切换 + 首帧渲染，避免录到上一视角的残影
  await waitNextFrame();

  // 监听播放结束（播到末帧 → isPlaying 置 false）→ 停止录制
  const unsubscribe = usePlaybackStore.subscribe((state) => {
    if (!state.isPlaying) {
      try {
        if (recorder.state !== "inactive") recorder.stop();
      } catch {
        /* ignore */
      }
    }
  });

  usePlaybackStore.getState().setPlaying(true);

  // 保底：duration + 余量后强制停（防止 advance 因帧率/时序没准确触发）
  const fallbackTimer = window.setTimeout(() => {
    try {
      if (recorder.state !== "inactive") recorder.stop();
    } catch {
      /* ignore */
    }
  }, duration * 1000 + 600);

  await stopped;
  clearTimeout(fallbackTimer);
  unsubscribe();

  usePlaybackStore.getState().setPlaying(false);

  const viewLabel = view === "director" ? "上帝视角" : "机位视角";
  const blob = new Blob(chunks, { type: mimeType || "video/webm" });
  downloadBlob(blob, `director-desk-${viewLabel}-${Date.now()}.${ext}`);
}

/**
 * 导出视频：优先 WebCodecs 逐帧快速导出（MP4，固定分辨率，不受视口布局影响）；
 * 浏览器不支持时回退 MediaRecorder 实时录屏（WebM/MP4，耗时 = 视频时长）。
 *
 * 不管哪条路径，导出期间都强制关掉「播放循环」——导出永远是「一次性播完」：
 * 否则录屏兜底路径会录到回卷的一段，逐帧路径也会把「正在循环播放」的状态带回视口。
 * 导出结束时一律停住（不恢复导出前的播放状态，否则开着循环就会一直播下去），
 * 只把指针放回导出前的位置，循环设置原样还回去。
 */
export async function exportVideo(view: VideoExportView): Promise<void> {
  const previousLoop = usePlaybackStore.getState().loop;
  usePlaybackStore.getState().setLoop(false);

  try {
    if (typeof VideoEncoder !== "undefined") {
      await exportVideoFrameByFrame(view);
      return;
    }
    await exportVideoWithMediaRecorder(view);
  } finally {
    const playback = usePlaybackStore.getState();
    playback.setLoop(previousLoop);
    playback.setPlaying(false);
  }
}