import {
  getVideoCanvasCompositionClipDuration,
  getVideoCanvasCompositionDuration,
  type VideoCanvasStoryboardCompositionClip,
  type VideoCanvasStoryboardCompositionProject,
} from "@/lib/video-canvas/storyboard-composition";

type WebkitAudioWindow = Window &
  typeof globalThis & {
    webkitAudioContext?: typeof AudioContext;
  };

type LoadedCompositionClip = {
  objectUrl: string;
  video: HTMLVideoElement;
};

export type VideoCanvasCompositionRenderResult = {
  blob: Blob;
  durationSeconds: number;
  height: number;
  width: number;
};

function getRecorderMimeType() {
  const candidates = [
    "video/webm;codecs=vp9,opus",
    "video/webm;codecs=vp8,opus",
    "video/webm",
  ];
  return candidates.find((candidate) => MediaRecorder.isTypeSupported(candidate)) || "";
}

function getCanvasVideoSourceUrl(mediaUrl: string) {
  const parsedUrl = new URL(mediaUrl, window.location.origin);
  return parsedUrl.origin === window.location.origin
    ? parsedUrl.toString()
    : `/api/canvas/video-source?url=${encodeURIComponent(parsedUrl.toString())}`;
}

function waitForMediaEvent(
  target: HTMLMediaElement,
  eventName: "loadedmetadata" | "seeked",
) {
  return new Promise<void>((resolve, reject) => {
    const timeout = window.setTimeout(
      () => reject(new Error(`视频 ${eventName} 超时`)),
      20_000,
    );
    const cleanup = () => {
      window.clearTimeout(timeout);
      target.removeEventListener(eventName, handleSuccess);
      target.removeEventListener("error", handleError);
    };
    const handleSuccess = () => {
      cleanup();
      resolve();
    };
    const handleError = () => {
      cleanup();
      reject(new Error("视频素材无法解码"));
    };
    target.addEventListener(eventName, handleSuccess, { once: true });
    target.addEventListener("error", handleError, { once: true });
  });
}

async function loadCompositionClip(
  clip: VideoCanvasStoryboardCompositionClip,
): Promise<LoadedCompositionClip> {
  const response = await fetch(getCanvasVideoSourceUrl(clip.mediaUrl), {
    credentials: "include",
  });
  if (!response.ok) throw new Error(`视频素材加载失败：${clip.title}`);
  const objectUrl = URL.createObjectURL(await response.blob());
  const video = document.createElement("video");
  video.playsInline = true;
  video.preload = "auto";
  video.src = objectUrl;
  if (video.readyState < HTMLMediaElement.HAVE_METADATA) {
    await waitForMediaEvent(video, "loadedmetadata");
  }
  return { objectUrl, video };
}

export function getVideoCanvasCompositionOutputSize(
  sourceWidth: number,
  sourceHeight: number,
  maximumDimension = 1280,
) {
  const width = Math.max(2, sourceWidth || 1280);
  const height = Math.max(2, sourceHeight || 720);
  const scale = Math.min(1, maximumDimension / Math.max(width, height));
  return {
    height: Math.max(2, Math.round((height * scale) / 2) * 2),
    width: Math.max(2, Math.round((width * scale) / 2) * 2),
  };
}

function drawVideoContained(
  context: CanvasRenderingContext2D,
  video: HTMLVideoElement,
  width: number,
  height: number,
) {
  context.fillStyle = "#000";
  context.fillRect(0, 0, width, height);
  const sourceWidth = Math.max(1, video.videoWidth);
  const sourceHeight = Math.max(1, video.videoHeight);
  const scale = Math.min(width / sourceWidth, height / sourceHeight);
  const drawWidth = sourceWidth * scale;
  const drawHeight = sourceHeight * scale;
  context.drawImage(
    video,
    (width - drawWidth) / 2,
    (height - drawHeight) / 2,
    drawWidth,
    drawHeight,
  );
}

