/**
 * ExpertConversation Composition
 *
 * Main composition that renders all scenes in sequence.
 * Accepts a VideoScript via props (defaultProps for Studio, --props override for CLI).
 */

import React, { useCallback } from 'react';
import { AbsoluteFill, Audio, Sequence, interpolate, useVideoConfig } from 'remotion';
import { HookScene } from '../scenes/HookScene';
import { QuestionScene } from '../scenes/QuestionScene';
import { ExpertMessageScene } from '../scenes/ExpertMessageScene';
import { TransitionScene } from '../scenes/TransitionScene';
import { ProductScene } from '../scenes/ProductScene';
import { CTAScene } from '../scenes/CTAScene';
import { EndCardScene } from '../scenes/EndCardScene';
import { msToFrames } from '../lib/timing';
import { darkPalette } from '../lib/colors';
import type { Scene, VideoScript } from '../types/video-script';

type Props = {
  script: VideoScript;
};

export const ExpertConversation: React.FC<Props> = ({ script }) => {
  const { fps, durationInFrames } = useVideoConfig();

  const renderScene = (scene: Scene) => {
    const startFrame = msToFrames(scene.startMs, fps);
    const durationFrames = msToFrames(scene.durationMs, fps);

    switch (scene.type) {
      case 'hook':
        return (
          <Sequence
            key={scene.id}
            from={startFrame}
            durationInFrames={durationFrames}
            name={`Hook: ${scene.text.slice(0, 30)}...`}
          >
            <HookScene scene={scene} expert={script.expert} />
          </Sequence>
        );

      case 'question':
        return (
          <Sequence
            key={scene.id}
            from={startFrame}
            durationInFrames={durationFrames}
            name={`Question: ${scene.question}`}
          >
            <QuestionScene scene={scene} />
          </Sequence>
        );

      case 'expert-message':
        return (
          <Sequence
            key={scene.id}
            from={startFrame}
            durationInFrames={durationFrames}
            name={`Expert: ${scene.text.slice(0, 30)}...`}
          >
            <ExpertMessageScene scene={scene} expert={script.expert} />
          </Sequence>
        );

      case 'transition':
        return (
          <Sequence
            key={scene.id}
            from={startFrame}
            durationInFrames={durationFrames}
            name={`Transition: ${scene.text}`}
          >
            <TransitionScene scene={scene} />
          </Sequence>
        );

      case 'product':
        return (
          <Sequence
            key={scene.id}
            from={startFrame}
            durationInFrames={durationFrames}
            name={`Product: ${scene.product.name}`}
          >
            <ProductScene scene={scene} />
          </Sequence>
        );

      case 'cta':
        return (
          <Sequence
            key={scene.id}
            from={startFrame}
            durationInFrames={durationFrames}
            name={`CTA: ${scene.buttonText}`}
          >
            <CTAScene scene={scene} />
          </Sequence>
        );

      case 'end-card':
        return (
          <Sequence
            key={scene.id}
            from={startFrame}
            durationInFrames={durationFrames}
            name="End Card"
          >
            <EndCardScene scene={scene} expert={script.expert} />
          </Sequence>
        );

      default:
        return null;
    }
  };

  const musicVolume = useCallback(
    (frame: number) => {
      const { music } = script.audio;
      if (!music) return 0;

      const fadeInFrames = msToFrames(music.fadeInMs, fps);
      const fadeOutFrames = msToFrames(music.fadeOutMs, fps);

      return interpolate(
        frame,
        [0, fadeInFrames, durationInFrames - fadeOutFrames, durationInFrames],
        [0, music.volume, music.volume, 0],
        { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
      );
    },
    [script.audio, fps, durationInFrames]
  );

  return (
    <AbsoluteFill style={{ backgroundColor: darkPalette.background }}>
      {script.scenes.map(renderScene)}

      {script.audio.voiceover.audioUrl && (
        <Audio src={script.audio.voiceover.audioUrl} />
      )}

      {script.audio.music?.trackUrl && (
        <Audio src={script.audio.music.trackUrl} volume={musicVolume} />
      )}
    </AbsoluteFill>
  );
};
