// Milo — friendlier, kawaii suricate. Softer proportions, bigger eyes.
// Less realistic patches, more rounded.

const MILO_COLORS = {
  bodyLight: '#F2C896',
  bodyBase: '#E5A870',
  bodyShadow: '#C88850',
  belly: '#FAE6CB',
  dark: '#4A2E1A',
  eyeBlack: '#2A1A10',
  nose: '#3A1F10',
  patch: '#6B4423',
  cheek: '#F4A29A',
  tongue: '#E86B5C',
};

function MiloHead({ size = 120, emotion = 'happy', accessory = null, tilt = 0 }) {
  const C = MILO_COLORS;

  // Big kawaii eyes with highlights
  const bigEye = (cx) => (
    <g key={cx}>
      <ellipse cx={cx} cy="-2" rx="6" ry="7" fill={C.eyeBlack}/>
      <ellipse cx={cx - 1.5} cy="-5" rx="2" ry="2.5" fill="#fff"/>
      <circle cx={cx + 2} cy="1" r="1" fill="#fff" opacity="0.7"/>
    </g>
  );

  const eyes = {
    happy: <>{bigEye(-10)}{bigEye(10)}</>,
    wink: (
      <>
        <path d="M-16 -3 Q-10 -7 -4 -3" stroke={C.eyeBlack} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
        {bigEye(10)}
      </>
    ),
    focused: (
      <>
        <ellipse cx="-10" cy="-2" rx="4" ry="6" fill={C.eyeBlack}/>
        <ellipse cx="10" cy="-2" rx="4" ry="6" fill={C.eyeBlack}/>
        <circle cx="-9" cy="-4" r="1.5" fill="#fff"/>
        <circle cx="11" cy="-4" r="1.5" fill="#fff"/>
      </>
    ),
    sad: (
      <>
        {bigEye(-10)}{bigEye(10)}
        <path d="M-16 -11 Q-12 -12 -6 -9" stroke={C.dark} strokeWidth="1.6" strokeLinecap="round" fill="none"/>
        <path d="M16 -11 Q12 -12 6 -9" stroke={C.dark} strokeWidth="1.6" strokeLinecap="round" fill="none"/>
      </>
    ),
    excited: (
      <>
        <path d="M-14 -4 Q-10 -10 -6 -4" stroke={C.eyeBlack} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
        <path d="M6 -4 Q10 -10 14 -4" stroke={C.eyeBlack} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
      </>
    ),
    love: (
      <>
        <path d="M-14 -4 Q-14 -9 -10 -9 Q-6 -9 -6 -4 Q-6 -1 -10 3 Q-14 -1 -14 -4 Z" fill="#FF5E7A"/>
        <path d="M6 -4 Q6 -9 10 -9 Q14 -9 14 -4 Q14 -1 10 3 Q6 -1 6 -4 Z" fill="#FF5E7A"/>
      </>
    ),
    sleep: (
      <>
        <path d="M-15 -3 Q-10 -1 -5 -3" stroke={C.eyeBlack} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
        <path d="M5 -3 Q10 -1 15 -3" stroke={C.eyeBlack} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
      </>
    ),
  };

  const mouth = {
    happy: <path d="M-3 8 Q0 11 3 8" stroke={C.dark} strokeWidth="2" fill="none" strokeLinecap="round"/>,
    wink: <path d="M-4 8 Q0 12 4 8" stroke={C.dark} strokeWidth="2" fill="none" strokeLinecap="round"/>,
    focused: <ellipse cx="0" cy="9" rx="2" ry="1.2" fill={C.dark}/>,
    sad: <path d="M-3 11 Q0 8 3 11" stroke={C.dark} strokeWidth="2" fill="none" strokeLinecap="round"/>,
    excited: <g>
      <path d="M-5 7 Q0 13 5 7 Q3 11 -3 11 Q-5 10 -5 7 Z" fill={C.tongue} stroke={C.dark} strokeWidth="1.5" strokeLinejoin="round"/>
    </g>,
    love: <path d="M-3 8 Q0 11 3 8" stroke={C.dark} strokeWidth="2" fill="none" strokeLinecap="round"/>,
    sleep: <path d="M-2 9 Q0 10 2 9" stroke={C.dark} strokeWidth="1.5" fill="none" strokeLinecap="round"/>,
  };

  return (
    <svg width={size} height={size} viewBox="-50 -50 100 100" style={{ transform: `rotate(${tilt}deg)`, overflow: 'visible' }}>
      {/* tiny rounded ears, higher on head */}
      <circle cx="-22" cy="-28" r="6" fill={C.bodyBase}/>
      <circle cx="22" cy="-28" r="6" fill={C.bodyBase}/>
      <circle cx="-22" cy="-28" r="3" fill={C.patch}/>
      <circle cx="22" cy="-28" r="3" fill={C.patch}/>

      {/* big round head */}
      <circle cx="0" cy="0" r="34" fill={C.bodyBase}/>

      {/* forehead highlight */}
      <ellipse cx="-8" cy="-16" rx="12" ry="7" fill={C.bodyLight} opacity="0.55"/>

      {/* lower face lighter (snout area) — small and cute */}
      <ellipse cx="0" cy="10" rx="17" ry="13" fill={C.bodyLight}/>

      {/* soft eye patches — rounder, smaller, friendlier */}
      <ellipse cx="-10" cy="-2" rx="10" ry="9" fill={C.patch} opacity="0.9"/>
      <ellipse cx="10" cy="-2" rx="10" ry="9" fill={C.patch} opacity="0.9"/>

      {/* eyes */}
      {eyes[emotion]}

      {/* small rounded nose */}
      <ellipse cx="0" cy="5" rx="3" ry="2.2" fill={C.nose}/>
      {/* tiny line down from nose */}
      <line x1="0" y1="7" x2="0" y2="8.5" stroke={C.dark} strokeWidth="1.2" strokeLinecap="round"/>

      {/* mouth */}
      {mouth[emotion]}

      {/* cheeks — always soft blush */}
      {emotion !== 'sleep' && emotion !== 'sad' && (
        <>
          <circle cx="-20" cy="8" r="4" fill={C.cheek} opacity="0.55"/>
          <circle cx="20" cy="8" r="4" fill={C.cheek} opacity="0.55"/>
        </>
      )}

      {emotion === 'sleep' && (
        <g fill={C.dark} fontFamily="serif" fontStyle="italic">
          <text x="18" y="-20" fontSize="13">z</text>
          <text x="26" y="-26" fontSize="9">z</text>
        </g>
      )}

      {/* accessories */}
      {accessory === 'grad' && (
        <g transform="translate(0,-30)">
          <polygon points="-22,0 22,0 0,-12" fill={C.dark}/>
          <rect x="-10" y="0" width="20" height="4" rx="1" fill={C.dark}/>
          <line x1="0" y1="-6" x2="14" y2="-3" stroke="#F5C97B" strokeWidth="1.5"/>
          <circle cx="14" cy="-3" r="2.5" fill="#F5C97B"/>
        </g>
      )}
      {accessory === 'glasses' && (
        <g fill="none" stroke={C.dark} strokeWidth="1.8">
          <circle cx="-10" cy="-2" r="9"/>
          <circle cx="10" cy="-2" r="9"/>
          <line x1="-1" y1="-2" x2="1" y2="-2"/>
        </g>
      )}
      {accessory === 'tie' && (
        <g transform="translate(0,30)">
          <polygon points="-4,-2 4,-2 2,3 -2,3" fill="#E86B5C"/>
          <polygon points="-3,3 3,3 0,11" fill="#E86B5C"/>
        </g>
      )}
      {accessory === 'lightning' && (
        <g transform="translate(-26,-34) rotate(-8)">
          <polygon points="0,0 8,0 4,8 12,8 2,22 6,12 -2,12" fill="#FFC93A" stroke="#0F1411" strokeWidth="1.2" strokeLinejoin="round"/>
        </g>
      )}
    </svg>
  );
}

