import { render, screen, fireEvent } from '@testing-library/react';
import { Pagination as PaginationComponent } from '../../../../src/components/stats/Pagination';

describe('Pagination', () => {
  const onPageChange = vi.fn();

  it('returns null when totalPages <= 1', () => {
    const { container } = render(
      <PaginationComponent currentPage={1} totalPages={1} onPageChange={onPageChange} />
    );
    expect(container.firstChild).toBeNull();
  });

  it('renders all page numbers when totalPages <= 5', () => {
    render(<PaginationComponent currentPage={2} totalPages={5} onPageChange={onPageChange} />);
    
    expect(screen.getByText('1')).toBeInTheDocument();
    expect(screen.getByText('2')).toBeInTheDocument();
    expect(screen.getByText('3')).toBeInTheDocument();
    expect(screen.getByText('4')).toBeInTheDocument();
    expect(screen.getByText('5')).toBeInTheDocument();
    expect(screen.getByText('2')).toHaveClass('bg-blue-600');
  });

  it('handles ellipsis correctly when currentPage is in the middle of a large set', () => {
    // totalPages = 10, currentPage = 5
    // Expected: [1, '...', 4, 5, 6, '...', 10]
    render(<PaginationComponent currentPage={5} totalPages={10} onPageChange={onPageChange} />);

    expect(screen.getByText('1')).toBeInTheDocument();
    expect(screen.getByText('4')).toBeInTheDocument();
    expect(screen.getByText('5')).toBeInTheDocument();
    expect(screen.getByText('6')).toBeInTheDocument();
    expect(screen.getByText('10')).toBeInTheDocument();

    const allButtons = screen.getAllByRole('button');
    const pageButtons = allButtons.filter(btn => !['Previous page', 'Next page'].includes(btn.getAttribute('aria-label') || ''));
    expect(pageButtons).toHaveLength(5); // 1, 4, 5, 6, 10
  });

  it('handles large page set with ellipsis at start and end correctly', () => {
    // totalPages = 10, currentPage = 2
    // Expected: [1, 2, 3, '...', 10]
    render(<PaginationComponent currentPage={2} totalPages={10} onPageChange={onPageChange} />);

    expect(screen.getByText('1')).toBeInTheDocument();
    expect(screen.getByText('2')).toBeInTheDocument();
    expect(screen.getByText('3')).toBeInTheDocument();
    expect(screen.getByText('10')).toBeInTheDocument();

    const allButtons = screen.getAllByRole('button');
    const pageButtons = allButtons.filter(btn => !['Previous page', 'Next page'].includes(btn.getAttribute('aria-label') || ''));
    expect(pageButtons).toHaveLength(4); // 1, 2, 3, 10
  });

  it('handles large page set where current page is near the end', () => {
    // totalPages = 10, currentPage = 9
    // Expected: [1, '...', 8, 9, 10]
    render(<PaginationComponent currentPage={9} totalPages={10} onPageChange={onPageChange} />);

    expect(screen.getByText('1')).toBeInTheDocument();
    expect(screen.getByText('8')).toBeInTheDocument();
    expect(screen.getByText('9')).toBeInTheDocument();
    expect(screen.getByText('10')).toBeInTheDocument();

    const allButtons = screen.getAllByRole('button');
    const pageButtons = allButtons.filter(btn => !['Previous page', 'Next page'].includes(btn.getAttribute('aria-label') || ''));
    expect(pageButtons).toHaveLength(4); // 1, 8, 9, 10
  });

  it('calls onPageChange with correct page when a page number is clicked', () => {
    render(<PaginationComponent currentPage={2} totalPages={5} onPageChange={onPageChange} />);
    fireEvent.click(screen.getByText('4'));
    expect(onPageChange).toHaveBeenCalledWith(4);
  });

  it('calls onPageChange with correct page when "Previous" is clicked', () => {
    render(<PaginationComponent currentPage={2} totalPages={5} onPageChange={onPageChange} />);
    fireEvent.click(screen.getByRole('button', { name: /previous/i }));
    expect(onPageChange).toHaveBeenCalledWith(1);
  });

  it('calls onPageChange with correct page when "Next" is clicked', () => {
    render(<PaginationComponent currentPage={4} totalPages={5} onPageChange={onPageChange} />);
    fireEvent.click(screen.getByRole('button', { name: /next/i }));
    expect(onPageChange).toHaveBeenCalledWith(5);
  });

  it('disables "Previous" button on first page', () => {
    render(<PaginationComponent currentPage={1} totalPages={5} onPageChange={onPageChange} />);
    expect(screen.getByRole('button', { name: /previous/i })).toBeDisabled();
  });

  it('disables "Next" button on last page', () => {
    render(<PaginationComponent currentPage={5} totalPages={5} onPageChange={onPageChange} />);
    expect(screen.getByRole('button', { name: /next/i })).toBeDisabled();
  });
});