<app-modal-backdrop
  [zIndex]="110"
  [ariaLabel]="'screenShare.qualityDialog.ariaClose' | translate"
  (dismissed)="cancelled.emit(undefined)"
/>

<div class="fixed inset-0 z-[111] flex items-center justify-center p-4 pointer-events-none">
  <div
    class="pointer-events-auto w-full max-w-2xl rounded-2xl border border-border bg-card shadow-2xl"
    (click)="$event.stopPropagation()"
    (keydown.enter)="$event.stopPropagation()"
    (keydown.space)="$event.stopPropagation()"
    role="dialog"
    aria-modal="true"
    tabindex="-1"
  >
    <div class="border-b border-border p-5">
      <h3 class="text-lg font-semibold text-foreground">{{ 'screenShare.qualityDialog.title' | translate }}</h3>
      <p class="mt-1 text-sm text-muted-foreground">
        {{ 'screenShare.qualityDialog.description' | translate }}
      </p>
      @if (includeSystemAudio()) {
        <p class="mt-3 rounded-lg bg-primary/10 px-3 py-2 text-xs text-primary">
          {{ 'screenShare.qualityDialog.systemAudioNote' | translate }}
        </p>
      }
    </div>

    <div class="grid gap-3 p-5 md:grid-cols-2">
      @for (option of qualityOptions; track option.id) {
        <button
          type="button"
          (click)="chooseQuality(option.id)"
          class="rounded-xl border px-4 py-4 text-left transition-colors"
          [class.border-primary]="activeQuality() === option.id"
          [class.bg-primary/10]="activeQuality() === option.id"
          [class.text-primary]="activeQuality() === option.id"
          [class.border-border]="activeQuality() !== option.id"
          [class.bg-secondary/30]="activeQuality() !== option.id"
          [class.text-foreground]="activeQuality() !== option.id"
        >
          <div class="flex items-start justify-between gap-3">
            <div>
              <p class="font-medium">{{ qualityLabel(option.id) }}</p>
              <p class="mt-1 text-sm text-muted-foreground">
                {{ qualityDescription(option.id) }}
              </p>
            </div>
            <span
              class="mt-0.5 inline-flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full border text-[10px]"
              [class.border-primary]="activeQuality() === option.id"
              [class.bg-primary]="activeQuality() === option.id"
              [class.text-primary-foreground]="activeQuality() === option.id"
              [class.border-border]="activeQuality() !== option.id"
            >
              @if (activeQuality() === option.id) {
                ✓
              }
            </span>
          </div>
        </button>
      }
    </div>

    <div class="flex items-center justify-end gap-2 border-t border-border p-4">
      <button
        type="button"
        (click)="cancelled.emit(undefined)"
        class="rounded-lg bg-secondary px-4 py-2 text-sm text-foreground transition-colors hover:bg-secondary/80"
      >
        {{ 'common.cancel' | translate }}
      </button>
      <button
        type="button"
        (click)="confirm()"
        class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
      >
        {{ 'screenShare.qualityDialog.startSharing' | translate }}
      </button>
    </div>
  </div>
</div>
