import React from "react";
import { Composition } from "remotion";
import { ColibriRemotionInputProps } from "../schemas/manifest.js";
import { VIDEO_TEMPLATES } from "../schemas/templates.js";
import { ThumbnailFrame } from "./shared/ThumbnailFrame.js";
import { AppLaunchTrailer } from "./templates/AppLaunchTrailer.js";
import { ComparisonBeforeAfter } from "./templates/ComparisonBeforeAfter.js";
import { CustomerTestimonial } from "./templates/CustomerTestimonial.js";
import { FeatureHighlight } from "./templates/FeatureHighlight.js";
import { ProductDemo } from "./templates/ProductDemo.js";
import { calculateTemplateDurationInFrames } from "./templates/duration.js";

export const defaultInputProps: ColibriRemotionInputProps = {
  templateSlug: "feature_highlight",
  title: "Colibri Preview",
  tagline: "On-brand video, generated in minutes",
  cta: "Start creating",
  scenes: [
    {
      id: "1",
      on_screen_text: "Ship on-brand video in minutes",
      visual_direction: "Product UI hero",
      narration: "Stop rebuilding the same launch assets from scratch.",
      duration_seconds: 5,
    },
    {
      id: "2",
      on_screen_text: "Templates, VO, music, and b-roll",
      visual_direction: "Studio pipeline",
      narration: "Colibri handles the full pipeline automatically.",
      duration_seconds: 5,
    },
  ],
  palette: {
    primary: "#4A9EFF",
    secondary: "#B565F5",
    accent: "#FF6FCF",
  },
  fps: 30,
  width: 1920,
  height: 1080,
};

const compositionMeta = {
  fps: defaultInputProps.fps,
  width: defaultInputProps.width,
  height: defaultInputProps.height,
};

function templateDuration(slug: keyof typeof VIDEO_TEMPLATES): number {
  return VIDEO_TEMPLATES[slug].defaultDurationSeconds * defaultInputProps.fps;
}

function withTemplateSlug(
  slug: keyof typeof VIDEO_TEMPLATES,
): ColibriRemotionInputProps {
  return {
    ...defaultInputProps,
    templateSlug: slug,
  };
}

export const RemotionRoot: React.FC = () => (
  <>
    <Composition
      id="AppLaunchTrailer"
      component={AppLaunchTrailer}
      durationInFrames={templateDuration("app_launch_trailer")}
      {...compositionMeta}
      defaultProps={withTemplateSlug("app_launch_trailer")}
      calculateMetadata={({ props }) => ({
        durationInFrames: calculateTemplateDurationInFrames(
          props as ColibriRemotionInputProps,
        ),
      })}
    />
    <Composition
      id="AppLaunchTrailerThumbnail"
      component={ThumbnailFrame}
      durationInFrames={1}
      {...compositionMeta}
      defaultProps={{
        ...withTemplateSlug("app_launch_trailer"),
        eyebrow: "Launch trailer",
        accentColor: "#FF6FCF",
      }}
    />

    <Composition
      id="FeatureHighlight"
      component={FeatureHighlight}
      durationInFrames={templateDuration("feature_highlight")}
      {...compositionMeta}
      defaultProps={withTemplateSlug("feature_highlight")}
      calculateMetadata={({ props }) => ({
        durationInFrames: calculateTemplateDurationInFrames(
          props as ColibriRemotionInputProps,
        ),
      })}
    />
    <Composition
      id="FeatureHighlightThumbnail"
      component={ThumbnailFrame}
      durationInFrames={1}
      {...compositionMeta}
      defaultProps={{
        ...withTemplateSlug("feature_highlight"),
        eyebrow: "Feature highlight",
        accentColor: "#4A9EFF",
      }}
    />

    <Composition
      id="ProductDemo"
      component={ProductDemo}
      durationInFrames={templateDuration("product_demo")}
      {...compositionMeta}
      defaultProps={{
        ...withTemplateSlug("product_demo"),
        captions: [
          {
            text: "Welcome to the product walkthrough.",
            start_seconds: 0.8,
            end_seconds: 3.2,
          },
        ],
      }}
      calculateMetadata={({ props }) => ({
        durationInFrames: calculateTemplateDurationInFrames(
          props as ColibriRemotionInputProps,
        ),
      })}
    />
    <Composition
      id="ProductDemoThumbnail"
      component={ThumbnailFrame}
      durationInFrames={1}
      {...compositionMeta}
      defaultProps={{
        ...withTemplateSlug("product_demo"),
        eyebrow: "Product demo",
        accentColor: "#5DE8D3",
      }}
    />

    <Composition
      id="CustomerTestimonial"
      component={CustomerTestimonial}
      durationInFrames={templateDuration("customer_testimonial")}
      {...compositionMeta}
      defaultProps={withTemplateSlug("customer_testimonial")}
      calculateMetadata={({ props }) => ({
        durationInFrames: calculateTemplateDurationInFrames(
          props as ColibriRemotionInputProps,
        ),
      })}
    />
    <Composition
      id="CustomerTestimonialThumbnail"
      component={ThumbnailFrame}
      durationInFrames={1}
      {...compositionMeta}
      defaultProps={{
        ...withTemplateSlug("customer_testimonial"),
        eyebrow: "Customer story",
        accentColor: "#FF6FCF",
      }}
    />

    <Composition
      id="ComparisonBeforeAfter"
      component={ComparisonBeforeAfter}
      durationInFrames={templateDuration("comparison_before_after")}
      {...compositionMeta}
      defaultProps={withTemplateSlug("comparison_before_after")}
      calculateMetadata={({ props }) => ({
        durationInFrames: calculateTemplateDurationInFrames(
          props as ColibriRemotionInputProps,
        ),
      })}
    />
    <Composition
      id="ComparisonBeforeAfterThumbnail"
      component={ThumbnailFrame}
      durationInFrames={1}
      {...compositionMeta}
      defaultProps={{
        ...withTemplateSlug("comparison_before_after"),
        eyebrow: "Before / after",
        accentColor: "#FFD75E",
      }}
    />
  </>
);