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/molecules/data-row/data-row.component';
import { StatusBadgeComponent } from '@shared/ui/atoms/status-badge/status-badge.component';
import { DataBlockComponent } from '@shared/ui/molecules/data-block/data-block.component';

/** Organism: registration summary in a CIBG Datablock. Composes data-row rows +
    status-badge atom (no card wrapper — the datablock carries its own surface). */
@Component({
  selector: 'app-registration-summary',
  imports: [DatePipe, DataRowComponent, StatusBadgeComponent, DataBlockComponent],
  template: `
    <app-data-block i18n-ariaLabel="@@summary.ariaLabel" ariaLabel="Registratiegegevens">
      <div
        app-data-row
        i18n-key="@@summary.bigNummer"
        key="BIG-nummer"
        [value]="reg().bigNummer"
      ></div>
      <div app-data-row i18n-key="@@summary.naam" key="Naam" [value]="reg().naam"></div>
      <div app-data-row i18n-key="@@summary.beroep" key="Beroep" [value]="reg().beroep"></div>
      <div app-data-row i18n-key="@@summary.status" key="Status">
        <app-status-badge [label]="label()" [color]="color()" />
      </div>
      <div
        app-data-row
        i18n-key="@@summary.registratiedatum"
        key="Registratiedatum"
        [value]="reg().registratiedatum | date: 'longDate'"
      ></div>
      <!-- Each status variant renders only the row its own data supports. A single
           @let binds status once so the @switch narrows its union by tag -- calling
           reg().status again per case would give the checker a fresh, unnarrowed call. -->
      @let status = reg().status;
      @switch (status.tag) {
        @case ('Geregistreerd') {
          <div
            app-data-row
            i18n-key="@@summary.uiterste"
            key="Uiterste herregistratie"
            [value]="status.herregistratieDatum | date: 'longDate'"
          ></div>
        }
        @case ('Geschorst') {
          <div
            app-data-row
            i18n-key="@@summary.geschorstTot"
            key="Geschorst tot"
            [value]="status.geschorstTot | date: 'longDate'"
          ></div>
          <div app-data-row i18n-key="@@summary.reden" key="Reden" [value]="status.reden"></div>
        }
        @case ('Doorgehaald') {
          <div
            app-data-row
            i18n-key="@@summary.doorgehaaldOp"
            key="Doorgehaald op"
            [value]="status.doorgehaaldOp | date: 'longDate'"
          ></div>
          <div app-data-row i18n-key="@@summary.reden" key="Reden" [value]="status.reden"></div>
        }
      }
    </app-data-block>
  `,
})
export class RegistrationSummaryComponent {
  reg = input.required<Registration>();
  protected label = () => statusLabel(this.reg().status.tag);
  protected color = () => statusColor(this.reg().status.tag);
}