import React, { useState } from 'react';
import { render, screen, fireEvent } from '@testing-library/react';

jest.mock('lucide-react', () => ({
  Check: () => <span data-testid="icon-check" />,
  Minus: () => <span data-testid="icon-minus" />,
  ArrowDown: () => <span data-testid="icon-down" />,
  ArrowUp: () => <span data-testid="icon-up" />,
  ChevronsUpDown: () => <span data-testid="icon-sort" />,
  Inbox: () => <span data-testid="icon-inbox" />,
  ChevronLeft: () => <span data-testid="icon-left" />,
  ChevronRight: () => <span data-testid="icon-right" />,
  ChevronsLeft: () => <span data-testid="icon-first" />,
  ChevronsRight: () => <span data-testid="icon-last" />,
}));

import { DataTable } from '@/components/ds/DataTable';

const COLUMNS = [
  { key: 'id', header: 'ID' },
  { key: 'title', header: 'Title' },
];

const createMockRows = (count = 60) =>
  Array.from({ length: count }, (_, i) => ({
    id: `order-${i + 1}`,
    title: `Order #${i + 1}`,
  }));

function TestTableWrapper({
  rowCount = 60,
  pageSize = 25,
  selectAllPages = true,
  initialSelected = [],
}) {
  const [selectedIds, setSelectedIds] = useState(initialSelected);
  const rows = createMockRows(rowCount);

  return (
    <div>
      <div data-testid="selected-count">{selectedIds.length}</div>
      <DataTable
        columns={COLUMNS}
        rows={rows}
        getRowId={(row) => row.id}
        pageSize={pageSize}
        selectAllPages={selectAllPages}
        selectedIds={selectedIds}
        onSelectionChange={setSelectedIds}
      />
    </div>
  );
}

describe('DataTable selection across pagination', () => {
  it('should select ALL 60 rows across all pages when selectAllPages is true', () => {
    render(<TestTableWrapper rowCount={60} pageSize={25} selectAllPages={true} />);

    expect(screen.getByTestId('selected-count').textContent).toBe('0');

    // Header checkbox for select all
    const selectAllCheckbox = screen.getByRole('checkbox', { name: /select all rows/i });
    expect(selectAllCheckbox).not.toBeChecked();

    // Click select all
    fireEvent.click(selectAllCheckbox);

    // All 60 rows should now be selected
    expect(screen.getByTestId('selected-count').textContent).toBe('60');
    expect(selectAllCheckbox).toBeChecked();

    // Click again to unselect all
    fireEvent.click(selectAllCheckbox);
    expect(screen.getByTestId('selected-count').textContent).toBe('0');
    expect(selectAllCheckbox).not.toBeChecked();
  });

  it('should select ONLY current page (25 rows) when selectAllPages is false', () => {
    render(<TestTableWrapper rowCount={60} pageSize={25} selectAllPages={false} />);

    expect(screen.getByTestId('selected-count').textContent).toBe('0');

    const selectAllCheckbox = screen.getByRole('checkbox', { name: /select all rows on this page/i });
    fireEvent.click(selectAllCheckbox);

    // Only the 25 rows on page 1 should be selected
    expect(screen.getByTestId('selected-count').textContent).toBe('25');
  });

  it('should reflect indeterminate state when some rows are selected', () => {
    render(
      <TestTableWrapper
        rowCount={60}
        pageSize={25}
        selectAllPages={true}
        initialSelected={['order-1', 'order-2', 'order-3']}
      />
    );

    expect(screen.getByTestId('selected-count').textContent).toBe('3');
    const selectAllCheckbox = screen.getByRole('checkbox', { name: /select all rows/i });

    expect(selectAllCheckbox.getAttribute('data-state') === 'indeterminate' || selectAllCheckbox.indeterminate).toBeTruthy();
  });

  it('should toggle individual row selection without affecting other pages', () => {
    render(<TestTableWrapper rowCount={60} pageSize={25} selectAllPages={true} />);

    const rowCheckboxes = screen.getAllByRole('checkbox');
    // First checkbox is header, second is row 1
    const firstRowCheckbox = rowCheckboxes[1];

    fireEvent.click(firstRowCheckbox);
    expect(screen.getByTestId('selected-count').textContent).toBe('1');

    fireEvent.click(firstRowCheckbox);
    expect(screen.getByTestId('selected-count').textContent).toBe('0');
  });
});