import React from "react";
import { AbsoluteFill, OffthreadVideo, Img, staticFile, useCurrentFrame, useVideoConfig, interpolate, Easing } from "remotion";

// Standalone Claude logo reveal. Plays the real Anthropic sparkle-arm +
// wordmark animation clip (extracted from the reference reel) on a cream bg.
// After the clip ends (~1.3s) the last frame is held via a still poster so
// the scene can sit for any total duration — brand outro, brand beat mid-reel,
// or "powered by Claude" closer.

interface ClaudeLogoRevealProps {
  backgroundColor?: string;       // cream bg behind clip, default #F6F6F1
  clipSrc?: string;                // relative path under public/, default claude_reveal.mp4
  posterSrc?: string;              // optional still for the hold phase; if omitted the video's last frame is held by pausing playback
  clipDurationS?: number;          // how long the clip itself runs before hold, default 1.3
  fadeInFrames?: number;           // opacity fade on entry, default 4
}

export const ClaudeLogoReveal: React.FC<ClaudeLogoRevealProps> = ({
  backgroundColor = "#F6F6F1",
  clipSrc = "visuals/claude_reveal.mp4",
  posterSrc,
  clipDurationS = 1.3,
  fadeInFrames = 4,
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const clipFrames = Math.round(clipDurationS * fps);
  const inClip = frame < clipFrames;

  const opacity = interpolate(frame, [0, fadeInFrames], [0, 1], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
    easing: Easing.out(Easing.cubic),
  });

  return (
    <AbsoluteFill style={{ backgroundColor, overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, opacity }}>
        {inClip ? (
          <OffthreadVideo
            src={clipSrc.startsWith("http") ? clipSrc : staticFile(clipSrc)}
            muted
            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
          />
        ) : posterSrc ? (
          <Img
            src={posterSrc.startsWith("http") ? posterSrc : staticFile(posterSrc)}
            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
          />
        ) : (
          // No poster → re-mount OffthreadVideo with a negative startFrom to
          // keep it paused on the last frame by seeking past end (Remotion will
          // clamp to the final frame).
          <OffthreadVideo
            src={clipSrc.startsWith("http") ? clipSrc : staticFile(clipSrc)}
            muted
            startFrom={clipFrames - 1}
            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
          />
        )}
      </div>
    </AbsoluteFill>
  );
};

// Auto-extracted from Props interface — see source for authoritative types.
// Component: ClaudeLogoReveal
// 5 props detected · 3 port(s)