import { Component, OnInit, inject, signal } from '@angular/core';
import { Router } from '@angular/router';
import { ApiService } from '../../core/api.service';
import { I18nService } from '../../core/i18n.service';
import { KioskService } from '../../core/kiosk.service';
import { ChildSummary } from '../../core/models';

/**
 * Pantalla de entrada del kiosko: "¿QUIÉN ENTRA HOY?". Tarjetas grandes por niño
 * con mascota, nombre y monedero. Al elegir, entra a su día (Home).
 *
 * Nota: el selector de edad ± del prototipo era un control de demo. La edad es un
 * dato que gestionan los padres, así que aquí se muestra como chip de solo lectura;
 * su edición vive en el panel de padres (Fase 5).
 */
@Component({
  selector: 'app-profile-select',
  imports: [],
  templateUrl: './profile-select.component.html',
  styleUrl: './profile-select.component.scss',
})
export class ProfileSelectComponent implements OnInit {
  private readonly api = inject(ApiService);
  private readonly router = inject(Router);
  private readonly kiosk = inject(KioskService);
  protected readonly i18n = inject(I18nService);

  protected readonly children = signal<ChildSummary[]>([]);
  protected readonly loading = signal(true);
  protected readonly error = signal(false);

  ngOnInit(): void {
    this.api.getChildren().subscribe({
      next: (list) => {
        this.children.set(list);
        this.loading.set(false);
      },
      error: () => {
        this.error.set(true);
        this.loading.set(false);
      },
    });
  }

  /** Entra al día del niño. Aprovecha el gesto para pedir pantalla completa. */
  enter(child: ChildSummary): void {
    this.i18n.setLang(child.language);
    this.kiosk.enterFullscreen();
    this.router.navigate(['/home', child.id]);
  }

  openParents(): void {
    this.router.navigate(['/parents']);
  }
}