import { render, screen, fireEvent } from '@testing-library/react';
import { ThemeProvider } from '../../theme';
import AdminDataTable, { type AdminTableColumn } from './AdminDataTable';

interface Row {
  id: number;
  name: string;
}

const ROWS: Row[] = [
  { id: 1, name: 'Alpha' },
  { id: 2, name: 'Beta' },
];
const COLUMNS: AdminTableColumn<Row>[] = [
  { key: 'id', header: 'ID', render: (r) => r.id },
  { key: 'name', header: 'Name', render: (r) => r.name },
];

describe('<AdminDataTable/>', () => {
  const wrap = (ui: React.ReactNode) => render(<ThemeProvider>{ui}</ThemeProvider>);

  it('renders headers and every row cell', () => {
    wrap(<AdminDataTable columns={COLUMNS} rows={ROWS} getRowKey={(r) => r.id} />);
    expect(screen.getByText('ID')).toBeInTheDocument();
    expect(screen.getByText('Name')).toBeInTheDocument();
    expect(screen.getByText('Alpha')).toBeInTheDocument();
    expect(screen.getByText('Beta')).toBeInTheDocument();
  });

  it('exposes a data-col attribute per column', () => {
    const { container } = wrap(<AdminDataTable columns={COLUMNS} rows={ROWS} getRowKey={(r) => r.id} />);
    expect(container.querySelectorAll('[data-col="name"]').length).toBe(2);
  });

  it('calls onRowClick with the clicked row', () => {
    const onRowClick = jest.fn();
    wrap(<AdminDataTable columns={COLUMNS} rows={ROWS} getRowKey={(r) => r.id} onRowClick={onRowClick} />);
    fireEvent.click(screen.getByText('Beta'));
    expect(onRowClick).toHaveBeenCalledWith(ROWS[1]);
  });

  it('renders the footer line only when passed', () => {
    const { rerender, container } = wrap(<AdminDataTable columns={COLUMNS} rows={ROWS} getRowKey={(r) => r.id} />);
    expect(container.querySelector('p')).not.toBeInTheDocument();
    rerender(
      <ThemeProvider>
        <AdminDataTable columns={COLUMNS} rows={ROWS} getRowKey={(r) => r.id} footer="Showing 1–2 of 2" />
      </ThemeProvider>,
    );
    expect(screen.getByText('Showing 1–2 of 2')).toBeInTheDocument();
  });

  it('fires onSortChange with the column key when a sortable header is clicked', () => {
    const onSortChange = jest.fn();
    const sortableColumns: AdminTableColumn<Row>[] = [
      { key: 'id', header: 'ID', render: (r) => r.id, sortable: true },
      { key: 'name', header: 'Name', render: (r) => r.name },
    ];
    wrap(
      <AdminDataTable
        columns={sortableColumns}
        rows={ROWS}
        getRowKey={(r) => r.id}
        sort={{ key: 'id', direction: 'asc' }}
        onSortChange={onSortChange}
      />,
    );
    fireEvent.click(screen.getByRole('button', { name: /ID/ }));
    expect(onSortChange).toHaveBeenCalledWith('id');
  });
});