import { Component, inject, signal } from '@angular/core';
import { Router } from '@angular/router';
import { PageShellComponent } from '@shared/layout/page-shell/page-shell.component';
import { AlertComponent } from '@shared/ui/alert/alert.component';
import { LoginFormComponent } from '@auth/ui/login-form/login-form.component';
import { SessionStore } from '@auth/application/session.store';

@Component({
  selector: 'app-login-page',
  imports: [PageShellComponent, AlertComponent, LoginFormComponent],
  template: `
    <app-page-shell
      i18n-heading="@@login.heading"
      heading="Inloggen"
      width="narrow"
      i18n-intro="@@login.intro"
      intro="Log in op uw persoonlijke BIG-register omgeving."
    >
      @if (error()) {
        <app-alert type="error">{{ error() }}</app-alert>
      }
      <app-login-form (submitted)="login($event)" />
    </app-page-shell>
  `,
})
export class LoginPage {
  private store = inject(SessionStore);
  private router = inject(Router);
  error = signal('');

  async login(bsn: string) {
    const r = await this.store.login(bsn);
    if (r.ok) this.router.navigate(['/dashboard']);
    else this.error.set(r.error);
  }
}