// Shared primitives — buttons, cards, chips, backgrounds.

const { motion, AnimatePresence } = window.Motion;
window.motion = motion;
window.AnimatePresence = AnimatePresence;

function PaperBg({ palette, metaphor, children, style = {} }) {
  // Layered paper-texture background using SVG noise + soft blobs
  const meta = METAPHORS[metaphor];
  return (
    <div style={{
      position: 'absolute', inset: 0, overflow: 'hidden',
      background: palette.bg,
      ...style,
    }}>
      {/* grainy paper */}
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.4, mixBlendMode: 'multiply' }}>
        <defs>
          <filter id="paper-noise">
            <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="4"/>
            <feColorMatrix values="0 0 0 0 0.85  0 0 0 0 0.78  0 0 0 0 0.65  0 0 0 0.18 0"/>
          </filter>
        </defs>
        <rect width="100%" height="100%" filter="url(#paper-noise)"/>
      </svg>
      {children}
    </div>
  );
}

function SoftCard({ children, style = {}, palette, onClick, playfulness = 2, as = 'div', ...rest }) {
  const Comp = motion[as] || motion.div;
  return (
    <Comp
      onClick={onClick}
      whileHover={onClick ? { y: -2, scale: 1.01 } : undefined}
      whileTap={onClick ? { scale: 0.98 } : undefined}
      style={{
        background: palette.card,
        borderRadius: 28,
        boxShadow: playfulShadow(playfulness),
        border: `1.5px solid ${palette.ink}10`,
        cursor: onClick ? 'pointer' : 'default',
        ...style,
      }}
      {...rest}
    >
      {children}
    </Comp>
  );
}

function BigButton({ children, onClick, palette, variant = 'primary', size = 'md', style = {}, icon, disabled = false }) {
  const colors = {
    primary: { bg: palette.primary, bgD: palette.primaryDeep, fg: '#FFFFFF', ring: palette.primaryDeep },
    secondary: { bg: palette.secondary, bgD: '#4A9B7C', fg: '#FFFFFF', ring: '#4A9B7C' },
    ghost: { bg: palette.card, bgD: palette.bgDeep, fg: palette.ink, ring: palette.ink + '30' },
    sun: { bg: palette.sun, bgD: '#E3B54E', fg: palette.ink, ring: '#B78F2E' },
  }[variant];
  const h = size === 'lg' ? 72 : size === 'sm' ? 44 : 60;
  const fs = size === 'lg' ? 24 : size === 'sm' ? 16 : 20;
  return (
    <motion.button
      onClick={disabled ? undefined : onClick}
      whileHover={disabled ? undefined : { y: -2 }}
      whileTap={disabled ? undefined : { y: 2, scale: 0.98 }}
      style={{
        height: h, padding: `0 ${size === 'lg' ? 32 : 24}px`,
        borderRadius: h / 2,
        background: colors.bg,
        color: colors.fg,
        fontFamily: '"Baloo 2", "Baloo 2", system-ui',
        fontWeight: 600,
        fontSize: fs,
        border: 'none',
        cursor: disabled ? 'not-allowed' : 'pointer',
        opacity: disabled ? 0.55 : 1,
        boxShadow: `0 4px 0 ${colors.bgD}, 0 8px 20px rgba(0,0,0,0.08)`,
        display: 'inline-flex', alignItems: 'center', gap: 10,
        letterSpacing: '0.01em',
        ...style,
      }}
    >
      {icon}
      {children}
    </motion.button>
  );
}

function CoinChip({ amount, palette, size = 'md' }) {
  const h = size === 'lg' ? 44 : 32;
  return (
    <div style={{
      height: h, padding: '0 14px 0 6px',
      borderRadius: h,
      background: palette.card,
      border: `1.5px solid ${palette.ink}15`,
      display: 'inline-flex', alignItems: 'center', gap: 6,
      fontFamily: '"Baloo 2", "Baloo 2", system-ui', fontWeight: 600,
      fontSize: size === 'lg' ? 20 : 15,
      color: palette.ink,
      boxShadow: '0 2px 0 rgba(59,42,47,0.08)',
    }}>
      <div style={{
        width: h - 12, height: h - 12, borderRadius: '50%',
        background: 'radial-gradient(circle at 30% 30%, #FFE48A, #E8A73A)',
        border: '1.5px solid #B8821E',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: '#8C5F12', fontSize: size === 'lg' ? 14 : 11, fontWeight: 800,
      }}>K</div>
      {amount}
    </div>
  );
}

function XPBar({ xp, xpMax, level, palette }) {
  const pct = Math.min(100, (xp / xpMax) * 100);
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <div style={{
        width: 34, height: 34, borderRadius: '50%',
        background: palette.accent,
        color: '#fff', fontFamily: '"Baloo 2"', fontWeight: 700,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 14, border: '2px solid #fff',
        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
      }}>
        L{level}
      </div>
      <div style={{
        flex: 1, height: 14, background: palette.ink + '14',
        borderRadius: 7, overflow: 'hidden', position: 'relative',
      }}>
        <motion.div
          initial={{ width: 0 }}
          animate={{ width: `${pct}%` }}
          transition={{ type: 'spring', stiffness: 80, damping: 15 }}
          style={{
            height: '100%', borderRadius: 7,
            background: `linear-gradient(90deg, ${palette.sun}, ${palette.primary})`,
          }}
        />
      </div>
      <div style={{
        fontFamily: '"Baloo 2"', fontSize: 13, color: palette.inkSoft, fontWeight: 500,
        minWidth: 52, textAlign: 'right',
      }}>{xp}/{xpMax}</div>
    </div>
  );
}

// A cute floating landmark emoji with paper shadow
function Landmark({ emoji, size = 40, style = {}, rotate = 0 }) {
  return (
    <div style={{
      fontSize: size, lineHeight: 1,
      filter: 'drop-shadow(0 4px 2px rgba(0,0,0,0.12))',
      transform: `rotate(${rotate}deg)`,
      userSelect: 'none',
      ...style,
    }}>{emoji}</div>
  );
}

// Wavy divider SVG (top/bottom of sections, like torn paper)
function Wave({ color, flip = false, height = 24 }) {
  return (
    <svg width="100%" height={height} viewBox="0 0 400 24" preserveAspectRatio="none"
      style={{ display: 'block', transform: flip ? 'scaleY(-1)' : undefined }}>
      <path d="M0,12 Q50,0 100,12 T200,12 T300,12 T400,12 L400,24 L0,24 Z" fill={color}/>
    </svg>
  );
}

Object.assign(window, { PaperBg, SoftCard, BigButton, CoinChip, XPBar, Landmark, Wave });