function drawTransition(
  context: CanvasRenderingContext2D,
  previousFrame: HTMLCanvasElement,
  clip: VideoCanvasStoryboardCompositionClip,
  elapsedSeconds: number,
  width: number,
  height: number,
) {
  if (!(clip.transition && elapsedSeconds < 0.5)) return;
  const progress = Math.max(0, Math.min(1, elapsedSeconds / 0.5));
  if (clip.transition === "fade") {
    context.save();
    context.globalAlpha = 1 - progress;
    context.drawImage(previousFrame, 0, 0, width, height);
    context.restore();
    return;
  }

  const midpointProgress = progress < 0.5 ? progress * 2 : (1 - progress) * 2;
  if (progress < 0.5) {
    context.save();
    context.globalAlpha = 1 - progress * 2;
    context.drawImage(previousFrame, 0, 0, width, height);
    context.restore();
  }
  context.save();
  context.globalAlpha = midpointProgress;
  context.fillStyle = clip.transition === "fade-white" ? "#fff" : "#000";
  context.fillRect(0, 0, width, height);
  context.restore();
}

function drawSubtitles(
  context: CanvasRenderingContext2D,
  project: VideoCanvasStoryboardCompositionProject,
  timelineSeconds: number,
  width: number,
  height: number,
) {
  const active = project.subtitles.filter(
    (subtitle) =>
      timelineSeconds >= subtitle.startSeconds &&
      timelineSeconds <= subtitle.endSeconds &&
      subtitle.text.trim(),
  );
  if (!active.length) return;

  const fontSize = Math.max(18, Math.round(width / 38));
  context.save();
  context.font = `600 ${fontSize}px sans-serif`;
  context.textAlign = "center";
  context.textBaseline = "middle";
  active.slice(0, 2).forEach((subtitle, index) => {
    const text = subtitle.text.trim();
    const metrics = context.measureText(text);
    const boxWidth = Math.min(width - 48, metrics.width + 36);
    const y = height - 54 - index * (fontSize + 20);
    context.fillStyle = "rgba(0,0,0,0.62)";
    context.fillRect((width - boxWidth) / 2, y - fontSize, boxWidth, fontSize + 18);
    context.fillStyle = "#fff";
    context.fillText(text, width / 2, y);
  });
  context.restore();
}

function nextAnimationFrame() {
  return new Promise<void>((resolve) => window.requestAnimationFrame(() => resolve()));
}

