import { Component, computed, inject } from '@angular/core';
import { Router } from '@angular/router';
import { PageShellComponent } from '@shared/layout/page-shell/page-shell.component';
import { HeadingComponent } from '@shared/ui/heading/heading.component';
import { LinkComponent } from '@shared/ui/link/link.component';
import { AlertComponent } from '@shared/ui/alert/alert.component';
import { SkeletonComponent } from '@shared/ui/skeleton/skeleton.component';
import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
import { CardComponent } from '@shared/ui/card/card.component';
import { TaskListComponent } from '@shared/ui/task-list/task-list.component';
import { SideNavComponent, NavItem } from '@shared/layout/side-nav/side-nav.component';
import { ASYNC } from '@shared/ui/async/async.component';
import { RegistrationSummaryComponent } from '@registratie/ui/registration-summary/registration-summary.component';
import { RegistrationTableComponent } from '@registratie/ui/registration-table/registration-table.component';
import { AanvraagBlockComponent } from '@registratie/ui/aanvraag-block/aanvraag-block.component';
import { BigProfileStore } from '@registratie/application/big-profile.store';
import { ApplicationsStore } from '@registratie/application/applications.store';
import { Registration } from '@registratie/domain/registration';
import { Aanvraag, AanvraagType } from '@registratie/domain/aanvraag';
import { tasksFromProfile } from '@registratie/domain/tasks';

/** Page:"Mijn overzicht" — the portal home, following the NL Design System
"Mijn omgeving" pattern (side nav +"Wat moet ik regelen" +"Mijn zaken"). */
@Component({
  selector: 'app-dashboard-page',
  imports: [
    PageShellComponent, HeadingComponent, LinkComponent, AlertComponent, SkeletonComponent,
    DataRowComponent, CardComponent, TaskListComponent, SideNavComponent, ...ASYNC,
    RegistrationSummaryComponent, RegistrationTableComponent, AanvraagBlockComponent,
  ],
  template: `
    <app-page-shell i18n-heading="@@dashboard.heading" heading="Mijn overzicht" i18n-intro="@@dashboard.intro" intro="Welkom in uw persoonlijke omgeving van het BIG-register. Hier ziet u uw registratie en regelt u uw zaken.">
      <div class="app-overview">
        <app-side-nav [items]="nav" />

        <div class="app-stack">
          @if (aanvragen().length) {
            <section>
              <app-heading [level]="2" i18n="@@dashboard.mijnAanvragen">Mijn aanvragen</app-heading>
              <div class="app-stack app-section">
                @for (a of aanvragen(); track a.id) {
                  <app-aanvraag-block animate.enter="app-item-enter" animate.leave="app-item-leave" [aanvraag]="a" (resume)="resume(a)" (cancel)="cancelAanvraag(a)" />
                }
              </div>
            </section>
          }

          @if (store.pendingHerregistratie()) {
            <app-alert type="info" i18n="@@dashboard.pendingHerregistratie">Uw herregistratie-aanvraag is in behandeling.</app-alert>
          }

          <app-async [data]="store.profile()">
            <ng-template appAsyncLoaded let-p>
              @let tasks = tasksFor($any(p).registration);

              <section>
                <app-heading [level]="2" i18n="@@dashboard.watMoetIkRegelen">Wat moet ik regelen</app-heading>
                @if (tasks.length) {
                  <app-task-list class="app-section" [tasks]="tasks" />
                } @else {
                  <p class="app-text-subtle" i18n="@@dashboard.nietsOpenstaan">U heeft op dit moment niets openstaan.</p>
                }
              </section>

              <section>
                <app-heading [level]="2" i18n="@@dashboard.mijnRegistratie">Mijn registratie</app-heading>
                <div class="app-section">
                  <app-registration-summary [reg]="$any(p).registration" />
                </div>
                <app-card class="app-section" i18n-heading="@@dashboard.persoonsgegevens" heading="Persoonsgegevens (BRP)">
                  <dl>
                    <app-data-row i18n-key="@@dashboard.straat" key="Straat" [value]="$any(p).person.adres.straat" />
                    <app-data-row i18n-key="@@dashboard.postcode" key="Postcode" [value]="$any(p).person.adres.postcode" />
                    <app-data-row i18n-key="@@dashboard.woonplaats" key="Woonplaats" [value]="$any(p).person.adres.woonplaats" />
                  </dl>
                </app-card>
              </section>
            </ng-template>
            <ng-template appAsyncLoading>
              <app-skeleton height="2.5rem" [count]="6" />
            </ng-template>
          </app-async>

          <section>
            <app-heading [level]="2" i18n="@@dashboard.specialismen">Specialismen en aantekeningen</app-heading>
            <div class="app-section">
              <app-async [data]="store.aantekeningen()">
                <ng-template appAsyncLoaded let-r>
                  <app-registration-table [rows]="$any(r)" />
                </ng-template>
                <ng-template appAsyncLoading>
                  <app-skeleton height="2.5rem" [count]="3" />
                </ng-template>
                <ng-template appAsyncEmpty>
                  <p class="app-text-subtle" i18n="@@dashboard.geenSpecialismen">U heeft nog geen specialismen of aantekeningen.</p>
                </ng-template>
              </app-async>
            </div>
          </section>

          <section>
            <app-heading [level]="2" i18n="@@dashboard.watWiltUDoen">Wat wilt u doen?</app-heading>
            <ul class="app-card-grid app-section">
              @for (a of acties; track a.to) {
                <li>
                  <app-card [heading]="a.titel">
                    <p>{{ a.tekst }}</p>
                    <app-link [to]="a.to">{{ a.actie }} →</app-link>
                  </app-card>
                </li>
              }
            </ul>
          </section>
        </div>
      </div>
    </app-page-shell>
  `,
})
export class DashboardPage {
  protected store = inject(BigProfileStore);
  private apps = inject(ApplicationsStore);
  private router = inject(Router);

