import type {
  DesktopPreviewRecordingArtifact,
  DesktopPreviewRecordingFrame,
} from "@t3tools/contracts";
import { create } from "zustand";

import { previewBridge } from "~/components/preview/previewBridge";
import { useBrowserSurfaceStore } from "./browserSurfaceStore";

interface ActiveRecording {
  readonly tabId: string;
  readonly canvas: HTMLCanvasElement;
  readonly context: CanvasRenderingContext2D;
  readonly recorder: MediaRecorder;
  readonly chunks: Blob[];
  readonly mimeType: string;
  readonly startedAt: string;
}

interface BrowserRecordingState {
  activeTabId: string | null;
  startedAt: string | null;
  lastArtifact: DesktopPreviewRecordingArtifact | null;
  setActive: (tabId: string | null, startedAt: string | null) => void;
  setArtifact: (artifact: DesktopPreviewRecordingArtifact) => void;
}

export const useBrowserRecordingStore = create<BrowserRecordingState>()((set) => ({
  activeTabId: null,
  startedAt: null,
  lastArtifact: null,
  setActive: (activeTabId, startedAt) => set({ activeTabId, startedAt }),
  setArtifact: (lastArtifact) => set({ lastArtifact }),
}));

let active: ActiveRecording | null = null;
let unsubscribeFrames: (() => void) | null = null;

const preferredMimeType = (): string => {
  const candidates = ["video/mp4;codecs=avc1.42E01E", "video/webm;codecs=vp9", "video/webm"];
  return candidates.find((candidate) => MediaRecorder.isTypeSupported(candidate)) ?? "video/webm";
};

const drawFrame = (frame: DesktopPreviewRecordingFrame): void => {
  const recording = active;
  if (!recording || recording.tabId !== frame.tabId) return;
  const image = new Image();
  image.addEventListener(
    "load",
    () => {
      if (active !== recording) return;
      recording.context.drawImage(image, 0, 0, recording.canvas.width, recording.canvas.height);
    },
    { once: true },
  );
  image.src = `data:image/jpeg;base64,${frame.data}`;
};

export async function startBrowserRecording(tabId: string): Promise<void> {
  const bridge = previewBridge;
  if (!bridge || active) return;
  const rect = useBrowserSurfaceStore.getState().byTabId[tabId]?.rect;
  const canvas = document.createElement("canvas");
  canvas.width = Math.max(1, rect?.width ?? 1280);
  canvas.height = Math.max(1, rect?.height ?? 800);
  const context = canvas.getContext("2d", { alpha: false });
  if (!context) throw new Error("Browser recording canvas is unavailable.");
  const mimeType = preferredMimeType();
  const recorder = new MediaRecorder(canvas.captureStream(12), {
    mimeType,
    videoBitsPerSecond: 4_000_000,
  });
  const startedAt = new Date().toISOString();
  const chunks: Blob[] = [];
  recorder.addEventListener("dataavailable", (event) => {
    if (event.data.size > 0) chunks.push(event.data);
  });
  active = { tabId, canvas, context, recorder, chunks, mimeType, startedAt };
  unsubscribeFrames ??= bridge.recording.onFrame(drawFrame);
  recorder.start(1_000);
  try {
    await bridge.recording.startScreencast(tabId);
    useBrowserRecordingStore.getState().setActive(tabId, startedAt);
  } catch (error) {
    active = null;
    recorder.stop();
    throw error;
  }
}

export async function stopBrowserRecording(
  tabId: string,
): Promise<DesktopPreviewRecordingArtifact | null> {
  const bridge = previewBridge;
  const recording = active;
  if (!bridge || !recording || recording.tabId !== tabId) return null;
  await bridge.recording.stopScreencast(tabId);
  const stopped = new Promise<void>((resolve) =>
    recording.recorder.addEventListener("stop", () => resolve(), { once: true }),
  );
  recording.recorder.stop();
  await stopped;
  const blob = new Blob(recording.chunks, { type: recording.mimeType });
  const artifact = await bridge.recording.save(
    tabId,
    recording.mimeType,
    new Uint8Array(await blob.arrayBuffer()),
  );
  active = null;
  unsubscribeFrames?.();
  unsubscribeFrames = null;
  useBrowserRecordingStore.getState().setActive(null, null);
  useBrowserRecordingStore.getState().setArtifact(artifact);
  return artifact;
}