/* global React */
/*
 * LunaMascot — SVG mascot
 * props:
 *   state: 'idle' | 'happy' | 'sleep' | 'think' | 'angry' | 'focus'
 *   look:  'center' | 'left' | 'right'
 *   size:  number (px width)
 *   talk:  bool — adds a subtle scale pulse
 */

const { useEffect, useState, useRef } = React;

function LunaMascot({ state = 'idle', look = 'center', size = 280, talk = false, idleAnim = true }) {
  // built-in idle look cycle (frontal → left → right) so the mascot feels alive
  const [autoLook, setAutoLook] = useState('center');
  useEffect(() => {
    if (!idleAnim) return;
    const sequence = ['center', 'center', 'left', 'center', 'right', 'center'];
    let i = 0;
    const t = setInterval(() => {
      setAutoLook(sequence[i % sequence.length]);
      i += 1;
    }, 1600);
    return () => clearInterval(t);
  }, [idleAnim]);

  const lookDir = look === 'center' && idleAnim ? autoLook : look;
  const lookX = lookDir === 'left' ? -4 : lookDir === 'right' ? 4 : 0;
  const lookY = state === 'think' ? -3 : 0;

  // pupil scaling for blink/sleep
  const eyeOpen = state !== 'sleep';

  // mouth path varies with state
  let mouth = null;
  if (state === 'happy') {
    mouth = <path d="M105 175 Q 120 188 135 175" stroke="#0b1428" strokeWidth="3.5" fill="none" strokeLinecap="round"/>;
  } else if (state === 'angry') {
    mouth = <path d="M105 180 Q 120 170 135 180" stroke="#0b1428" strokeWidth="3.5" fill="none" strokeLinecap="round"/>;
  } else if (state === 'think') {
    mouth = <path d="M108 178 L 132 178" stroke="#0b1428" strokeWidth="3" fill="none" strokeLinecap="round"/>;
  } else if (state === 'sleep') {
    mouth = <path d="M110 178 L 130 178" stroke="#0b1428" strokeWidth="3" fill="none" strokeLinecap="round"/>;
  }

  // eyebrows for emotional states
  let brows = null;
  if (state === 'angry') {
    brows = (
      <g>
        <path d="M70 125 L 100 132" stroke="#0b1428" strokeWidth="5" strokeLinecap="round"/>
        <path d="M170 125 L 140 132" stroke="#0b1428" strokeWidth="5" strokeLinecap="round"/>
      </g>
    );
  } else if (state === 'think') {
    brows = (
      <g>
        <path d="M70 132 L 100 128" stroke="#0b1428" strokeWidth="4" strokeLinecap="round"/>
        <path d="M170 128 L 140 132" stroke="#0b1428" strokeWidth="4" strokeLinecap="round"/>
      </g>
    );
  }

  // accessory above (zZ, ?, !)
  let accessory = null;
  if (state === 'sleep') {
    accessory = (
      <g fill="#4A90CC" fontFamily="'Space Grotesk', sans-serif" fontWeight="700" opacity="0.85">
        <text x="195" y="50" fontSize="22">z</text>
        <text x="210" y="32" fontSize="28">Z</text>
      </g>
    );
  } else if (state === 'think') {
    accessory = (
      <g fill="#4A90CC" fontFamily="'Space Grotesk', sans-serif" fontWeight="700">
        <text x="48" y="60" fontSize="24" opacity="0.5">?</text>
        <text x="60" y="42" fontSize="30">?</text>
        <text x="78" y="28" fontSize="22" opacity="0.7">?</text>
      </g>
    );
  } else if (state === 'angry') {
    accessory = (
      <g fill="#E74C3C" fontFamily="'Space Grotesk', sans-serif" fontWeight="800">
        <text x="80" y="42" fontSize="26">!</text>
        <text x="100" y="32" fontSize="30">!</text>
        <text x="124" y="42" fontSize="26">!</text>
      </g>
    );
  } else if (state === 'happy') {
    accessory = (
      <g fill="#5fd29a" fontFamily="'Space Grotesk', sans-serif" fontWeight="700">
        <text x="145" y="40" fontSize="22">✓</text>
      </g>
    );
  }

  const pulseClass = talk ? 'luna-talk' : '';

  return (
    <svg viewBox="0 0 240 260" width={size} className={pulseClass} style={{ overflow: 'visible' }}>
      <defs>
        <linearGradient id="luna-body" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#5A7AA0"/>
          <stop offset="0.5" stopColor="#3D5F88"/>
          <stop offset="1" stopColor="#1E3A5F"/>
        </linearGradient>
        <linearGradient id="luna-shine" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#9BB6D6" stopOpacity="0.9"/>
          <stop offset="1" stopColor="#9BB6D6" stopOpacity="0"/>
        </linearGradient>
        <filter id="luna-glow" x="-30%" y="-30%" width="160%" height="160%">
          <feGaussianBlur stdDeviation="3" result="blur"/>
          <feMerge>
            <feMergeNode in="blur"/>
            <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>
      </defs>

      {/* ears (back) */}
      <g>
        <path d="M48 60 L48 28 Q48 18 58 18 L88 18 Q98 18 98 28 L98 70 Z" fill="url(#luna-body)" stroke="#0b1428" strokeWidth="4" strokeLinejoin="round"/>
        <path d="M142 70 L142 28 Q142 18 152 18 L182 18 Q192 18 192 28 L192 60 Z" fill="url(#luna-body)" stroke="#0b1428" strokeWidth="4" strokeLinejoin="round"/>
      </g>

      {/* main head body */}
      <path
        d="M30 80
           Q30 60 50 60
           L190 60
           Q210 60 210 80
           L210 200
           Q210 222 188 222
           L52 222
           Q30 222 30 200 Z"
        fill="url(#luna-body)"
        stroke="#0b1428"
        strokeWidth="5"
        strokeLinejoin="round"
      />

      {/* shine highlight */}
      <path
        d="M38 90 Q38 72 56 72 L120 72 L120 110 Q70 112 38 130 Z"
        fill="url(#luna-shine)"
        opacity="0.5"
      />

      {/* eyes */}
      <g transform={`translate(${lookX}, ${lookY})`}>
        {/* left eye */}
        <rect x="55" y="115" rx="10" ry="10" width="58" height="58" fill="#FFFFFF" stroke="#0b1428" strokeWidth="4"/>
        {eyeOpen ? (
          <rect x={70} y={130} rx="4" ry="4" width="24" height="24" fill="#0b1428"/>
        ) : (
          <path d="M62 144 L 106 144" stroke="#0b1428" strokeWidth="6" strokeLinecap="round"/>
        )}
        {eyeOpen && <rect x={73} y={133} width="6" height="6" fill="#fff" opacity="0.7"/>}

        {/* right eye */}
        <rect x="127" y="115" rx="10" ry="10" width="58" height="58" fill="#FFFFFF" stroke="#0b1428" strokeWidth="4"/>
        {eyeOpen ? (
          <rect x={146} y={130} rx="4" ry="4" width="24" height="24" fill="#0b1428"/>
        ) : (
          <path d="M134 144 L 178 144" stroke="#0b1428" strokeWidth="6" strokeLinecap="round"/>
        )}
        {eyeOpen && <rect x={149} y={133} width="6" height="6" fill="#fff" opacity="0.7"/>}
      </g>

      {brows}
      {mouth}

      {/* bottom shading */}
      <path
        d="M30 200 Q30 222 52 222 L188 222 Q210 222 210 200 L210 215 Q210 222 188 222 L52 222 Q30 222 30 215 Z"
        fill="#0b1428"
        opacity="0.25"
      />

      {accessory}
    </svg>
  );
}

window.LunaMascot = LunaMascot;
