/**
 * SlideScene Component
 *
 * Full-screen text/stat slides with dramatic reveal.
 * Used for hook slides and key message slides.
 */

import React from 'react';
import { interpolate, useCurrentFrame, useVideoConfig } from 'remotion';
import { AnimatedText } from '../components/AnimatedText';
import { stemedbPalette } from '../lib/colors';
import type { SlideContent, AudioBlock } from '../types/pitch-script';

type SlideSceneProps = {
  content: SlideContent;
  audio: AudioBlock;
};

export const SlideScene: React.FC<SlideSceneProps> = ({ content, audio }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const durationFrames = Math.round((audio.durationMs / 1000) * fps);

  // Background fade from black
  const bgOpacity = content.visual === 'fade-in'
    ? interpolate(frame, [0, fps * 0.3], [0, 1], { extrapolateRight: 'clamp' })
    : 1;

  // Headline animation
  const headlineOpacity = interpolate(frame, [5, 20], [0, 1], {
    extrapolateRight: 'clamp',
  });
  const headlineY = interpolate(frame, [5, 20], [30, 0], {
    extrapolateRight: 'clamp',
  });

  // Subheadline appears after headline
  const subOpacity = interpolate(frame, [25, 40], [0, 1], {
    extrapolateRight: 'clamp',
  });

  // Zoom effect
  const scale = content.visual === 'zoom'
    ? interpolate(frame, [0, durationFrames], [1, 1.05], {
        extrapolateRight: 'clamp',
      })
    : 1;

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        backgroundColor: stemedbPalette.background,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 80,
        opacity: bgOpacity,
        transform: `scale(${scale})`,
      }}
    >
      {/* Headline */}
      <div
        style={{
          opacity: headlineOpacity,
          transform: `translateY(${headlineY}px)`,
          textAlign: 'center',
          maxWidth: 1400,
        }}
      >
        {content.visual === 'typewriter' ? (
          <AnimatedText
            text={content.headline}
            style={{
              color: stemedbPalette.text,
              fontSize: 72,
              fontWeight: 700,
              lineHeight: 1.2,
            }}
            fadeInDuration={15}
          />
        ) : (
          <div
            style={{
              color: stemedbPalette.text,
              fontSize: 72,
              fontWeight: 700,
              lineHeight: 1.2,
            }}
          >
            {content.headline}
          </div>
        )}
      </div>

      {/* Subheadline */}
      {content.subheadline && (
        <div
          style={{
            opacity: subOpacity,
            textAlign: 'center',
            marginTop: 32,
            maxWidth: 1200,
          }}
        >
          <div
            style={{
              color: stemedbPalette.textSecondary,
              fontSize: 36,
              fontWeight: 400,
              lineHeight: 1.4,
            }}
          >
            {content.subheadline}
          </div>
        </div>
      )}
    </div>
  );
};
