import { Component, computed, inject } from '@angular/core';
import { HeadingComponent } from '@shared/ui/atoms/heading/heading.component';
import { ApplicationListComponent } from '@shared/ui/molecules/application-list/application-list.component';
import { ApplicationLinkComponent } from '@shared/ui/molecules/application-link/application-link.component';
import { AccessStore } from '@shared/application/access.store';
import { HEADER_ADMIN_LINKS } from '@shared/layout/site-header/nav-config';

/** Section: "Beheer" — the admin pages the current principal may reach, capability-
    gated (never role-derived), the same source + filter the site header uses.
    Empty for a non-admin → the section renders nothing (see the page). */
@Component({
  selector: 'app-beheer-links-section',
  imports: [HeadingComponent, ApplicationListComponent, ApplicationLinkComponent],
  template: `
    @if (adminLinks().length) {
      <section>
        <app-heading [level]="2" i18n="@@dashboard.beheer">Beheer</app-heading>
        <app-application-list class="app-section">
          @for (link of adminLinks(); track link.to) {
            <li
              app-application-link
              [heading]="link.label"
              [subtitle]="link.description"
              [to]="link.to"
            ></li>
          }
        </app-application-list>
      </section>
    }
  `,
})
export class BeheerLinksSection {
  private access = inject(AccessStore);
  private rawAdminLinks = inject(HEADER_ADMIN_LINKS);
  protected adminLinks = computed(() => this.rawAdminLinks.filter((l) => this.access.can(l.cap)));
}