import { Component, inject, input, output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FormFieldComponent } from '@shared/ui/form-field/form-field.component';
import { TextInputComponent } from '@shared/ui/text-input/text-input.component';
import { RadioGroupComponent } from '@shared/ui/radio-group/radio-group.component';
import { AlertComponent } from '@shared/ui/alert/alert.component';
import { SkeletonComponent } from '@shared/ui/skeleton/skeleton.component';
import { AddressFieldsComponent } from '@registratie/ui/address-fields/address-fields.component';
import { RegistratieLookupStore } from '@registratie/application/registratie-lookup.store';
import { Draft, DraftField, Errors } from '@registratie/domain/registratie-wizard.machine';

const KANALEN = [
  { value: 'email', label: $localize`:@@registratie.kanaalEmail:E-mail` },
  { value: 'post', label: $localize`:@@registratie.kanaalPost:Post` },
];

/** Step: the registratie wizard's first screen (adres + correspondentievoorkeur).
    Injects RegistratieLookupStore directly for the BRP lookup banner — the
    sanctioned exception (it is `providedIn: 'root'`, so every injection is the
    same instance): the step owns its own async presentation rather than making
    the parent a pass-through for it. Values otherwise in via `draft`/`errors`,
    every change out via `fieldChange`/`kanaalChange`. No internal state; the
    parent owns the Model and decides what a change means. */
@Component({
  selector: 'app-reg-adres-step',
  imports: [
    FormsModule,
    FormFieldComponent,
    TextInputComponent,
    RadioGroupComponent,
    AlertComponent,
    SkeletonComponent,
    AddressFieldsComponent,
  ],
  template: `
    @if (adresStatus() === 'laden') {
      <app-skeleton height="2.5rem" [count]="4" />
    } @else {
      @switch (adresStatus()) {
        @case ('gevonden') {
          <app-alert type="info" i18n="@@regWizard.brpGevonden"
            >Vooraf ingevuld op basis van de BRP. Controleer en pas zo nodig aan.</app-alert
          >
        }
        @case ('geen') {
          <app-alert type="warning" i18n="@@regWizard.brpGeen"
            >We vonden geen adres in de BRP. Vul uw adres hieronder handmatig in.</app-alert
          >
        }
        @case ('fout') {
          <app-alert type="warning" i18n="@@regWizard.brpFout"
            >We konden de BRP nu niet bereiken. Vul uw adres hieronder handmatig in.</app-alert
          >
        }
      }
      <app-address-fields
        [value]="{
          straat: draft().straat ?? '',
          postcode: draft().postcode ?? '',
          woonplaats: draft().woonplaats ?? '',
        }"
        [errors]="{
          straat: err('straat'),
          postcode: err('postcode'),
          woonplaats: err('woonplaats'),
        }"
        (fieldChange)="fieldChange.emit($event)"
      />
      <fieldset>
        <app-form-field
          i18n-label="@@regWizard.correspondentieLabel"
          label="Hoe wilt u correspondentie ontvangen?"
          fieldId="correspondentie"
          required
          [error]="err('correspondentie')"
        >
          <app-radio-group
            name="correspondentie"
            [options]="kanalen"
            [invalid]="!!err('correspondentie')"
            [ngModel]="draft().correspondentie ?? ''"
            (ngModelChange)="kanaalChange.emit($event)"
          />
        </app-form-field>
      </fieldset>
      @if (draft().correspondentie === 'email') {
        <fieldset>
          <app-form-field
            i18n-label="@@regWizard.emailLabel"
            label="E-mailadres"
            fieldId="email"
            required
            [error]="err('email')"
          >
            <app-text-input
              inputId="email"
              type="email"
              [invalid]="!!err('email')"
              [ngModel]="draft().email ?? ''"
              (ngModelChange)="fieldChange.emit({ key: 'email', value: $event })"
              name="email"
              i18n-placeholder="@@regWizard.emailPlaceholder"
              placeholder="naam@voorbeeld.nl"
            />
          </app-form-field>
        </fieldset>
      }
    }
  `,
})
export class AdresStep {
  private lookup = inject(RegistratieLookupStore);

  draft = input.required<Draft>();
  errors = input.required<Errors>();
  fieldChange = output<{ key: DraftField; value: string }>();
  kanaalChange = output<string>();

  protected adresStatus = this.lookup.adresStatus;
  readonly kanalen = KANALEN;
  protected err = (k: DraftField | 'correspondentie') => this.errors()[k] ?? '';
}