<!-- eslint-disable @angular-eslint/template/button-has-type, @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus, @angular-eslint/template/prefer-ngsrc -->
@if (galleryAttachments()) {
  <app-modal-backdrop
    [zIndex]="100"
    [ariaLabel]="'chat.overlays.closeGalleryAria' | translate"
    (dismissed)="closeGallery()"
  />
  <div class="pointer-events-none fixed inset-0 z-[101] flex items-center justify-center p-4">
    <div
      class="pointer-events-auto relative flex max-h-[90vh] w-full max-w-3xl flex-col overflow-hidden rounded-xl border border-border bg-card shadow-2xl"
      (click)="$event.stopPropagation()"
    >
      <div class="flex items-center justify-between border-b border-border px-4 py-3">
        <div>
          <h2 class="text-sm font-semibold text-foreground">{{ 'chat.overlays.viewImages' | translate }}</h2>
          <p class="text-xs text-muted-foreground">
            {{ 'chat.overlays.imageCount' | translate: { count: galleryAttachments()!.length } }}
          </p>
        </div>
        <button
          type="button"
          (click)="closeGallery()"
          class="grid h-8 w-8 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
          [title]="'chat.overlays.close' | translate"
          [attr.aria-label]="'chat.overlays.closeGalleryAria' | translate"
        >
          <ng-icon
            name="lucideX"
            class="h-4 w-4"
          />
        </button>
      </div>
      <div class="overflow-y-auto p-4">
        <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
          @for (attachment of galleryAttachments(); track attachment.id) {
            <button
              type="button"
              class="group/gallery relative aspect-square overflow-hidden rounded-md bg-secondary/40"
              [attr.aria-label]="openImageAriaLabel(attachment.filename)"
              (click)="openGalleryImage(attachment)"
              (contextmenu)="openImageContextMenu($event, attachment)"
            >
              <img
                [src]="attachment.objectUrl"
                [alt]="attachment.filename"
                class="h-full w-full object-cover transition-transform duration-200 group-hover/gallery:scale-[1.02]"
              />
              <div class="pointer-events-none absolute inset-0 bg-black/0 transition-colors group-hover/gallery:bg-black/15"></div>
            </button>
          }
        </div>
      </div>
    </div>
  </div>
}

@if (lightboxAttachment()) {
  <app-modal-backdrop
    [zIndex]="109"
    [ariaLabel]="'chat.overlays.closePreviewAria' | translate"
    (dismissed)="closeLightbox()"
  />
  <div class="pointer-events-none fixed inset-0 z-[110] flex items-center justify-center p-4">
    <div
      class="lightbox-stage pointer-events-auto relative max-h-[90vh] max-w-[90vw]"
      [class.lightbox-chrome-hidden]="!lightboxControlsVisible()"
      (click)="$event.stopPropagation()"
      (contextmenu)="openImageContextMenu($event, lightboxAttachment()!)"
    >
      @if (canShowPreviousLightboxImage()) {
        <button
          type="button"
          (click)="showPreviousLightboxImage()"
          class="lightbox-chrome absolute left-0 top-1/2 z-10 grid h-10 w-10 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full bg-black/60 text-white backdrop-blur-sm transition-colors hover:bg-black/80"
          [title]="'chat.overlays.previousImage' | translate"
          [attr.aria-label]="'chat.overlays.previousImage' | translate"
        >
          <ng-icon
            name="lucideChevronLeft"
            class="h-5 w-5"
          />
        </button>
      }

      <img
        [src]="lightboxAttachment()!.objectUrl"
        [alt]="lightboxAttachment()!.filename"
        class="max-h-[90vh] max-w-[90vw] rounded-lg object-contain shadow-2xl"
        (contextmenu)="openImageContextMenu($event, lightboxAttachment()!); $event.stopPropagation()"
      />

      @if (canShowNextLightboxImage()) {
        <button
          type="button"
          (click)="showNextLightboxImage()"
          class="lightbox-chrome absolute right-0 top-1/2 z-10 grid h-10 w-10 -translate-y-1/2 translate-x-1/2 place-items-center rounded-full bg-black/60 text-white backdrop-blur-sm transition-colors hover:bg-black/80"
          [title]="'chat.overlays.nextImage' | translate"
          [attr.aria-label]="'chat.overlays.nextImage' | translate"
        >
          <ng-icon
            name="lucideChevronRight"
            class="h-5 w-5"
          />
        </button>
      }

      <div class="lightbox-chrome absolute right-3 top-3 flex gap-2">
        <button
          type="button"
          (click)="downloadAttachment(lightboxAttachment()!)"
          class="grid h-9 w-9 place-items-center rounded-lg bg-black/60 text-white backdrop-blur-sm transition-colors hover:bg-black/80"
          [title]="'chat.overlays.download' | translate"
        >
          <ng-icon
            name="lucideDownload"
            class="h-5 w-5"
          />
        </button>
        <button
          type="button"
          (click)="closeLightbox()"
          class="grid h-9 w-9 place-items-center rounded-lg bg-black/60 text-white backdrop-blur-sm transition-colors hover:bg-black/80"
          [title]="'chat.overlays.close' | translate"
          [attr.aria-label]="'chat.overlays.closePreviewAria' | translate"
        >
          <ng-icon
            name="lucideX"
            class="h-5 w-5"
          />
        </button>
      </div>
      <div class="lightbox-chrome absolute bottom-3 left-3 right-3 flex items-center justify-between gap-3">
        <div class="rounded-lg bg-black/60 px-3 py-1.5 backdrop-blur-sm">
          <span class="text-sm text-white">{{ lightboxAttachment()!.filename }}</span>
          <span class="ml-2 text-xs text-white/60">{{ formatBytes(lightboxAttachment()!.size) }}</span>
        </div>
        @if (lightboxPositionLabel()) {
          <div class="rounded-lg bg-black/60 px-3 py-1.5 text-sm text-white backdrop-blur-sm">
            {{ lightboxPositionLabel() }}
          </div>
        }
      </div>
    </div>
  </div>
}

@if (imageContextMenu()) {
  <app-context-menu
    [x]="imageContextMenu()!.positionX"
    [y]="imageContextMenu()!.positionY"
    (closed)="closeImageContextMenu()"
  >
    <button
      (click)="copyImageToClipboard(imageContextMenu()!.attachment); closeImageContextMenu()"
      class="context-menu-item-icon"
    >
      <ng-icon
        name="lucideCopy"
        class="h-4 w-4 text-muted-foreground"
      />
      {{ 'chat.overlays.copyImage' | translate }}
    </button>
    <button
      (click)="downloadAttachment(imageContextMenu()!.attachment); closeImageContextMenu()"
      class="context-menu-item-icon"
    >
      <ng-icon
        name="lucideDownload"
        class="h-4 w-4 text-muted-foreground"
      />
      {{ 'chat.overlays.saveImage' | translate }}
    </button>
  </app-context-menu>
}