// Full body standing Milo — chubby, cute
function MiloFull({ size = 200, emotion = 'happy', pose = 'stand', accessory = null }) {
  const C = MILO_COLORS;
  return (
    <svg width={size} height={size * 1.25} viewBox="-60 -80 120 150" style={{ overflow: 'visible' }}>
      {/* shadow */}
      <ellipse cx="0" cy="66" rx="32" ry="4" fill="#000" opacity="0.1"/>

      {/* small tail */}
      <path d="M18 35 Q36 30 32 8 Q30 -2 24 -2" fill={C.bodyBase}/>

      {/* chubby round body */}
      <ellipse cx="0" cy="35" rx="28" ry="30" fill={C.bodyBase}/>
      <ellipse cx="0" cy="38" rx="20" ry="22" fill={C.belly}/>

      {/* tiny feet */}
      <ellipse cx="-9" cy="62" rx="8" ry="4" fill={C.bodyShadow}/>
      <ellipse cx="9" cy="62" rx="8" ry="4" fill={C.bodyShadow}/>

      {/* arms */}
      {pose === 'stand' && (
        <>
          <ellipse cx="-22" cy="35" rx="6" ry="12" fill={C.bodyBase} transform="rotate(-12 -22 35)"/>
          <ellipse cx="22" cy="35" rx="6" ry="12" fill={C.bodyBase} transform="rotate(12 22 35)"/>
        </>
      )}
      {pose === 'wave' && (
        <>
          <ellipse cx="-22" cy="35" rx="6" ry="12" fill={C.bodyBase} transform="rotate(-12 -22 35)"/>
          <g transform="rotate(45 22 25)">
            <ellipse cx="22" cy="18" rx="6" ry="14" fill={C.bodyBase}/>
            <circle cx="22" cy="2" r="7" fill={C.bodyLight}/>
          </g>
        </>
      )}
      {pose === 'point' && (
        <>
          <ellipse cx="-22" cy="35" rx="6" ry="12" fill={C.bodyBase} transform="rotate(-12 -22 35)"/>
          <g transform="rotate(30 16 25)">
            <ellipse cx="24" cy="24" rx="5" ry="15" fill={C.bodyBase}/>
            <circle cx="24" cy="8" r="6" fill={C.bodyLight}/>
          </g>
        </>
      )}
      {pose === 'celebrate' && (
        <>
          <g transform="rotate(-40 -24 20)">
            <ellipse cx="-24" cy="15" rx="5" ry="14" fill={C.bodyBase}/>
            <circle cx="-24" cy="0" r="7" fill={C.bodyLight}/>
          </g>
          <g transform="rotate(40 24 20)">
            <ellipse cx="24" cy="15" rx="5" ry="14" fill={C.bodyBase}/>
            <circle cx="24" cy="0" r="7" fill={C.bodyLight}/>
          </g>
        </>
      )}

      {/* head on top — bigger than body! */}
      <g transform="translate(0,-18)">
        <MiloHead size={76} emotion={emotion} accessory={accessory}/>
      </g>
    </svg>
  );
}

function MiloIcon({ size = 32, emotion = 'happy' }) {
  return (
    <div style={{ width: size, height: size, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <MiloHead size={size} emotion={emotion}/>
    </div>
  );
}

Object.assign(window, { MiloHead, MiloFull, MiloIcon, MILO_COLORS });