// utils/generateCanvasStory.ts
export const generateCanvasStory = async ({
  src,
  type,
  text,
  font,
  color,
  position,
}: {
  src: string;
  type: "image" | "video";
  text: string;
  font: string;
  color: string;
  position: { x: number; y: number };
}): Promise<File> => {
  const previewWidth = 450;
  const previewHeight = 750;

  const canvas = document.createElement("canvas");
  canvas.width = previewWidth;
  canvas.height = previewHeight;
  const ctx = canvas.getContext("2d");
  if (!ctx) throw new Error("Canvas context not available");

  if (type === "image") {
    const img = await loadImage(src);
    ctx.filter = "blur(20px)";
    ctx.drawImage(img, 0, 0, previewWidth, previewHeight);
    ctx.filter = "none";

    const imgAspect = img.width / img.height;
    const canvasAspect = previewWidth / previewHeight;

    let drawWidth, drawHeight;
    if (imgAspect > canvasAspect) {
      drawWidth = previewWidth;
      drawHeight = previewWidth / imgAspect;
    } else {
      drawHeight = previewHeight;
      drawWidth = previewHeight * imgAspect;
    }

    const offsetX = (previewWidth - drawWidth) / 2;
    const offsetY = (previewHeight - drawHeight) / 2;
    ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
  } else if (type === "video") {
    const frame = await extractVideoFrame(src);
    ctx.drawImage(frame, 0, 0, previewWidth, previewHeight);
  }

  // Add text
  if (text.trim()) {
    ctx.font = `bold 40px ${font}`;
    ctx.fillStyle = color;
    ctx.textAlign = "center";
    ctx.fillText(text, position.x, position.y);
  }

  return new Promise((resolve) => {
    canvas.toBlob((blob) => {
      if (!blob) throw new Error("Failed to create blob from canvas");
      const file = new File([blob], "story_with_blur.png", { type: "image/png" });
      resolve(file);
    }, "image/png");
  });
};

const loadImage = (src: string): Promise<HTMLImageElement> =>
  new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = "anonymous";
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = src;
    if (img.complete) img.onload?.();
  });

const extractVideoFrame = (src: string): Promise<HTMLVideoElement> =>
  new Promise((resolve, reject) => {
    const video = document.createElement("video");
    video.src = src;
    video.crossOrigin = "anonymous";
    video.muted = true;
    video.preload = "metadata";

    video.onloadeddata = () => {
      video.currentTime = 1;
    };
    video.onseeked = () => resolve(video);
    video.onerror = reject;
  });