<div class="container hero">
  <h1>{{ 'CHECKOUT.TITLE' | translate }}</h1>
  <p class="subtitle">{{ 'CHECKOUT.SUBTITLE' | translate }}</p>
</div>

<div class="container">
  <div class="checkout-layout">
    
    <!-- LEFT COLUMN: Form -->
    <div class="checkout-form-section">
      <!-- Error Message -->
      <div *ngIf="error" class="error-message">
        {{ error }}
      </div>

      <form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()" *ngIf="!error">
        
        <!-- Contact Info Card -->
        <app-card class="mb-6">
          <div class="form-row">
            <app-input formControlName="email" type="email" [label]="'CHECKOUT.EMAIL' | translate" [required]="true" [error]="checkoutForm.get('email')?.hasError('email') ? 'Invalid email' : null"></app-input>
            <app-input formControlName="phone" type="tel" [label]="'CHECKOUT.PHONE' | translate" [required]="true"></app-input>
          </div>

          <div class="user-type-selector">
            <div class="type-option" [class.selected]="!isCompany" (click)="setCustomerType(false)">
              {{ 'CHECKOUT.PRIVATE' | translate }}
            </div>
            <div class="type-option" [class.selected]="isCompany" (click)="setCustomerType(true)">
              {{ 'CHECKOUT.COMPANY' | translate }}
            </div>
          </div>

          <div formGroupName="billingAddress">
            <div *ngIf="isCompany" class="company-fields">
              <app-input formControlName="companyName" [label]="'CHECKOUT.COMPANY_NAME' | translate" [required]="true"></app-input>
              <div class="form-row no-margin">
                <app-input formControlName="firstName" [label]="'CHECKOUT.FIRST_NAME' | translate" [required]="true"></app-input>
                <app-input formControlName="lastName" [label]="'CHECKOUT.LAST_NAME' | translate" [required]="true"></app-input>
              </div>
            </div>
            
            <div *ngIf="!isCompany" class="form-row no-margin">
              <app-input formControlName="firstName" [label]="'CHECKOUT.FIRST_NAME' | translate" [required]="true"></app-input>
              <app-input formControlName="lastName" [label]="'CHECKOUT.LAST_NAME' | translate" [required]="true"></app-input>
            </div>
          </div>
        </app-card>

        <!-- Billing Address Card -->
        <app-card class="mb-6">
          <div class="card-header-simple">
            <h3>{{ 'CHECKOUT.BILLING_ADDR' | translate }}</h3>
          </div>
          <div formGroupName="billingAddress">
            <app-input formControlName="addressLine1" [label]="'CHECKOUT.ADDRESS_1' | translate" [required]="true"></app-input>
            <app-input formControlName="addressLine2" [label]="'CHECKOUT.ADDRESS_2' | translate"></app-input>

            <div class="form-row three-cols">
              <app-input formControlName="zip" [label]="'CHECKOUT.ZIP' | translate" [required]="true"></app-input>
              <app-input formControlName="city" [label]="'CHECKOUT.CITY' | translate" class="city-field" [required]="true"></app-input>
              <app-input formControlName="countryCode" [label]="'CHECKOUT.COUNTRY' | translate" [disabled]="true" [required]="true"></app-input>
            </div>
          </div>
        </app-card>

        <!-- Shipping Option -->
        <div class="shipping-option">
          <label class="checkbox-container">
            <input type="checkbox" formControlName="shippingSameAsBilling">
            <span class="checkmark"></span>
            {{ 'CHECKOUT.SHIPPING_SAME' | translate }}
          </label>
        </div>

        <!-- Shipping Address Card (Conditional) -->
        <app-card *ngIf="!checkoutForm.get('shippingSameAsBilling')?.value" class="mb-6">
           <div class="card-header-simple">
            <h3>{{ 'CHECKOUT.SHIPPING_ADDR' | translate }}</h3>
          </div>
          <div formGroupName="shippingAddress">
             <div class="form-row">
              <app-input formControlName="firstName" [label]="'CHECKOUT.FIRST_NAME' | translate"></app-input>
              <app-input formControlName="lastName" [label]="'CHECKOUT.LAST_NAME' | translate"></app-input>
            </div>
            
            <app-input formControlName="companyName" [label]="'CHECKOUT.COMPANY_NAME' | translate"></app-input>
            <app-input formControlName="addressLine1" [label]="'CHECKOUT.ADDRESS_1' | translate"></app-input>
            
            <div class="form-row three-cols">
              <app-input formControlName="zip" [label]="'CHECKOUT.ZIP' | translate"></app-input>
              <app-input formControlName="city" [label]="'CHECKOUT.CITY' | translate" class="city-field"></app-input>
              <app-input formControlName="countryCode" [label]="'CHECKOUT.COUNTRY' | translate" [disabled]="true"></app-input>
            </div>
          </div>
        </app-card>

        <div class="actions">
          <app-button type="submit" [disabled]="checkoutForm.invalid || isSubmitting()" [fullWidth]="true">
            {{ (isSubmitting() ? 'CHECKOUT.PROCESSING' : 'CHECKOUT.PLACE_ORDER') | translate }}
          </app-button>
        </div>

      </form>
    </div>

    <!-- RIGHT COLUMN: Order Summary -->
    <div class="checkout-summary-section">
      <app-card class="sticky-card">
        <div class="card-header-simple">
          <h3>{{ 'CHECKOUT.ORDER_SUMMARY' | translate }}</h3>
        </div>
        
        <div class="summary-items" *ngIf="quoteSession() as session">
           <div class="summary-item" *ngFor="let item of session.items">
             <div class="item-details">
               <span class="item-name">{{ item.originalFilename }}</span>
               <div class="item-specs">
                 <span>Qty: {{ item.quantity }}</span> 
                 <span *ngIf="item.colorCode" class="color-dot" [style.background-color]="item.colorCode"></span>
               </div>
               <div class="item-specs-sub">
                 {{ (item.printTimeSeconds / 3600) | number:'1.1-1' }}h | {{ item.materialGrams | number:'1.0-0' }}g
               </div>
             </div>
             <div class="item-price">
               {{ (item.unitPriceChf * item.quantity) | currency:'CHF' }}
             </div>
           </div>
        </div>

        <div class="summary-totals" *ngIf="quoteSession() as session">
          <div class="total-row">
            <span>{{ 'CHECKOUT.SUBTOTAL' | translate }}</span>
            <span>{{ session.itemsTotalChf | currency:'CHF' }}</span>
          </div>
          <div class="total-row">
            <span>{{ 'CHECKOUT.SETUP_FEE' | translate }}</span>
            <span>{{ session.session.setupCostChf | currency:'CHF' }}</span>
          </div>
          <div class="total-row">
            <span>{{ 'CHECKOUT.SHIPPING' | translate }}</span>
            <span>{{ 9.0 | currency:'CHF' }}</span>
          </div>
          <div class="grand-total-row">
            <span>{{ 'CHECKOUT.TOTAL' | translate }}</span>
            <span>{{ (session.grandTotalChf + 9.0) | currency:'CHF' }}</span>
          </div>
        </div>
      </app-card>
    </div>

  </div>
</div>
