/**
 * ClosingScene Component
 *
 * CTA / closing slide with animated headline.
 */

import React from 'react';
import { interpolate, useCurrentFrame, useVideoConfig, spring } from 'remotion';
import { stemedbPalette } from '../lib/colors';
import type { ClosingContent } from '../types/pitch-script';

type ClosingSceneProps = {
  content: ClosingContent;
};

export const ClosingScene: React.FC<ClosingSceneProps> = ({ content }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Headline spring animation
  const headlineSpring = spring({
    frame,
    fps,
    config: {
      damping: 20,
      stiffness: 80,
    },
  });

  const headlineOpacity = interpolate(frame, [0, 15], [0, 1], {
    extrapolateRight: 'clamp',
  });
  const headlineScale = interpolate(headlineSpring, [0, 1], [0.8, 1]);

  // CTA button animation
  const ctaOpacity = interpolate(frame, [20, 35], [0, 1], {
    extrapolateRight: 'clamp',
  });
  const ctaY = interpolate(frame, [20, 35], [30, 0], {
    extrapolateRight: 'clamp',
  });

  // Pulse/glow effect for CTA
  const pulseScale = content.animation === 'pulse'
    ? 1 + Math.sin(frame * 0.15) * 0.03
    : 1;

  const glowIntensity = content.animation === 'glow'
    ? interpolate(
        Math.sin(frame * 0.1),
        [-1, 1],
        [0.4, 0.8],
      )
    : 0.5;

  // Subtext fade in
  const subtextOpacity = interpolate(frame, [35, 50], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        backgroundColor: stemedbPalette.background,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 80,
      }}
    >
      {/* Headline */}
      <div
        style={{
          opacity: headlineOpacity,
          transform: `scale(${headlineScale})`,
          textAlign: 'center',
          marginBottom: 48,
        }}
      >
        <div
          style={{
            color: stemedbPalette.text,
            fontSize: 64,
            fontWeight: 700,
            lineHeight: 1.2,
            maxWidth: 1000,
          }}
        >
          {content.headline}
        </div>
      </div>

      {/* CTA Button */}
      {content.cta && (
        <div
          style={{
            opacity: ctaOpacity,
            transform: `translateY(${ctaY}px) scale(${pulseScale})`,
            marginBottom: 32,
          }}
        >
          <div
            style={{
              backgroundColor: stemedbPalette.accent,
              color: '#000000',
              fontSize: 28,
              fontWeight: 700,
              padding: '20px 48px',
              borderRadius: 12,
              boxShadow: `0 0 40px ${stemedbPalette.accent}${Math.round(glowIntensity * 255).toString(16).padStart(2, '0')}`,
            }}
          >
            {content.cta}
          </div>
        </div>
      )}

      {/* Subtext */}
      {content.subtext && (
        <div
          style={{
            opacity: subtextOpacity,
            textAlign: 'center',
          }}
        >
          <div
            style={{
              color: stemedbPalette.textMuted,
              fontSize: 24,
            }}
          >
            {content.subtext}
          </div>
        </div>
      )}

      {/* StemeDB Logo/Wordmark */}
      <div
        style={{
          position: 'absolute',
          bottom: 48,
          opacity: subtextOpacity,
        }}
      >
        <div
          style={{
            color: stemedbPalette.textMuted,
            fontSize: 20,
            fontWeight: 600,
            letterSpacing: '0.15em',
            textTransform: 'uppercase',
          }}
        >
          StemeDB
        </div>
      </div>
    </div>
  );
};
