import { Component, input, output } from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import { RouterLink } from '@angular/router';

/** Molecule: one row in a CIBG Huisstijl "aanvragen" list — `<li><a class="application">`
    with a title, optional subtitle/status/cta (see application-list.component.ts).
    Renders a plain (non-interactive) row when there's nothing to navigate to — the
    chevron/hover styling only applies to the `<a>`. A `[applicationActions]` slot
    projects a sibling action (e.g. "Annuleren") after the anchor — a button can't
    nest inside the anchor itself. */
@Component({
  selector: 'app-application-link',
  imports: [RouterLink, NgTemplateOutlet],
  // display:contents so the <li> becomes a real DOM/accessibility-tree child of the
  // parent <ul> — a wrapper host between them can break list semantics for AT.
  styles: [`:host{display:contents}`],
  template: `
    <li>
      @if (to()) {
        <a class="application" [routerLink]="to()"><ng-container [ngTemplateOutlet]="body" /></a>
      } @else if (clickable()) {
        <a href="#" class="application" (click)="onActivate($event)"><ng-container [ngTemplateOutlet]="body" /></a>
      } @else {
        <div><ng-container [ngTemplateOutlet]="body" /></div>
      }
      <ng-content select="[applicationActions]" />
    </li>
    <ng-template #body>
      <h3 class="application-title">{{ heading() }}</h3>
      @if (subtitle()) { <div class="subtitle">{{ subtitle() }}</div> }
      @if (status()) { <div class="status">{{ status() }}</div> }
      @if (cta()) { <div class="cta">{{ cta() }}</div> }
    </ng-template>
  `,
})
export class ApplicationLinkComponent {
  heading = input.required<string>();
  subtitle = input('');
  status = input('');
  cta = input('');
  /** Set for a plain routerLink navigation (e.g. the "Wat wilt u doen?" actions). */
  to = input('');
  /** Set when the row navigates imperatively (e.g. resume with query params) — the
      row still renders as a clickable `<a>`, but `activate` decides what happens. */
  clickable = input(false);
  activate = output<void>();

  protected onActivate(ev: Event) {
    ev.preventDefault(); // fragment href resolves against <base href>, not the route
    this.activate.emit();
  }
}
