// mascot.jsx — Sprig: a cheerful sprout mascot for SaveHor.
//
// Single round body (bean / pea-pod shape) in palette primary green, with
// two leaves on top (one big behind-the-head, one small angling forward).
// Face is big-eyed and smiley — built to read at 28px (header badge) and
// scale up to 160px (achievement / toast hero) without losing personality.
//
// Moods:
//   happy   — default smile, eyes wide, blush
//   calm    — gentle softer smile, eyes neutral
//   focused — slight smile, eyes narrowed (concentrating)
//   worried — eyebrows up, small frown, leaves droopy
//   sleepy  — eyes closed, leaves drooped, z's
//   wave    — happy + one tiny arm raised
//   cheer   — happy + both arms up + sparkles + leaves wiggle
//
// Exported as `Sprig` and aliased to `Watt`/`WattBadge` for backwards
// compatibility with existing screens.

const __SPRIG_CSS = `
@keyframes sprig-blink   { 0%,92%,100%{transform:scaleY(1)} 96%{transform:scaleY(0.1)} }
@keyframes sprig-breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.02) translateY(-1%)} }
@keyframes sprig-bounce  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7%)} }
@keyframes sprig-wiggle  { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-4deg)} 75%{transform:rotate(4deg)} }
@keyframes sprig-leafL   { 0%,100%{transform:rotate(-14deg)} 50%{transform:rotate(-22deg)} }
@keyframes sprig-leafR   { 0%,100%{transform:rotate(14deg)} 50%{transform:rotate(22deg)} }
@keyframes sprig-spark   { 0%,100%{opacity:0;transform:scale(.5)} 50%{opacity:1;transform:scale(1)} }
@keyframes sprig-zfloat  { 0%{opacity:0;transform:translate(0,0) scale(.7)} 40%{opacity:1} 100%{opacity:0;transform:translate(10px,-14px) scale(1.1)} }
@keyframes sprig-wave    { 0%,100%{transform:rotate(0deg)} 25%{transform:rotate(-20deg)} 75%{transform:rotate(20deg)} }

.sprig-root  { will-change: transform; }
.sprig-body  { transform-origin: center 60%; animation: sprig-breathe 3.4s ease-in-out infinite; }
.sprig-eye   { transform-origin: center; animation: sprig-blink 5s infinite; }
.sprig-leafL { transform-origin: 50% 78%; animation: sprig-leafL 4s ease-in-out infinite; }
.sprig-leafR { transform-origin: 50% 78%; animation: sprig-leafR 4.6s ease-in-out infinite; }
.sprig-spark { animation: sprig-spark 1.3s ease-in-out infinite; transform-origin: center; }
.sprig-z     { animation: sprig-zfloat 2.2s ease-in-out infinite; }
.sprig-arm-wave { transform-origin: 90% 50%; animation: sprig-wave 1.2s ease-in-out infinite; }

.sprig-bounce .sprig-body { animation: sprig-bounce 0.7s ease-out 2, sprig-breathe 3.4s ease-in-out infinite; }
.sprig-wiggle .sprig-body { animation: sprig-wiggle 0.6s ease-in-out 3, sprig-breathe 3.4s ease-in-out infinite; }
`;

if (typeof document !== 'undefined' && !document.getElementById('sprig-css')) {
  const s = document.createElement('style');
  s.id = 'sprig-css';
  s.textContent = __SPRIG_CSS;
  document.head.appendChild(s);
}

