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 — its label/description, an optional delivery
    channel toggle, and (when digital) a file picker plus the 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); }
    .uploads { display: flex; flex-direction: column; gap: var(--rhc-space-max-md); margin-block-start: var(--rhc-space-max-md); }
    .rejection {
      color: var(--rhc-color-foreground-default);
      font-weight: var(--rhc-text-font-weight-semi-bold);
      margin-block-start: var(--rhc-space-max-sm);
      border-inline-start: var(--rhc-border-width-md) solid var(--rhc-color-rood-500);
      padding-inline-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') {
      <app-file-input
        [inputId]="category().categoryId + '-file'"
        [label]="fileInputLabel()"
        [accept]="category().acceptedTypes"
        [multiple]="category().multiple"
        (filesSelected)="fileSelected.emit($event)" />

      <div class="uploads">
        @for (u of uploads(); track u.localId) {
          <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)" />
        }
      </div>

      @if (rejection()) {
        <div class="rejection" role="alert">{{ rejection() }}</div>
      }
    }
  `,
})
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);
    }
  }
}
