import React from "react";
import { AbsoluteFill, Sequence, useVideoConfig } from "remotion";
import { ColibriRemotionInputProps } from "../../schemas/manifest.js";
import { AudioTracks } from "../shared/AudioTracks.js";
import { resolvePalette, resolveScenes } from "../shared/props.js";
import {
  BrollScene,
  FadeInText,
  GradientScene,
  sceneDurationFrames,
} from "../shared/SceneLayers.js";
import { COLIBRI } from "../shared/tokens.js";

const HookScene: React.FC<{
  title: string;
  subtitle?: string;
  palette: { primary: string; secondary: string; accent: string };
}> = ({ title, subtitle, palette }) => (
  <AbsoluteFill
    style={{
      background: COLIBRI.bg0,
      justifyContent: "center",
      alignItems: "flex-start",
      padding: "96px 120px",
    }}
  >
    <AbsoluteFill
      style={{
        background: `linear-gradient(90deg, ${palette.primary}22 0%, transparent 45%)`,
      }}
    />
    <FadeInText
      title={title}
      subtitle={subtitle}
      palette={palette}
      align="left"
      titleSize={80}
    />
    <div
      style={{
        position: "absolute",
        left: 120,
        bottom: 96,
        width: 120,
        height: 4,
        borderRadius: 999,
        background: palette.primary,
      }}
    />
  </AbsoluteFill>
);

const PayoffScene: React.FC<{
  productName: string;
  palette: { primary: string; secondary: string; accent: string };
}> = ({ productName, palette }) => (
  <AbsoluteFill
    style={{
      background: COLIBRI.bg2,
      justifyContent: "center",
      alignItems: "center",
      padding: 96,
    }}
  >
    <FadeInText
      title={productName}
      subtitle="Built for teams who ship."
      palette={palette}
      titleSize={64}
    />
  </AbsoluteFill>
);

export const FeatureHighlight: React.FC<ColibriRemotionInputProps> = (props) => {
  const { fps } = useVideoConfig();
  const palette = resolvePalette(props);
  const scenes = resolveScenes(props);
  const hook = scenes[0];
  const demo = scenes[1] ?? scenes[0];
  const hookFrames = sceneDurationFrames(hook, fps);
  const demoFrames = sceneDurationFrames(demo, fps);
  const outroFrames = Math.round(fps * 2);

  const demoSceneId = demo.id ?? "2";
  const brollFile = props.brollFiles?.[demoSceneId];

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

      <Sequence from={0} durationInFrames={hookFrames}>
        <HookScene
          title={hook.on_screen_text ?? props.title}
          subtitle={hook.narration ?? hook.visual_direction}
          palette={palette}
        />
      </Sequence>

      <Sequence from={hookFrames} durationInFrames={demoFrames}>
        {brollFile ? (
          <BrollScene
            brollFile={brollFile}
            title={demo.on_screen_text ?? ""}
            subtitle={demo.visual_direction}
            palette={palette}
            overlayStrength={0.62}
          />
        ) : (
          <GradientScene
            title={demo.on_screen_text ?? ""}
            subtitle={demo.visual_direction ?? demo.narration}
            palette={{
              primary: palette.accent,
              secondary: palette.secondary,
              accent: palette.primary,
            }}
            titleSize={56}
          />
        )}
      </Sequence>

      <Sequence from={hookFrames + demoFrames} durationInFrames={outroFrames}>
        <PayoffScene
          productName={props.productName ?? props.title}
          palette={palette}
        />
      </Sequence>
    </AbsoluteFill>
  );
};

export function featureHighlightDurationFrames(props: ColibriRemotionInputProps): number {
  const scenes = resolveScenes(props);
  const hook = scenes[0];
  const demo = scenes[1] ?? scenes[0];
  const fps = props.fps;
  return (
    sceneDurationFrames(hook, fps) +
    sceneDurationFrames(demo, fps) +
    Math.round(fps * 2)
  );
}