import { Component, input } from '@angular/core';
import { DatePipe } from '@angular/common';
import { Registration } from '@registratie/domain/registration';
import { statusColor, statusLabel } from '@registratie/domain/registration.policy';
import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
import { StatusBadgeComponent } from '@shared/ui/status-badge/status-badge.component';
import { CardComponent } from '@shared/ui/card/card.component';

/** Organism: registration summary card. Composes data-row molecules + status-badge atom. */
@Component({
  selector: 'app-registration-summary',
  imports: [DatePipe, DataRowComponent, StatusBadgeComponent, CardComponent],
  template: `
    <app-card>
      <dl class="rhc-data-summary rhc-data-summary--row">
        <app-data-row i18n-key="@@summary.bigNummer" key="BIG-nummer" [value]="reg().bigNummer" />
        <app-data-row i18n-key="@@summary.naam" key="Naam" [value]="reg().naam" />
        <app-data-row i18n-key="@@summary.beroep" key="Beroep" [value]="reg().beroep" />
        <app-data-row i18n-key="@@summary.status" key="Status">
          <app-status-badge [label]="label()" [color]="color()" />
        </app-data-row>
        <app-data-row i18n-key="@@summary.registratiedatum" key="Registratiedatum" [value]="reg().registratiedatum | date:'longDate'" />
        <!-- Each status variant renders only the row its own data supports. -->
        @switch (reg().status.tag) {
          @case ('Geregistreerd') {
            <app-data-row i18n-key="@@summary.uiterste" key="Uiterste herregistratie" [value]="$any(reg().status).herregistratieDatum | date:'longDate'" />
          }
          @case ('Geschorst') {
            <app-data-row i18n-key="@@summary.geschorstTot" key="Geschorst tot" [value]="$any(reg().status).geschorstTot | date:'longDate'" />
            <app-data-row i18n-key="@@summary.reden" key="Reden" [value]="$any(reg().status).reden" />
          }
          @case ('Doorgehaald') {
            <app-data-row i18n-key="@@summary.doorgehaaldOp" key="Doorgehaald op" [value]="$any(reg().status).doorgehaaldOp | date:'longDate'" />
            <app-data-row i18n-key="@@summary.reden" key="Reden" [value]="$any(reg().status).reden" />
          }
        }
      </dl>
    </app-card>
  `,
})
export class RegistrationSummaryComponent {
  reg = input.required<Registration>();
  protected label = () => statusLabel(this.reg().status.tag);
  protected color = () => statusColor(this.reg().status.tag);
}