import { useState, useEffect, useRef, useCallback } from 'react'
import { useReducedMotion } from './useReducedMotion'

interface UseTypingEffectOptions {
  text: string
  speed?: number
  delay?: number
  onComplete?: () => void
}

export function useTypingEffect({ text, speed = 50, delay = 0, onComplete }: UseTypingEffectOptions) {
  const [displayed, setDisplayed] = useState('')
  const [started, setStarted] = useState(false)
  const [done, setDone] = useState(false)
  const reducedMotion = useReducedMotion()
  const indexRef = useRef(0)
  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)

  const start = useCallback(() => {
    if (started) return
    setStarted(true)
  }, [started])

  useEffect(() => {
    if (!started) return

    if (reducedMotion) {
      setDisplayed(text)
      setDone(true)
      onComplete?.()
      return
    }

    const type = () => {
      if (indexRef.current < text.length) {
        setDisplayed(text.slice(0, indexRef.current + 1))
        indexRef.current++
        timeoutRef.current = setTimeout(type, speed)
      } else {
        setDone(true)
        onComplete?.()
      }
    }

    timeoutRef.current = setTimeout(type, delay)

    return () => {
      if (timeoutRef.current) clearTimeout(timeoutRef.current)
    }
  }, [started, text, speed, delay, reducedMotion, onComplete])

  return { displayed, done, start }
}