/**
 * StatScene Component
 *
 * Big number reveals with count-up animation.
 * Used for impactful statistics (e.g., "79%").
 */

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

type StatSceneProps = {
  content: StatContent;
};

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

  // Parse numeric value for count-up animation
  const numericMatch = content.value.match(/^(\d+(?:\.\d+)?)/);
  const numericValue = numericMatch ? parseFloat(numericMatch[1]) : null;
  const suffix = numericMatch ? content.value.replace(numericMatch[1], '') : content.value;

  // Spring animation for number reveal
  const springValue = spring({
    frame,
    fps,
    config: {
      damping: 50,
      stiffness: 100,
    },
  });

  // Animated count
  const displayValue = content.animation === 'count-up' && numericValue !== null
    ? Math.round(numericValue * springValue)
    : content.value;

  // Value opacity and scale
  const valueOpacity = interpolate(frame, [0, 15], [0, 1], {
    extrapolateRight: 'clamp',
  });
  const valueScale = interpolate(frame, [0, 15], [0.8, 1], {
    extrapolateRight: 'clamp',
  });

  // Label fade in after value
  const labelOpacity = interpolate(frame, [20, 35], [0, 1], {
    extrapolateRight: 'clamp',
  });
  const labelY = interpolate(frame, [20, 35], [20, 0], {
    extrapolateRight: 'clamp',
  });

  // Source attribution fade in last
  const sourceOpacity = interpolate(frame, [40, 55], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        backgroundColor: stemedbPalette.background,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 80,
      }}
    >
      {/* Big number */}
      <div
        style={{
          opacity: valueOpacity,
          transform: `scale(${valueScale})`,
        }}
      >
        <span
          style={{
            color: stemedbPalette.accent,
            fontSize: 200,
            fontWeight: 800,
            letterSpacing: '-0.02em',
            fontVariantNumeric: 'tabular-nums',
          }}
        >
          {typeof displayValue === 'number' ? displayValue : content.value.replace(suffix, '')}
        </span>
        <span
          style={{
            color: stemedbPalette.text,
            fontSize: 120,
            fontWeight: 700,
          }}
        >
          {suffix}
        </span>
      </div>

      {/* Label */}
      <div
        style={{
          opacity: labelOpacity,
          transform: `translateY(${labelY}px)`,
          marginTop: 24,
          maxWidth: 1000,
          textAlign: 'center',
        }}
      >
        <div
          style={{
            color: stemedbPalette.textSecondary,
            fontSize: 40,
            fontWeight: 500,
            lineHeight: 1.4,
          }}
        >
          {content.label}
        </div>
      </div>

      {/* Source */}
      {content.source && (
        <div
          style={{
            opacity: sourceOpacity,
            marginTop: 48,
          }}
        >
          <div
            style={{
              color: stemedbPalette.textMuted,
              fontSize: 20,
              fontStyle: 'italic',
            }}
          >
            — {content.source}
          </div>
        </div>
      )}
    </div>
  );
};
