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

const DEFAULT_CHARSET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%&*+=/';

interface Props {
  text: string;
  /** 乱码字符池；中文文本建议传 CJK 字符池 */
  charset?: string;
  /** 解码总时长 ms */
  duration?: number;
  className?: string;
}

export function TextDecode({
  text,
  charset = DEFAULT_CHARSET,
  duration = 900,
  className = '',
}: Props) {
  // SSR 输出终稿：首屏不闪空白，挂载后再打乱解码
  const [display, setDisplay] = useState(text);
  const raf = useRef(0);

  useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const chars = charset.split('');
    const rand = () => chars[Math.floor(Math.random() * chars.length)];
    let start: number | null = null;

    const tick = (now: number) => {
      if (start === null) start = now;
      const t = Math.min(1, (now - start) / duration);
      const locked = Math.floor(t * text.length);
      let out = text.slice(0, locked);
      for (let i = locked; i < text.length; i++) {
        out += text[i] === ' ' ? ' ' : rand();
      }
      setDisplay(out);
      if (t < 1) {
        raf.current = requestAnimationFrame(tick);
      } else {
        setDisplay(text);
      }
    };

    raf.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf.current);
  }, [text, charset, duration]);

  return <span className={className}>{display}</span>;
}