Fuzzy Text

'use client';

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

interface FuzzyTextProps {
  text: string;
  className?: string;
  fontSize?: string;
  noiseIntensity?: number;
  enableHover?: boolean;
  baseColor?: string;
  glowColor?: string;
  speed?: number;
}

export const FuzzyText = ({
  text,
  className = '',
  fontSize = '4rem',
  noiseIntensity = 1,
  enableHover = true,
  baseColor = '#fff',
  glowColor = '#fff',
  speed = 50,
}: Readonly<FuzzyTextProps>) => {
  const containerRef = useRef<HTMLSpanElement>(null);
  const [isHovered, setIsHovered] = useState(false);
  const [displayText, setDisplayText] = useState(text);
  const animationRef = useRef<NodeJS.Timeout | null>(null);

  // Noise characters for the fuzzy effect
  const noiseChars = useMemo(
    () => '!<>-_\\/[]{}—=+*^?#_ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
    [],
  );

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

  // Apply noise to text when not hovered
  useEffect(() => {
    if (!enableHover) {
      // Always show noise when hover is disabled
      animationRef.current = setInterval(() => {
        const noisyText = text
          .split('')
          .map((char) => {
            if (char === ' ') return char;
            return Math.random() < noiseIntensity * 0.3 ? getRandomChar() : char;
          })
          .join('');
        setDisplayText(noisyText);
      }, speed);

      return () => {
        if (animationRef.current) clearInterval(animationRef.current);
      };
    }

    if (!isHovered) {
      // Apply noise effect when not hovered
      animationRef.current = setInterval(() => {
        const noisyText = text
          .split('')
          .map((char) => {
            if (char === ' ') return char;
            return Math.random() < noiseIntensity * 0.3 ? getRandomChar() : char;
          })
          .join('');
        setDisplayText(noisyText);
      }, speed);
    } else {
      // Show clear text when hovered
      setDisplayText(text);
      if (animationRef.current) {
        clearInterval(animationRef.current);
      }
    }

    return () => {
      if (animationRef.current) clearInterval(animationRef.current);
    };
  }, [isHovered, text, noiseIntensity, enableHover, getRandomChar, speed]);

  const uniqueId = useMemo(
    () => `fuzzy-${Math.random().toString(36).substr(2, 9)}`,
    [],
  );

  return (
    <span
      ref={containerRef}
      className={`relative inline-block cursor-pointer ${className}`}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={{
        fontSize,
        fontWeight: 'bold',
      }}
    >
      {/* SVG Filter for noise effect */}
      <svg width="0" height="0" className="absolute">
        <defs>
          <filter id={`${uniqueId}-noise`}>
            <feTurbulence
              type="fractalNoise"
              baseFrequency={isHovered ? '0' : '0.8'}
              numOctaves="4"
              seed={Math.random() * 100}
              stitchTiles="stitch"
              result="noise"
            />
            <feDisplacementMap
              in="SourceGraphic"
              in2="noise"
              scale={isHovered ? 0 : 2 * noiseIntensity}
              xChannelSelector="R"
              yChannelSelector="G"
            />
          </filter>
        </defs>
      </svg>

      {/* Main text with noise effect */}
      <motion.span
        className="relative inline-block"
        style={{
          color: baseColor,
          filter: `url(#${uniqueId}-noise)`,
          textShadow: `
            0 0 ${isHovered ? 20 : 5}px ${glowColor},
            0 0 ${isHovered ? 40 : 10}px ${glowColor},
            0 0 ${isHovered ? 60 : 15}px ${glowColor}
          `,
        }}
        animate={{
          x: isHovered ? 0 : [0, -1, 1, -1, 0],
          y: isHovered ? 0 : [0, 1, -1, 1, 0],
        }}
        transition={{
          duration: 0.1,
          repeat: isHovered ? 0 : Infinity,
          repeatType: 'loop',
        }}
      >
        {displayText}
      </motion.span>

      {/* Chromatic aberration layers */}
      {!isHovered && (
        <>
          {/* Red channel offset */}
          <motion.span
            className="pointer-events-none absolute left-0 top-0"
            style={{
              color: 'transparent',
              textShadow: `0 0 2px rgba(255, 0, 0, ${0.4 * noiseIntensity})`,
              mixBlendMode: 'screen',
            }}
            animate={{
              x: [-2, 2, -2],
              opacity: [0.5, 0.8, 0.5],
            }}
            transition={{
              duration: 0.15,
              repeat: Infinity,
              repeatType: 'reverse',
            }}
          >
            {displayText}
          </motion.span>

          {/* Blue channel offset */}
          <motion.span
            className="pointer-events-none absolute left-0 top-0"
            style={{
              color: 'transparent',
              textShadow: `0 0 2px rgba(0, 100, 255, ${0.4 * noiseIntensity})`,
              mixBlendMode: 'screen',
            }}
            animate={{
              x: [2, -2, 2],
              opacity: [0.5, 0.8, 0.5],
            }}
            transition={{
              duration: 0.15,
              repeat: Infinity,
              repeatType: 'reverse',
            }}
          >
            {displayText}
          </motion.span>
        </>
      )}

      {/* Scanlines */}
      <motion.span
        className="pointer-events-none absolute inset-0 z-10"
        style={{
          background: `repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, ${isHovered ? 0.05 : 0.15}) 2px,
            rgba(0, 0, 0, ${isHovered ? 0.05 : 0.15}) 4px
          )`,
        }}
        animate={{
          backgroundPosition: ['0 0', '0 4px'],
        }}
        transition={{
          duration: 0.5,
          repeat: Infinity,
          ease: 'linear',
        }}
      />

      {/* Occasional glitch flicker */}
      <motion.span
        className="pointer-events-none absolute inset-0"
        style={{
          background: 'rgba(255, 255, 255, 0.03)',
        }}
        animate={{
          opacity: isHovered ? 0 : [0, 1, 0, 0, 1, 0],
        }}
        transition={{
          duration: 0.5,
          repeat: Infinity,
          times: [0, 0.1, 0.12, 0.8, 0.82, 1],
        }}
      />
    </span>
  );
};

export default FuzzyText;