export async function renderVideoCanvasStoryboardComposition(
  project: VideoCanvasStoryboardCompositionProject,
  onProgress?: (progress: number) => void,
): Promise<VideoCanvasCompositionRenderResult> {
  if (!project.clips.length) throw new Error("请先添加视频片段");
  if (typeof MediaRecorder === "undefined") {
    throw new Error("当前浏览器不支持成片导出");
  }

  const loadedClips: LoadedCompositionClip[] = [];
  const AudioContextCtor =
    window.AudioContext || (window as WebkitAudioWindow).webkitAudioContext;
  const audioContext = AudioContextCtor ? new AudioContextCtor() : null;
  const audioDestination = audioContext?.createMediaStreamDestination() || null;
  let outputStream: MediaStream | null = null;
  let recorder: MediaRecorder | null = null;

  try {
    for (const clip of project.clips) {
      loadedClips.push(await loadCompositionClip(clip));
    }

    const firstVideo = loadedClips[0].video;
    const { width, height } = getVideoCanvasCompositionOutputSize(
      firstVideo.videoWidth,
      firstVideo.videoHeight,
    );
    const canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    const context = canvas.getContext("2d");
    if (!context) throw new Error("成片渲染画布创建失败");
    const previousFrame = document.createElement("canvas");
    previousFrame.width = width;
    previousFrame.height = height;
    const previousContext = previousFrame.getContext("2d");
    if (!previousContext) throw new Error("转场画布创建失败");

    if (audioContext && audioDestination) {
      for (const loaded of loadedClips) {
        audioContext.createMediaElementSource(loaded.video).connect(audioDestination);
      }
      await audioContext.resume();
    }

    const canvasStream = canvas.captureStream(30);
    outputStream = new MediaStream([
      ...canvasStream.getVideoTracks(),
      ...(audioDestination?.stream.getAudioTracks() || []),
    ]);
    const mimeType = getRecorderMimeType();
    recorder = new MediaRecorder(
      outputStream,
      mimeType ? { mimeType, videoBitsPerSecond: 5_000_000 } : undefined,
    );
    const chunks: BlobPart[] = [];
    recorder.addEventListener("dataavailable", (event) => {
      if (event.data.size) chunks.push(event.data);
    });
    const completed = new Promise<Blob>((resolve, reject) => {
      recorder?.addEventListener(
        "error",
        () => reject(new Error("成片编码失败")),
        { once: true },
      );
      recorder?.addEventListener(
        "stop",
        () =>
          resolve(
            new Blob(chunks, {
              type: recorder?.mimeType || "video/webm",
            }),
          ),
        { once: true },
      );
    });

    const totalDuration = getVideoCanvasCompositionDuration(project);
    let timelineOffset = 0;
    context.fillStyle = "#000";
    context.fillRect(0, 0, width, height);
    previousContext.drawImage(canvas, 0, 0);
    recorder.start(200);

    for (let index = 0; index < project.clips.length; index += 1) {
      const clip = project.clips[index];
      const video = loadedClips[index].video;
      const sourceDuration = Number.isFinite(video.duration)
        ? video.duration
        : clip.durationSeconds;
      const startSeconds = Math.min(
        Math.max(0, clip.inPointSeconds),
        Math.max(0, sourceDuration - 0.05),
      );
      const endSeconds = Math.min(
        sourceDuration,
        Math.max(startSeconds + 0.05, clip.outPointSeconds),
      );
      const timelineDuration = Math.max(
        0.05,
        (endSeconds - startSeconds) / clip.speed,
      );
      video.currentTime = startSeconds;
      if (startSeconds > 0) await waitForMediaEvent(video, "seeked");
      video.playbackRate = clip.speed;
      await video.play();
      const startedAt = performance.now();

      while ((performance.now() - startedAt) / 1000 < timelineDuration) {
        const elapsedSeconds = (performance.now() - startedAt) / 1000;
        drawVideoContained(context, video, width, height);
        drawTransition(
          context,
          previousFrame,
          clip,
          elapsedSeconds,
          width,
          height,
        );
        drawSubtitles(
          context,
          project,
          timelineOffset + elapsedSeconds,
          width,
          height,
        );
        onProgress?.(
          Math.min(0.99, (timelineOffset + elapsedSeconds) / totalDuration),
        );
        await nextAnimationFrame();
      }

      video.pause();
      drawVideoContained(context, video, width, height);
      drawSubtitles(
        context,
        project,
        timelineOffset + timelineDuration,
        width,
        height,
      );
      previousContext.clearRect(0, 0, width, height);
      previousContext.drawImage(canvas, 0, 0);
      timelineOffset += getVideoCanvasCompositionClipDuration(clip);
    }

    recorder.stop();
    const blob = await completed;
    if (!blob.size) throw new Error("成片导出结果为空");
    onProgress?.(1);
    return { blob, durationSeconds: totalDuration, height, width };
  } finally {
    for (const loaded of loadedClips) {
      loaded.video.pause();
      loaded.video.removeAttribute("src");
      loaded.video.load();
      URL.revokeObjectURL(loaded.objectUrl);
    }
    if (recorder?.state !== "inactive") recorder?.stop();
    outputStream?.getTracks().forEach((track) => track.stop());
    if (audioContext?.state !== "closed") await audioContext?.close();
  }
}