/* Decretando Disney — Mickey 3D animado (animación real `wave` del GLB).
   Exporta window.Mickey3D */
(function(){
  const { useState, useRef, useEffect } = React;

  const FRASES = ["¡Oh boy!", "¡Hot dog!", "¡Nos vamos de viaje! ✈️", "¡Decretalo! ✨", "¡Te espero en Orlando!", "¡Ja-já!"];
  const COLORES = ["#ffd76a", "#ff9bd0", "#a880ff", "#7fd4ff", "#ffffff"];

  function Mickey3D(){
    const mvRef = useRef(null);
    const downRef = useRef(null);
    const timerRef = useRef(null);
    const [sparks, setSparks] = useState([]);
    const [frase, setFrase] = useState(null);
    const [burst, setBurst] = useState(0);

    /* reproducir el saludo real del modelo (en loop continuo) */
    const playWave = ()=>{
      const mv = mvRef.current; if(!mv) return;
      try{
        mv.animationName = 'wave';
        mv.play();
      }catch(err){}
    };

    useEffect(()=>{
      /* saluda siempre: arranca al cargar y queda en loop */
      const mv = mvRef.current;
      const hello = ()=>playWave();
      if(mv){ mv.addEventListener('load', hello); }
      return ()=>{
        clearTimeout(timerRef.current);
        if(mv) mv.removeEventListener('load', hello);
      };
    },[]);

    const saluda = ()=>{
      const mv = mvRef.current; if(!mv) return;
      playWave();
      /* rebote */
      mv.classList.remove('jump'); void mv.offsetWidth; mv.classList.add('jump');
      /* chispas mágicas */
      setSparks(Array.from({length:16}, (_,i)=>{
        const a = (i / 16) * Math.PI * 2 + Math.random() * .5;
        const d = 90 + Math.random() * 110;
        return {
          id: burst + '-' + i,
          dx: Math.cos(a) * d, dy: Math.sin(a) * d - 30,
          s: 6 + Math.random() * 9,
          c: COLORES[(Math.random() * COLORES.length) | 0],
          dl: Math.random() * .15
        };
      }));
      /* frase */
      setFrase(FRASES[(Math.random() * FRASES.length) | 0]);
      setBurst(b => b + 1);
      clearTimeout(timerRef.current);
      timerRef.current = setTimeout(()=>setFrase(null), 1900);
    };

    /* distinguir click de arrastre (girarlo no debe hacerlo saludar) */
    const onDown = (e)=>{ downRef.current = { x: e.clientX, y: e.clientY }; };
    const onUp = (e)=>{
      const d = downRef.current; if(!d) return;
      if(Math.hypot(e.clientX - d.x, e.clientY - d.y) < 8) saluda();
      downRef.current = null;
    };

    return (
      <div className="dd-mickey3d">
        <h2>Saludá a Mickey ✨</h2>
        <p className="sub">Hacé un click sobre él para que te salude.</p>
        <div className="dd-mickeywrap">
          <div className="dd-mickeyglow"></div>
          {frase && <div className="dd-mickeybubble" key={burst}>{frase}</div>}
          {sparks.map(s=>(
            <span key={s.id} className="dd-spark" style={{
              width: s.s, height: s.s, background: s.c,
              boxShadow: '0 0 ' + (s.s * 1.6) + 'px ' + s.c,
              animationDelay: s.dl + 's',
              '--dx': s.dx + 'px', '--dy': s.dy + 'px'
            }}></span>
          ))}
          <div className="dd-mickeybob">
            <model-viewer ref={mvRef} src="assets/mickey.glb" alt="Mickey Mouse saludando"
              animation-name="wave" autoplay camera-controls disable-zoom
              interaction-prompt="none" camera-orbit="0deg 85deg 4m"
              shadow-intensity="1.2" shadow-softness="0.9" exposure="1.1"
              onPointerDown={onDown} onPointerUp={onUp}></model-viewer>
          </div>
        </div>
      </div>
    );
  }

  window.Mickey3D = Mickey3D;
})();