import React, { useState, useEffect } from 'react';

interface RotatingTextProps {
  texts: string[];
  transitionDuration?: number;
  rotationInterval?: number;
  staggerDuration?: number;
  staggerFrom?: 'first' | 'last' | 'center' | 'random';
  splitBy?: 'characters' | 'words' | 'lines';
  mainClassName?: string;
  splitLevelClassName?: string;
  elementLevelClassName?: string;
  animatePresence?: boolean;
}

export const RotatingText: React.FC<RotatingTextProps> = ({
  texts,
  rotationInterval = 2800,
  staggerDuration = 0.025,
  splitBy = 'characters',
  mainClassName = '',
  splitLevelClassName = '',
  elementLevelClassName = '',
}) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [animationKey, setAnimationKey] = useState(0);

  useEffect(() => {
    if (!texts || texts.length <= 1) return;

    const interval = setInterval(() => {
      setCurrentIndex((prev) => (prev + 1) % texts.length);
      setAnimationKey((prev) => prev + 1);
    }, rotationInterval);

    return () => clearInterval(interval);
  }, [texts, rotationInterval]);

  const currentText = texts[currentIndex] || '';

  const renderElements = () => {
    if (splitBy === 'characters') {
      const words = currentText.split(' ');
      let charCounter = 0;

      return words.map((word, wordIndex) => (
        <span
          key={`word-${wordIndex}-${animationKey}`}
          className={`inline-flex whitespace-nowrap ${splitLevelClassName}`}
          style={{ transformStyle: 'preserve-3d' }}
        >
          {word.split('').map((char) => {
            const index = charCounter++;
            const delay = index * staggerDuration;

            return (
              <span
                key={`char-${index}-${animationKey}`}
                className={`inline-block will-change-transform ${elementLevelClassName}`}
                style={{
                  transformStyle: 'preserve-3d',
                  animation: `rotateCharIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) ${delay}s both`,
                }}
              >
                {char}
              </span>
            );
          })}
        </span>
      ));
    }

    if (splitBy === 'words') {
      const words = currentText.split(' ');
      return words.map((word, wordIndex) => {
        const delay = wordIndex * (staggerDuration * 2.5);
        return (
          <span
            key={`word-${wordIndex}-${animationKey}`}
            className={`inline-block will-change-transform ${elementLevelClassName}`}
            style={{
              transformStyle: 'preserve-3d',
              animation: `rotateWordIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) ${delay}s both`,
            }}
          >
            {word}
          </span>
        );
      });
    }

    return (
      <span
        key={`line-${animationKey}`}
        className={`inline-block will-change-transform ${elementLevelClassName}`}
        style={{
          transformStyle: 'preserve-3d',
          animation: 'rotateWordIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s both',
        }}
      >
        {currentText}
      </span>
    );
  };

  return (
    <span
      className={`inline-flex flex-wrap items-center justify-center gap-x-[0.25em] ${mainClassName}`}
      style={{ perspective: '1000px' }}
      aria-label={currentText}
    >
      {renderElements()}

      <style>{`
        @keyframes rotateCharIn {
          0% {
            opacity: 0;
            transform: translateY(120%) rotateX(-90deg);
            filter: blur(4px);
          }
          40% {
            opacity: 0.7;
          }
          100% {
            opacity: 1;
            transform: translateY(0%) rotateX(0deg);
            filter: blur(0px);
          }
        }
        @keyframes rotateWordIn {
          0% {
            opacity: 0;
            transform: translateY(100%) rotateX(-80deg);
            filter: blur(4px);
          }
          100% {
            opacity: 1;
            transform: translateY(0%) rotateX(0deg);
            filter: blur(0px);
          }
        }
      `}</style>
    </span>
  );
};