import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { PaginationComponent } from './pagination';

describe('PaginationComponent', () => {
  let fixture: ComponentFixture<PaginationComponent>;
  let component: PaginationComponent;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [PaginationComponent],
    }).compileComponents();

    fixture = TestBed.createComponent(PaginationComponent);
    component = fixture.componentInstance;
  });

  it('should render numbered pagination with active page', () => {
    component.variant = 'numbers';
    component.totalPages = 5;
    component.currentPage = 2;
    fixture.detectChanges();

    const buttons = fixture.debugElement.queryAll(By.css('.ccl-pagination__btn'));
    expect(buttons.length).toBe(7); // prev + 5 pages + next

    const activeBtn = buttons.find(btn =>
      btn.nativeElement.classList.contains('active')
    );
    expect(activeBtn?.nativeElement.textContent.trim()).toBe('2');
    expect(activeBtn?.nativeElement.getAttribute('aria-current')).toBe('page');
  });

  it('should disable previous button on first page', () => {
    component.variant = 'numbers';
    component.totalPages = 5;
    component.currentPage = 1;
    fixture.detectChanges();

    const prevBtn = fixture.debugElement.queryAll(By.css('.ccl-pagination__btn'))[0];
    expect(prevBtn.nativeElement.disabled).toBeTrue();
  });

  it('should emit onPageChange when next is clicked', () => {
    component.variant = 'numbers';
    component.totalPages = 5;
    component.currentPage = 2;
    spyOn(component.pageChange, 'emit');
    fixture.detectChanges();

    const nextBtn = fixture.debugElement.queryAll(By.css('.ccl-pagination__btn')).pop();
    nextBtn?.nativeElement.click();

    expect(component.pageChange.emit).toHaveBeenCalledWith(3);
  });

  it('should render "Load More" button in load-more variant', () => {
    component.variant = 'load-more';
    component.currentPage = 1;
    spyOn(component.pageChange, 'emit');
    fixture.detectChanges();

    const btn = fixture.debugElement.query(By.css('.ccl-pagination__btn'));
    expect(btn.nativeElement.textContent).toContain('Load More');

    btn.nativeElement.click();
    expect(component.pageChange.emit).toHaveBeenCalledWith(2);
  });

  it('should trigger loadMore on infinite scroll', () => {
    component.variant = 'infinite-scroll';
    component.currentPage = 1;
    spyOn(component, 'loadMore').and.callThrough();
    spyOn(component.pageChange, 'emit');
    fixture.detectChanges();

    // simulate bottom scroll
    spyOnProperty(document.body, 'offsetHeight').and.returnValue(1000);
    spyOnProperty(window, 'innerHeight').and.returnValue(800);
    spyOnProperty(window, 'scrollY').and.returnValue(250);

    window.dispatchEvent(new Event('scroll'));

    expect(component.loadMore).toHaveBeenCalled();
    expect(component.pageChange.emit).toHaveBeenCalledWith(2);
  });

  it('should clamp currentPage if greater than totalPages', () => {
    component.variant = 'numbers';
    component.totalPages = 3;
    component.currentPage = 10;
    fixture.detectChanges();

    expect(component.currentPage).toBe(3);
  });
});