import { Composition } from "remotion";
import {
  HeartyAd,
  HeartyAdProps,
  CLIPS_V3,
  CLIPS_A,
  CLIPS_B1,
  CLIPS_B2,
  CLIPS_B3,
  CLIPS_D1,
  CLIPS_E,
} from "./HeartyAd";

const FPS = 30;
const DUR_21 = 21 * FPS; // 630 frames — 20s ads
const DUR_15 = 15 * FPS; // 450 frames — 15s ads

const ASPECT_RATIOS = [
  { suffix: "9x16", width: 1080, height: 1920 },
  { suffix: "4x5", width: 1080, height: 1350 },
];

type AdDef = {
  id: string;
  props: HeartyAdProps;
  duration: number;
};

const ADS: AdDef[] = [
  // ── Iteration A: Fresh craft/science clips, original VO ──
  {
    id: "iter-a",
    props: { clips: CLIPS_A },
    duration: DUR_21,
  },

  // ── Iteration B: Hook swap tests (original VO) ──
  {
    id: "iter-b1-oil-hook",
    props: { clips: CLIPS_B1 },
    duration: DUR_21,
  },
  {
    id: "iter-b2-rain-hook",
    props: { clips: CLIPS_B2 },
    duration: DUR_21,
  },
  {
    id: "iter-b3-bubble-hook",
    props: { clips: CLIPS_B3 },
    duration: DUR_21,
  },

  // ── Iteration C: Script reframe (V3 clips, new VO) ──
  {
    id: "iter-c1-what-if",
    props: {
      clips: CLIPS_V3,
      voFile: "voiceover/vo-c1.mp3",
      srtFile: "voiceover/vo-c1.srt",
    },
    duration: DUR_21,
  },
  {
    id: "iter-c2-benefit-first",
    props: {
      clips: CLIPS_V3,
      voFile: "voiceover/vo-c2.mp3",
      srtFile: "voiceover/vo-c2.srt",
    },
    duration: DUR_21,
  },
  {
    id: "iter-c3-empathy",
    props: {
      clips: CLIPS_V3,
      voFile: "voiceover/vo-c3.mp3",
      srtFile: "voiceover/vo-c3.srt",
    },
    duration: DUR_21,
  },

  // ── Iteration D: Audience expansion (V3 clips, new VO) ──
  {
    id: "iter-d1-stay-at-home",
    props: {
      clips: CLIPS_D1,
      voFile: "voiceover/vo-d1.mp3",
      srtFile: "voiceover/vo-d1.srt",
      ctaDuration: 120,
    },
    duration: DUR_21,
  },
  {
    id: "iter-d2-grandparent",
    props: {
      clips: CLIPS_V3,
      voFile: "voiceover/vo-d2.mp3",
      srtFile: "voiceover/vo-d2.srt",
    },
    duration: DUR_21,
  },

  // ── D1 translations ──
  ...["fr", "es", "it", "pt", "de"].map((lang) => ({
    id: `iter-d1-${lang}`,
    props: {
      clips: CLIPS_D1,
      lang,
      voFile: `voiceover/d1/${lang}/dubbed-${lang}.mp3`,
      srtFile: `voiceover/d1/${lang}/dubbed-${lang}.srt`,
      ctaDuration: 120,
    },
    duration: DUR_21,
  })),

  // ── D2 translations ──
  ...["fr", "es", "it", "pt", "de"].map((lang) => ({
    id: `iter-d2-${lang}`,
    props: {
      clips: CLIPS_V3,
      lang,
      voFile: `voiceover/d2/${lang}/dubbed-${lang}.mp3`,
      srtFile: `voiceover/d2/${lang}/dubbed-${lang}.srt`,
    },
    duration: DUR_21,
  })),

  // ── Iteration E: 15s cut ──
  {
    id: "iter-e-15s",
    props: {
      clips: CLIPS_E,
      voFile: "voiceover/vo-e.mp3",
      srtFile: "voiceover/vo-e.srt",
    },
    duration: DUR_15,
  },
];

export const RemotionRoot: React.FC = () => {
  return (
    <>
      {ADS.map(({ id, props, duration }) =>
        ASPECT_RATIOS.map(({ suffix, width, height }) => (
          <Composition
            key={`${id}-${suffix}`}
            id={`${id}-${suffix}`}
            component={HeartyAd}
            durationInFrames={duration}
            fps={FPS}
            width={width}
            height={height}
            defaultProps={props}
          />
        ))
      )}
    </>
  );
};
