import { Component, computed, input, output } from '@angular/core';
import { formatDatumNl } from '@shared/kernel/datum';
import { ButtonComponent } from '@shared/ui/atoms/button/button.component';
import { AlertComponent } from '@shared/ui/atoms/alert/alert.component';
import { Aanvraag } from '@registratie/domain/aanvraag';
import { TYPE_LABELS } from '@registratie/domain/aanvraag-view';
import { blockActions } from '@registratie/domain/block-actions';

/** Organism: a resumable Concept ("lopende aanvraag") on the dashboard, rendered as
    a CIBG "melding" (warning) with its actions — verwijderen as a link, aanvraag
    openen as a button. Which actions show is driven by the pure `blockActions(status)`;
    the block only renders. Submitted/resolved aanvragen are NOT rendered here — they
    render as CIBG "aanvragen" rows (see application-link + aanvraag-view). */
@Component({
  selector: 'app-aanvraag-block',
  imports: [ButtonComponent, AlertComponent],
  styles: [
    `
      .actions {
        display: flex;
        align-items: center;
        gap: var(--rhc-space-max-md);
        margin-block-start: var(--rhc-space-max-sm);
      }
    `,
  ],
  template: `
    @if (aanvraag().status.tag === 'Concept') {
      <app-alert type="warning">
        <h3 class="h5">{{ typeLabel() }}</h3>
        <p>{{ conceptText() }}</p>
        <div class="actions">
          @if (actions().includes('cancel')) {
            <app-button variant="subtle" (click)="cancel.emit()" i18n="@@aanvraagBlock.verwijderen"
              >Verwijderen</app-button
            >
          }
          @if (actions().includes('resume')) {
            <app-button (click)="resume.emit()" i18n="@@aanvraagBlock.openen"
              >Aanvraag openen</app-button
            >
          }
        </div>
      </app-alert>
    }
  `,
})
export class AanvraagBlockComponent {
  aanvraag = input.required<Aanvraag>();

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

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

  // ponytail: display-only deadline derived as createdAt + 30 dagen; move to a
  // server-sent `completeBefore` on the DTO when the expiry rule becomes real.
  private deadline = computed(() => {
    const d = new Date(this.aanvraag().createdAt);
    d.setDate(d.getDate() + 30);
    return d.toISOString();
  });

  /** The melding body for a Concept: wizard not finished + complete-before date. */
  protected conceptText = computed(() => {
    const s = this.aanvraag().status;
    if (s.tag !== 'Concept') return '';
    return $localize`:@@aanvraagBlock.conceptMelding:Deze aanvraag is nog niet volledig afgerond — u bent gebleven bij stap ${s.stepIndex + 1}:stap: van ${s.stepCount}:totaal:. Rond de aanvraag af vóór ${formatDatumNl(this.deadline())}:datum:.`;
  });
}