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

// CIBG-GAP EXTENSION: Aanvragen (non-navigating row) — the vendored
// `.dashboard-block.applications li a` chain only styles `<a>`; `.static-row`
// mirrors it from tokens for the non-navigating case, see cibg-gaps.mdx.
/** Molecule: one row in a CIBG Huisstijl "aanvragen" list
    (designsystem.cibg.nl/componenten/aanvragen) — a white card-link styled by the
    vendored `.dashboard-block.applications li a` chain (bg, chevron, link-blue `h3`),
    with an optional `.subtitle`/`.status`/`.cta`. Used on an `<li>` so the `<ul>`'s
    direct child is a native `<li>` (keeps the list axe-clean — a bare custom element
    between `<ul>` and its `<li>` trips axe's list rule regardless of `display:contents`).
    A non-navigating row renders a `<div>` (the vendored chain only styles `<a>`, so
    that surface is mirrored from tokens). A `[applicationActions]` slot projects a
    sibling action after the anchor — a button can't nest inside the anchor itself. */
@Component({
  selector: 'li[app-application-link]',
  imports: [RouterLink, NgTemplateOutlet],
  styles: [
    `
      /* The vendored .applications li a surface only styles <a>; mirror it from tokens
       for a non-navigating (informational) row so the card looks consistent. */
      .static-row {
        display: flex;
        background: var(--rhc-color-wit);
        border-block-end: 0.065rem solid var(--rhc-color-border-subtle);
        padding: 0.75rem 2rem 0.75rem 1rem;
      }
      .content {
        flex: 1 1 auto;
        min-inline-size: 0;
      }
      .cta {
        margin-inline-start: auto;
        align-self: center;
      }
    `,
  ],
  template: `
    @if (to()) {
      <a [routerLink]="to()"><ng-container [ngTemplateOutlet]="body" /></a>
    } @else if (clickable()) {
      <a href="#" (click)="onActivate($event)"><ng-container [ngTemplateOutlet]="body" /></a>
    } @else {
      <div class="static-row"><ng-container [ngTemplateOutlet]="body" /></div>
    }
    <ng-content select="[applicationActions]" />
    <ng-template #body>
      <div class="content">
        <h3 class="h3">{{ heading() }}</h3>
        @if (subtitle()) {
          <div class="subtitle">{{ subtitle() }}</div>
        }
        @if (status()) {
          <div class="status">{{ status() }}</div>
        }
      </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();
  }
}
