import { Component, computed, input, output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FormFieldComponent } from '@shared/ui/molecules/form-field/form-field.component';
import { TextInputComponent } from '@shared/ui/atoms/text-input/text-input.component';
import { RadioGroupComponent, JA_NEE } from '@shared/ui/atoms/radio-group/radio-group.component';
import { Answers, Errors, lageUren } from '@herregistratie/domain/intake.machine';

/** Step: the intake wizard's second screen (work experience in the Netherlands,
    with the inline scholing follow-up). Pure & presentational — values in via
    `answers`/`errors`/`scholingThreshold`, every keystroke out via `answerChange`.
    No store, no services, no internal state; the parent owns the Model and
    decides what a change means. */
@Component({
  selector: 'app-intake-werk-step',
  imports: [FormsModule, FormFieldComponent, TextInputComponent, RadioGroupComponent],
  template: `
    <fieldset>
      <app-form-field
        i18n-label="@@intake.q.urenNl"
        label="Gewerkte uren in Nederland (afgelopen 5 jaar)"
        fieldId="uren"
        required
        [error]="err('uren')"
      >
        <app-text-input
          inputId="uren"
          [ngModel]="answers().uren ?? ''"
          (ngModelChange)="answerChange.emit({ key: 'uren', value: $event })"
          name="uren"
          i18n-placeholder="@@intake.q.urenNlPlaceholder"
          placeholder="bijv. 4160"
        />
      </app-form-field>
    </fieldset>
    @if (scholingZichtbaar()) {
      <fieldset>
        <app-form-field
          i18n-label="@@intake.q.scholing"
          label="U werkte relatief weinig uren. Heeft u aanvullende scholing gevolgd?"
          fieldId="scholingGevolgd"
          required
          [error]="err('scholingGevolgd')"
        >
          <app-radio-group
            name="scholingGevolgd"
            [options]="jaNee"
            [ngModel]="answers().scholingGevolgd ?? ''"
            (ngModelChange)="answerChange.emit({ key: 'scholingGevolgd', value: $event })"
          />
        </app-form-field>
      </fieldset>
    }
    @if (answers().scholingGevolgd === 'ja') {
      <fieldset>
        <app-form-field
          i18n-label="@@intake.q.punten"
          label="Behaalde nascholingspunten"
          fieldId="punten"
          required
          [error]="err('punten')"
        >
          <app-text-input
            inputId="punten"
            [ngModel]="answers().punten ?? ''"
            (ngModelChange)="answerChange.emit({ key: 'punten', value: $event })"
            name="punten"
            i18n-placeholder="@@intake.q.puntenPlaceholder"
            placeholder="bijv. 200"
          />
        </app-form-field>
      </fieldset>
    }
  `,
})
export class WerkStep {
  answers = input.required<Answers>();
  errors = input.required<Errors>();
  scholingThreshold = input.required<number>();
  answerChange = output<{ key: keyof Answers; value: string }>();

  readonly jaNee = JA_NEE;
  protected err = (k: keyof Answers) => this.errors()[k] ?? '';
  protected scholingZichtbaar = computed(() => lageUren(this.answers(), this.scholingThreshold()));
}