import React from "react";
import { AbsoluteFill, Sequence, 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 { FadeInText, sceneDurationFrames, totalSceneFrames } from "../shared/SceneLayers.js";
import { COLIBRI } from "../shared/tokens.js";

const CompareScene: React.FC<{
  beforeTitle: string;
  beforeSubtitle?: string;
  afterTitle: string;
  afterSubtitle?: string;
  palette: { primary: string; secondary: string; accent: string };
}> = ({ beforeTitle, beforeSubtitle, afterTitle, afterSubtitle, palette }) => (
  <AbsoluteFill style={{ flexDirection: "row", display: "flex", background: COLIBRI.bg0 }}>
    <AbsoluteFill
      style={{
        width: "50%",
        background: "#171322",
        justifyContent: "center",
        alignItems: "flex-start",
        padding: "72px 56px",
        filter: "grayscale(0.25) brightness(0.9)",
      }}
    >
      <div
        style={{
          fontSize: 13,
          letterSpacing: "0.1em",
          textTransform: "uppercase",
          color: "#8f879f",
          fontFamily: COLIBRI.fontBody,
          marginBottom: 18,
        }}
      >
        Before
      </div>
      <FadeInText
        title={beforeTitle}
        subtitle={beforeSubtitle}
        palette={palette}
        align="left"
        titleSize={38}
      />
    </AbsoluteFill>

    <AbsoluteFill
      style={{
        width: "50%",
        left: "50%",
        background: `linear-gradient(160deg, ${palette.primary}20 0%, ${COLIBRI.bg2} 100%)`,
        justifyContent: "center",
        alignItems: "flex-start",
        padding: "72px 56px",
        borderLeft: "1px solid rgba(255,255,255,0.08)",
      }}
    >
      <div
        style={{
          fontSize: 13,
          letterSpacing: "0.1em",
          textTransform: "uppercase",
          color: COLIBRI.gradEnd,
          fontFamily: COLIBRI.fontBody,
          marginBottom: 18,
        }}
      >
        After
      </div>
      <FadeInText
        title={afterTitle}
        subtitle={afterSubtitle}
        palette={palette}
        align="left"
        titleSize={38}
      />
    </AbsoluteFill>
  </AbsoluteFill>
);

export const ComparisonBeforeAfter: React.FC<ColibriRemotionInputProps> = (props) => {
  const { fps } = useVideoConfig();
  const palette = resolvePalette(props);
  const scenes = resolveScenes(props);
  const outroFrames = Math.round(fps * 2);
  let cursor = 0;

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

      {scenes.map((scene, index) => {
        const durationInFrames = sceneDurationFrames(scene, fps);
        const from = cursor;
        cursor += durationInFrames;
        const isBeforeBeat = index % 2 === 0;
        const sceneTitle = scene.on_screen_text ?? "";
        const sceneSubtitle = scene.narration ?? scene.visual_direction;

        return (
          <Sequence
            key={`${scene.id ?? index}-compare`}
            from={from}
            durationInFrames={durationInFrames}
          >
            <CompareScene
              beforeTitle={
                isBeforeBeat ? sceneTitle : "Spreadsheets, screenshots, and guesswork"
              }
              beforeSubtitle={isBeforeBeat ? sceneSubtitle : "The old workflow"}
              afterTitle={
                isBeforeBeat
                  ? (props.productName ?? props.title)
                  : sceneTitle
              }
              afterSubtitle={
                isBeforeBeat ? props.tagline ?? "A clearer way to ship" : sceneSubtitle
              }
              palette={palette}
            />
          </Sequence>
        );
      })}

      <Sequence from={cursor} durationInFrames={outroFrames}>
        <BrandOutro
          title={props.productName ?? props.title}
          subtitle={props.cta ?? props.tagline}
          palette={palette}
        />
      </Sequence>
    </AbsoluteFill>
  );
};

export function comparisonDurationFrames(props: ColibriRemotionInputProps): number {
  const scenes = resolveScenes(props);
  return totalSceneFrames(scenes, props.fps) + Math.round(props.fps * 2);
}