(function () {
  // 柴犬 IP「橘橘」- 不同心情对应不同表情
  // moods: 'idle' | 'happy' | 'working' | 'tired' | 'love' | 'thinking'
  function MascotShiba({ mood = 'idle', size = 120, className = '', showShadow = true }) {
    const eyeFill = '#2A1810';
    const noseFill = '#2A1810';
    const bodyMain = '#F4A865';
    const bodyDark = '#E08840';
    const bodyLight = '#FFCB95';
    const bellyFill = '#FFF2E0';
    const cheekFill = '#FF9999';

    const renderEyes = () => {
      switch (mood) {
        case 'happy':
        case 'love':
          // 笑眯眯的眼睛 ^ ^
          return (
            <>
              <path d="M 75 110 Q 85 100 95 110" stroke={eyeFill} strokeWidth="4" fill="none" strokeLinecap="round"/>
              <path d="M 125 110 Q 135 100 145 110" stroke={eyeFill} strokeWidth="4" fill="none" strokeLinecap="round"/>
              {mood === 'love' && (
                <>
                  <text x="60" y="80" fontSize="18" fill="#FF6B9D">♥</text>
                  <text x="155" y="90" fontSize="14" fill="#FF6B9D">♥</text>
                </>
              )}
            </>
          );
        case 'working':
          // 专注的眼睛 + 汗滴
          return (
            <>
              <ellipse cx="85" cy="108" rx="4" ry="6" fill={eyeFill}/>
              <ellipse cx="135" cy="108" rx="4" ry="6" fill={eyeFill}/>
              <ellipse cx="86" cy="106" rx="1.5" ry="2" fill="white"/>
              <ellipse cx="136" cy="106" rx="1.5" ry="2" fill="white"/>
              <path d="M 158 95 Q 162 105 158 110 Q 154 105 158 95 Z" fill="#7CC8E8"/>
            </>
          );
        case 'tired':
          // 累累的眼睛 -.-
          return (
            <>
              <path d="M 78 110 L 92 110" stroke={eyeFill} strokeWidth="4" strokeLinecap="round"/>
              <path d="M 128 110 L 142 110" stroke={eyeFill} strokeWidth="4" strokeLinecap="round"/>
            </>
          );
        case 'thinking':
          return (
            <>
              <ellipse cx="85" cy="108" rx="4" ry="5" fill={eyeFill}/>
              <ellipse cx="135" cy="108" rx="4" ry="5" fill={eyeFill}/>
              <circle cx="170" cy="70" r="6" fill="white" stroke={eyeFill} strokeWidth="2"/>
              <text x="166" y="75" fontSize="10" fill={eyeFill} fontWeight="bold">?</text>
            </>
          );
        case 'idle':
        default:
          // 默认圆眼
          return (
            <>
              <ellipse cx="85" cy="108" rx="5" ry="7" fill={eyeFill} className="blink-eye"/>
              <ellipse cx="135" cy="108" rx="5" ry="7" fill={eyeFill} className="blink-eye"/>
              <ellipse cx="86" cy="105" rx="1.8" ry="2.5" fill="white"/>
              <ellipse cx="136" cy="105" rx="1.8" ry="2.5" fill="white"/>
            </>
          );
      }
    };

    const renderMouth = () => {
      if (mood === 'happy' || mood === 'love') {
        // 大笑伸舌头
        return (
          <>
            <path d="M 95 135 Q 110 150 125 135" stroke={eyeFill} strokeWidth="3" fill="white" strokeLinejoin="round"/>
            <ellipse cx="110" cy="145" rx="6" ry="5" fill="#FF7E9D"/>
          </>
        );
      }
      if (mood === 'tired') {
        return <path d="M 100 138 Q 110 132 120 138" stroke={eyeFill} strokeWidth="3" fill="none" strokeLinecap="round"/>;
      }
      if (mood === 'working') {
        return <path d="M 100 138 Q 110 144 120 138" stroke={eyeFill} strokeWidth="3" fill="none" strokeLinecap="round"/>;
      }
      // idle/thinking
      return (
        <>
          <path d="M 100 138 Q 110 145 120 138" stroke={eyeFill} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
          <path d="M 105 138 L 110 142 L 115 138" stroke={eyeFill} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
        </>
      );
    };

    return (
      <div className={className} style={{ width: size, height: size }}>
        <svg viewBox="0 0 220 220" className="w-full h-full" style={{ filter: showShadow ? 'drop-shadow(0 8px 12px rgba(93,58,31,0.25))' : 'none' }}>
          {/* 耳朵 - 左 */}
          <path d="M 55 60 L 45 30 L 80 55 Z" fill={bodyDark}/>
          <path d="M 60 58 L 55 40 L 75 55 Z" fill="#3D2511"/>
          {/* 耳朵 - 右 */}
          <path d="M 165 60 L 175 30 L 140 55 Z" fill={bodyDark}/>
          <path d="M 160 58 L 165 40 L 145 55 Z" fill="#3D2511"/>

          {/* 头部主体 */}
          <ellipse cx="110" cy="110" rx="65" ry="62" fill={bodyMain}/>

          {/* 面部白色区域 */}
          <ellipse cx="110" cy="130" rx="40" ry="32" fill={bellyFill}/>
          <path d="M 80 95 Q 90 80 110 82 Q 130 80 140 95 L 140 115 Q 125 122 110 122 Q 95 122 80 115 Z" fill={bellyFill}/>

          {/* 头顶高光 */}
          <ellipse cx="95" cy="80" rx="20" ry="12" fill={bodyLight} opacity="0.5"/>

          {/* 腮红 */}
          <ellipse cx="65" cy="130" rx="10" ry="6" fill={cheekFill} opacity="0.65"/>
          <ellipse cx="155" cy="130" rx="10" ry="6" fill={cheekFill} opacity="0.65"/>

          {/* 眼睛 */}
          {renderEyes()}

          {/* 鼻子 */}
          <ellipse cx="110" cy="125" rx="6" ry="5" fill={noseFill}/>
          <ellipse cx="108" cy="123" rx="1.5" ry="1" fill="white" opacity="0.8"/>

          {/* 嘴 */}
          {renderMouth()}

          {/* 项圈 + 骨头牌 */}
          <ellipse cx="110" cy="180" rx="50" ry="8" fill="#ED6E1B"/>
          <ellipse cx="110" cy="180" rx="50" ry="6" fill="#FF8C42"/>
          <circle cx="110" cy="188" r="9" fill="#FFD700" stroke="#B8860B" strokeWidth="1.5"/>
          <path d="M 105 188 L 115 188 M 107 185 L 113 185 M 107 191 L 113 191" stroke="#8B5A00" strokeWidth="1" strokeLinecap="round"/>
        </svg>
      </div>
    );
  }

  // 小爪印组件
  function PawIcon({ size = 16, color = '#FF8C42', className = '' }) {
    return (
      <svg viewBox="0 0 24 24" width={size} height={size} fill={color} className={className}>
        <circle cx="12" cy="15" r="4"/>
        <ellipse cx="6" cy="9" rx="2" ry="2.8"/>
        <ellipse cx="10" cy="6" rx="2" ry="2.8"/>
        <ellipse cx="14" cy="6" rx="2" ry="2.8"/>
        <ellipse cx="18" cy="9" rx="2" ry="2.8"/>
      </svg>
    );
  }

  // 简易宠物头像（不同物种 IP）
  function PetAvatar({ type = 'dog', size = 56, name = '' }) {
    const config = {
      dog: { bg: '#F4A865', ear: '#E08840', face: '#FFF2E0', eye: '#2A1810' },
      cat: { bg: '#C9C2BC', ear: '#A89F97', face: '#FFFFFF', eye: '#2A1810' },
      hamster: { bg: '#E8B88C', ear: '#D49860', face: '#FFF8EC', eye: '#2A1810' },
      rabbit: { bg: '#F8F0E5', ear: '#FFB5BA', face: '#FFFFFF', eye: '#2A1810' },
      bird: { bg: '#7DC9F4', ear: '#FFD700', face: '#FFFFFF', eye: '#2A1810' },
    };
    const c = config[type] || config.dog;

    return (
      <div className="relative inline-block" style={{ width: size, height: size }}>
        <svg viewBox="0 0 80 80" className="w-full h-full" style={{ filter: 'drop-shadow(0 4px 6px rgba(93,58,31,0.2))' }}>
          {type === 'dog' && (
            <>
              <ellipse cx="20" cy="25" rx="8" ry="11" fill={c.ear} transform="rotate(-20 20 25)"/>
              <ellipse cx="60" cy="25" rx="8" ry="11" fill={c.ear} transform="rotate(20 60 25)"/>
            </>
          )}
          {type === 'cat' && (
            <>
              <path d="M 18 28 L 14 12 L 30 22 Z" fill={c.bg}/>
              <path d="M 62 28 L 66 12 L 50 22 Z" fill={c.bg}/>
              <path d="M 20 26 L 18 16 L 26 22 Z" fill="#FFB5BA"/>
              <path d="M 60 26 L 62 16 L 54 22 Z" fill="#FFB5BA"/>
            </>
          )}
          {type === 'rabbit' && (
            <>
              <ellipse cx="30" cy="15" rx="5" ry="14" fill={c.bg}/>
              <ellipse cx="50" cy="15" rx="5" ry="14" fill={c.bg}/>
              <ellipse cx="30" cy="15" rx="2" ry="10" fill={c.ear}/>
              <ellipse cx="50" cy="15" rx="2" ry="10" fill={c.ear}/>
            </>
          )}
          {type === 'hamster' && (
            <>
              <circle cx="22" cy="22" r="6" fill={c.ear}/>
              <circle cx="58" cy="22" r="6" fill={c.ear}/>
              <circle cx="22" cy="22" r="3" fill="#FFB5BA"/>
              <circle cx="58" cy="22" r="3" fill="#FFB5BA"/>
            </>
          )}
          {type === 'bird' && (
            <>
              <path d="M 38 18 L 45 25 L 38 28 Z" fill="#FFA500"/>
              <ellipse cx="55" cy="18" rx="3" ry="2" fill={c.ear}/>
            </>
          )}

          {/* 脸 */}
          <ellipse cx="40" cy="45" rx="26" ry="24" fill={c.bg}/>
          {/* 面部白色区域 */}
          {type !== 'bird' && <ellipse cx="40" cy="52" rx="16" ry="14" fill={c.face}/>}
          {/* 眼睛 */}
          <circle cx="30" cy="44" r="2.5" fill={c.eye}/>
          <circle cx="50" cy="44" r="2.5" fill={c.eye}/>
          <circle cx="30.5" cy="43" r="0.8" fill="white"/>
          <circle cx="50.5" cy="43" r="0.8" fill="white"/>
          {/* 鼻子 */}
          {type === 'bird' ? (
            <path d="M 36 52 L 44 52 L 40 56 Z" fill="#FFA500"/>
          ) : (
            <ellipse cx="40" cy="52" rx="2.5" ry="2" fill={c.eye}/>
          )}
          {/* 嘴 */}
          <path d="M 35 56 Q 40 60 45 56" stroke={c.eye} strokeWidth="1.5" fill="none" strokeLinecap="round"/>
          {/* 腮红 */}
          <circle cx="22" cy="52" r="3" fill="#FFB5BA" opacity="0.6"/>
          <circle cx="58" cy="52" r="3" fill="#FFB5BA" opacity="0.6"/>
        </svg>
      </div>
    );
  }

  window.__SHAPE__.MascotShiba = MascotShiba;
  window.__SHAPE__.PawIcon = PawIcon;
  window.__SHAPE__.PetAvatar = PetAvatar;
})();