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

const QuoteIntro: React.FC<{
  quote: string;
  attribution?: string;
  palette: { primary: string; secondary: string; accent: string };
}> = ({ quote, attribution, palette }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const opacity = interpolate(frame, [0, fps * 0.6], [0, 1], {
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill
      style={{
        background: COLIBRI.bg0,
        justifyContent: "center",
        alignItems: "center",
        padding: "96px 140px",
      }}
    >
      <AbsoluteFill
        style={{
          background: `radial-gradient(circle at 20% 30%, ${palette.accent}18 0%, transparent 50%)`,
        }}
      />
      <div style={{ opacity, maxWidth: 1100, textAlign: "center" }}>
        <div
          style={{
            fontSize: 22,
            color: COLIBRI.gradEnd,
            fontFamily: COLIBRI.fontBody,
            letterSpacing: "0.08em",
            textTransform: "uppercase",
            marginBottom: 28,
          }}
        >
          Customer story
        </div>
        <div
          style={{
            fontSize: 58,
            fontFamily: COLIBRI.fontDisplay,
            fontStyle: "italic",
            lineHeight: 1.15,
            color: COLIBRI.text1,
            marginBottom: attribution ? 28 : 0,
          }}
        >
          “{quote}”
        </div>
        {attribution ? (
          <div
            style={{
              fontSize: 24,
              color: COLIBRI.text2,
              fontFamily: COLIBRI.fontBody,
            }}
          >
            {attribution}
          </div>
        ) : null}
      </div>
    </AbsoluteFill>
  );
};

const ProofPointScene: React.FC<{
  title: string;
  subtitle?: string;
  palette: { primary: string; secondary: string; accent: string };
}> = ({ title, subtitle, palette }) => (
  <AbsoluteFill
    style={{
      background: COLIBRI.bg2,
      justifyContent: "center",
      alignItems: "center",
      padding: 96,
    }}
  >
    <div
      style={{
        border: "1px solid rgba(255,255,255,0.08)",
        borderRadius: 14,
        padding: "48px 56px",
        maxWidth: 980,
        background: "rgba(255,255,255,0.03)",
      }}
    >
      <div
        style={{
          width: 10,
          height: 10,
          borderRadius: 999,
          background: palette.accent,
          marginBottom: 24,
        }}
      />
      <div
        style={{
          fontSize: 44,
          fontFamily: COLIBRI.fontDisplay,
          color: COLIBRI.text1,
          lineHeight: 1.15,
          marginBottom: subtitle ? 16 : 0,
        }}
      >
        {title}
      </div>
      {subtitle ? (
        <div
          style={{
            fontSize: 22,
            color: COLIBRI.text2,
            fontFamily: COLIBRI.fontBody,
            lineHeight: 1.45,
          }}
        >
          {subtitle}
        </div>
      ) : null}
    </div>
  </AbsoluteFill>
);

export const CustomerTestimonial: React.FC<ColibriRemotionInputProps> = (props) => {
  const { fps } = useVideoConfig();
  const palette = resolvePalette(props);
  const scenes = resolveScenes(props);
  const quoteScene = scenes[0];
  const proofScenes = scenes.slice(1);
  const introFrames = sceneDurationFrames(quoteScene, fps);
  const outroFrames = Math.round(fps * 4);

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

      <Sequence from={0} durationInFrames={introFrames}>
        <QuoteIntro
          quote={quoteScene.on_screen_text ?? quoteScene.narration ?? props.title}
          attribution={quoteScene.visual_direction ?? props.productName}
          palette={palette}
        />
      </Sequence>

      <Sequence from={introFrames} durationInFrames={totalSceneFrames(proofScenes, fps)}>
        <AbsoluteFill>
          {proofScenes.map((scene, index) => {
            const durationInFrames = sceneDurationFrames(scene, fps);
            const from = proofScenes
              .slice(0, index)
              .reduce((sum, s) => sum + sceneDurationFrames(s, fps), 0);
            const sceneId = scene.id ?? String(index + 2);
            const brollFile = props.brollFiles?.[sceneId];

            return (
              <Sequence
                key={`${sceneId}-${index}`}
                from={from}
                durationInFrames={durationInFrames}
              >
                {brollFile ? (
                  <BrollScene
                    brollFile={brollFile}
                    title={scene.on_screen_text ?? ""}
                    subtitle={scene.narration ?? scene.visual_direction}
                    palette={palette}
                  />
                ) : (
                  <ProofPointScene
                    title={scene.on_screen_text ?? ""}
                    subtitle={scene.narration ?? scene.visual_direction}
                    palette={palette}
                  />
                )}
              </Sequence>
            );
          })}
        </AbsoluteFill>
      </Sequence>

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

export function customerTestimonialDurationFrames(
  props: ColibriRemotionInputProps,
): number {
  const scenes = resolveScenes(props);
  const quoteScene = scenes[0];
  const proofScenes = scenes.slice(1);
  return (
    sceneDurationFrames(quoteScene, props.fps) +
    totalSceneFrames(proofScenes, props.fps) +
    Math.round(props.fps * 4)
  );
}