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

/** Molecule: one choice in a CIBG Huisstijl "keuzelijst" — `<li><div class="keuzelijst__link">`
    with a title and optional instructions (see choice-list.component.ts). Renders a
    plain (non-interactive) block when there's nothing to navigate to.

    The title is a Bootstrap "stretched-link" (`.stretched-link`, vendored) rather than
    the whole box being an `<a>`: a `[choiceActions]` slot needs to project a sibling
    action (e.g. "Annuleren") *inside* the same card, and a `<button>` can't nest
    inside an `<a>` (invalid HTML, broken a11y). stretched-link keeps the entire card
    clickable via its `::after` overlay; the projected action sits above that overlay
    (see its own `position:relative;z-index:2` at the call site) so it stays clickable.

    Unlike the "aanvragen" pattern's `.applications li a::after` (scoped to the `a`
    tag), CIBG's `.keuzelijst__link:after`/`:hover`/`:focus` rules key off the bare
    class — keuzelijst assumes every item IS a link — so a non-interactive row would
    otherwise inherit the chevron and hover accent too. The `--static` modifier below
    suppresses both for that case. `:focus-within` restores the focus accent that
    `:focus` would have given the (no longer directly focused) card. */
@Component({
  selector: 'app-choice-link',
  imports: [RouterLink],
  styles: [
    `
      :host {
        display: contents;
      }
      .keuzelijst__link {
        position: relative;
      }
      .keuzelijst__link:focus-within {
        background-color: var(--rhc-color-cool-grey-100);
        box-shadow: inset 4px 0 0 0 var(--rhc-color-lintblauw-500);
      }
      .keuzelijst__link--static::after {
        content: none;
      }
      .keuzelijst__link--static:hover {
        background-color: var(--rhc-color-cool-grey-200);
        box-shadow: none;
      }
    `,
  ],
  template: `
    <li class="keuzelijst__list-item">
      <div class="keuzelijst__link" [class.keuzelijst__link--static]="!to() && !clickable()">
        <h3 class="keuzelijst__header">
          @if (to()) {
            <a class="stretched-link" [routerLink]="to()">{{ heading() }}</a>
          } @else if (clickable()) {
            <a class="stretched-link" href="#" (click)="onActivate($event)">{{ heading() }}</a>
          } @else {
            {{ heading() }}
          }
        </h3>
        @if (instructions()) {
          <p class="keuzelijst__instructions">{{ instructions() }}</p>
        }
        <ng-content select="[choiceActions]" />
      </div>
    </li>
  `,
})
export class ChoiceLinkComponent {
  heading = input.required<string>();
  instructions = input('');
  /** Set for a plain routerLink navigation. */
  to = input('');
  /** Set when the choice navigates imperatively (e.g. resume with query params) — the
      row still renders as a clickable card, 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();
  }
}
