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

const LowerThird: React.FC<{ title: string; subtitle?: string }> = ({
  title,
  subtitle,
}) => (
  <AbsoluteFill
    style={{
      justifyContent: "flex-end",
      alignItems: "flex-start",
      padding: "0 0 140px 72px",
      pointerEvents: "none",
    }}
  >
    <div
      style={{
        background: "rgba(8, 6, 26, 0.82)",
        borderLeft: `4px solid ${COLIBRI.gradEnd}`,
        padding: "16px 22px",
        borderRadius: "0 10px 10px 0",
        maxWidth: 640,
      }}
    >
      <FadeInText title={title} subtitle={subtitle} palette={{ primary: "", secondary: "", accent: "" }} titleSize={32} />
    </div>
  </AbsoluteFill>
);

export const ProductDemo: React.FC<ColibriRemotionInputProps> = (props) => {
  const { fps } = useVideoConfig();
  const scenes = resolveScenes(props);
  const captions = props.captions ?? [];
  const totalFrames = totalSceneFrames(scenes, fps);
  let cursor = 0;

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

      {props.screenRecordingFile ? (
        <AbsoluteFill>
          <Video
            src={props.screenRecordingFile}
            style={{ width: "100%", height: "100%", objectFit: "contain", backgroundColor: COLIBRI.bg0 }}
          />
          <AbsoluteFill
            style={{
              background:
                "linear-gradient(180deg, rgba(8,6,26,0.35) 0%, transparent 18%, transparent 72%, rgba(8,6,26,0.55) 100%)",
            }}
          />
        </AbsoluteFill>
      ) : (
        <AbsoluteFill
          style={{
            background: COLIBRI.bg2,
            justifyContent: "center",
            alignItems: "center",
            color: COLIBRI.text2,
            fontFamily: COLIBRI.fontBody,
            fontSize: 24,
          }}
        >
          Screen recording required for Product Demo
        </AbsoluteFill>
      )}

      {scenes.map((scene, index) => {
        const durationInFrames = sceneDurationFrames(scene, fps);
        const from = cursor;
        cursor += durationInFrames;

        return (
          <Sequence
            key={`${scene.id ?? index}-lower-third`}
            from={from}
            durationInFrames={Math.min(durationInFrames, Math.round(fps * 2.5))}
          >
            <LowerThird
              title={scene.on_screen_text ?? props.title}
              subtitle={scene.visual_direction}
            />
          </Sequence>
        );
      })}

      {captions.length > 0 ? (
        <Sequence from={0} durationInFrames={totalFrames}>
          <CaptionsOverlay captions={captions} />
        </Sequence>
      ) : null}
    </AbsoluteFill>
  );
};

export function productDemoDurationFrames(props: ColibriRemotionInputProps): number {
  const scenes = resolveScenes(props);
  const sceneTotal = totalSceneFrames(scenes, props.fps);
  const fallback = props.fps * 60;
  return Math.max(sceneTotal, fallback);
}