// Mascot Rain + reusable UI pieces (button, speech bubble, stat tile, badge).
const SKIN = '#E8C2A0';
const SKIN_SHADOW = '#C99A78';
const HAIR = '#3A2B22';
const SHIRT = '#A8C5D8';
const SHIRT_DARK = '#6E8FA8';

function Mascot({ size = 120, mood = 'happy', wave = false }) {
  const showWave = wave || mood === 'wave' || mood === 'cheer';
  const eyeY = 38;
  const eyeShape = mood === 'sleep'
    ? <><path d="M30 38 q5 3 10 0" stroke={OA_THEME.ink} strokeWidth="2" fill="none" strokeLinecap="round"/>
       <path d="M58 38 q5 3 10 0" stroke={OA_THEME.ink} strokeWidth="2" fill="none" strokeLinecap="round"/></>
    : mood === 'cheer'
    ? <><path d="M30 36 q5 -4 10 0" stroke={OA_THEME.ink} strokeWidth="2.4" fill="none" strokeLinecap="round"/>
       <path d="M58 36 q5 -4 10 0" stroke={OA_THEME.ink} strokeWidth="2.4" fill="none" strokeLinecap="round"/></>
    : <><circle cx="35" cy={eyeY} r="2.2" fill={OA_THEME.ink}/><circle cx="63" cy={eyeY} r="2.2" fill={OA_THEME.ink}/></>;

  const mouth = mood === 'cheer'
    ? <path d="M40 50 q9 9 18 0" stroke={OA_THEME.ink} strokeWidth="2.2" fill="#fff" strokeLinejoin="round"/>
    : mood === 'think'
    ? <path d="M42 50 q7 -2 14 0" stroke={OA_THEME.ink} strokeWidth="2.2" fill="none" strokeLinecap="round"/>
    : <path d="M40 50 q9 7 18 0" stroke={OA_THEME.ink} strokeWidth="2.2" fill="none" strokeLinecap="round"/>;

  return (
    <svg width={size} height={size} viewBox="0 0 100 110" style={{ display: 'block' }} aria-hidden="true">
      <defs>
        <radialGradient id="msk-shade" cx="50%" cy="40%" r="60%">
          <stop offset="60%" stopColor={SKIN} />
          <stop offset="100%" stopColor={SKIN_SHADOW} />
        </radialGradient>
      </defs>
      <path d="M14 110 q0 -22 18 -28 h36 q18 6 18 28 z" fill={SHIRT} />
      <path d="M30 90 q20 8 40 0" stroke={SHIRT_DARK} strokeWidth="1.5" fill="none" opacity="0.5"/>
      <rect x="44" y="68" width="12" height="12" rx="3" fill={SKIN_SHADOW}/>
      <ellipse cx="49" cy="42" rx="26" ry="28" fill="url(#msk-shade)"/>
      <path d="M22 38 q-2 -22 27 -24 q29 2 27 24 q-2 -8 -10 -10 q-3 8 -17 8 q-14 0 -17 -8 q-8 2 -10 10 z" fill={HAIR}/>
      <circle cx="49" cy="14" r="9" fill={HAIR}/>
      <circle cx="49" cy="14" r="9" fill="none" stroke="#000" strokeOpacity="0.08" strokeWidth="1"/>
      <ellipse cx="22" cy="44" rx="3" ry="5" fill={SKIN_SHADOW}/>
      <ellipse cx="76" cy="44" rx="3" ry="5" fill={SKIN_SHADOW}/>
      <ellipse cx="30" cy="48" rx="4" ry="2.5" fill={OA_THEME.rose} opacity="0.55"/>
      <ellipse cx="68" cy="48" rx="4" ry="2.5" fill={OA_THEME.rose} opacity="0.55"/>
      {eyeShape}
      {mouth}
      {showWave && (
        <g transform="translate(78 78)" style={{ transformOrigin: '0 0', animation: 'oaWave 1.4s ease-in-out infinite' }}>
          <rect x="-6" y="-6" width="12" height="26" rx="6" fill={SHIRT}/>
          <circle cx="0" cy="-12" r="7" fill={SKIN}/>
        </g>
      )}
      {mood === 'think' && (
        <g transform="translate(72 18)">
          <circle cx="0" cy="0" r="9" fill={OA_THEME.card} stroke={OA_THEME.line}/>
          <text x="0" y="4" textAnchor="middle" fontSize="11" fill={OA_THEME.sageDeep} fontWeight="800">?</text>
        </g>
      )}
    </svg>
  );
}

function SpeechBubble({ children, tailSide = 'left', accent = OA_THEME.sage }) {
  return (
    <div style={{
      position: 'relative',
      background: OA_THEME.card,
      border: `2px solid ${accent}`,
      borderRadius: 22,
      padding: '14px 18px',
      fontSize: 19,
      lineHeight: 1.4,
      color: OA_THEME.ink,
      boxShadow: '0 4px 0 rgba(92,126,115,0.10)',
      maxWidth: 280,
    }}>
      {children}
      <span style={{
        position: 'absolute',
        bottom: -10,
        [tailSide]: 28,
        width: 16, height: 16,
        background: OA_THEME.card,
        borderRight: `2px solid ${accent}`,
        borderBottom: `2px solid ${accent}`,
        transform: 'rotate(45deg)',
      }} />
    </div>
  );
}

