<section class="media-page">
  <div class="media-page__dashboard">
    <app-dashboard-metric labelKey="mediaLibrary.totalAssets" [value]="totalAssets().toString()" />
    <app-dashboard-metric labelKey="mediaLibrary.typeImage" [value]="imagesCount().toString()" />
    <app-dashboard-metric labelKey="mediaLibrary.typeSvg" [value]="svgCount().toString()" />
    <app-dashboard-metric labelKey="mediaLibrary.logos" [value]="logosCount().toString()" />
    <app-dashboard-metric labelKey="mediaLibrary.unused" [value]="unusedCount().toString()" />
    <app-dashboard-metric labelKey="mediaLibrary.storageUsed" [value]="formatSize(storageBytes())" />
    <app-dashboard-metric labelKey="mediaLibrary.altCoverage" [value]="altCoveragePercent() + '%'" />
  </div>

  <div class="media-page__toolbar">
    <h2>{{ 'mediaLibrary.title' | translate }}</h2>
    <div class="media-page__toolbar-actions">
      <app-input
        [ngModel]="facade.search()"
        (ngModelChange)="facade.setSearch($event)"
        [placeholder]="'mediaLibrary.searchPlaceholder' | translate"
      />
      <app-select [options]="kindOptions()" [ngModel]="facade.kind() || 'all'" (ngModelChange)="setKind($event)" [ariaLabel]="'mediaLibrary.allTypes' | translate" />
      <app-select [options]="sortOptions()" [ngModel]="facade.sort()" (ngModelChange)="setSort($event)" [ariaLabel]="'mediaLibrary.sortRecent' | translate" />
      <div class="media-page__view-toggle" role="group" [attr.aria-label]="'mediaLibrary.viewMode' | translate">
        <app-button variant="ghost" size="sm" [attr.aria-pressed]="facade.viewMode() === 'grid'" (click)="setViewMode('grid')">{{ 'mediaLibrary.viewGrid' | translate }}</app-button>
        <app-button variant="ghost" size="sm" [attr.aria-pressed]="facade.viewMode() === 'list'" (click)="setViewMode('list')">{{ 'mediaLibrary.viewList' | translate }}</app-button>
      </div>
      <input
        #fileInput
        type="file"
        accept="image/jpeg,image/png,image/webp,image/gif,image/svg+xml,application/pdf"
        multiple
        hidden
        (change)="onFileSelected($event)"
      />
      <app-button variant="primary" [loading]="facade.uploading()" (click)="triggerFileInput()">
        {{ (facade.uploading() ? 'mediaLibrary.uploading' : 'mediaLibrary.upload') | translate }}
      </app-button>
      @if (facade.uploading()) {
        <app-button variant="ghost" size="sm" (click)="facade.cancelUpload()">{{ 'mediaLibrary.cancelUpload' | translate }}</app-button>
      }
    </div>
  </div>

  <div
    class="media-page__dropzone"
    [class.media-page__dropzone--active]="dragActive()"
    (dragover)="onDragOver($event)"
    (dragleave)="onDragLeave()"
    (drop)="onDrop($event)"
  >
    <p>{{ 'mediaLibrary.dropHint' | translate }}</p>
  </div>

  @if (facade.error()) {
    <p class="media-page__error">
      {{ friendlyUploadError(facade.error()) }}
      @if (facade.canRetry()) {
        <app-button variant="secondary" size="sm" (click)="facade.retryUpload()">{{ 'mediaLibrary.retry' | translate }}</app-button>
      }
    </p>
  }

  @if (facade.selectedIds().size > 0) {
    <div class="media-page__bulk-bar">
      <span>{{ facade.selectedIds().size }} {{ 'mediaLibrary.selectedCount' | translate }}</span>
      <app-button variant="secondary" size="sm" (click)="bulkDownload()">{{ 'mediaLibrary.download' | translate }}</app-button>
      <app-button variant="secondary" size="sm" (click)="bulkExportMetadata()">{{ 'mediaLibrary.exportMetadata' | translate }}</app-button>
      <app-button variant="danger" size="sm" (click)="bulkDelete()">{{ 'mediaLibrary.bulkDelete' | translate }}</app-button>
      <app-button variant="ghost" size="sm" (click)="facade.clearSelection()">{{ 'mediaLibrary.clearSelection' | translate }}</app-button>
    </div>
  }

  @if (facade.loading()) {
    <div class="media-page__grid">
      @for (i of [1, 2, 3, 4, 5, 6]; track i) {
        <app-skeleton shape="rect" height="140px" />
      }
    </div>
  } @else if (facade.items().length === 0) {
    <app-empty-state
      [title]="'mediaLibrary.emptyTitle' | translate"
      [description]="'mediaLibrary.emptyDescription' | translate"
    >
      <span slot="actions">
        <app-button variant="primary" (click)="triggerFileInput()">{{ 'mediaLibrary.upload' | translate }}</app-button>
      </span>
    </app-empty-state>
    <p class="media-page__guide">{{ 'mediaLibrary.guideCopy' | translate }}</p>
  } @else {
    <div class="media-page__grid" [class.media-page__grid--list]="facade.viewMode() === 'list'">
      @for (asset of facade.items(); track asset.id) {
        <app-asset-tile
          [asset]="asset"
          [layout]="facade.viewMode()"
          [selected]="facade.isSelected(asset.id)"
          [usageCount]="usageCountFor(asset)"
          [isUnused]="isUnused(asset)"
          [missingAlt]="missingAlt(asset)"
          (open)="openDetails(asset)"
          (toggleSelected)="facade.toggleSelect(asset.id, $event)"
          (remove)="confirmDelete(asset)"
        />
      }
    </div>

    @if (totalPages() > 1) {
      <app-pagination [currentPage]="facade.page()" [totalPages]="totalPages()" (pageChange)="facade.setPage($event)" />
    }
  }

  <app-asset-details-drawer
    [asset]="detailsAsset()"
    [usages]="detailsUsages()"
    (close)="closeDetails()"
    (save)="saveDetails($event)"
    (remove)="detailsAsset() && confirmDelete(detailsAsset()!)"
  />

  <app-dialog
    [open]="!!pendingDelete()"
    [titleText]="'mediaLibrary.deleteConfirmTitle' | translate"
    size="sm"
    (closed)="cancelDelete()"
  >
    <p>{{ 'mediaLibrary.deleteConfirmBody' | translate }}</p>
    <div class="media-page__dialog-actions">
      <app-button variant="secondary" (click)="cancelDelete()">{{ 'mediaLibrary.cancel' | translate }}</app-button>
      <app-button variant="danger" (click)="proceedDelete()">{{ 'mediaLibrary.confirm' | translate }}</app-button>
    </div>
  </app-dialog>

  <app-dialog
    [open]="bulkDeleteConfirmOpen()"
    [titleText]="'mediaLibrary.deleteConfirmTitle' | translate"
    size="sm"
    (closed)="bulkDeleteConfirmOpen.set(false)"
  >
    <p>{{ 'mediaLibrary.bulkDeleteConfirm' | translate }}</p>
    <div class="media-page__dialog-actions">
      <app-button variant="secondary" (click)="bulkDeleteConfirmOpen.set(false)">{{ 'mediaLibrary.cancel' | translate }}</app-button>
      <app-button variant="danger" (click)="proceedBulkDelete()">{{ 'mediaLibrary.confirm' | translate }}</app-button>
    </div>
  </app-dialog>
</section>
