import { Component, input, output } from '@angular/core';
import type { UploadStatus } from '@shared/upload/upload.machine';
import { UploadStatusIconComponent } from '../upload-status-icon/upload-status-icon.component';

/** Atom: a single uploaded-file chip — filename + status glyph + actions. Pure UI:
    emits `remove`/`retry`; the container decides what they mean. */
@Component({
  selector: 'app-document-chip',
  imports: [UploadStatusIconComponent],
  styles: [`
    :host {
      display: inline-flex;
      align-items: center;
      gap: var(--rhc-space-max-md);
      padding-block: var(--rhc-space-max-sm);
      padding-inline: var(--rhc-space-max-md);
      border: var(--rhc-border-width-sm) solid var(--rhc-color-border-subtle);
      border-radius: var(--rhc-border-radius-md);
      background: var(--rhc-color-cool-grey-100);
    }
    .name { flex: 1; }
    .action {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      color: var(--rhc-color-foreground-link);
      font: inherit;
      text-decoration: underline;
    }
    .action:hover { color: var(--rhc-color-foreground-link-hover); }
    a.action { display: inline-block; }
  `],
  template: `
    <app-upload-status-icon [status]="status().type" />
    <span class="name">{{ fileName() }}</span>
    @if (previewUrl()) {
      <a class="action" [href]="previewUrl()" target="_blank" rel="noopener" [attr.aria-label]="previewLabel">
        <span i18n="@@upload.chip.preview">Voorbeeld / Download</span>
      </a>
    }
    @if (status().type === 'failed') {
      <button type="button" class="action" [attr.aria-label]="retryLabel" (click)="retry.emit()">
        <span i18n="@@upload.chip.retry">Opnieuw</span>
      </button>
    }
    @if (status().type !== 'deleting') {
      <button type="button" class="action" [attr.aria-label]="removeLabel" (click)="remove.emit()">
        <span i18n="@@upload.chip.remove">Verwijderen</span>
      </button>
    }
  `,
})
export class DocumentChipComponent {
  fileName = input.required<string>();
  status = input.required<UploadStatus>();
  /** When set, show a preview/download link (opens the stored bytes). */
  previewUrl = input<string>();

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

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