// nyashelf-mascot.jsx
// SVG ghost-kitten mascot + ambient decor (stars, petals, hearts, moon).

// ─── Ghost Kitten ──────────────────────────────────────────────────────────
// Animated pixel-art sleepy cat sticker from Tenor (replaces the SVG mascot).
// All variants render the same GIF — kept the prop signature for backward compat
// with existing callers (empty/loading/error/profile/dashboard).
const NYA_CAT_GIF = 'https://media1.tenor.com/m/aSPVJF7EmCYAAAAC/cat-cat-sleep.gif';

function GhostKitten({ size = 96, variant = 'default', glow = true, style = {} }) {
  const radius = Math.max(12, size * 0.22);
  return (
    <div style={{
      width: size, height: size, position: 'relative',
      borderRadius: radius, overflow: 'hidden',
      background: 'rgba(255,255,255,.04)',
      boxShadow: glow ? '0 4px 20px var(--glow-soft), 0 0 30px var(--glow-soft)' : 'none',
      flexShrink: 0,
      ...style,
    }}>
      {glow && (
        <div style={{
          position: 'absolute', inset: '-25%', borderRadius: '50%',
          background: 'radial-gradient(circle, var(--glow-soft) 0%, transparent 65%)',
          filter: 'blur(10px)', pointerEvents: 'none',
        }} />
      )}
      <img
        src={NYA_CAT_GIF}
        alt="sleepy cat"
        style={{
          width: '100%', height: '100%', objectFit: 'cover',
          display: 'block', position: 'relative',
          imageRendering: 'pixelated',
        }}
      />
    </div>
  );
}

// ─── Moon ────────────────────────────────────────────────────────────────────
function Moon({ size = 60, style = {} }) {
  return (
    <div style={{ width: size, height: size, position: 'relative', ...style }}>
      <div style={{
        position: 'absolute', inset: '-40%', borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(245,230,168,.45) 0%, rgba(245,230,168,.15) 35%, transparent 70%)',
        filter: 'blur(12px)',
      }} />
      <svg viewBox="0 0 60 60" width={size} height={size} style={{ position: 'relative' }}>
        <defs>
          <radialGradient id="moon-g" cx="35%" cy="30%" r="65%">
            <stop offset="0%" stopColor="#fff5d6"/>
            <stop offset="60%" stopColor="#f5e6a8"/>
            <stop offset="100%" stopColor="#d4b878"/>
          </radialGradient>
        </defs>
        <circle cx="30" cy="30" r="24" fill="url(#moon-g)"/>
        <circle cx="22" cy="24" r="2.5" fill="rgba(180,140,80,.25)"/>
        <circle cx="36" cy="36" r="3.5" fill="rgba(180,140,80,.22)"/>
        <circle cx="42" cy="22" r="1.8" fill="rgba(180,140,80,.2)"/>
      </svg>
    </div>
  );
}

// ─── Decor sprites ───────────────────────────────────────────────────────────
const Sparkle = ({ size = 10, color = '#fff', opacity = .8 }) => (
  <svg viewBox="0 0 10 10" width={size} height={size} style={{ opacity }}>
    <path d="M5 0 L 6 4 L 10 5 L 6 6 L 5 10 L 4 6 L 0 5 L 4 4 Z" fill={color}/>
  </svg>
);

const Petal = ({ size = 12, color = '#ffb3d9', opacity = .7, rot = 0 }) => (
  <svg viewBox="0 0 12 14" width={size} height={size * 1.16} style={{ opacity, transform: `rotate(${rot}deg)` }}>
    <path d="M6 1 C 9 4, 11 9, 6 13 C 1 9, 3 4, 6 1 Z" fill={color}/>
    <path d="M6 3 C 7 6, 8 9, 6 12" stroke="rgba(0,0,0,.1)" strokeWidth=".5" fill="none"/>
  </svg>
);

const Heart = ({ size = 10, color = '#ff9ecd', opacity = .7 }) => (
  <svg viewBox="0 0 10 9" width={size} height={size * 0.9} style={{ opacity }}>
    <path d="M5 9 C 5 9, 0 6, 0 3 C 0 1, 1.5 0, 2.7 0 C 3.7 0, 4.5 0.7, 5 1.7 C 5.5 0.7, 6.3 0, 7.3 0 C 8.5 0, 10 1, 10 3 C 10 6, 5 9, 5 9 Z" fill={color}/>
  </svg>
);

