import { Component, OnDestroy, OnInit, computed, input, signal } from '@angular/core';

// CIBG-GAP EXTENSION: Laadindicatie — no vendored loading-skeleton class exists
// (verified absent from huisstijl.min.css); hand-rolled shimmer, see cibg-gaps.mdx.
/** Atom: skeleton placeholder (grey shimmer). Delay-gated so it never flashes
    on fast responses. Render `count` lines shaped roughly like the content. */
@Component({
  selector: 'app-skeleton',
  styles: [
    `
      :host {
        display: block;
      }
      .sk {
        background: linear-gradient(
          90deg,
          var(--rhc-color-cool-grey-200) 25%,
          var(--rhc-color-cool-grey-100) 37%,
          var(--rhc-color-cool-grey-200) 63%
        );
        background-size: 400% 100%;
        animation: sh 1.4s ease infinite;
        border-radius: var(--rhc-border-radius-md);
        margin-block-end: var(--rhc-space-max-lg);
      }
      @keyframes sh {
        0% {
          background-position: 100% 0;
        }
        100% {
          background-position: 0 0;
        }
      }
    `,
  ],
  template: `
    @if (visible()) {
      @for (l of lines(); track $index) {
        <div class="sk" aria-hidden="true" [style.width]="width()" [style.height]="height()"></div>
      }
    }
  `,
})
export class SkeletonComponent implements OnInit, OnDestroy {
  width = input('100%');
  height = input('1rem');
  count = input(1);
  delay = input(150);
  protected visible = signal(false);
  protected lines = computed(() => Array(this.count()).fill(0));
  private timer?: ReturnType<typeof setTimeout>;

  ngOnInit() {
    this.timer = setTimeout(() => this.visible.set(true), this.delay());
  }
  ngOnDestroy() {
    clearTimeout(this.timer);
  }
}