/**
 * Root Component
 *
 * Composition registration for Remotion.
 * Uses calculateMetadata to derive duration and dimensions from VideoScript/PitchScript.
 */

import React from 'react';
import { Composition } from 'remotion';
import { ExpertConversation } from './compositions/ExpertConversation';
import { PitchVideo } from './compositions/PitchVideo';
import { parseAspectRatio } from './lib/aspect-ratio';
import { msToFrames } from './lib/timing';
import { backPainSideSleeperScript } from './data/back-pain-script';
import { stemedbPitchScript } from './data/stemedb-pitch';
import { calculateTotalDuration } from './types/pitch-script';
import type { VideoScript } from './types/video-script';
import type { PitchScript } from './types/pitch-script';
import './styles.css';

const FPS = 30;

export const RemotionRoot: React.FC = () => {
  return (
    <>
      {/* Expert Discovery Interface videos (TikTok/Reels) */}
      <Composition
        id="ExpertConversation"
        component={ExpertConversation}
        calculateMetadata={({ props }) => {
          const { width, height } = parseAspectRatio(props.script.meta.aspectRatio);
          return {
            durationInFrames: msToFrames(props.script.meta.duration, FPS),
            fps: FPS,
            width,
            height,
          };
        }}
        defaultProps={{ script: backPainSideSleeperScript satisfies VideoScript }}
      />

      {/* Pitch presentation videos (slides + app demos) */}
      <Composition
        id="PitchVideo"
        component={PitchVideo}
        calculateMetadata={({ props }) => {
          const { width, height } = parseAspectRatio(props.script.metadata.aspectRatio);
          const totalDuration = calculateTotalDuration(props.script.blocks);
          return {
            durationInFrames: msToFrames(totalDuration, props.script.metadata.fps),
            fps: props.script.metadata.fps,
            width,
            height,
          };
        }}
        defaultProps={{ script: stemedbPitchScript satisfies PitchScript }}
      />
    </>
  );
};