  constructor() {
    // Re-fetch on each visit so server-computed auto-approval transitions show up
    // (Concept → In behandeling → Goedgekeurd after the processing window).
    this.apps.reload();
  }

  /** The user's applications, sorted Concept → In behandeling → resolved. Empty →
      the"Mijn aanvragen" section is hidden (see template). */
  protected aanvragen = computed<Aanvraag[]>(() => {
    const rd = this.apps.applications();
    if (rd.tag !== 'Success') return [];
    const order: Record<Aanvraag['status']['tag'], number> = { Concept: 0, InBehandeling: 1, Goedgekeurd: 2, Afgewezen: 2 };
    return rd.value.slice().sort((a, b) => order[a.status.tag] - order[b.status.tag]);
  });

  private readonly resumeRoutes: Record<AanvraagType, string> = {
    registratie: '/registreren',
    herregistratie: '/herregistratie',
    intake: '/intake',
  };
  protected resume(a: Aanvraag) {
    void this.router.navigate([this.resumeRoutes[a.type]], { queryParams: { aanvraag: a.id } });
  }
  protected cancelAanvraag(a: Aanvraag) {
    void this.apps.cancel(a.id);
  }

  /** Server-computed eligibility (rendered, not recomputed). */
  private readonly eligible = computed(() => {
    const d = this.store.decisions();
    return d.tag === 'Success' && d.value.eligibleForHerregistratie;
  });

  protected tasksFor(reg: Registration) {
    return tasksFromProfile(reg, this.eligible());
  }

  /** Portal sections (navigation, not actions). */
  protected readonly nav: NavItem[] = [
    { label: $localize`:@@dashboard.nav.overzicht:Overzicht`, to: '/dashboard' },
    { label: $localize`:@@dashboard.nav.gegevens:Mijn gegevens`, to: '/registratie' },
    { label: $localize`:@@dashboard.nav.herregistratie:Herregistratie`, to: '/herregistratie' },
    { label: $localize`:@@dashboard.nav.inschrijven:Inschrijven`, to: '/registreren' },
    { label: $localize`:@@dashboard.nav.concepten:Functionele patronen`, to: '/concepts' },
    { label: $localize`:@@dashboard.nav.brief:Brief opstellen`, to: '/brief' },
  ];

  /** Primary transactional actions, as a card grid. */
  protected readonly acties = [
    { to: '/registreren', titel: $localize`:@@dashboard.actie.inschrijven.titel:Inschrijven`, tekst: $localize`:@@dashboard.actie.inschrijven.tekst:Schrijf u in in het BIG-register via de registratiewizard.`, actie: $localize`:@@dashboard.actie.inschrijven.actie:Start inschrijving` },
    { to: '/herregistratie', titel: $localize`:@@dashboard.actie.herregistratie.titel:Herregistratie aanvragen`, tekst: $localize`:@@dashboard.actie.herregistratie.tekst:Verleng uw registratie voor de komende periode.`, actie: $localize`:@@dashboard.actie.herregistratie.actie:Vraag aan` },
    { to: '/intake', titel: $localize`:@@dashboard.actie.intake.titel:Herregistratie-intake`, tekst: $localize`:@@dashboard.actie.intake.tekst:Vragenlijst met vertakkingen.`, actie: $localize`:@@dashboard.actie.intake.actie:Start intake` },
    { to: '/registratie', titel: $localize`:@@dashboard.actie.wijzigen.titel:Gegevens wijzigen`, tekst: $localize`:@@dashboard.actie.wijzigen.tekst:Bekijk uw gegevens of geef een wijziging door.`, actie: $localize`:@@dashboard.actie.wijzigen.actie:Bekijk gegevens` },
  ];
}
