import { Component, computed, input, output } from '@angular/core';
import { ButtonComponent } from '@shared/ui/button/button.component';
import { ApplicationLinkComponent } from '@shared/ui/application-link/application-link.component';
import { Aanvraag, AanvraagType } from '@registratie/domain/aanvraag';
import { blockActions } from '@registratie/domain/block-actions';

const TYPE_LABELS: Record<AanvraagType, string> = {
  registratie: $localize`:@@aanvraagBlock.type.registratie:Inschrijving`,
  herregistratie: $localize`:@@aanvraagBlock.type.herregistratie:Herregistratie`,
  intake: $localize`:@@aanvraagBlock.type.intake:Herregistratie-intake`,
};

/** Organism: one application on the dashboard's "Mijn aanvragen" list, rendered as
    a CIBG Huisstijl "aanvragen" row (application-link). Which text/actions it shows
    is driven by the pure `blockActions(status)` and the status tag; the block only
    renders. Only a resumable Concept is clickable — a resolved status has nothing
    to navigate to, so it renders as a plain (non-anchor) row. */
@Component({
  selector: 'app-aanvraag-block',
  imports: [ButtonComponent, ApplicationLinkComponent],
  // display:contents — see application-link.component.ts (keeps <li> a direct <ul> child).
  styles: [`:host{display:contents}`],
  template: `
    <app-application-link
      [heading]="typeLabel()"
      [status]="statusText()"
      [subtitle]="subtitle()"
      [cta]="actions().includes('resume') ? verderGaan : ''"
      [clickable]="actions().includes('resume')"
      (activate)="resume.emit()">
      @if (actions().includes('cancel')) {
        <div applicationActions>
          <app-button variant="subtle" (click)="cancel.emit()" i18n="@@aanvraagBlock.annuleren">Annuleren</app-button>
        </div>
      }
    </app-application-link>
  `,
})
export class AanvraagBlockComponent {
  aanvraag = input.required<Aanvraag>();

  resume = output<void>();
  cancel = output<void>();

  protected readonly verderGaan = $localize`:@@aanvraagBlock.verderGaan:Verder gaan`;

  protected typeLabel = computed(() => TYPE_LABELS[this.aanvraag().type]);
  protected actions = computed(() => blockActions(this.aanvraag().status));

  // Status-tag → row text (the UI's mapping, not a domain rule).
  protected statusText = computed(() => {
    const s = this.aanvraag().status;
    switch (s.tag) {
      case 'Concept': return $localize`:@@aanvraagBlock.stap:Stap ${s.stepIndex + 1}:index: van ${s.stepCount}:count:`;
      case 'InBehandeling': return $localize`:@@aanvraagBlock.inBehandeling:Referentie ${s.referentie}:ref: · ingediend op ${formatNL(this.aanvraag().submittedAt)}:datum:`;
      case 'Goedgekeurd': return $localize`:@@aanvraagBlock.goedgekeurd:Referentie ${s.referentie}:ref:`;
      case 'Afgewezen': return $localize`:@@aanvraagBlock.afgewezen:Referentie ${s.referentie}:ref:`;
    }
  });
  // Secondary note under the status line, when there's one to show.
  protected subtitle = computed(() => {
    const s = this.aanvraag().status;
    if (s.tag === 'InBehandeling' && s.manual) return $localize`:@@aanvraagBlock.manual:Uw aanvraag wordt handmatig beoordeeld in de backoffice.`;
    if (s.tag === 'Afgewezen') return s.reden;
    return '';
  });
}

function formatNL(iso?: string): string {
  return iso ? new Date(iso).toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' }) : '';
}