import { useCallback, useEffect, useRef, useState } from 'react';
/* @component-map
 * App — Main container, renders the Hello World greeting with animated letters, orbs, confetti, and replay button
 * @end-component-map */


function Confetti({ trigger }) {
  const [particles, setParticles] = useState([]);
  const idRef = useRef(0);
  const colors = ['#FFD93D','#FF6B6B','#6BCB77','#4D96FF','#9B59B6','#FF8C42','#E84393'];

  useEffect(() => {
    if (trigger === 0) return;
    const newParticles = [];
    for (let i = 0; i < 40; i++) {
      newParticles.push({
        id: idRef.current++,
        left: Math.random() * 100 + '%',
        background: colors[Math.floor(Math.random() * colors.length)],
        animationDelay: (Math.random() * 3) + 's',
        animationDuration: (3 + Math.random() * 2) + 's',
        width: (6 + Math.random() * 6) + 'px',
        height: (6 + Math.random() * 6) + 'px',
        borderRadius: Math.random() > 0.5 ? '50%' : '2px',
      });
    }
    setParticles(prev => [...prev, ...newParticles]);
    const timer = setTimeout(() => {
      setParticles(prev => prev.filter(p => !newParticles.find(np => np.id === p.id)));
    }, 5000);
    return () => clearTimeout(timer);
  }, [trigger]);

  return particles.map(p => (
    <div
      key={p.id}
      className="hw-confetti"
      style={{
        left: p.left,
        background: p.background,
        animationDelay: p.animationDelay,
        animationDuration: p.animationDuration,
        width: p.width,
        height: p.height,
        borderRadius: p.borderRadius,
      }}
    />
  ));
}

function App() {
  const text = "Hello, World!";
  const [letterKey, setLetterKey] = useState(0);
  const [confettiTrigger, setConfettiTrigger] = useState(0);

  useEffect(() => {
    const timer = setTimeout(() => setConfettiTrigger(1), 400);
    return () => clearTimeout(timer);
  }, []);

  const replayAnim = useCallback(() => {
    setLetterKey(k => k + 1);
    setConfettiTrigger(t => t + 1);
  }, []);

  return (
    <div className="hw-wrap">
      <div className="hw-orb"></div>
      <div className="hw-orb"></div>
      <div className="hw-orb"></div>
      <div className="hw-orb"></div>
      <div className="hw-orb"></div>
      <Confetti trigger={confettiTrigger} />
      <div className="hw-wave">👋</div>
      <div className="hw-title" key={letterKey}>
        {[...text].map((ch, i) => (
          <span key={i} style={{ animationDelay: `${i * 0.06}s` }}>
            {ch === ' ' ? '\u00A0' : ch}
          </span>
        ))}
      </div>
      <div className="hw-subtitle">Welcome to the party — you made it!</div>
      <button className="hw-btn" onClick={replayAnim}>Play again</button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);