// Sprig — the mascot.
// Props:
//   size  - px width/height
//   color - leaf/body green (defaults to palette primary via currentColor)
//   bg    - optional ring/halo color (renders a soft circle behind)
//   mood  - one of: happy | calm | focused | worried | sleepy | wave | cheer
//   anim  - 'bounce' | 'wiggle' — one-shot animation overlay
function Sprig({ size = 80, color = 'currentColor', bg, mood = 'happy', anim, style }) {
  const animClass =
    anim === 'wiggle' ? 'sprig-wiggle' :
    anim === 'bounce' ? 'sprig-bounce' : '';

  // Mood-dependent body shading
  const bodyMain  = color;
  const bodyShade = 'rgba(0,0,0,0.10)';      // bottom-of-body shadow
  const bodyLight = 'rgba(255,255,255,0.22)';// highlight

  // Leaves droop when sleepy/worried, perk up otherwise
  const drooped = mood === 'sleepy' || mood === 'worried';

  return (
    <div className={`sprig-root ${animClass}`}
         style={{ width: size, height: size, position: 'relative', display: 'inline-block', ...style }}>
      <svg viewBox="0 0 100 100" width={size} height={size} style={{ overflow: 'visible' }}>

        {/* Optional halo / background ring */}
        {bg && <circle cx="50" cy="54" r="46" fill={bg} />}

        <g className="sprig-body">

          {/* Back leaf (left) — bigger, tucks behind the head */}
          <g className={drooped ? '' : 'sprig-leafL'}
             style={drooped ? { transform: 'rotate(8deg) translateY(2px)' } : undefined}>
            <path
              d="M 50 28 Q 26 14 22 30 Q 26 42 50 32 Z"
              fill={bodyMain}
            />
            {/* leaf vein */}
            <path
              d="M 48 30 Q 36 26 26 30"
              fill="none" stroke="rgba(0,0,0,0.15)" strokeWidth="1.4" strokeLinecap="round"
            />
          </g>

          {/* Back leaf (right) — smaller */}
          <g className={drooped ? '' : 'sprig-leafR'}
             style={drooped ? { transform: 'rotate(-8deg) translateY(2px)' } : undefined}>
            <path
              d="M 50 30 Q 70 18 76 32 Q 72 42 50 34 Z"
              fill={bodyMain}
              opacity="0.85"
            />
            <path
              d="M 52 32 Q 62 28 72 32"
              fill="none" stroke="rgba(0,0,0,0.15)" strokeWidth="1.4" strokeLinecap="round"
            />
          </g>

          {/* Tiny stem peeking between leaves */}
          <rect x="49" y="30" width="2" height="6" rx="1" fill={bodyMain} />

          {/* MAIN BODY — soft round bean shape */}
          {/* shadow */}
          <ellipse cx="50" cy="78" rx="32" ry="5" fill="rgba(0,0,0,0.10)" />
          {/* body */}
          <path
            d="M 22 56
               Q 22 36 50 36
               Q 78 36 78 56
               Q 78 78 50 78
               Q 22 78 22 56 Z"
            fill={bodyMain}
          />
          {/* body bottom-shade for dimension */}
          <path
            d="M 22 60
               Q 26 76 50 78
               Q 74 76 78 60
               Q 70 72 50 72
               Q 30 72 22 60 Z"
            fill={bodyShade}
          />
          {/* body highlight */}
          <ellipse cx="36" cy="48" rx="10" ry="6" fill={bodyLight} />

          {/* FACE */}
          <SprigFace mood={mood} />

          {/* Blush — on happy / wave / cheer */}
          {(mood === 'happy' || mood === 'wave' || mood === 'cheer') && (
            <>
              <ellipse cx="32" cy="62" rx="4" ry="2.4" fill="#E89A8A" opacity="0.55" />
              <ellipse cx="68" cy="62" rx="4" ry="2.4" fill="#E89A8A" opacity="0.55" />
            </>
          )}

          {/* Sleepy z's */}
          {mood === 'sleepy' && (
            <text className="sprig-z" x="76" y="32" fontFamily="DM Sans, sans-serif" fontSize="13" fontWeight="700" fill={bodyMain}>z</text>
          )}

          {/* Wave hand */}
          {mood === 'wave' && (
            <g className="sprig-arm-wave">
              <circle cx="86" cy="50" r="5.5" fill={bodyMain} />
              <rect x="78" y="48" width="8" height="4" rx="2" fill={bodyMain} />
            </g>
          )}

          {/* Cheer — both arms up + sparkles */}
          {mood === 'cheer' && (
            <>
              {/* arms */}
              <g fill={bodyMain}>
                <circle cx="20" cy="34" r="5" />
                <rect x="20" y="42" width="6" height="8" rx="3" transform="rotate(-30 23 46)" />
                <circle cx="80" cy="34" r="5" />
                <rect x="74" y="42" width="6" height="8" rx="3" transform="rotate(30 77 46)" />
              </g>
              {/* sparkles */}
              <g fill="#C99A3E" className="sprig-spark">
                <path d="M 12 22 l 1.5 3 l 3 1.5 l -3 1.5 l -1.5 3 l -1.5 -3 l -3 -1.5 l 3 -1.5 z" />
                <path d="M 88 22 l 1.5 3 l 3 1.5 l -3 1.5 l -1.5 3 l -1.5 -3 l -3 -1.5 l 3 -1.5 z" />
                <circle cx="50" cy="10" r="2" />
              </g>
            </>
          )}
        </g>
      </svg>
    </div>
  );
}

