import { render, screen } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { DataTable } from '../data-table';

interface TestData {
  id: number;
  name: string;
  email: string;
}

describe('DataTable', () => {
  const mockColumns = [
    {
      accessorKey: 'id',
      header: 'ID',
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      cell: ({ row }: any) => row.getValue('id'),
    },
    {
      accessorKey: 'name',
      header: 'Name',
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      cell: ({ row }: any) => row.getValue('name'),
    },
    {
      accessorKey: 'email',
      header: 'Email',
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      cell: ({ row }: any) => row.getValue('email'),
    },
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  ] as any;

  const mockData: TestData[] = [
    { id: 1, name: 'John Doe', email: 'john@example.com' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
    { id: 3, name: 'Bob Johnson', email: 'bob@example.com' },
  ];

  it('renders table with data', () => {
    render(<DataTable columns={mockColumns} data={mockData} />);

    // Check headers
    expect(screen.getByText('ID')).toBeInTheDocument();
    expect(screen.getByText('Name')).toBeInTheDocument();
    expect(screen.getByText('Email')).toBeInTheDocument();

    // Check data rows
    expect(screen.getByText('John Doe')).toBeInTheDocument();
    expect(screen.getByText('Jane Smith')).toBeInTheDocument();
    expect(screen.getByText('Bob Johnson')).toBeInTheDocument();
  });

  it('renders empty state when no data', () => {
    render(<DataTable columns={mockColumns} data={[]} />);

    expect(screen.getByText('Tidak ada data yang ditampilkan')).toBeInTheDocument();
  });

  it('shows data count footer when pagination is provided', () => {
    const mockPagination = {
      currentPage: 1,
      lastPage: 3,
      onNext: vi.fn(),
      onPrev: vi.fn(),
    };

    render(<DataTable columns={mockColumns} data={mockData} pagination={mockPagination} />);

    expect(screen.getByText('3 data ditampilkan')).toBeInTheDocument();
  });

  it('does not show footer when pagination is not provided', () => {
    render(<DataTable columns={mockColumns} data={mockData} />);

    expect(screen.queryByText('3 data ditampilkan')).not.toBeInTheDocument();
  });

  it('displays loading skeleton when isLoading is true', () => {
    const { container } = render(
      <DataTable columns={mockColumns} data={mockData} isLoading={true} />
    );

    // Check for skeleton elements (animate-pulse class)
    const skeletons = container.querySelectorAll('.animate-pulse');
    expect(skeletons.length).toBeGreaterThan(0);
  });

  it('does not display skeleton when isLoading is false', () => {
    const { container } = render(
      <DataTable columns={mockColumns} data={mockData} isLoading={false} />
    );

    // Should have table, not just skeletons
    const table = container.querySelector('table');
    expect(table).toBeInTheDocument();
  });
});