<view class="page">

  <!-- 顶栏 -->
  <view class="topbar">
    <view class="pill coin">🪙 {{coins}}</view>
    <view class="clock">
      {{weekday}} {{clock}}
      <text wx:if="{{isNight}}" class="moon-tag">🌙</text>
    </view>
    <view class="pill shop" bindtap="goShop">🏪 商店</view>
  </view>

  <!-- 花园舞台 -->
  <view class="stage {{isNight ? 'night' : ''}}">
    <view class="sun" wx:if="{{!isNight}}"></view>
    <view class="moon" wx:if="{{isNight}}"></view>
    <view class="cloud c1"></view>
    <view class="cloud c2"></view>
    <view class="cloud c3"></view>

    <view class="pots">
      <view
        wx:for="{{pots}}" wx:key="idx"
        class="slot {{item.active ? 'slot-active' : ''}}"
        data-idx="{{item.idx}}" bindtap="onSlotTap"
      >
        <block wx:if="{{item.exists}}">
          <view class="plant {{item.species}} stage{{item.stage}} {{item.sick ? 'sick' : ''}}">
            <view class="seed" wx:if="{{item.stage === 0}}"></view>
            <view class="sprout" wx:if="{{item.stage === 1}}"></view>
            <view class="foliage" wx:if="{{item.stage >= 2}}">
              <view class="stem"></view>
              <view class="leaf leaf-l"></view>
              <view class="leaf leaf-r"></view>
              <view class="head-wrap">
                <view class="head"></view>
                <view class="fruit" wx:if="{{item.stage >= 4}}"></view>
              </view>
            </view>
            <view class="pot">
              <view class="soil"></view>
              <view class="pot-lip"></view>
              <view class="pot-body"></view>
            </view>
          </view>
          <view class="pname">{{item.name}}</view>
          <view class="stagelabel">{{item.stageName}}</view>
          <view class="sick-tag" wx:if="{{item.sick}}">😵 蔫了</view>
        </block>
        <block wx:else>
          <view class="pot-empty" wx:if="{{!item.locked}}">
            <view class="soil"></view>
            <view class="pot-lip"></view>
            <view class="pot-body"></view>
            <view class="plus">＋</view>
          </view>
          <view class="pot-locked">
            <view class="pot-body"></view>
            <view class="lock-ico">🔒</view>
          </view>
          <view class="pname">{{item.locked ? '未解锁' : '点击种植'}}</view>
        </block>
      </view>
    </view>

    <view class="ground"></view>
  </view>

  <!-- 照料面板 -->
  <view class="panel card" wx:if="{{active}}">
    <view class="panel-head">
      <text class="pname">{{active.name}}</text>
      <text class="stage-chip">{{active.stageName}}</text>
      <text class="prog">成长 {{active.growth}}</text>
    </view>
    <view class="progbar"><view class="prog-fill" style="width: {{active.progress}}%"></view></view>
    <view class="need" wx:if="{{active.need}}">{{active.need}}</view>

    <view class="stats">
      <view class="stat" wx:for="{{active.statList}}" wx:key="key">
        <text class="s-ico">{{item.icon}}</text>
        <view class="bar"><view class="bar-fill {{item.low ? 'low' : ''}}" style="width: {{item.val}}%"></view></view>
        <text class="s-val">{{item.val}}</text>
      </view>
    </view>

    <view class="actions">
      <view class="act" data-a="water" bindtap="onCare">
        <text class="a-ico">💧</text><text>浇水</text><text class="a-cd">{{cd.water}}</text>
      </view>
      <view class="act" data-a="sun" bindtap="onCare">
        <text class="a-ico">☀️</text><text>晒太阳</text><text class="a-cd">{{cd.sun}}</text>
      </view>
      <view class="act" data-a="food" bindtap="onCare">
        <text class="a-ico">🧪</text><text>施肥</text><text class="a-cd">{{cd.food}}</text>
      </view>
      <view class="act" data-a="love" bindtap="onCare">
        <text class="a-ico">❤️</text><text>陪伴</text><text class="a-cd">{{cd.love}}</text>
      </view>
      <view class="act item" data-i="fertilizer" bindtap="onItem">
        <text class="a-ico">🧴</text><text>化肥×{{inv.fertilizer}}</text>
      </view>
      <view class="act item" data-i="potion" bindtap="onItem">
        <text class="a-ico">💊</text><text>药水×{{inv.potion}}</text>
      </view>
    </view>
  </view>

  <!-- 底部按钮 -->
  <view class="bottom-actions">
    <view class="btn btn-plain" bindtap="onUnlockPot" wx:if="{{potCount < 3}}">
      解锁花盆（{{potPrice}} 金币）
    </view>
    <view class="btn" bindtap="goGame">🎮 浇水小游戏赚金币</view>
  </view>

  <!-- 特效层 -->
  <view class="fx fx-water" wx:if="{{fx.water}}">
    <view class="drop d1"></view><view class="drop d2"></view><view class="drop d3"></view>
  </view>
  <view class="fx fx-sun" wx:if="{{fx.sun}}"><view class="rays"></view></view>
  <view class="fx fx-love" wx:if="{{fx.love}}">
    <view class="heart h1"></view><view class="heart h2"></view><view class="heart h3"></view>
  </view>
  <view class="fx fx-food" wx:if="{{fx.food}}">
    <view class="spark s1"></view><view class="spark s2"></view><view class="spark s3"></view>
  </view>

  <!-- 离线报告弹窗 -->
  <view class="modal-mask" wx:if="{{showOffline}}" catchtouchmove="noop">
    <view class="modal">
      <view class="modal-title">🌱 欢迎回来！</view>
      <view class="modal-body">
        <view class="r-line" wx:for="{{offlineReport}}" wx:key="*this">{{item}}</view>
      </view>
      <view class="btn modal-btn" bindtap="closeOffline">知道了</view>
    </view>
  </view>

</view>
