import React from "react";
import { AbsoluteFill, Sequence, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
import { ColibriRemotionInputProps } from "../../schemas/manifest.js";
import { AudioTracks } from "../shared/AudioTracks.js";
import { BrandOutro } from "../shared/BrandOutro.js";
import { resolvePalette, resolveScenes } from "../shared/props.js";
import { BrollScene, GradientScene, SceneSequence, totalSceneFrames } from "../shared/SceneLayers.js";
import { COLIBRI, brandGradientHorizontal } from "../shared/tokens.js";

const LaunchHero: React.FC<{
  title: string;
  tagline?: string;
  palette: { primary: string; secondary: string; accent: string };
}> = ({ title, tagline, palette }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const scale = interpolate(frame, [0, fps * 0.8], [0.92, 1], {
    extrapolateRight: "clamp",
  });
  const opacity = interpolate(frame, [0, fps * 0.5], [0, 1], {
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill
      style={{
        background: COLIBRI.bg0,
        justifyContent: "center",
        alignItems: "center",
        padding: 96,
      }}
    >
      <AbsoluteFill
        style={{
          background: `radial-gradient(circle at 50% 40%, ${palette.secondary}33 0%, transparent 55%)`,
        }}
      />
      <div style={{ opacity, transform: `scale(${scale})`, textAlign: "center" }}>
        <div
          style={{
            fontSize: 18,
            letterSpacing: "0.12em",
            textTransform: "uppercase",
            color: COLIBRI.gradEnd,
            fontFamily: COLIBRI.fontBody,
            fontWeight: 600,
            marginBottom: 24,
          }}
        >
          Launch trailer
        </div>
        <div
          style={{
            fontSize: 88,
            fontFamily: COLIBRI.fontDisplay,
            lineHeight: 1.02,
            background: brandGradientHorizontal(
              palette.primary,
              palette.secondary,
              palette.accent,
            ),
            WebkitBackgroundClip: "text",
            WebkitTextFillColor: "transparent",
            marginBottom: tagline ? 20 : 0,
          }}
        >
          {title}
        </div>
        {tagline ? (
          <div
            style={{
              fontSize: 30,
              color: COLIBRI.text2,
              fontFamily: COLIBRI.fontBody,
              maxWidth: 900,
              margin: "0 auto",
            }}
          >
            {tagline}
          </div>
        ) : null}
      </div>
    </AbsoluteFill>
  );
};

export const AppLaunchTrailer: React.FC<ColibriRemotionInputProps> = (props) => {
  const { fps } = useVideoConfig();
  const palette = resolvePalette(props);
  const scenes = resolveScenes(props);
  const introFrames = Math.round(fps * 4);
  const beatScenes = scenes.slice(0, 3);
  const outroFrames = Math.round(fps * 6);
  const beatsStart = introFrames;

  return (
    <AbsoluteFill style={{ backgroundColor: COLIBRI.bg0 }}>
      <AudioTracks voFile={props.voFile} musicFile={props.musicFile} musicVolume={0.4} />

      <Sequence from={0} durationInFrames={introFrames}>
        <LaunchHero title={props.title} tagline={props.tagline} palette={palette} />
      </Sequence>

      <Sequence from={beatsStart} durationInFrames={totalSceneFrames(beatScenes, fps)}>
        <SceneSequence
          scenes={beatScenes}
          palette={palette}
          brollFiles={props.brollFiles}
          renderScene={(scene, index, sceneId, brollFile) => {
            const title = scene.on_screen_text ?? "";
            const subtitle = scene.visual_direction ?? scene.narration;

            if (brollFile) {
              return (
                <BrollScene
                  brollFile={brollFile}
                  title={title}
                  subtitle={subtitle}
                  palette={palette}
                  overlayStrength={0.5}
                />
              );
            }

            return (
              <GradientScene
                title={title}
                subtitle={subtitle}
                palette={palette}
                titleSize={index === 0 ? 64 : 56}
              />
            );
          }}
        />
      </Sequence>

      <Sequence
        from={beatsStart + totalSceneFrames(beatScenes, fps)}
        durationInFrames={outroFrames}
      >
        <BrandOutro
          title={props.productName ?? props.title}
          subtitle={props.tagline}
          cta={props.cta}
          palette={palette}
        />
      </Sequence>
    </AbsoluteFill>
  );
};