import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { PageShellComponent } from '../../templates/page-shell/page-shell.component';
import { AlertComponent } from '../../atoms/alert/alert.component';
import { ButtonComponent } from '../../atoms/button/button.component';
import { FormFieldComponent } from '../../molecules/form-field/form-field.component';
import { TextInputComponent } from '../../atoms/text-input/text-input.component';

/** A whole new page built from existing building blocks — no new components.
    This is the atomic-design payoff: a new flow is just composition. */
@Component({
  selector: 'app-herregistratie-page',
  imports: [
    FormsModule, PageShellComponent, AlertComponent,
    ButtonComponent, FormFieldComponent, TextInputComponent,
  ],
  template: `
    <app-page-shell heading="Herregistratie aanvragen" backLink="/dashboard">
      <app-alert type="info">
        Uw huidige registratie verloopt op 1 september 2027. Vraag tijdig herregistratie aan.
      </app-alert>

      @if (submitted()) {
        <div style="margin-top:1.5rem">
          <app-alert type="ok">Uw aanvraag tot herregistratie is ontvangen.</app-alert>
        </div>
      } @else {
        <form (ngSubmit)="onSubmit()" style="max-width:28rem;margin-top:1.5rem">
          <app-form-field label="Gewerkte uren (afgelopen 5 jaar)" fieldId="uren" [error]="urenError()">
            <app-text-input inputId="uren" [(ngModel)]="uren" name="uren" [invalid]="!!urenError()" placeholder="bijv. 4160" />
          </app-form-field>
          <app-form-field label="Behaalde nascholingspunten" fieldId="punten">
            <app-text-input inputId="punten" [(ngModel)]="punten" name="punten" placeholder="bijv. 200" />
          </app-form-field>
          <div style="margin-top:1rem">
            <app-button type="submit" variant="primary">Herregistratie aanvragen</app-button>
          </div>
        </form>
      }
    </app-page-shell>
  `,
})
export class HerregistratiePage {
  uren = '';
  punten = '';
  urenError = signal('');
  submitted = signal(false);

  onSubmit() {
    if (!this.uren.trim()) { this.urenError.set('Vul het aantal gewerkte uren in.'); return; }
    this.urenError.set('');
    this.submitted.set(true);
  }
}