<view class="container">
  <view class="hero">
    <view class="hero-title">饮食推荐管理</view>
    <view class="hero-sub">更清晰的推荐类型说明和结果解读，帮助你快速做决策</view>
  </view>

  <view class="card">
    <view class="card-title">推荐参数</view>

    <view class="row">
      <text class="label">推荐类型</text>
      <picker mode="selector" range="{{recTypes}}" range-key="label" bindchange="onTypeChange">
        <text class="value">{{selectedLabel}}</text>
      </picker>
    </view>

    <view class="type-intro" wx:if="{{activeType}}">
      <view class="type-intro-title">{{activeType.label}}</view>
      <view class="type-intro-text">{{activeType.desc}}</view>
      <view class="type-intro-sub">适用场景：{{activeType.scene}}</view>
      <view class="type-intro-sub">数据要求：{{activeType.requirement}}</view>
    </view>

    <view class="row">
      <text class="label">推荐数量</text>
      <picker mode="selector" range="{{topKOptions}}" range-key="label" bindchange="onTopKChange">
        <text class="value">{{topKLabel}}</text>
      </picker>
    </view>

    <view class="row" wx:if="{{recType === 'goal'}}">
      <text class="label">目标设定</text>
      <picker mode="selector" range="{{goalOptions}}" range-key="label" bindchange="onGoalChange">
        <text class="value">{{goalLabel}}</text>
      </picker>
    </view>

    <view class="row" wx:if="{{recType === 'occupation'}}">
      <text class="label">职业设定</text>
      <picker mode="selector" range="{{occupationOptions}}" range-key="label" bindchange="onOccupationChange">
        <text class="value">{{occupationLabel}}</text>
      </picker>
    </view>

    <view class="selection-tags">
      <text class="selection-tag">类型：{{selectedLabel}}</text>
      <text class="selection-tag">数量：{{topKLabel}}</text>
      <text class="selection-tag" wx:if="{{recType === 'goal'}}">目标：{{goalLabel}}</text>
      <text class="selection-tag" wx:if="{{recType === 'occupation'}}">职业：{{occupationLabel}}</text>
    </view>

    <button class="btn btn-primary" loading="{{loading}}" bindtap="fetchRecommend">刷新推荐</button>
  </view>

  <view class="card" wx:if="{{errorText}}">
    <view class="card-title">提示</view>
    <view class="warn">{{errorText}}</view>
  </view>

  <view class="card" wx:if="{{payload}}">
    <view class="card-title">推荐结果</view>
    <view class="muted" wx:if="{{payload.strategy}}">策略：{{payload.strategy}}</view>
    <view class="muted" wx:if="{{lastUpdatedAt}}">更新时间：{{lastUpdatedAt}}</view>

    <view class="summary-grid" wx:if="{{summary}}">
      <view class="summary-item">
        <view class="summary-label">命中结果</view>
        <view class="summary-value">{{summary.count}} 条</view>
      </view>
      <view class="summary-item">
        <view class="summary-label">平均热量</view>
        <view class="summary-value">{{summary.avgCalories}} kcal</view>
      </view>
      <view class="summary-item">
        <view class="summary-label">平均蛋白</view>
        <view class="summary-value">{{summary.avgProtein}} g</view>
      </view>
    </view>

    <view class="metrics-tags" wx:if="{{payload.metrics}}">
      <text class="metric-tag">平均体重 {{payload.metrics.avg_weight}} kg</text>
      <text class="metric-tag">体重趋势 {{payload.metrics.weight_trend}} kg</text>
      <text class="metric-tag">平均摄入 {{payload.metrics.avg_intake}} kcal</text>
      <text class="metric-tag">平均运动 {{payload.metrics.avg_exercise}} kcal</text>
    </view>

    <view class="score-tip">评分越高，表示与当前策略和用户画像匹配度越高。</view>

    <view wx:if="{{!payload.items || !payload.items.length}}" class="empty">暂无推荐结果</view>

    <view wx:for="{{payload.items}}" wx:key="id" wx:for-item="recipe" class="item">
      <view class="item-head">
        <view class="rank-badge">#{{recipe.rank}}</view>
        <view class="item-title">{{recipe.name}}</view>
        <view class="value">{{recipe.displayScore}}</view>
      </view>
      <view class="item-sub">{{recipe.category}} · {{recipe.calories}} kcal · 蛋白{{recipe.protein}}g</view>
      <view class="item-sub">{{recipe.reason}}</view>
      <view class="item-sub" wx:if="{{recipe.tags && recipe.tags.length}}">
        <text wx:for="{{recipe.tags}}" wx:key="index" wx:for-item="tag" class="pill">{{tag}}</text>
      </view>
    </view>
  </view>
</view>
