// Mascota: el logo de CHESIMPLE/AI — globo de chat sonriente con punto amarillo.
// Tracks cursor with eyes, blinks, reacts to click with a squish + heart.

const { useState, useEffect, useRef } = React;

function Mascot({ mood = 'idle', onClick }) {
  const wrapRef = useRef(null);
  const [pupil, setPupil] = useState({ x: 0, y: 0 });
  const [blink, setBlink] = useState(false);
  const [squish, setSquish] = useState(false);
  const [hearts, setHearts] = useState([]);
  const [greet, setGreet] = useState(false);
  const greetTimer = useRef(null);

  // Blink
  useEffect(() => {
    let t;
    const loop = () => {
      setBlink(true);
      setTimeout(() => setBlink(false), 140);
      t = setTimeout(loop, 2600 + Math.random() * 2600);
    };
    t = setTimeout(loop, 1500);
    return () => clearTimeout(t);
  }, []);

  // Cursor tracking
  useEffect(() => {
    const onMove = (e) => {
      const el = wrapRef.current;
      if (!el) return;
      const r = el.getBoundingClientRect();
      const cx = r.left + r.width / 2;
      const cy = r.top + r.height / 2;
      const dx = e.clientX - cx;
      const dy = e.clientY - cy;
      const dist = Math.min(1, Math.hypot(dx, dy) / 400);
      const ang = Math.atan2(dy, dx);
      setPupil({ x: Math.cos(ang) * 6 * dist, y: Math.sin(ang) * 6 * dist });
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, []);

  const handleClick = () => {
    setSquish(true);
    setTimeout(() => setSquish(false), 280);
    setGreet(true);
    clearTimeout(greetTimer.current);
    greetTimer.current = setTimeout(() => setGreet(false), 2200);
    const id = Math.random();
    const jitter = (Math.random() - 0.5) * 40;
    setHearts(h => [...h, { id, x: jitter }]);
    setTimeout(() => setHearts(h => h.filter(x => x.id !== id)), 1400);
    onClick && onClick();
  };

  const bodyTransform = squish
    ? 'scale(1.06, 0.92)'
    : 'scale(1)';

  return (
    <div
      ref={wrapRef}
      className="mascot-wrap"
      onClick={handleClick}
      style={{ cursor: 'pointer', userSelect: 'none' }}
    >
      {/* Hearts */}
      {hearts.map(h => (
        <div key={h.id} style={{
          position: 'absolute',
          left: `calc(50% + ${h.x}px)`,
          top: '4%',
          fontSize: 22,
          color: 'var(--accent)',
          animation: 'heartUp 1.3s ease-out forwards',
          pointerEvents: 'none',
          fontFamily: 'var(--mono)',
          zIndex: 3,
        }}>♥</div>
      ))}

      {/* Greeting bubble (appears on click) */}
      <div style={{
        position: 'absolute', left: '2%', top: '2%',
        transform: greet ? 'translateY(0) scale(1)' : 'translateY(8px) scale(.9)',
        opacity: greet ? 1 : 0,
        transition: 'all .35s cubic-bezier(.2,1.4,.3,1)',
        background: 'var(--card)',
        border: '1px solid var(--line)',
        borderRadius: 18,
        padding: '10px 14px',
        fontFamily: 'var(--mono)',
        fontSize: 12,
        color: 'var(--ink)',
        boxShadow: '0 8px 24px -12px rgba(0,0,0,.25)',
        zIndex: 4,
      }}>
        ¡che, hola! 👋
        <div style={{
          position: 'absolute', bottom: -6, left: 24,
          width: 12, height: 12, background: 'var(--card)',
          borderRight: '1px solid var(--line)',
          borderBottom: '1px solid var(--line)',
          transform: 'rotate(45deg)',
        }}/>
      </div>

      <svg viewBox="0 0 400 400" width="100%" height="100%" style={{ overflow: 'visible' }}>
        {/* Ground shadow */}
        <ellipse cx="200" cy="364" rx="110" ry="10"
          fill="currentColor" opacity=".08" />

        <g style={{
          transform: bodyTransform,
          transformOrigin: '200px 205px',
          transition: squish ? 'transform .12s' : 'transform .25s cubic-bezier(.2,1.5,.3,1)',
          animation: 'bob 4.5s ease-in-out infinite',
        }}>
          {/* Speech bubble outline (open at top-right, tail bottom-left) */}
          <path
            d="M 302 146
               A 118 118 0 0 1 145 309
               L 83 345
               L 96 260
               A 118 118 0 0 1 240 94"
            fill="none"
            stroke="var(--ink)" strokeWidth="22"
            strokeLinecap="round" strokeLinejoin="round"
          />

          {/* Yellow dot in the gap */}
          <circle cx="285" cy="104" r="17" fill="var(--accent)">
            <animate attributeName="r" values="17;19;17" dur="1.4s" repeatCount="indefinite"/>
          </circle>

          {/* Eyes (pills that track the cursor + blink) */}
          <g transform={`translate(${pupil.x}, ${pupil.y})`}>
            <rect x="157" y={blink ? 180 : 158} width="20" height={blink ? 6 : 50} rx={blink ? 3 : 10} fill="var(--ink)" style={{ transition: 'all .08s' }}/>
            <rect x="223" y={blink ? 180 : 158} width="20" height={blink ? 6 : 50} rx={blink ? 3 : 10} fill="var(--ink)" style={{ transition: 'all .08s' }}/>
          </g>

          {/* Smile */}
          <path
            d={squish
              ? "M 136 236 Q 200 306 264 236"
              : "M 140 240 Q 200 296 260 240"}
            stroke="var(--ink)" strokeWidth="20" strokeLinecap="round"
            fill="none"
            style={{ transition: 'd .2s' }}
          />
        </g>

        {/* Floating tag (kept clear of the logo) */}
        <g opacity=".9" style={{ animation: 'floatY 7s ease-in-out infinite .8s' }}>
          <rect x="304" y="22" width="78" height="26" rx="13" fill="var(--accent)" />
          <text x="343" y="39" textAnchor="middle" fontFamily="var(--mono)" fontSize="11" fill="#0D0D0D">lindo</text>
        </g>
      </svg>

      <style>{`
        @keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
        @keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
        @keyframes heartUp {
          0% { opacity: 0; transform: translateY(0) scale(.6); }
          20% { opacity: 1; transform: translateY(-8px) scale(1.2); }
          100% { opacity: 0; transform: translateY(-80px) scale(.9); }
        }
      `}</style>
    </div>
  );
}

window.Mascot = Mascot;