import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect, vi } from 'vitest';
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
} from './pagination';
import React from 'react';

describe('Pagination', () => {
  it('renders correctly with multiple pages', () => {
    render(
      <Pagination>
        <PaginationContent>
          <PaginationItem>
            <PaginationPrevious href="#" />
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">1</PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#" isActive>
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationEllipsis />
          </PaginationItem>
          <PaginationItem>
            <PaginationNext href="#" />
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    );

    expect(screen.getByRole('navigation', { name: /pagination/i })).toBeInTheDocument();
    expect(screen.getByText('1')).toBeInTheDocument();
    expect(screen.getByText('2')).toBeInTheDocument();
    expect(screen.getByText('2')).toHaveAttribute('aria-current', 'page');
    expect(screen.getByText('More pages')).toBeInTheDocument(); // sr-only
  });

  it('has correct data-slot attributes', () => {
    const { container } = render(
      <Pagination>
        <PaginationContent>
          <PaginationItem>
            <PaginationLink href="#">1</PaginationLink>
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    );

    expect(container.querySelector('[data-slot="pagination"]')).toBeInTheDocument();
    expect(container.querySelector('[data-slot="pagination-content"]')).toBeInTheDocument();
    expect(container.querySelector('[data-slot="pagination-item"]')).toBeInTheDocument();
    expect(container.querySelector('[data-slot="pagination-link"]')).toBeInTheDocument();
  });

  it('marks the active page with aria-current and data-active, and leaves inactive pages unmarked', () => {
    render(
      <Pagination>
        <PaginationContent>
          <PaginationItem>
            <PaginationLink href="#">1</PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#" isActive>
              2
            </PaginationLink>
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    );

    const inactiveLink = screen.getByText('1');
    const activeLink = screen.getByText('2');

    expect(inactiveLink).not.toHaveAttribute('aria-current');
    expect(inactiveLink).not.toHaveAttribute('data-active');

    expect(activeLink).toHaveAttribute('aria-current', 'page');
    expect(activeLink).toHaveAttribute('data-active', 'true');
  });

  it('is keyboard-focusable and clickable, and calls the provided onClick handler', async () => {
    const user = userEvent.setup();
    const onClick = vi.fn();

    render(
      <Pagination>
        <PaginationContent>
          <PaginationItem>
            <PaginationLink href="#" onClick={onClick}>
              3
            </PaginationLink>
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    );

    const link = screen.getByText('3');

    await user.tab();
    expect(link).toHaveFocus();

    await user.click(link);
    expect(onClick).toHaveBeenCalledTimes(1);
  });

  it('removes disabled links from the tab order via tabIndex and aria-disabled', () => {
    render(
      <Pagination>
        <PaginationContent>
          <PaginationItem>
            <PaginationPrevious disabled />
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    );

    const link = screen.getByLabelText('Go to previous page');
    expect(link).toHaveAttribute('tabIndex', '-1');
    expect(link).toHaveAttribute('aria-disabled', 'true');
  });
});