<div class="max-w-3xl space-y-5">
  <!-- Devices -->
  <section>
    <div class="flex items-center gap-2 mb-3">
      <ng-icon
        name="lucideMic"
        class="w-5 h-5 text-muted-foreground"
      />
      <h4 class="text-sm font-semibold text-foreground">'settings.voice.devices.title' | translate</h4>
    </div>
    <div class="space-y-3">
      <div>
        <label
          for="input-device-select"
          class="block text-xs font-medium text-muted-foreground mb-1"
          >{{ 'settings.voice.devices.microphone' | translate }}</label
        >
        <select
          (change)="onInputDeviceChange($event)"
          id="input-device-select"
          class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary"
        >
          @for (device of inputDevices(); track device.deviceId) {
            <option
              [value]="device.deviceId"
              [selected]="device.deviceId === selectedInputDevice()"
            >
              {{ device.label || ('settings.voice.devices.microphoneFallback' | translate: { index: $index }) }}
            </option>
          }
        </select>
      </div>
      <div>
        <label
          for="output-device-select"
          class="block text-xs font-medium text-muted-foreground mb-1"
          >{{ 'settings.voice.devices.speaker' | translate }}</label
        >
        <select
          (change)="onOutputDeviceChange($event)"
          id="output-device-select"
          class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary"
        >
          @for (device of outputDevices(); track device.deviceId) {
            <option
              [value]="device.deviceId"
              [selected]="device.deviceId === selectedOutputDevice()"
            >
              {{ device.label || ('settings.voice.devices.speakerFallback' | translate: { index: $index }) }}
            </option>
          }
        </select>
      </div>
    </div>
  </section>

  <!-- Volume -->
  <section>
    <div class="flex items-center gap-2 mb-3">
      <ng-icon
        name="lucideHeadphones"
        class="w-5 h-5 text-muted-foreground"
      />
      <h4 class="text-sm font-semibold text-foreground">{{ 'settings.voice.volume.title' | translate }}</h4>
    </div>
    <div class="space-y-3">
      <div>
        <label
          for="input-volume-slider"
          class="block text-xs font-medium text-muted-foreground mb-1"
        >
          {{ 'settings.voice.volume.input' | translate: { value: inputVolume() } }}
        </label>
        <input
          type="range"
          [value]="inputVolume()"
          (input)="onInputVolumeChange($event)"
          min="0"
          max="100"
          id="input-volume-slider"
          class="w-full h-1.5 bg-secondary rounded-lg appearance-none cursor-pointer accent-primary"
        />
      </div>
      <div>
        <label
          for="output-volume-slider"
          class="block text-xs font-medium text-muted-foreground mb-1"
        >
          {{ 'settings.voice.volume.output' | translate: { value: outputVolume() } }}
        </label>
        <input
          type="range"
          [value]="outputVolume()"
          (input)="onOutputVolumeChange($event)"
          min="0"
          max="200"
          id="output-volume-slider"
          class="w-full h-1.5 bg-secondary rounded-lg appearance-none cursor-pointer accent-primary"
        />
      </div>
      <div>
        <label
          for="notification-volume-slider"
          class="block text-xs font-medium text-muted-foreground mb-1"
        >
          {{ 'settings.voice.volume.notification' | translate: { value: notificationVolumePercent() } }}
        </label>
        <div class="flex items-center gap-2">
          <input
            type="range"
            [value]="audioService.notificationVolume()"
            (input)="onNotificationVolumeChange($event)"
            min="0"
            max="1"
            step="0.01"
            id="notification-volume-slider"
            class="flex-1 h-1.5 bg-secondary rounded-lg appearance-none cursor-pointer accent-primary"
          />
          <button
            (click)="previewNotificationSound()"
            type="button"
            class="px-2.5 py-1 text-xs bg-secondary text-foreground rounded-lg hover:bg-secondary/80 transition-colors flex-shrink-0"
            [title]="'settings.voice.volume.previewAria' | translate"
          >
            Test
          </button>
        </div>
        <p class="text-[10px] text-muted-foreground/60 mt-1">{{ 'settings.voice.volume.notificationHint' | translate }}</p>
      </div>
    </div>
  </section>

  <!-- Quality & Processing -->
  <section>
    <div class="flex items-center gap-2 mb-3">
      <ng-icon
        name="lucideAudioLines"
        class="w-5 h-5 text-muted-foreground"
      />
      <h4 class="text-sm font-semibold text-foreground">{{ 'settings.voice.quality.title' | translate }}</h4>
    </div>
    <div class="space-y-3">
      <div>
        <label
          for="latency-profile-select"
          class="block text-xs font-medium text-muted-foreground mb-1"
          >{{ 'settings.voice.quality.latencyProfile' | translate }}</label
        >
        <select
          (change)="onLatencyProfileChange($event)"
          id="latency-profile-select"
          class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary"
        >
          <option
            value="low"
            [selected]="latencyProfile() === 'low'"
          >
            Low (fast)
          </option>
          <option
            value="balanced"
            [selected]="latencyProfile() === 'balanced'"
          >
            Balanced
          </option>
          <option
            value="high"
            [selected]="latencyProfile() === 'high'"
          >
            High (quality)
          </option>
        </select>
      </div>
      <div>
        <label
          for="audio-bitrate-slider"
          class="block text-xs font-medium text-muted-foreground mb-1"
        >
          {{ 'settings.voice.quality.audioBitrate' | translate: { value: audioBitrate() } }}
        </label>
        <input
          type="range"
          [value]="audioBitrate()"
          (input)="onAudioBitrateChange($event)"
          min="32"
          max="256"
          step="8"
          id="audio-bitrate-slider"
          class="w-full h-1.5 bg-secondary rounded-lg appearance-none cursor-pointer accent-primary"
        />
      </div>
      <div>
        <label
          for="screen-share-quality-select"
          class="block text-xs font-medium text-muted-foreground mb-1"
          >{{ 'settings.voice.quality.screenShareQuality' | translate }}</label
        >
        <select
          (change)="onScreenShareQualityChange($event)"
          id="screen-share-quality-select"
          class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary"
        >
          @for (option of screenShareQualityOptions(); track option.id) {
            <option
              [value]="option.id"
              [selected]="screenShareQuality() === option.id"
            >
              {{ option.label }}
            </option>
          }
        </select>
        <p class="text-[10px] text-muted-foreground/60 mt-1">
          {{ selectedScreenShareQualityDescription() }}
        </p>
      </div>
      <div class="flex items-center justify-between">
        <div>
          <p class="text-sm font-medium text-foreground">{{ 'settings.voice.quality.askScreenShare.label' | translate }}</p>
          <p class="text-xs text-muted-foreground">{{ 'settings.voice.quality.askScreenShare.description' | translate }}</p>
        </div>
        <label class="relative inline-flex items-center cursor-pointer">
          <input
            type="checkbox"
            [checked]="askScreenShareQuality()"
            (change)="onAskScreenShareQualityChange($event)"
            id="ask-screen-share-quality-toggle"
            [attr.aria-label]="'settings.voice.quality.askScreenShare.aria' | translate"
            class="sr-only peer"
          />
          <div
            class="w-10 h-5 bg-secondary rounded-full peer peer-checked:bg-primary peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"
          ></div>
        </label>
      </div>
      <div class="flex items-center justify-between">
        <div>
          <p class="text-sm font-medium text-foreground">{{ 'settings.voice.quality.noiseReduction.label' | translate }}</p>
          <p class="text-xs text-muted-foreground">{{ 'settings.voice.quality.noiseReduction.description' | translate }}</p>
        </div>
        <label class="relative inline-flex items-center cursor-pointer">
          <input
            type="checkbox"
            [checked]="noiseReduction()"
            (change)="onNoiseReductionChange()"
            id="noise-reduction-toggle"
            [attr.aria-label]="'settings.voice.quality.noiseReduction.aria' | translate"
            class="sr-only peer"
          />
          <div
            class="w-10 h-5 bg-secondary rounded-full peer peer-checked:bg-primary peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"
          ></div>
        </label>
      </div>
      <div class="flex items-center justify-between">
        <div>
          <p class="text-sm font-medium text-foreground">{{ 'settings.voice.quality.systemAudio.label' | translate }}</p>
          <p class="text-xs text-muted-foreground">{{ 'settings.voice.quality.systemAudio.description' | translate }}</p>
        </div>
        <label class="relative inline-flex items-center cursor-pointer">
          <input
            type="checkbox"
            [checked]="includeSystemAudio()"
            (change)="onIncludeSystemAudioChange($event)"
            id="system-audio-toggle"
            [attr.aria-label]="'settings.voice.quality.systemAudio.aria' | translate"
            class="sr-only peer"
          />
          <div
            class="w-10 h-5 bg-secondary rounded-full peer peer-checked:bg-primary peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"
          ></div>
        </label>
      </div>
      <p class="text-[10px] text-muted-foreground/60 -mt-1">
        {{ 'settings.voice.quality.systemAudio.hint' | translate }}
      </p>
    </div>
  </section>

  @if (isElectron) {
    <section>
      <div class="flex items-center gap-2 mb-3">
        <ng-icon
          name="lucideCpu"
          class="w-5 h-5 text-muted-foreground"
        />
        <h4 class="text-sm font-semibold text-foreground">{{ 'settings.voice.desktopPerformance.title' | translate }}</h4>
      </div>
      <div class="space-y-3">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm font-medium text-foreground">{{ 'settings.voice.desktopPerformance.hardwareAcceleration.label' | translate }}</p>
            <p class="text-xs text-muted-foreground">{{ 'settings.voice.desktopPerformance.hardwareAcceleration.description' | translate }}</p>
          </div>
          <label class="relative inline-flex items-center cursor-pointer">
            <input
              type="checkbox"
              [checked]="hardwareAcceleration()"
              (change)="onHardwareAccelerationChange($event)"
              id="hardware-acceleration-toggle"
              [attr.aria-label]="'settings.voice.desktopPerformance.hardwareAcceleration.aria' | translate"
              class="sr-only peer"
            />
            <div
              class="w-10 h-5 bg-secondary rounded-full peer peer-checked:bg-primary peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"
            ></div>
          </label>
        </div>

        @if (hardwareAccelerationRestartRequired()) {
          <div class="rounded-lg border border-primary/30 bg-primary/10 p-3 flex items-center justify-between gap-3">
            <div>
              <p class="text-sm font-medium text-foreground">{{ 'settings.voice.desktopPerformance.restartRequired.title' | translate }}</p>
              <p class="text-xs text-muted-foreground">{{ 'settings.voice.desktopPerformance.restartRequired.description' | translate }}</p>
            </div>
            <button
              type="button"
              (click)="restartDesktopApp()"
              class="px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors"
            >
              Restart app
            </button>
          </div>
        }
      </div>
    </section>
  }
</div>
