Shuffle Text

'use client';

import { useCallback, useEffect, useRef, useState } from 'react';
import { motion, useInView, useScroll, useTransform } from 'framer-motion';

interface ShuffleTextProps {
  text: string;
  trigger?: 'hover' | 'mount' | 'scroll';
  className?: string;
  characterSet?: string;
  scrambleSpeed?: number;
  revealDelay?: number;
  onComplete?: () => void;
}

const DEFAULT_CHARACTER_SET =
  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*';

export const ShuffleText = ({
  text,
  trigger = 'mount',
  className = '',
  characterSet = DEFAULT_CHARACTER_SET,
  scrambleSpeed = 50,
  revealDelay = 100,
  onComplete,
}: Readonly<ShuffleTextProps>) => {
  const [displayText, setDisplayText] = useState<string>('');
  const [isAnimating, setIsAnimating] = useState(false);
  const [hasAnimated, setHasAnimated] = useState(false);
  const [scrollRevealedCount, setScrollRevealedCount] = useState(0);
  const containerRef = useRef<HTMLSpanElement>(null);
  const scrambleIntervalRef = useRef<NodeJS.Timeout | null>(null);
  const revealTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  // Scroll-based animation
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ['start 0.9', 'start 0.3'],
  });

  const getRandomChar = useCallback(() => {
    return characterSet[Math.floor(Math.random() * characterSet.length)];
  }, [characterSet]);

  const getScrambledText = useCallback(
    (revealed: number) => {
      return text
        .split('')
        .map((char, index) => {
          if (char === ' ') return ' ';
          if (index < revealed) return char;
          return getRandomChar();
        })
        .join('');
    },
    [text, getRandomChar],
  );

  // Scroll-based reveal effect
  useEffect(() => {
    if (trigger !== 'scroll') return;

    let scrambleInterval: NodeJS.Timeout | null = null;

    // Start scramble effect
    scrambleInterval = setInterval(() => {
      setDisplayText(getScrambledText(scrollRevealedCount));
    }, scrambleSpeed);

    const unsubscribe = scrollYProgress.on('change', (progress) => {
      const totalChars = text.length;
      const newRevealedCount = Math.floor(progress * totalChars);
      setScrollRevealedCount(newRevealedCount);

      if (progress >= 1 && !hasAnimated) {
        setHasAnimated(true);
        setDisplayText(text);
        onComplete?.();
      }
    });

    return () => {
      unsubscribe();
      if (scrambleInterval) clearInterval(scrambleInterval);
    };
  }, [
    trigger,
    scrollYProgress,
    text,
    scrambleSpeed,
    getScrambledText,
    scrollRevealedCount,
    hasAnimated,
    onComplete,
  ]);

  // Mount/Hover animation
  const animate = useCallback(() => {
    if (isAnimating || trigger === 'scroll') return;

    setIsAnimating(true);
    setHasAnimated(true);

    let currentRevealed = 0;

    // Scramble effect - continuously randomize unrevealed characters
    scrambleIntervalRef.current = setInterval(() => {
      setDisplayText(getScrambledText(currentRevealed));
    }, scrambleSpeed);

    // Reveal characters one by one
    const revealNext = () => {
      // Skip spaces
      while (currentRevealed < text.length && text[currentRevealed] === ' ') {
        currentRevealed++;
      }

      if (currentRevealed < text.length) {
        currentRevealed++;
        setDisplayText(getScrambledText(currentRevealed));

        revealTimeoutRef.current = setTimeout(revealNext, revealDelay);
      } else {
        // Animation complete
        if (scrambleIntervalRef.current) {
          clearInterval(scrambleIntervalRef.current);
        }
        setDisplayText(text);
        setIsAnimating(false);
        onComplete?.();
      }
    };

    // Start with scrambled text, then begin revealing
    setDisplayText(getScrambledText(0));
    revealTimeoutRef.current = setTimeout(revealNext, revealDelay);
  }, [
    text,
    scrambleSpeed,
    revealDelay,
    isAnimating,
    trigger,
    getScrambledText,
    onComplete,
  ]);

  const reset = useCallback(() => {
    if (scrambleIntervalRef.current) {
      clearInterval(scrambleIntervalRef.current);
    }
    if (revealTimeoutRef.current) {
      clearTimeout(revealTimeoutRef.current);
    }
    setDisplayText(text);
    setIsAnimating(false);
  }, [text]);

  // Mount trigger
  useEffect(() => {
    if (trigger === 'mount' && !hasAnimated) {
      animate();
    }
  }, [trigger, hasAnimated, animate]);

  // Initialize display text for hover/scroll
  useEffect(() => {
    if (trigger === 'hover') {
      setDisplayText(text);
    }
    if (trigger === 'scroll') {
      setDisplayText(getScrambledText(0));
    }
  }, [text, trigger, getScrambledText]);

  // Cleanup
  useEffect(() => {
    return () => {
      if (scrambleIntervalRef.current) {
        clearInterval(scrambleIntervalRef.current);
      }
      if (revealTimeoutRef.current) {
        clearTimeout(revealTimeoutRef.current);
      }
    };
  }, []);

  const handleMouseEnter = () => {
    if (trigger === 'hover') {
      setHasAnimated(false);
      animate();
    }
  };

  const handleMouseLeave = () => {
    if (trigger === 'hover') {
      reset();
    }
  };

  return (
    <motion.span
      ref={containerRef}
      className={`inline-block ${className}`}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.2 }}
    >
      {displayText.split('').map((char, index) => (
        <motion.span
          key={`${index}-${char}`}
          className="inline-block"
          style={{
            whiteSpace: char === ' ' ? 'pre' : 'normal',
          }}
        >
          {char}
        </motion.span>
      ))}
    </motion.span>
  );
};

export default ShuffleText;