<app-card>
  <h3 class="title">{{ 'CALC.RESULT' | translate }}</h3>
  
  <!-- Summary Grid (NOW ON TOP) -->
  <div class="result-grid">
    <app-summary-card 
      class="item full-width" 
      [label]="'CALC.COST' | translate" 
      [large]="true" 
      [highlight]="true">
      {{ totals().price | currency:result().currency }}
    </app-summary-card>

    <app-summary-card [label]="'CALC.TIME' | translate">
      {{ totals().hours }}h {{ totals().minutes }}m
    </app-summary-card>

    <app-summary-card [label]="'CALC.MATERIAL' | translate">
      {{ totals().weight }}g
    </app-summary-card>
  </div>

  <div class="setup-note">
    <small>* Include {{ result().setupCost | currency:result().currency }} Setup Cost</small>
  </div>

  @if (result().notes) {
    <div class="notes-section">
        <label>{{ 'CALC.NOTES' | translate }}:</label>
        <p>{{ result().notes }}</p>
    </div>
  }

  <div class="divider"></div>
  
  <!-- Detailed Items List (NOW ON BOTTOM) -->
  <div class="items-list">
    @for (item of items(); track item.fileName; let i = $index) {
      <div class="item-row">
        <div class="item-info">
          <span class="file-name">{{ item.fileName }}</span>
          <span class="file-details">
             {{ (item.unitTime / 3600) | number:'1.1-1' }}h | {{ item.unitWeight | number:'1.0-0' }}g
          </span>
        </div>
        
        <div class="item-controls">
            <div class="qty-control">
                <label>Qtà:</label>
                <input 
                    type="number" 
                    min="1" 
                    [ngModel]="item.quantity" 
                    (ngModelChange)="updateQuantity(i, $event)"
                    class="qty-input">
            </div>
            <div class="item-price">
                {{ (item.unitPrice * item.quantity) | currency:result().currency }}
            </div>
        </div>
      </div>
    }
  </div>

  <div class="actions">
    <app-button variant="outline" (click)="consult.emit()">
      {{ 'QUOTE.CONSULT' | translate }}
    </app-button>
    
    <app-button (click)="proceed.emit()">
        {{ 'QUOTE.PROCEED_ORDER' | translate }}
    </app-button>
  </div>
</app-card>
