// =============================================================
// PetSprite — pixel long-haired dachshund mascot
// =============================================================

const XM_PET_SPRITES = {
  happy: "../assets/sprites/xiaomo-pet-idle.png",
  excited: "../assets/sprites/xiaomo-pet-hug.png",
  petting: "../assets/sprites/xiaomo-pet-petting.png",
  treat: "../assets/sprites/xiaomo-pet-petting.png",
  sleepy: "../assets/sprites/xiaomo-pet-idle.png",
  idle: "../assets/sprites/xiaomo-pet-idle.png",
  snack: "../assets/sprites/xiaomo-pet-snack.png",
};

const PetPixelHeart = ({ style = {} }) => <span className="xm-pixel-heart" style={style}/>;
const PetPixelSpark = ({ style = {} }) => <span className="xm-pixel-spark" style={style}/>;

const PetSprite = ({ mood = "happy", size = 220, onHead, onBody, compact = false }) => {
  const src = XM_PET_SPRITES[mood] || XM_PET_SPRITES.happy;
  const spriteMood = mood === "excited" ? "excited" : mood;
  const petSize = typeof size === "number" ? `${size}px` : size;
  return (
    <div className={`xm-pet-sprite xm-pet-sprite-${spriteMood}${compact ? " xm-pet-sprite-compact" : ""}`} style={{ "--pet-size": petSize, width: "var(--pet-size)", height: "var(--pet-size)" }}>
      <img src={src} alt="小抹" draggable="false" style={{ width: "100%", height: "100%", display: "block", objectFit: "contain" }}/>
      {!compact && <button className="xm-pet-hit xm-pet-hit-head" aria-label="摸摸小抹的头" onClick={onHead}/>}
      {!compact && <button className="xm-pet-hit xm-pet-hit-body" aria-label="抱抱小抹" onClick={onBody}/>}
      {(mood === "petting" || mood === "excited") && (
        <>
          <PetPixelHeart style={{ left: "18%", top: "20%", animationDelay: "0ms" }}/>
          <PetPixelHeart style={{ right: "16%", top: "24%", animationDelay: "180ms" }}/>
          <PetPixelSpark style={{ left: "50%", top: "8%", animationDelay: "80ms" }}/>
        </>
      )}
      {mood === "treat" && (
        <>
          <PetPixelSpark style={{ left: "26%", top: "22%", animationDelay: "40ms" }}/>
          <PetPixelSpark style={{ right: "22%", top: "18%", animationDelay: "160ms" }}/>
        </>
      )}
    </div>
  );
};

Object.assign(window, { PetSprite, PetPixelHeart, PetPixelSpark, XM_PET_SPRITES });