// =============================================================
// PetDetailPage — immersive pixel farm room for Xiaomo
// =============================================================

const PetDetailPage = ({ onBack }) => {
  const { mood, copy, setMood, setTreatCooldown, treatAvailable } = usePetMood();
  const [message, setMessage] = useState(copy.bubble);
  const [burst, setBurst] = useState(null);

  useEffect(() => {
    setMessage(copy.bubble);
  }, [copy.bubble]);

  const showBurst = (kind) => {
    const id = Date.now();
    setBurst({ id, kind });
    window.setTimeout(() => setBurst(null), 900);
  };

  const touchHead = () => {
    setMood("petting");
    setMessage("嗯～喜欢你摸摸");
    showBurst("heart");
    window.setTimeout(() => setMood("happy"), 2200);
  };

  const touchBody = () => {
    setMood("excited");
    setMessage("抱抱到了，小抹开心地转圈圈");
    showBurst("spark");
    window.setTimeout(() => setMood("happy"), 2400);
  };

  const giveTreat = () => {
    if (!treatAvailable) {
      setMessage("小饼干还在烤箱里，要等一下下");
      return;
    }
    setTreatCooldown();
    setMessage("嘎吱嘎吱，小抹把饼干藏进心里啦");
    showBurst("treat");
  };

  return (
    <div className={`xm-pet-page xm-pet-page-${mood}`}>
      <button className="xm-pet-mobile-back" onClick={onBack}>返回</button>
      <div className="xm-pet-world" aria-hidden/>

      <div className="xm-pet-stage">
        <div className="xm-pet-bubble">{message}</div>
        <div className="xm-pet-shadow"/>
        <PetSprite mood={mood} size="clamp(390px, 36vw, 590px)" onHead={touchHead} onBody={touchBody}/>
        <button className="xm-pet-snack" onClick={giveTreat} disabled={!treatAvailable} aria-label="喂小抹吃零食">
          <img src="../assets/sprites/xiaomo-pet-snack.png" alt="小抹的小零食" draggable="false"/>
        </button>
        {burst && (
          <div key={burst.id} className={`xm-pet-burst xm-pet-burst-${burst.kind}`}>
            {Array.from({ length: 9 }).map((_, i) => (
              <span key={i} style={{ "--i": i }}/>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { PetDetailPage });