<!-- src/app/tab4/tab4.page.html -->
<ion-header>
  <ion-toolbar>
    <ion-title>智能食谱</ion-title>
    <ion-buttons slot="end">
      <ion-button>
        <ion-icon slot="icon-only" name="restaurant-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <div class="nutrition-header">
    <ion-card class="phase-card" [style.background]="phaseConfig.color + '12'">
      <ion-card-header>
        <ion-card-title>
          当前阶段：{{currentPhase}}
          <ion-badge [style.background]="phaseConfig.color">{{phaseConfig.tip}}</ion-badge>
        </ion-card-title>
      </ion-card-header>

      <ion-card-content>
        <div class="training-metrics">
          <div class="metric">
            <div class="value">{{trainingData.calories}}</div>
            <div class="label">热量消耗</div>
          </div>
          <div class="metric highlight">
            <div class="value">{{trainingData.sets}}</div>
            <div class="label">{{trainingData.exercise}}</div>
          </div>
          <div class="metric">
            <div class="progress-ring" [style.--progress]="trainingData.accuracy + '%'">
              {{trainingData.accuracy}}%
            </div>
            <div class="label">动作标准度</div>
          </div>
        </div>
      </ion-card-content>
    </ion-card>

    <ion-card class="nutrition-card">
      <ion-card-header>
        <ion-card-title>今日营养目标</ion-card-title>
      </ion-card-header>
      
      <ion-card-content>
        <div class="macro-grid">
          <div *ngFor="let item of nutritionKeys" class="macro-item {{item}}">
            <div class="target">{{nutritionGoals[item].target}}g</div>
            <div class="progress-bar" 
                 [style.--progress]="getProgress(nutritionGoals[item].target, nutritionGoals[item].current)">
            </div>
            <div class="current">{{nutritionGoals[item].current}}g 已摄入</div>
          </div>
        </div>
        
        <ion-note class="supplement-tip">
          🧪 检测到维生素D不足，建议增加深海鱼类摄入
        </ion-note>
      </ion-card-content>
    </ion-card>
  </div>

  <div class="restaurant-section">
    <h2>附近优选餐厅 <ion-chip>高蛋白优先</ion-chip></h2>
    
    <div *ngFor="let restaurant of restaurants" class="restaurant-card">
      <div class="cover">
        <img [src]="restaurant.dish.image" alt="餐品图片">
        <ion-badge color="success" class="match-badge">
          <ion-icon name="sparkles"></ion-icon>
          匹配度93%
        </ion-badge>
      </div>
      
      <div class="restaurant-info">
        <div class="header">
          <h3>{{restaurant.name}} ★{{restaurant.rating}}</h3>
          <ion-text color="medium">{{restaurant.distance}}km</ion-text>
        </div>
        
        <div class="tags">
          <ion-chip *ngFor="let tag of restaurant.tags" outline>{{tag}}</ion-chip>
        </div>
        
        <div class="dish-info">
          <div class="dish-image">
            <img [src]="restaurant.dish.image" alt="餐品">
          </div>
          <div class="dish-detail">
            <h4>{{restaurant.dish.name}}</h4>
            <div class="nutrition-tags">
              <ion-chip color="primary">⚡{{restaurant.dish.protein}}g蛋白</ion-chip>
              <ion-chip color="secondary">🍚 {{restaurant.dish.carbs}}</ion-chip>
            </div>
            <div class="price">
              <ion-text color="dark">¥{{restaurant.dish.price}}</ion-text>
              <ion-text color="medium" class="original">¥{{restaurant.dish.originalPrice}}</ion-text>
              <ion-button size="small" fill="outline">
                <ion-icon slot="start" name="add-circle"></ion-icon>
                加入计划
              </ion-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</ion-content>
