import { AbsoluteFill, Sequence, staticFile } from "remotion";
import { SceneImageWithText } from "./SceneImageWithText";
import { SceneImageWithRollingText } from "./SceneImageWithRollingText";
import { SceneImageWithAura } from "./SceneImageWithAura";
import { Audio } from "remotion";
import { SceneInstagramComment } from "./SceneInstagramComment";
import { SceneEnding } from "./SceneSunoEnding";
import { SceneImageWithRainbowText } from "./SceneImageWithRainbowText";
import { PolaroidTemplate } from "./ScenePolaroidWithTexts";
import { SceneImageWithMarqueeText } from "./SceneImageWithMarqueeText";

export const SceneRenderer: React.FC<{ 
  scenes: any[];
  audioUrl?: string;
  audioVolume?: number;
}> = ({ scenes, audioUrl, audioVolume = 0.5 }) => {
  let currentFrame = 0;
  const fps = 30;

  // Determine audio source - use provided URL or fall back to local file
  const audioSource = audioUrl || staticFile("music.mp3");

  return (
    <AbsoluteFill>
      <Audio src={audioSource} volume={audioVolume} />
      {scenes.map((scene, index) => {
        const durationInFrames = Math.floor(scene.duration * fps);

        const SceneComponent = (() => {
          switch (scene.type) {
            case "image-with-text":
              return SceneImageWithText;
            case "image-with-rolling-text":
              return SceneImageWithRollingText;
            case "image-with-aura":
              return SceneImageWithAura;
            case "instagram-comment":
              return SceneInstagramComment;
            case "suno-ending":
              return SceneEnding;
            case "image-with-rainbow-text":
              return SceneImageWithRainbowText;
            case "polaroid-with-texts":
              return PolaroidTemplate;
            case "image-with-marquee-text":
              return SceneImageWithMarqueeText;
            default:
              console.warn(
                `Unknown scene type: ${scene.type}, defaulting to image-with-text`,
              );
              return SceneImageWithText;
          }
        })();

        const element = (
          <Sequence
            key={index}
            from={currentFrame}
            durationInFrames={durationInFrames}
          >
            <SceneComponent {...scene} />
          </Sequence>
        );

        currentFrame += durationInFrames;

        return element;
      })}
    </AbsoluteFill>
  );
};