// Face — eyes + mouth per mood. Eyes positioned at ~y=54, mouth at ~y=66.
function SprigFace({ mood }) {
  const eyeColor = '#1F2A24';

  const eyes = mood === 'sleepy' ? (
    <g stroke={eyeColor} strokeWidth="2.2" strokeLinecap="round" fill="none">
      <path d="M 36 56 q 4 -3 8 0" />
      <path d="M 56 56 q 4 -3 8 0" />
    </g>
  ) : mood === 'focused' ? (
    <g fill={eyeColor}>
      <rect x="36" y="55" width="8" height="2.6" rx="1.3" className="sprig-eye" />
      <rect x="56" y="55" width="8" height="2.6" rx="1.3" className="sprig-eye" />
    </g>
  ) : mood === 'worried' ? (
    <>
      <g fill={eyeColor}>
        <ellipse cx="40" cy="56" rx="2.6" ry="3.4" className="sprig-eye" />
        <ellipse cx="60" cy="56" rx="2.6" ry="3.4" className="sprig-eye" />
      </g>
      {/* raised eyebrows */}
      <g stroke={eyeColor} strokeWidth="1.8" strokeLinecap="round" fill="none">
        <path d="M 35 49 q 5 -3 10 -1" />
        <path d="M 55 48 q 5 -2 10 1" />
      </g>
    </>
  ) : (
    // happy / calm / wave / cheer — big round eyes with highlight
    <g fill={eyeColor}>
      <circle cx="40" cy="56" r="3.2" className="sprig-eye" />
      <circle cx="60" cy="56" r="3.2" className="sprig-eye" />
      <circle cx="41" cy="55" r="1.1" fill="#fff" />
      <circle cx="61" cy="55" r="1.1" fill="#fff" />
    </g>
  );

  const mouth = mood === 'sleepy' ? (
    // tiny open mouth (snoring shape)
    <ellipse cx="50" cy="68" rx="3" ry="2" fill={eyeColor} opacity="0.55" />
  ) : mood === 'focused' ? (
    <circle cx="50" cy="68" r="2.2" fill={eyeColor} />
  ) : mood === 'worried' ? (
    // small frown
    <path d="M 44 70 q 6 -4 12 0" fill="none" stroke={eyeColor} strokeWidth="2.2" strokeLinecap="round" />
  ) : mood === 'calm' ? (
    // gentle smile
    <path d="M 43 67 q 7 4 14 0" fill="none" stroke={eyeColor} strokeWidth="2.2" strokeLinecap="round" />
  ) : (
    // big happy smile — happy / wave / cheer
    <g>
      <path d="M 40 65 q 10 9 20 0 q -4 4 -10 4 q -6 0 -10 -4 z" fill={eyeColor} />
      {/* tongue */}
      <path d="M 46 68 q 4 3 8 0 q -2 2 -4 2 q -2 0 -4 -2 z" fill="#E89A8A" />
    </g>
  );

  return <>{eyes}{mouth}</>;
}

// Small badge version — same character at lower visual cost.
function SprigBadge({ size = 28, color, bg, mood = 'happy' }) {
  return <Sprig size={size} color={color} bg={bg} mood={mood} />;
}

// Back-compat shims — keep old screens working.
const Watt = Sprig;
const WattBadge = SprigBadge;

Object.assign(window, { Sprig, SprigBadge, Watt, WattBadge });