const PawPrint = ({ size = 12, color = '#c89bf0', opacity = .55 }) => (
  <svg viewBox="0 0 14 14" width={size} height={size} style={{ opacity }}>
    <ellipse cx="7" cy="10" rx="3.2" ry="2.5" fill={color}/>
    <ellipse cx="3" cy="6" rx="1.5" ry="2" fill={color}/>
    <ellipse cx="11" cy="6" rx="1.5" ry="2" fill={color}/>
    <ellipse cx="5.5" cy="3" rx="1.2" ry="1.6" fill={color}/>
    <ellipse cx="8.5" cy="3" rx="1.2" ry="1.6" fill={color}/>
  </svg>
);

const Star4 = ({ size = 8, color = '#fff', opacity = .8 }) => (
  <svg viewBox="0 0 8 8" width={size} height={size} style={{ opacity }}>
    <path d="M4 0 L 4.7 3.3 L 8 4 L 4.7 4.7 L 4 8 L 3.3 4.7 L 0 4 L 3.3 3.3 Z" fill={color}/>
  </svg>
);

// ─── DecorLayer — sprinkles ambient decor over a screen ──────────────────────
// density 0–100; positions are deterministic (seeded by id) so they don't reshuffle on rerender
function DecorLayer({ density = 50, seed = 'a', includeMoon = false, palette }) {
  const items = React.useMemo(() => {
    // simple seeded rng
    let s = 0;
    for (let i = 0; i < seed.length; i++) s = (s * 31 + seed.charCodeAt(i)) >>> 0;
    const rng = () => {
      s = (s * 1103515245 + 12345) & 0x7fffffff;
      return s / 0x7fffffff;
    };
    const count = Math.round(8 + (density / 100) * 28);
    const kinds = ['sparkle', 'sparkle', 'sparkle', 'petal', 'heart', 'paw', 'star4', 'star4'];
    return Array.from({ length: count }, (_, i) => {
      const kind = kinds[Math.floor(rng() * kinds.length)];
      return {
        kind, key: i,
        x: rng() * 100, y: rng() * 100,
        size: 6 + rng() * 12,
        rot: rng() * 360,
        opacity: 0.35 + rng() * 0.5,
        delay: rng() * 4,
        dur: 3 + rng() * 4,
      };
    });
  }, [density, seed]);

  const palCol = palette === 'sakura' ? ['#ffd9eb', '#ffb3d9', '#e8a3f0'] :
                 palette === 'moonlit' ? ['#c4e4ff', '#b3c8ff', '#f5e6a8'] :
                 palette === 'twilight' ? ['#a5c3f5', '#c89bf0', '#f5e6a8'] :
                 ['#ff9ecd', '#c89bf0', '#f5e6a8'];

  return (
    <div className="nya-decor" style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      overflow: 'hidden', zIndex: 1,
    }}>
      {includeMoon && (
        <div style={{ position: 'absolute', top: 12, right: 16, animation: 'nya-float 6s ease-in-out infinite' }}>
          <Moon size={56} />
        </div>
      )}
      {items.map(it => {
        const col = palCol[it.key % palCol.length];
        const sprite =
          it.kind === 'sparkle' ? <Sparkle size={it.size} color="#fff" opacity={it.opacity} /> :
          it.kind === 'petal'   ? <Petal size={it.size} color={col} opacity={it.opacity} rot={it.rot} /> :
          it.kind === 'heart'   ? <Heart size={it.size} color={col} opacity={it.opacity} /> :
          it.kind === 'paw'     ? <PawPrint size={it.size} color={col} opacity={it.opacity * .7} /> :
                                  <Star4 size={it.size * .7} color={col} opacity={it.opacity} />;
        return (
          <div key={it.key} style={{
            position: 'absolute',
            left: `${it.x}%`, top: `${it.y}%`,
            animation: `nya-twinkle ${it.dur}s ease-in-out ${it.delay}s infinite`,
          }}>{sprite}</div>
        );
      })}
    </div>
  );
}

Object.assign(window, { GhostKitten, Moon, Sparkle, Petal, Heart, PawPrint, Star4, DecorLayer });