/**
 * Root komposisi.
 *
 * Perhatikan: tidak ada satu angka pun yang diketik ulang di sini.
 * Durasi, timecode, caption, dan narasi semuanya dibaca dari recipe.json —
 * file yang di sistem penuh nanti dihasilkan oleh pipeline (LLM -> JSON).
 * Inilah jembatan "resep -> React" yang bikin sistem ini bisa diskalakan.
 */

import React from 'react';
import {Composition} from 'remotion';
import {Lift, liftDefaultProps, type LiftProps} from './scenes/Lift';
import recipe from './data/recipe.json';

const FPS = recipe.fps;

const scene = recipe.scenes.find((s) => s.component === 'Lift');

if (!scene) {
  throw new Error('Scene "Lift" tidak ditemukan di recipe.json');
}

const fmt = (sec: number) =>
  `${String(Math.floor(sec / 60)).padStart(2, '0')}:${String(sec % 60).padStart(2, '0')}`;

/* recipe.json punya scene dengan bentuk berbeda-beda, jadi bagian `props`
   dibaca sebagai override opsional. */
const overrides = ('props' in scene ? scene.props : {}) as Partial<LiftProps>;

const props: LiftProps = {
  ...liftDefaultProps,
  ...overrides,
  sceneNumber: scene.sequence,
  narration: scene.narration,
  timecode: `${fmt(scene.start_time)} – ${fmt(scene.start_time + scene.duration)}`,
};

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="Lift"
        component={Lift}
        durationInFrames={scene.duration * FPS}
        fps={FPS}
        width={1080}
        height={1920}
        defaultProps={props}
      />
    </>
  );
};