import {
  AbsoluteFill,
  Img,
  Sequence,
  Video,
  useCurrentFrame,
  useVideoConfig,
  interpolate,
  spring,
} from "remotion";
import { CTA } from "./CTA";

// Segment durations in seconds (from EDL)
const SEGMENTS = [
  { file: "problem.mp4", duration: 19 },
  { file: "value_prop.mp4", duration: 27 },
  { file: "numbers.mp4", duration: 20 },
  { file: "demo_payoff.mp4", duration: 20 },
  { file: "review_bar.mp4", duration: 16 },
] as const;

const CTA_DURATION = 8; // seconds
const CAPTION_BAR_HEIGHT = 100;

// Caption data synced to assembled timeline
const CAPTIONS: { start: number; end: number; text: string }[] = [
  { start: 0, end: 4.5, text: 'What we kept hearing from teams\nwas that the gap between' },
  { start: 4.5, end: 8.5, text: '"code pushed" and\n"stakeholder feedback"' },
  { start: 8.5, end: 12, text: 'was still too wide.' },
  { start: 12, end: 15.5, text: "That's why we built\nLaunchpad 3.0." },
  { start: 15.5, end: 19, text: 'Built around one idea:' },
  { start: 19, end: 24, text: 'Every pull request should be a live,\nshareable product experience' },
  { start: 24, end: 28.5, text: 'within 45 seconds\nof pushing code.' },
  { start: 28.5, end: 33, text: 'Not a staging link\nburied in a Slack thread.' },
  { start: 33, end: 38, text: 'A full preview — with backend,\ndatabase seed, and auth —' },
  { start: 38, end: 42, text: 'that anyone on the team\ncan click and interact with.' },
  { start: 42, end: 46, text: 'Internal beta users saw a\n62% reduction in review cycle time.' },
  { start: 46, end: 51, text: 'Average time from PR open to first\nstakeholder comment' },
  { start: 51, end: 55.5, text: 'dropped from 4.3 hours\nto 22 minutes.' },
  { start: 55.5, end: 62, text: 'And deployment failures caught\nin preview went from 8% to under 1%.' },
  { start: 62, end: 66, text: "You can see it's provisioning\na preview environment." },
  { start: 66, end: 70.5, text: "It's pulling in the database seed\nfrom our config." },
  { start: 70.5, end: 74, text: 'The auth provider\nis being configured.' },
  { start: 74, end: 78.5, text: 'And... done. 38 seconds.' },
  { start: 78.5, end: 82, text: "That's a live preview URL\nwith the full application stack." },
];

const Caption: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const currentTime = frame / fps;

  const caption = CAPTIONS.find(
    (c) => currentTime >= c.start && currentTime < c.end
  );

  if (!caption) return null;

  const progress = interpolate(
    currentTime,
    [caption.start, caption.start + 0.2],
    [0, 1],
    { extrapolateRight: "clamp" }
  );

  return (
    <div
      style={{
        position: "absolute",
        bottom: 80,
        left: 0,
        right: 0,
        display: "flex",
        justifyContent: "center",
        opacity: progress,
      }}
    >
      <div
        style={{
          backgroundColor: "rgba(0, 0, 0, 0.7)",
          borderRadius: 8,
          padding: "12px 32px",
          maxWidth: "80%",
        }}
      >
        <p
          style={{
            fontFamily: "Inter, sans-serif",
            fontWeight: 700,
            fontSize: 48,
            color: "#FFFFFF",
            textAlign: "center",
            lineHeight: 1.3,
            margin: 0,
            whiteSpace: "pre-line",
          }}
        >
          {caption.text}
        </p>
      </div>
    </div>
  );
};

const Logo: React.FC = () => {
  return (
    <div
      style={{
        position: "absolute",
        top: 24,
        right: 24,
        opacity: 0.8,
      }}
    >
      <Img src="/logo.png" style={{ height: 80 }} />
    </div>
  );
};

export const TeaserComposition: React.FC = () => {
  const { fps } = useVideoConfig();

  // Calculate frame offsets for each segment
  let frameOffset = 0;
  const segmentSequences = SEGMENTS.map((seg, i) => {
    const durationInFrames = seg.duration * fps;
    const seq = (
      <Sequence key={i} from={frameOffset} durationInFrames={durationInFrames}>
        <AbsoluteFill>
          <Video src={`/segments/${seg.file}`} />
        </AbsoluteFill>
      </Sequence>
    );
    frameOffset += durationInFrames;
    return seq;
  });

  const contentDuration = frameOffset; // total frames of video content
  const ctaDuration = CTA_DURATION * fps;

  return (
    <AbsoluteFill style={{ backgroundColor: "#000" }}>
      {/* Video segments */}
      {segmentSequences}

      {/* Captions overlay — runs during video content only */}
      <Sequence from={0} durationInFrames={contentDuration}>
        <Caption />
      </Sequence>

      {/* Logo — runs during video content only */}
      <Sequence from={0} durationInFrames={contentDuration}>
        <Logo />
      </Sequence>

      {/* CTA end card */}
      <Sequence from={contentDuration} durationInFrames={ctaDuration}>
        <CTA />
      </Sequence>
    </AbsoluteFill>
  );
};