'use client'

import { useEffect, useRef, useState } from 'react'
import { cn } from '@/lib/utils'

export type HyperTextProps = {
  text?: string
  className?: string
  duration?: number
  animateOnMount?: boolean
}

export default function HyperText({
  text = 'Velocity UI',
  className,
  duration = 800,
  animateOnMount = true,
}: HyperTextProps) {
  const [displayText, setDisplayText] = useState(text.split(''))
  const intervalRef = useRef<NodeJS.Timeout | null>(null)
  const alphabets = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+'

  const startAnimation = () => {
    let iteration = 0
    const tickMs = Math.max(20, Math.floor(duration / (text.length * 3)))

    if (intervalRef.current) clearInterval(intervalRef.current)

    intervalRef.current = setInterval(() => {
      setDisplayText(
        text.split('').map((letter, index) => {
          if (letter === ' ') return letter
          if (index < iteration) return text[index]
          return alphabets[Math.floor(Math.random() * alphabets.length)]
        })
      )

      if (iteration >= text.length) {
        if (intervalRef.current) clearInterval(intervalRef.current)
      }
      iteration += 1 / 3
    }, tickMs)
  }

  useEffect(() => {
    if (animateOnMount) startAnimation()
    return () => {
      if (intervalRef.current) clearInterval(intervalRef.current)
    }
  }, [text, animateOnMount])

  return (
    <div className="flex flex-col items-center justify-center min-h-[200px] p-8 bg-neutral-50 dark:bg-neutral-950 rounded-xl">
      <div
        className={cn(
          'flex overflow-hidden py-2 cursor-pointer select-none text-3xl sm:text-4xl font-bold tracking-tight text-neutral-900 dark:text-white',
          className
        )}
        onMouseEnter={startAnimation}
      >
        <span className="sr-only">{text}</span>
        {displayText.map((char, i) => (
          <span key={i} className="font-mono inline-block w-[0.6em] text-center">
            {char}
          </span>
        ))}
      </div>
      <p className="mt-4 text-xs text-neutral-500 dark:text-neutral-400">Hover to replay the scramble effect</p>
    </div>
  )
}