<div class="w-full h-full relative">
  <model-viewer
    #modelViewer
    class="absolute inset-0 w-full h-full"
    src="models/untitled.glb"
    ar
    ar-interaction="false" 
    ar-modes="webxr" 
    ar-placement="ceiling" 
    reveal="manual"
    [scale]="scale + ' ' + scale + ' ' + scale"
    camera-orbit="0deg 75deg 2m">

    <button 
      id="ar-button-position"
      slot="ar-button"
      (click)="logInteraction($event)"
      class="absolute top-4 left-1/2 -translate-x-1/2 bg-blue-500 text-white py-2 px-4 rounded-lg z-10">
      WebXR Umgebung laden
    </button>

    <div
      class="ar-controls absolute bottom-24 left-1/2 -translate-x-1/2 bg-black bg-opacity-60 p-5 rounded-xl flex flex-col items-center space-y-4 text-white z-10"
      [class.opacity-50]="!isModelPlaced">
      
      <!-- Slider 1: Scale -->
      <div class="flex flex-col items-start w-64">
        <label for="scale-slider" class="text-sm font-medium mb-1">Skalierung</label>
        <input 
          id="scale-slider" 
          type="range" 
          min="0.5" 
          max="2.5" 
          step="0.01" 
          [(ngModel)]="scale"
          (input)="onSliderInput(); logInteraction($event)" 
          [disabled]="!isModelPlaced"
          class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />
        <span class="text-xs mt-1">{{ scale.toFixed(2) }}×</span>
      </div>

      <!-- Slider 2: Height -->
      <div class="flex flex-col items-start w-64">
        <label for="offset-slider" class="text-sm font-medium mb-1">Höhe verschieben</label>
        <input 
          id="offset-slider" 
          type="range" 
          min="-1.5" 
          max="3.5" 
          step="0.01" 
          [(ngModel)]="verticalOffset"
          (input)="onSliderInput(); logInteraction($event)" 
          [disabled]="!isModelPlaced"
          class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />
        <span class="text-xs mt-1">{{ verticalOffset >= 0 ? '+' : '' }}{{ verticalOffset.toFixed(2) }}m</span>
      </div>

      <!-- Buttons Row -->
      <div class="flex space-x-4 justify-center">
        <button 
          id="reset-position-btn"
          (click)="resetPosition(); logInteraction($event)" 
          [disabled]="!isModelPlaced"
          class="bg-gray-600 text-white py-2 px-4 rounded-lg disabled:opacity-50">
          Reset
        </button>
        <button 
          id="confirm-placement-btn"
          (click)="confirmPlacement(); logInteraction($event)" 
          [disabled]="!isModelPlaced"
          class="bg-green-600 text-white py-2 px-4 rounded-lg disabled:opacity-50">
          Position bestätigen
        </button>
      </div>
    </div>
  </model-viewer>
</div>