<div class="container">
  <!-- Header -->
  <header>
    <div class="header-container">
      <div class="logo">
        <fa-icon [icon]="icons.faCat"></fa-icon>
        <span>点菜喵</span>
      </div>
      <div class="user-actions">
        <button class="icon-btn">
          <fa-icon [icon]="icons.faBell"></fa-icon>
        </button>
        <button class="icon-btn">
          <fa-icon [icon]="icons.faUser"></fa-icon>
        </button>
      </div>
    </div>
  </header>

  <div class="cart-container">
    <!-- Cart Items -->
    <div class="cart-card">
      <h2 class="section-title">购物车</h2>
      
      @for (item of cartItems; track item.id) {
        <app-cart-item 
          [item]="item"
          (quantityChange)="updateQuantity(item, $event)"
          (remove)="removeItem(item.id)">
        </app-cart-item>
      }
    </div>

    <!-- Nutrition Balance -->
    <div class="nutrition-container">
      <h2 class="section-title">营养均衡检测</h2>
      <app-nutrition-chart></app-nutrition-chart>
      <div class="nutrition-status">
        <div class="status-item">
          <div class="status-value">{{ nutrition.balance }}%</div>
          <div class="status-label">均衡度</div>
        </div>
        <div class="status-item">
          <div class="status-value">{{ nutrition.healthScore }}</div>
          <div class="status-label">健康分</div>
        </div>
        <div class="status-item">
          <div class="status-value">{{ nutrition.nutrients }}</div>
          <div class="status-label">营养项</div>
        </div>
      </div>
    </div>

    <!-- Budget Progress -->
    <app-budget-progress 
      [total]="budget.total" 
      [spent]="budget.spent" 
      [remaining]="budget.remaining"
      [percentage]="budget.percentage">
    </app-budget-progress>

    <!-- AI Suggestions -->
    <div class="suggestion-container">
      <div class="suggestion-title">
        <fa-icon [icon]="icons.faLightbulb"></fa-icon>
        <h2 class="section-title">同类更优选</h2>
      </div>
      
      @for (suggestion of suggestions; track suggestion.id) {
        <app-suggestion-item 
          [suggestion]="suggestion"
          (replace)="replaceSuggestion(suggestion.id)">
        </app-suggestion-item>
      }
    </div>

    <!-- History Section -->
    <div class="history-container">
      <h2 class="section-title">历史购买店铺</h2>
      <div class="history-grid">
        @for (historyItem of historyItems; track historyItem.id) {
          <app-history-item [item]="historyItem"></app-history-item>
        }
      </div>
    </div>

    <!-- Order Summary -->
    <div class="summary-container">
      <h2 class="section-title">订单摘要</h2>
      <div class="summary-item">
        <span>商品总额</span>
        <span>¥{{ orderSummary.subtotal.toFixed(2) }}</span>
      </div>
      <div class="summary-item">
        <span>配送费</span>
        <span>¥{{ orderSummary.delivery.toFixed(2) }}</span>
      </div>
      <div class="summary-item">
        <span>优惠减免</span>
        <span class="primary">-¥{{ orderSummary.discount.toFixed(2) }}</span>
      </div>
      <div class="summary-total">
        <span>实付金额</span>
        <span>¥{{ orderSummary.total.toFixed(2) }}</span>
      </div>
      <button class="checkout-btn" (click)="checkout()">
        结算订单
      </button>
    </div>
  </div>
</div>

<!-- Bottom Navigation -->
<div class="bottom-nav">
  <div class="nav-item">
    <fa-icon [icon]="icons.faHome"></fa-icon>
    <div>首页</div>
  </div>
  <div class="nav-item">
    <fa-icon [icon]="icons.faSearch"></fa-icon>
    <div>发现</div>
  </div>
  <div class="nav-item">
    <fa-icon [icon]="icons.faBookOpen"></fa-icon>
    <div>故事</div>
  </div>
  <div class="nav-item active">
    <fa-icon [icon]="icons.faShoppingCart"></fa-icon>
    <div>购物车</div>
  </div>
  <div class="nav-item">
    <fa-icon [icon]="icons.faUser"></fa-icon>
    <div>我的</div>
  </div>
</div>