import { Component, computed, signal } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { <%= classify(name) %>, <%= classify(name) %>Item } from './<%= dasherize(name) %>';

@Component({
  imports: [<%= classify(name) %>, <%= classify(name) %>Item],
  template: `
    <nav <%= camelize(name) %>>
      <ul>
        <li>
          <button type="button" [disabled]="!hasPrevious()" (click)="goToPrevious()">Previous</button>
        </li>
        @for (page of pages; track page) {
          <li>
            <a <%= camelize(name) %>Item [href]="'?page=' + page" [current]="page === currentPage()" (click)="goToPage(page)">
              {{ page }}
            </a>
          </li>
        }
        <li>
          <button type="button" [disabled]="!hasNext()" (click)="goToNext()">Next</button>
        </li>
      </ul>
    </nav>
  `,
})
class HostComponent {
  readonly pages = [1, 2, 3, 4, 5];
  readonly currentPage = signal(1);

  readonly hasPrevious = computed(() => this.currentPage() > 1);
  readonly hasNext = computed(() => this.currentPage() < this.pages.length);

  goToPage(page: number): void {
    this.currentPage.set(page);
  }

  goToPrevious(): void {
    if (this.hasPrevious()) {
      this.currentPage.update((page) => page - 1);
    }
  }

  goToNext(): void {
    if (this.hasNext()) {
      this.currentPage.update((page) => page + 1);
    }
  }
}

describe('<%= classify(name) %>', () => {
  let fixture: ComponentFixture<HostComponent>;
  let host: HTMLElement;

  beforeEach(async () => {
    await TestBed.configureTestingModule({ imports: [HostComponent] }).compileComponents();
    fixture = TestBed.createComponent(HostComponent);
    fixture.detectChanges();
    host = fixture.nativeElement as HTMLElement;
  });

  function buttons(): HTMLButtonElement[] {
    return Array.from(host.querySelectorAll('button'));
  }

  function links(): HTMLAnchorElement[] {
    return Array.from(host.querySelectorAll('a'));
  }

  it('decorates consumer-owned markup with navigation and current-page state', () => {
    expect(host.querySelector('nav')?.getAttribute('aria-label')).toBe('Pagination');
    expect(buttons()[0].disabled).toBe(true);
    expect(links()[0].getAttribute('aria-current')).toBe('page');
    expect(buttons()[1].disabled).toBe(false);
  });

  it('changes current page from page links and next/previous buttons', () => {
    links()[2].click();
    fixture.detectChanges();
    expect(links()[2].getAttribute('aria-current')).toBe('page');

    buttons()[0].click();
    fixture.detectChanges();
    expect(links()[1].getAttribute('aria-current')).toBe('page');

    buttons()[1].click();
    fixture.detectChanges();
    expect(links()[2].getAttribute('aria-current')).toBe('page');
  });
});