import { Component, 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 { ButtonComponent } from '@shared/ui/button/button.component';

/** Organism: DigiD-style mock login. No real auth — just composes atoms/molecules. */
@Component({
  selector: 'app-login-form',
  imports: [FormsModule, FormFieldComponent, TextInputComponent, ButtonComponent],
  template: `
    <form (ngSubmit)="submitted.emit(bsn)" class="form-horizontal">
      <div class="form-header">
        <div class="form-action">
          <span class="meta" i18n="@@form.verplichteVelden">* verplichte velden</span>
        </div>
      </div>

      <app-form-field
        i18n-label="@@login.bsnLabel"
        label="BSN"
        fieldId="bsn"
        required
        i18n-description="@@login.bsnDescription"
        description="9 cijfers (demo: vul iets in)"
      >
        <app-text-input
          inputId="bsn"
          hasDescription
          [(ngModel)]="bsn"
          name="bsn"
          placeholder="123456789"
        />
      </app-form-field>

      <app-form-field i18n-label="@@login.wachtwoordLabel" label="Wachtwoord" fieldId="pw" required>
        <app-text-input inputId="pw" type="password" [(ngModel)]="password" name="pw" />
      </app-form-field>

      <app-button type="submit" variant="primary" i18n="@@login.submit"
        >Inloggen met DigiD</app-button
      >
    </form>
  `,
})
export class LoginFormComponent {
  bsn = '';
  password = '';
  submitted = output<string>();
}