function OABigButton({ children, onClick, color, dark = false, full = true, style = {}, icon, disabled = false }) {
  const accent = color || OA_THEME.sage;
  const accentDeep = OA_THEME.sageDeep;
  const fg = dark ? '#fff' : OA_THEME.ink;
  const bg = dark ? accent : OA_THEME.card;
  const border = dark ? 'transparent' : accent;
  const baseShadow = dark ? `0 4px 0 ${accentDeep}` : `0 4px 0 ${accent}40`;
  const pressedShadow = dark ? `0 2px 0 ${accentDeep}` : `0 2px 0 ${accent}40`;
  return (
    <button onClick={(e) => { if (!disabled) { OASound.tap(); onClick && onClick(e); } }} className="oa-no-tap" disabled={disabled} style={{
      width: full ? '100%' : 'auto',
      minHeight: 64,
      padding: '0 28px',
      borderRadius: 22,
      background: disabled ? '#E6DFD3' : bg,
      color: disabled ? OA_THEME.inkSoft : fg,
      border: `2.5px solid ${disabled ? OA_THEME.line : border}`,
      boxShadow: disabled ? 'none' : baseShadow,
      fontFamily: 'Nunito, sans-serif',
      fontSize: 22, fontWeight: 800, letterSpacing: 0.2,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
      cursor: disabled ? 'not-allowed' : 'pointer',
      transition: 'transform .12s ease, box-shadow .12s ease',
      ...style,
    }}
    onPointerDown={e => { if (disabled) return; e.currentTarget.style.transform = 'translateY(2px)'; e.currentTarget.style.boxShadow = pressedShadow; }}
    onPointerUp={e => { if (disabled) return; e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = baseShadow; }}
    onPointerLeave={e => { if (disabled) return; e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = baseShadow; }}
    >
      {icon}
      {children}
    </button>
  );
}

function StatTile({ label, value, sub, icon, color }) {
  return (
    <div style={{
      flex: 1, background: OA_THEME.card,
      border: `1.5px solid ${OA_THEME.line}`,
      borderRadius: 18, padding: '14px 12px',
      textAlign: 'center',
      boxShadow: '0 2px 0 rgba(60,82,76,0.06)',
      minWidth: 0,
    }}>
      <div style={{ fontSize: 28, marginBottom: 4 }}>{icon}</div>
      <div style={{ fontSize: 26, fontWeight: 900, color, lineHeight: 1, wordBreak: 'break-word' }}>{value}</div>
      <div style={{ fontSize: 14, color: OA_THEME.inkSoft, fontWeight: 700, marginTop: 4 }}>{label}</div>
      {sub && <div style={{ fontSize: 12, color: OA_THEME.inkSoft, marginTop: 2 }}>{sub}</div>}
    </div>
  );
}

function Badge({ icon, name, earned, sub }) {
  return (
    <div style={{
      background: OA_THEME.card,
      border: `1.5px solid ${earned ? OA_THEME.gold : OA_THEME.line}`,
      borderRadius: 18, padding: '14px 8px',
      textAlign: 'center',
      opacity: earned ? 1 : 0.55,
      filter: earned ? 'none' : 'grayscale(0.4)',
      boxShadow: earned ? `0 3px 0 ${OA_THEME.gold}40` : 'none',
    }}>
      <div style={{
        width: 60, height: 60, margin: '0 auto 8px', borderRadius: '50%',
        background: earned
          ? `radial-gradient(circle at 30% 30%, #F5D790, ${OA_THEME.gold})`
          : '#E6DFD3',
        display:'flex', alignItems:'center', justifyContent:'center',
        fontSize: 28,
        boxShadow: earned ? `inset 0 -2px 0 rgba(0,0,0,0.12)` : 'none',
      }}>{earned ? icon : '🔒'}</div>
      <div style={{ fontFamily: 'Lora, serif', fontStyle: 'italic', fontWeight: 600, fontSize: 16, color: OA_THEME.ink, lineHeight: 1.15 }}>{name}</div>
      <div style={{ fontSize: 12, color: OA_THEME.inkSoft, marginTop: 2 }}>{sub}</div>
    </div>
  );
}

function TopBar({ title, onBack, right }) {
  return (
    <div style={{ display:'flex', alignItems:'center', gap: 8, padding: '6px 14px 8px' }}>
      {onBack && (
        <button onClick={() => { OASound.tap(); onBack(); }} className="oa-no-tap" aria-label="Kembali" style={{
          width: 48, height: 48, borderRadius: 14, border: `2px solid ${OA_THEME.line}`,
          background: OA_THEME.card, fontSize: 22, fontWeight: 900, color: OA_THEME.inkSoft, cursor: 'pointer',
        }}>←</button>
      )}
      <div style={{ flex: 1, fontFamily: 'Lora, serif', fontStyle: 'italic', fontWeight: 600, fontSize: 24, color: OA_THEME.ink }}>{title}</div>
      {right}
    </div>
  );
}

window.Mascot = Mascot;
window.SpeechBubble = SpeechBubble;
window.OABigButton = OABigButton;
window.StatTile = StatTile;
window.Badge = Badge;
window.TopBar = TopBar;