import { Component, computed, input, output } from '@angular/core';
import type { Upload } from '@shared/domain/upload.machine';
import { DocumentChipComponent } from '@shared/ui/atoms/upload/document-chip/document-chip.component';
import { UploadProgressBarComponent } from '@shared/ui/atoms/upload/upload-progress-bar/upload-progress-bar.component';

/** Molecule: one row in a CIBG Bestand-upload file list — a `.file-container` `<li>`
    with the `.file` block (via document-chip), the `.actions` (retry/remove), and a
    progress bar while uploading. Used on an `<li>` so `ul.file-list`'s direct child is
    a native `<li>`. Pure UI: emits `remove`/`retry`; the container decides what they mean. */
@Component({
  selector: 'li[app-single-upload]',
  host: { class: 'file-container' },
  imports: [DocumentChipComponent, UploadProgressBarComponent],
  styles: [
    `
      :host {
        flex-wrap: wrap;
        align-items: center;
      }
      .upload-progress {
        flex: 1 0 100%;
        margin-block-start: var(--rhc-space-max-sm);
      }
      .actions .btn {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
      }
      .actions .btn-retry {
        color: var(--rhc-color-foreground-link);
        text-decoration: underline;
        font: inherit;
      }
    `,
  ],
  template: `
    <app-document-chip
      [fileName]="upload().fileName"
      [status]="upload().status"
      [fileSizeMb]="upload().fileSizeMb"
      [previewUrl]="previewUrl()"
    />
    <div class="actions">
      @if (upload().status.type === 'failed') {
        <button
          type="button"
          class="btn btn-retry"
          [attr.aria-label]="retryLabel"
          (click)="retry.emit()"
          i18n="@@upload.chip.retry"
        >
          Opnieuw
        </button>
      }
      @if (upload().status.type !== 'deleting') {
        <button
          type="button"
          class="btn icon-remove"
          [attr.aria-label]="removeLabel"
          (click)="remove.emit()"
        ></button>
      }
    </div>
    @if (progressPct() !== null) {
      <app-upload-progress-bar class="upload-progress" [progressPct]="progressPct()!" />
    }
  `,
})
export class SingleUploadComponent {
  upload = input.required<Upload>();
  /** Builds a preview URL for a completed upload's documentId (undefined = no link). */
  previewUrlFor = input<(documentId: string) => string | undefined>();

  /** Narrow the status union once, in TS, so the template stays type-safe. */
  protected readonly progressPct = computed<number | null>(() => {
    const status = this.upload().status;
    return status.type === 'uploading' ? status.progressPct : null;
  });

  protected readonly previewUrl = computed<string | undefined>(() => {
    const status = this.upload().status;
    return status.type === 'complete' ? this.previewUrlFor()?.(status.documentId) : undefined;
  });

  remove = output<void>();
  retry = output<void>();

  protected get removeLabel(): string {
    return $localize`:@@upload.chip.removeAria:${this.upload().fileName}:fileName: verwijderen`;
  }
  protected get retryLabel(): string {
    return $localize`:@@upload.chip.retryAria:${this.upload().fileName}:fileName: opnieuw uploaden`;
  }
}