import { Component, computed, input, output } from '@angular/core';
import type { DeliveryChannel, DocumentCategory, Upload } from '@shared/upload/upload.machine';
import { DeliveryChannelToggleComponent } from '../delivery-channel-toggle/delivery-channel-toggle.component';
import { FileInputComponent } from '../file-input/file-input.component';
import { SingleUploadComponent } from '../single-upload/single-upload.component';

/** Organism: one document category (CIBG Bestand-upload) — its label/description, an
    optional delivery channel toggle, and (when digital) a validation message, the
    file picker/drop-zone, and the `ul.file-list` of uploads. Pure UI: emits
    selection/removal/retry/delete and channel changes; no HTTP or rules. */
@Component({
  selector: 'app-document-category',
  imports: [DeliveryChannelToggleComponent, FileInputComponent, SingleUploadComponent],
  styles: [
    `
      :host {
        display: block;
      }
      .label {
        font-weight: var(--rhc-text-font-weight-semi-bold);
        margin-block-end: var(--rhc-space-max-sm);
      }
      .req {
        font-weight: var(--rhc-text-font-weight-regular);
        color: var(--rhc-color-foreground-subtle);
      }
      .desc {
        color: var(--rhc-color-foreground-subtle);
        font-size: var(--rhc-text-font-size-sm);
        margin-block-end: var(--rhc-space-max-md);
      }
      .file-list {
        list-style: none;
        padding: 0;
        margin-block-start: var(--rhc-space-max-md);
      }
    `,
  ],
  template: `
    <div class="label">
      {{ category().label }}
      @if (category().required) {
        <span class="req" i18n="@@upload.category.required">(verplicht)</span>
      }
    </div>
    @if (category().description) {
      <div class="desc">{{ category().description }}</div>
    }

    @if (category().allowPostDelivery) {
      <app-delivery-channel-toggle
        [channel]="channel()"
        [name]="category().categoryId + '-channel'"
        (channelChange)="channelChange.emit($event)"
      />
    }

    @if (channel() === 'digital') {
      <!-- CIBG: validation sits ABOVE the upload block. -->
      @if (rejection()) {
        <div class="upload-validation">
          <div class="feedback feedback-warning" role="alert">{{ rejection() }}</div>
        </div>
      }

      <app-file-input
        [inputId]="category().categoryId + '-file'"
        [label]="fileInputLabel()"
        [accept]="category().acceptedTypes"
        [maxSizeMb]="category().maxSizeMb"
        [multiple]="category().multiple"
        (filesSelected)="fileSelected.emit($event)"
      />

      @if (uploads().length) {
        <ul class="file-list">
          @for (u of uploads(); track u.localId) {
            <li
              app-single-upload
              animate.enter="app-item-enter"
              animate.leave="app-item-leave"
              [upload]="u"
              [previewUrlFor]="previewUrlFor()"
              (remove)="onRemove(u)"
              (retry)="retryUpload.emit(u.localId)"
            ></li>
          }
        </ul>
      }
    }
  `,
})
export class DocumentCategoryComponent {
  category = input.required<DocumentCategory>();
  uploads = input.required<Upload[]>();
  channel = input.required<DeliveryChannel>();
  rejection = input<string>();
  previewUrlFor = input<(documentId: string) => string | undefined>();

  /** Accessible name for the file picker, e.g. "Bestand kiezen voor Diploma". */
  protected fileInputLabel = computed(
    () =>
      $localize`:@@upload.fileInput.labelFor:Bestand kiezen voor ${this.category().label}:category:`,
  );

  fileSelected = output<File[]>();
  removeUpload = output<string>();
  retryUpload = output<string>();
  deleteUpload = output<{ localId: string; documentId: string }>();
  channelChange = output<DeliveryChannel>();

  onRemove(u: Upload) {
    if (u.status.type === 'complete') {
      this.deleteUpload.emit({ localId: u.localId, documentId: u.status.documentId });
    } else {
      this.removeUpload.emit(u.localId);
    }
  }
}
