// Pandička — SVG placeholder mascot. A friendly panda with customizable pose.
// Pose: 'wave' | 'cheer' | 'peek' | 'sit' | 'read' | 'sleep'
// Expression: 'happy' | 'excited' | 'thinking' | 'sleepy' | 'love'

function Pandicka({ size = 160, pose = 'wave', expression = 'happy', accent = '#F4B5C1', style = {}, accessories = [] }) {
  // Panda palette — warm, not pure black/white, so it fits pastel illustration vibe
  const fur = '#FFFDF8';      // cream white
  const furShadow = '#F3EBDD';
  const dark = '#2B2330';     // soft near-black
  const darkHi = '#3F3446';
  const cheek = accent;
  const mouth = '#5B4A52';
  const tongue = '#E08AA0';

  // Expression eyes
  const Eyes = () => {
    if (expression === 'sleepy') {
      return (
        <>
          <path d="M 58 88 Q 66 92 74 88" stroke={dark} strokeWidth="3" fill="none" strokeLinecap="round"/>
          <path d="M 106 88 Q 114 92 122 88" stroke={dark} strokeWidth="3" fill="none" strokeLinecap="round"/>
        </>
      );
    }
    if (expression === 'excited') {
      return (
        <>
          <ellipse cx="66" cy="88" rx="6" ry="8" fill={dark} />
          <ellipse cx="114" cy="88" rx="6" ry="8" fill={dark} />
          <circle cx="68" cy="85" r="2.2" fill="#fff"/>
          <circle cx="116" cy="85" r="2.2" fill="#fff"/>
          {/* sparkles */}
          <path d="M 40 62 L 42 58 L 44 62 L 48 64 L 44 66 L 42 70 L 40 66 L 36 64 Z" fill="#FFD66B"/>
          <path d="M 136 66 L 138 62 L 140 66 L 144 68 L 140 70 L 138 74 L 136 70 L 132 68 Z" fill="#FFD66B"/>
        </>
      );
    }
    if (expression === 'thinking') {
      return (
        <>
          <ellipse cx="66" cy="90" rx="4.5" ry="5.5" fill={dark} />
          <ellipse cx="114" cy="88" rx="4.5" ry="5.5" fill={dark} />
          <circle cx="67.5" cy="87.5" r="1.6" fill="#fff"/>
          <circle cx="115.5" cy="85.5" r="1.6" fill="#fff"/>
        </>
      );
    }
    if (expression === 'love') {
      const heart = (cx) => (
        <path d={`M ${cx} 92 C ${cx-6} 82, ${cx-12} 86, ${cx-6} 94 L ${cx} 98 L ${cx+6} 94 C ${cx+12} 86, ${cx+6} 82, ${cx} 92 Z`} fill="#EF6F8A"/>
      );
      return (<>{heart(66)}{heart(114)}</>);
    }
    // happy (default) — big bright eyes
    return (
      <>
        <ellipse cx="66" cy="88" rx="5.5" ry="7" fill={dark} />
        <ellipse cx="114" cy="88" rx="5.5" ry="7" fill={dark} />
        <circle cx="68" cy="85" r="2" fill="#fff"/>
        <circle cx="116" cy="85" r="2" fill="#fff"/>
      </>
    );
  };

  const Mouth = () => {
    if (expression === 'excited') {
      return (
        <g>
          <path d="M 78 108 Q 90 124 102 108 Z" fill={mouth}/>
          <path d="M 82 110 Q 90 120 98 110 Z" fill={tongue}/>
        </g>
      );
    }
    if (expression === 'sleepy') {
      return <path d="M 86 110 Q 90 114 94 110" stroke={mouth} strokeWidth="2.5" fill="none" strokeLinecap="round"/>;
    }
    if (expression === 'thinking') {
      return <path d="M 82 112 Q 90 108 98 112" stroke={mouth} strokeWidth="2.5" fill="none" strokeLinecap="round"/>;
    }
    // happy smile
    return (
      <path d="M 80 108 Q 90 118 100 108" stroke={mouth} strokeWidth="3" fill="none" strokeLinecap="round"/>
    );
  };

  // Base face + ears + body is shared; pose decorates
  return (
    <svg viewBox="0 0 180 180" width={size} height={size} style={style} aria-label="Pandička">
      {/* paper texture wash */}
      <defs>
        <radialGradient id="pg-body" cx="50%" cy="40%" r="60%">
          <stop offset="0%" stopColor={fur}/>
          <stop offset="100%" stopColor={furShadow}/>
        </radialGradient>
        <filter id="pg-soft">
          <feGaussianBlur stdDeviation="0.4"/>
        </filter>
      </defs>

      {pose === 'sleep' && (
        <g fontFamily="system-ui" fill={dark} opacity="0.6">
          <text x="138" y="38" fontSize="14" fontWeight="700">z</text>
          <text x="148" y="28" fontSize="18" fontWeight="700">Z</text>
        </g>
      )}

      {/* body (behind) */}
      {pose !== 'peek' && (
        <ellipse cx="90" cy="140" rx="46" ry="32" fill="url(#pg-body)" stroke={furShadow} strokeWidth="1.5"/>
      )}

      {/* arms */}
      {pose === 'wave' && (
        <g>
          <path d="M 48 124 Q 34 100 44 82 Q 54 78 58 96 Q 62 114 60 128 Z" fill={dark}/>
          <circle cx="46" cy="86" r="8" fill={dark}/>
        </g>
      )}
      {pose === 'cheer' && (
        <g>
          <path d="M 50 122 Q 28 96 36 72 Q 46 66 52 88 Q 58 110 62 126 Z" fill={dark}/>
          <path d="M 130 122 Q 152 96 144 72 Q 134 66 128 88 Q 122 110 118 126 Z" fill={dark}/>
          <circle cx="38" cy="74" r="8" fill={dark}/>
          <circle cx="142" cy="74" r="8" fill={dark}/>
        </g>
      )}
      {pose === 'read' && (
        <g>
          <rect x="58" y="116" width="64" height="34" rx="4" fill="#FFE9B8" stroke={dark} strokeWidth="1.5"/>
          <line x1="90" y1="116" x2="90" y2="150" stroke={dark} strokeWidth="1.2"/>
          <line x1="66" y1="126" x2="84" y2="126" stroke="#B8895A" strokeWidth="1.2"/>
          <line x1="66" y1="132" x2="82" y2="132" stroke="#B8895A" strokeWidth="1.2"/>
          <line x1="66" y1="138" x2="80" y2="138" stroke="#B8895A" strokeWidth="1.2"/>
          <line x1="96" y1="126" x2="114" y2="126" stroke="#B8895A" strokeWidth="1.2"/>
          <line x1="96" y1="132" x2="112" y2="132" stroke="#B8895A" strokeWidth="1.2"/>
        </g>
      )}

      {/* ears */}
      <ellipse cx="48" cy="48" rx="16" ry="15" fill={dark}/>
      <ellipse cx="132" cy="48" rx="16" ry="15" fill={dark}/>
      <ellipse cx="48" cy="48" rx="8" ry="7" fill={darkHi} opacity="0.5"/>
      <ellipse cx="132" cy="48" rx="8" ry="7" fill={darkHi} opacity="0.5"/>

      {/* head */}
      {pose === 'peek' ? (
        <g>
          {/* lower half hidden behind a ledge */}
          <ellipse cx="90" cy="90" rx="52" ry="48" fill="url(#pg-body)" stroke={furShadow} strokeWidth="1.5"/>
          <rect x="10" y="128" width="160" height="60" fill="transparent"/>
        </g>
      ) : (
        <ellipse cx="90" cy="90" rx="52" ry="48" fill="url(#pg-body)" stroke={furShadow} strokeWidth="1.5"/>
      )}

      {/* eye patches */}
      <ellipse cx="66" cy="90" rx="14" ry="18" fill={dark} transform="rotate(-18 66 90)"/>
      <ellipse cx="114" cy="90" rx="14" ry="18" fill={dark} transform="rotate(18 114 90)"/>

      {/* nose */}
      <ellipse cx="90" cy="100" rx="5" ry="3.5" fill={dark}/>

      {/* cheeks */}
      <circle cx="52" cy="106" r="6" fill={cheek} opacity="0.7"/>
      <circle cx="128" cy="106" r="6" fill={cheek} opacity="0.7"/>

      <Eyes/>
      <Mouth/>

      {/* mouth line under nose */}
      <path d="M 90 103 L 90 108" stroke={dark} strokeWidth="1.5" strokeLinecap="round"/>

      {/* Accessories — rendered on top */}
      {accessories.includes('bow') && (
        <g>
          <circle cx="132" cy="30" r="6" fill="#EF6F8A"/>
          <path d="M 118 28 Q 110 18 118 14 Q 128 18 132 30 Q 128 34 120 34 Q 116 32 118 28 Z" fill="#EF6F8A"/>
          <path d="M 146 28 Q 154 18 146 14 Q 136 18 132 30 Q 136 34 144 34 Q 148 32 146 28 Z" fill="#EF6F8A"/>
        </g>
      )}
      {accessories.includes('flower') && (
        <g transform="translate(46 44)">
          <circle cx="0" cy="-4" r="4" fill="#EF6F8A"/>
          <circle cx="-4" cy="0" r="4" fill="#EF6F8A"/>
          <circle cx="4" cy="0" r="4" fill="#EF6F8A"/>
          <circle cx="0" cy="4" r="4" fill="#EF6F8A"/>
          <circle cx="0" cy="0" r="2.5" fill="#FFD66B"/>
        </g>
      )}
      {accessories.includes('hat') && (
        <g>
          <ellipse cx="90" cy="38" rx="58" ry="10" fill="#C9A572"/>
          <ellipse cx="90" cy="22" rx="32" ry="18" fill="#D9B584"/>
          <rect x="70" y="32" width="40" height="4" fill="#7FB87E"/>
        </g>
      )}
      {accessories.includes('glasses') && (
        <g stroke={dark} strokeWidth="2.5" fill="none">
          <circle cx="66" cy="88" r="14"/>
          <circle cx="114" cy="88" r="14"/>
          <line x1="80" y1="88" x2="100" y2="88"/>
          <circle cx="66" cy="88" r="14" fill="#A5CCE8" fillOpacity="0.25"/>
          <circle cx="114" cy="88" r="14" fill="#A5CCE8" fillOpacity="0.25"/>
        </g>
      )}
      {accessories.includes('bowtie') && (
        <g transform="translate(90 128)">
          <path d="M -14 -4 L -2 0 L -14 4 Z" fill="#E27D8B"/>
          <path d="M 14 -4 L 2 0 L 14 4 Z" fill="#E27D8B"/>
          <rect x="-3" y="-3" width="6" height="6" rx="1" fill="#B0525D"/>
        </g>
      )}
      {accessories.includes('scarf') && (
        <g>
          <path d="M 50 128 Q 90 118 130 128 L 126 142 Q 90 132 54 142 Z" fill="#7FC8A9"/>
          <rect x="82" y="138" width="6" height="14" fill="#7FC8A9"/>
          <rect x="92" y="138" width="6" height="14" fill="#7FC8A9"/>
          <line x1="50" y1="128" x2="130" y2="128" stroke="#4A9B7C" strokeWidth="1" strokeDasharray="3 3"/>
        </g>
      )}
      {accessories.includes('birthday-hat') && (
        <g>
          <path d="M 90 -6 L 72 46 L 108 46 Z" fill="#E27D8B"/>
          <circle cx="82" cy="20" r="2.5" fill="#FFD66B"/>
          <circle cx="98" cy="30" r="2.5" fill="#A5CCE8"/>
          <circle cx="88" cy="36" r="2.5" fill="#7FC8A9"/>
          <circle cx="90" cy="-6" r="4" fill="#FFD66B"/>
        </g>
      )}
      {accessories.includes('headphones') && (
        <g>
          <path d="M 34 50 Q 34 10 90 10 Q 146 10 146 50" stroke="#2B2330" strokeWidth="6" fill="none" strokeLinecap="round"/>
          <rect x="24" y="38" width="18" height="28" rx="8" fill="#E27D8B"/>
          <rect x="138" y="38" width="18" height="28" rx="8" fill="#E27D8B"/>
        </g>
      )}
      {accessories.includes('crown') && (
        <g>
          <path d="M 58 36 L 64 18 L 76 30 L 90 12 L 104 30 L 116 18 L 122 36 Z" fill="#FFD66B" stroke="#B8821E" strokeWidth="1.5"/>
          <circle cx="90" cy="22" r="3" fill="#EF6F8A"/>
          <circle cx="68" cy="30" r="2" fill="#A5CCE8"/>
          <circle cx="112" cy="30" r="2" fill="#7FC8A9"/>
        </g>
      )}
      {accessories.includes('wizard-hat') && (
        <g>
          <path d="M 90 -10 Q 100 20 110 42 L 70 42 Q 80 20 90 -10 Z" fill="#5A4BA0"/>
          <ellipse cx="90" cy="42" rx="30" ry="6" fill="#3A2E6E"/>
          <circle cx="96" cy="10" r="2" fill="#FFD66B"/>
          <circle cx="84" cy="24" r="1.5" fill="#FFD66B"/>
        </g>
      )}
      {accessories.includes('cape') && (
        <g>
          <path d="M 40 108 Q 90 118 140 108 L 148 170 L 32 170 Z" fill="#E27D8B" opacity="0.9"/>
          <path d="M 40 108 Q 90 118 140 108" stroke="#B0525D" strokeWidth="2" fill="none"/>
        </g>
      )}
      {accessories.includes('rainbow') && (
        <g>
          <path d="M 10 110 Q 40 80 60 118" stroke="#EF6F8A" strokeWidth="4" fill="none" strokeLinecap="round"/>
          <path d="M 14 114 Q 42 86 62 120" stroke="#FFD66B" strokeWidth="4" fill="none" strokeLinecap="round"/>
          <path d="M 18 118 Q 44 92 64 124" stroke="#7FC8A9" strokeWidth="4" fill="none" strokeLinecap="round"/>
          <path d="M 170 110 Q 140 80 120 118" stroke="#EF6F8A" strokeWidth="4" fill="none" strokeLinecap="round"/>
          <path d="M 166 114 Q 138 86 118 120" stroke="#FFD66B" strokeWidth="4" fill="none" strokeLinecap="round"/>
          <path d="M 162 118 Q 136 92 116 124" stroke="#7FC8A9" strokeWidth="4" fill="none" strokeLinecap="round"/>
        </g>
      )}
    </svg>
  );
}

// Tiny panda head for chip/badge usage
function PandickaChip({ size = 28 }) {
  return (
    <svg viewBox="0 0 40 40" width={size} height={size}>
      <circle cx="20" cy="22" r="16" fill="#FFFDF8" stroke="#F3EBDD" strokeWidth="1"/>
      <circle cx="10" cy="12" r="6" fill="#2B2330"/>
      <circle cx="30" cy="12" r="6" fill="#2B2330"/>
      <ellipse cx="14" cy="22" rx="4" ry="5" fill="#2B2330" transform="rotate(-18 14 22)"/>
      <ellipse cx="26" cy="22" rx="4" ry="5" fill="#2B2330" transform="rotate(18 26 22)"/>
      <ellipse cx="20" cy="26" rx="2" ry="1.5" fill="#2B2330"/>
      <circle cx="14" cy="22" r="1.5" fill="#fff"/>
      <circle cx="26" cy="22" r="1.5" fill="#fff"/>
    </svg>
  );
}

Object.assign(window, { Pandicka, PandickaChip });
