import React from 'react';
import { useCurrentFrame, spring, useVideoConfig, interpolate } from 'remotion';
import { SPRING } from '../styles/theme';

// Word-by-word staggered reveal
export const KineticText: React.FC<{
  text: string;
  startDelay?: number;
  staggerFrames?: number;
  fontSize?: number;
  fontWeight?: number;
  color?: string;
  highlightWords?: string[];
  highlightColor?: string;
  style?: React.CSSProperties;
  animationType?: 'slideUp' | 'fadeScale' | 'blur';
}> = ({
  text,
  startDelay = 0,
  staggerFrames = 4,
  fontSize = 48,
  fontWeight = 700,
  color = '#f0f0f5',
  highlightWords = [],
  highlightColor = '#ff6d5a',
  style = {},
  animationType = 'slideUp',
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const words = text.split(' ');

  return (
    <div
      style={{
        display: 'flex',
        flexWrap: 'wrap',
        gap: `0 ${fontSize * 0.25}px`,
        justifyContent: 'center',
        ...style,
      }}
    >
      {words.map((word, i) => {
        const delay = startDelay + i * staggerFrames;
        const progress = spring({
          frame: frame - delay,
          fps,
          config: SPRING.snappy,
        });

        const isHighlighted = highlightWords.some(
          (hw) => word.toLowerCase().replace(/[^a-z]/g, '') === hw.toLowerCase()
        );

        let wordStyle: React.CSSProperties = {};

        switch (animationType) {
          case 'slideUp':
            wordStyle = {
              transform: `translateY(${interpolate(progress, [0, 1], [30, 0])}px)`,
              opacity: progress,
            };
            break;
          case 'fadeScale':
            wordStyle = {
              transform: `scale(${interpolate(progress, [0, 1], [0.7, 1])})`,
              opacity: progress,
            };
            break;
          case 'blur':
            wordStyle = {
              opacity: progress,
              filter: `blur(${interpolate(progress, [0, 1], [8, 0])}px)`,
            };
            break;
        }

        return (
          <span
            key={i}
            style={{
              fontSize,
              fontWeight,
              color: isHighlighted ? highlightColor : color,
              display: 'inline-block',
              ...wordStyle,
            }}
          >
            {word}
          </span>
        );
      })}
    </div>
  );
};

// Large number counter with flip-style animation
export const FlipCounter: React.FC<{
  value: number;
  startDelay?: number;
  duration?: number;
  prefix?: string;
  suffix?: string;
  fontSize?: number;
  color?: string;
}> = ({
  value,
  startDelay = 0,
  duration = 60,
  prefix = '',
  suffix = '',
  fontSize = 72,
  color = '#ff6d5a',
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const progress = spring({
    frame: frame - startDelay,
    fps,
    config: { damping: 50, stiffness: 100 },
    durationInFrames: duration,
  });

  const currentValue = Math.round(interpolate(progress, [0, 1], [0, value]));

  return (
    <span
      style={{
        fontSize,
        fontWeight: 800,
        color,
        fontVariantNumeric: 'tabular-nums',
        letterSpacing: -1,
      }}
    >
      {prefix}
      {currentValue.toLocaleString()}
      {suffix}
    </span>
  );
};
